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.

1. DESIGNING
WEBSITES for
HUMAN BEINGS
with Morten Rand-Hendriksen
!@MOR10

2. https://goo.gl/fCSJRw

3. http://goo.gl/uTM5m7

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.

6. http://goo.gl/uTM5m7
# $

7. Web design has long been treated
as a form of art.

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.

9. Good design improves
communication.
Great design improves
understanding.

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.”

12. People are complicated.

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

21. ASSUMPTION:
Carousels and
content sliders are a
great way to present
the visitor with lots
of content in a small
space.

22. ASSUMPTION:
Interactive elements
like navigation
buttons should go at
the top of the screen,
even on mobile
devices.
http://goo.gl/Ih5Prn

24. ASSUMPTION:
Interactive elements
like navigation
buttons should go at
the top of the screen,
even on mobile
devices.
http://mor10.com/web-design-for-thumbs/

27. ASSUMPTION:
Visitors don’t mind
being exposed to
advertising to get
access to content for
free.
http://goo.gl/8KqNAO

28. The web has become
anti-user.

29. NOPE
NOPE
NOPE
NOPE
MAYBE
YES

30. MAYBE
YES
NOPE
NOPE

31. NOPE
NOPE
MAYBE
MAYBE
NOPE

32. NOPE NOPE
NOPE
NOPE
NOPE
NOPE
PROBABLY

34. This is our opportunity

35. The “user” is a lie

36. The User
Mythical perfect
human being with
ample time and patience
plus a comprehensive
understanding of the web.

37. There are no users.
There are only people.

38. The design process
starts and ends
with people.

39. Good design improves
communication.
Great design improves
understanding.

40. To design great user experiences
we first have to understand
the people who use them.

41. The only thing we know
is that the people
who use our creations
are not us.

42. Data will save us all

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?

50. Personas

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.

54. Empathy Maps

55. Think + Feel
Hear See
Say + Do
Pains Gains
%

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?

59. Empathy is not a silver bullet

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

63. http://goo.gl/hXa32C

64. Initial user interviews
Personas + Empathy Maps
Wireframes
Card sorting
Post-launch testing
Iteration
Prototype testing
Live beta testing
%

65. User research can
uncover unknown potential,
reveal new opportunities,
and prevent disasters.

66. User research ensures
your designs are made
for human beings.

67. People are complicated.
That’s what makes them awesome.

68. !
@MOR10