Slides from Morten Rand-Hendriksen's WordCamp New York City 2015 presentation.
Web design is about communicating with people through the web, but when we design and build websites, it’s easy to get caught up in the technical minutia: What hamburger icon should I use? Where does the sidebar go? How do I allow more space for ads? It is time we start thinking about the people who visit our sites. What devices are they using, and how are they using them? What is their purpose for visiting, and what situation are they in when they do?
This talk brings the focus of web design back to its core subject: How to communicate with people. You’ll learn about user research, empathy in the design process, communication patterns, real-world testing, and designing from the content out. Web design is about empathy for the user, and the users who visit your site are people. This talk will teach you how to prepare, design, and build websites with user experiences that communicate clearly and make the people who visit the site the top priority.
4. "In almost every case, (…) respondents who saw
“Bicycle May Use Full Lane” signage were
significantly more likely (p<0.1) than those who saw
no signage to agree that bicyclists are permitted in
the center of the lane, do not have to move right to
allow motorists to pass within the same lane, that
motorists should wait for a break in traffic before
passing in the adjacent lane, and that bicyclists are
safe in the travel lane.
5. "There was no statistically significant difference in
responses between those who saw “Share the Road”
signage and those who saw no signage in any
scenario we tested.
8. The purpose of web publishing is to
communicate ideas and concepts
between people.
The purpose of web design is to facilitate
this communication by adding context
through style, emotion, and space.
10. CONVENTIONS
“This is how we have always done it. Everyone does it this way.”
ÆSTHETICS
“This looks great. It makes me feel something.”
11. CONVENTIONS
“This is how we have always done it. Everyone does it this way.”
ÆSTHETICS
“This looks great. It makes me feel something.”
ASSUMPTIONS
“People will understand this. It makes sense to me.”
13. ASSUMPTION:
We should place as
much of our
important content
as possible
above the fold
for immediate
access.
http://goo.gl/U88jgi
14. ASSUMPTION:
We should place as
much of our
important content
as possible
above the fold
for immediate
access.
http://goo.gl/LlXqVb
15. ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
16. ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
MENU
7.2% increase
17. ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
22.4% increase
18. ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
20% increase
MENU
19. ASSUMPTION:
We can use sidebars
to place more
content within view
of the visitor.
http://goo.gl/TZ09Tf
“As an adaptation to
information overload, web users
have trained themselves to
divert their attention away from
areas that seem unimportant or
look like advertising.”
20. ASSUMPTION:
Carousels and
content sliders are a
great way to present
the visitor with lots
of content in a small
space.
“1% clicked a feature. Of those,
89% were the first position.”
http://goo.gl/2ncWVo
43. The 4-Step Solution to the
Malaise of Web Design
• Collect real data
• Avoid theory dependence
• Be aware of your selection bias
• Act like a scientist
44. Web Design with
Humans in Mind:
• Identify the target audience
• Get to know the people
• Understand their motivations
• Consider context
45. Who are they?
• Identify existing visitors, if any
• Describe ideal target audience
• Consider secondary audience
• Gather demographic information
46. Get to know the people
• Conduct staff interviews
• Conduct audience interviews
• Issue questionnaires
• Create fact-based personas
47. Understand their motivations
• What are they here for?
• What are their goals?
• What inspires them to visit?
• What deters them from visiting?
• What are their expectations?
48. Consider Context
• Where are they when they visit?
• What device(s) are they using?
• What are their distractions / obstacles?
• What is their emotional state?
51. Anny
Age: 30
Home: Brooklyn, NY
Currently: Brooklyn, NY
Job: Data Analyst
Why are you here?
To find information on pricing,
hours, and take-out options.
What is your goal?
Get details without having to
contact staff directly.
What inspires you to visit?
Heard good things, saw a
review, close to my house.
What deters you?
Too much advertising and
heavy load time.
What is your expectation?
Info without the hard sell.
Where are you?
At work, at home, or on the
subway.
What device(s)?
iPhone 6s on a limited pay-
as-you-go data plan.
Distractions / obstacles?
Limited data plan, can only
do research in lunch break
and while in transit.
Emotional state?
Relaxed, hungry, eager to
make a decision.
52. Angela
Age: 37
Home: Vancouver, BC
Currently: Vancouver
Job: Producer
Why are you here?
To find information on menu,
reservations, and pricing.
What is your goal?
To find a hidden gem to take
my sister to dinner.
What inspires you to visit?
Yelp and Urban Spoon
recommendations.
What deters you?
Visuals that indicate dim
lighting and bar atmosphere.
What is your expectation?
Accurate info and images.
Where are you?
At home, hours before
leaving for New York.
What device(s)?
Desktop computer + Sony
Android phone.
Distractions / obstacles?
Tight time crunch, travel
preparation, multitasking.
Emotional state?
Stressed out, strong desire
to please, worry of
potential let-down.
53. Angela
Age: 37
Home: Vancouver, BC
Currently: Brooklyn, NY
Job: Producer
Why are you here?
Confirm information on menu,
reservations, and pricing.
What is your goal?
Book a reservation for later
tonight.
What inspires you to visit?
Bookmarked website while in
Vancouver.
What deters you?
Advertising of happy hour and
“hot dog chugging contest”.
What is your expectation?
Book reservation online or by
phone
Where are you?
At the hotel, moments
before heading out.
What device(s)?
Sony Android phone.
Distractions / obstacles?
Terrible hotel wi-fi +
expensive per-megabyte
roaming plan. Excitement
to see sister.
Emotional state?
Rushed, hungry, excited,
impatient.
56. Empathy Maps
Think + Feel:
What is important to the person? What are their hopes,
dreams, fears?
Say + Do:
What does the person say in public? How do they
appear? How do they behave toward others?
57. Empathy Maps
See:
Where is the person, and what is in front of them? Who
are they with? What distractions or alternatives are
available?
Hear:
Who influences the person? What do family, friends, co-
workers say? What do influencers say?
58. Empathy Maps
Pains:
What are the fears, frustrations, and obstacles for the
person? What worries and deters them?
Gains:
What does the person want and need? How do they
measure success? What obstacles are they aiming to
overcome?
60. The 4-Step Solution to the
Malaise of Web Design
• Collect real data
• Avoid theory dependence
• Be aware of your selection bias
• Act like a scientist
61. You are not the target audience.
Neither is your client.
62. The 4-Step Solution to the
Malaise of Web Design
• Collect real data
• Avoid theory dependence
• Be aware of your selection bias
• Act like a scientist