Transcript PBA Front-End

PBA Front-End
Week 1
Communication
Why do we communicate…?
Communication
•
•
•
•
Pass information
Persuation
Coordination
…?
Communication
Communication
Why do we make websites…?
Communication
• The purpose of a website is to communicate!
• The purpose of a website is (usually) not to
demonstrate technical brilliance 
• What can we do with this wonderful web
programming technology…?
• How can we implement this wonderful web
design…?
Communication
• Specific purposes of communication can be as
diverse for websites as for real life:
– Pass information [READ THIS!]
– Persuation [BUY THIS!]
– Coordination [DO THIS!]
• There are obvious overlaps…
Communication
• What is the specific purpose (with regards to
communication) for a website for:
– A political party (UK Labor Party)
– An online bookstore (Amazon)
– A web design tutorial (WebStyleGuide)
– An aid organisation (Red Cross)
– An online universe for kids (Club Penguin)
– A social media (Facebook)
Communication
• How does communication work…?
Communication
• Computers are lucky!
Communication
• In the ideal world
– The sender has a certain ”mental state” about
some information
– The sender communicates something about this
information to the receiver
– The receiver is now in the same ”mental state”
about this information
Communication
• Humans don’t work like that…
Oh John,
listen, I’ve
decided to
come out of
the closet!
What were
you doing
inside a
closet…?
Communication
• What hinders ”perfect communication”?
– Language (verbal and non-verbal)
– Noise (actual and ”semantic”)
– Context (culture, background, assumptions,…)
Communication
• Many theories and frameworks for
analysis of communication
• One prominent theory/model:
Social Constructionism
• The Constructionist View: ”How
you say something determines
what the message is”
• Cannot separate form and content
Communication
Wassup, d4wgg..?
Communication
How are you today,
my dear friend of
African-American
ethniticity…?
Communication
• If we accept the Constructionist View, what
are the consequences?
– No absolute truths
– No absolute messages
– People – and groups of people – construct their
own reality (consensus reality), so…
– Always consider the point-of-view of the receiver
of any information
Communication
• Consensus reality
– Is Nike the best brand of sports shoes…or have
enough people agreed that it is so?
– Is Global Warming a scientific fact…or have
enough people agreed that it is so?
– Is Facebook the best website for social interaction…or have enough people agreed that it is
so?
Communication
• Cognitive bias
– The tendency for people to make ”poor”
decisions, based on a particular situation
– Is this relevant when designing websites…?
– Depending on your purpose – cognitive bias can
be ”exploited”
– Example: Red Cross (I would rather help ”this one
child”, than all these anonymous thousands…)
Communication
Web Development Process
Where do websites come from…?
Web Development Process
• All websites start with an idea!
• Wouldn’t it be great if people could find
information about my company online…?
• Wouldn’t it be great if people could buy our
products online…?
• Wouldn’t it be great to make a site so interesting that millions would visit it each day, and
then earn millions on ads…?
Web Development Process
• Wouldn’t it be great if people could buy our
products online…?
Now you know enough,
start working!!
…and the deadline is in
three weeks, btw!
Web Development Process
• Clearly, the idea itself is not enough
• From idea follows purpose (mission)
• Often close to the idea, but somewhat more
specific
• The website should enable people to buy a
broad selection of our products online, at the
same prices as in our physical stores
Web Development Process
Sales
Communication
Presentation
Information
Web Development Process
• Information:
– ”Hello, world”
– Basic information about company/organisation
– Contact information
– One-way communication
– Very static, rarely updated
– http://www.jens-m-jensen.dk
Web Development Process
• Presentation
– Information, plus:
– Presentation of products/services
– Search function
– Still one-way communication
– Needs more frequent updates (Changes in prices,
new products, …)
– How are updates handled (CMS, Service,…)?
Web Development Process
• Communication
– Presentation, plus
– Possible to ask questions (and get answers)
– FAQ, guides,…
– Chat, e-mail, Twitter,…
– Two-way communication
– Users expectations rise (fast response to
questions, etc.)
Web Development Process
• Sales (web-shop)
– Communication, plus
– Online sales of products and services
– Standard solutions exist (Templates, CMS)
– Numerous examples
Web Development Process
Some websites will not fit
this model!
Sales
Communication
Presentation
Information
Useful model for initial work
on establishing purpose
Web Development Process
• Purpose established!
• The website should make it easy for our
customers to buy a broad selection of our
products online, while having a positive user
experience
• Can be start designing now…?
Web Development Process
• The website should make it
easy for our customers to buy
a broad selection of our
products online, while having
a positive user experience
• …and one year later, how will
you know if the website was
a success…?
Web Development Process
• The website should make it easy for our
customers to buy a broad selection of our
products online, while having a positive user
experience
• Subjective!!!
Web Development Process
• The website should make it easy for our
customers to buy a broad selection of our
products online, while having a positive user
experience
• Try to define objective goals instead!
Web Development Process
• ”Easy”
• It must be possible for 80 % of the users to
complete an online purchase within 90
seconds, when starting from the landing page
of our website
Web Development Process
• ”Broad selection”
• At least 90 % of all the items in the company
product catalog must be available for
purchase online
Web Development Process
• ”Positive user experience”
• At least 80 % of the users participating in a
user survey must give the item ”overall user
experience” a rating of 7 or more on a scale
from 0 to 10. At most 5 % must give the item a
rating of 3 or less.
Web Development Process
• Goals established, can we start working now?
• Remember Social Constructionism
• The Constructionist View: ”How you say
something determines what the message is”
• Who are we talking to…?
Web Development Process
Defining a Target Audience
Web Development Process
• Purpose and target audience will often – but
not always – be rather closely related
• Ideally, everybody should like our website!
• In practice, only certain specific groups will be
appealed to by our product, message, form of
expression, etc.
• Who are they…?
Web Development Process
• How can you characterise
a certain Target Audience?
– Geography
– Demography
– Psychography
– Level of competence
Web Development Process
• Geography
– Local/regional/national/
international
– Urban/suburban/rural
– Climate
– Workplace/home
Web Development Process
• Demography
– Age
– Gender
– Civil status (single, married,…)
– Occupation
– Education
– Income level
– Ethniticity
–…
Web Development Process
• Psychography
– Interests
– Behaviour
– Beliefs
– Values
– Culture/Subculture
Web Development Process
• Level of competence (with
regards to Web usage)
– Novice
– Casual
– Intermediate
– Expert
Web Development Process
• Why is this relevant – what can the practical
consequences be?
• Imagine these target audiences:
– Children age 5-8
– Senior citizens, age 60+
– Adults (age 18-60), elementary education
• What is the influence on our design decisions?
Web Development Process