Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
DESIGNING
WEBSITES for
HUMAN BEINGS
with Morten Rand-Hendriksen
!@MOR10
https://goo.gl/fCSJRw
http://goo.gl/uTM5m7
"In almost every case, (…) respondents who saw
“Bicycle May Use Full Lane” signage were
significantly more likely (p<0.1) t...
"There was no statistically significant difference in
responses between those who saw “Share the Road”
signage and those wh...
http://goo.gl/uTM5m7
# $
Web design has long been treated
as a form of art.
The purpose of web publishing is to
communicate ideas and concepts
between people.
The purpose of web design is to facilit...
Good design improves
communication.
Great design improves
understanding.
CONVENTIONS
“This is how we have always done it. Everyone does it this way.”
ÆSTHETICS
“This looks great. It makes me feel...
CONVENTIONS
“This is how we have always done it. Everyone does it this way.”
ÆSTHETICS
“This looks great. It makes me feel...
People are complicated.
ASSUMPTION:
We should place as
much of our
important content
as possible 

above the fold
for immediate
access.
http://goo...
ASSUMPTION:
We should place as
much of our
important content
as possible 

above the fold
for immediate
access.
http://goo...
ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
...
ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
...
ASSUMPTION:
The Hamburger is a
great way of saving
space while
providing clearly
visible navigation.
http://goo.gl/z3N19t
...
ASSUMPTION:
We can use sidebars
to place more
content within view
of the visitor.
http://goo.gl/TZ09Tf
“As an adaptation t...
ASSUMPTION:
Carousels and
content sliders are a
great way to present
the visitor with lots
of content in a small
space.
“1...
ASSUMPTION:
Carousels and
content sliders are a
great way to present
the visitor with lots
of content in a small
space.
ASSUMPTION:
Interactive elements
like navigation
buttons should go at
the top of the screen,
even on mobile
devices.
http:...
ASSUMPTION:
Interactive elements
like navigation
buttons should go at
the top of the screen,
even on mobile
devices.
http:...
ASSUMPTION:
Visitors don’t mind
being exposed to
advertising to get
access to content for
free.
http://goo.gl/8KqNAO
The web has become
anti-user.
NOPE
NOPE
NOPE
NOPE
MAYBE
YES
MAYBE
YES
NOPE
NOPE
NOPE
NOPE
MAYBE
MAYBE
NOPE
NOPE NOPE
NOPE
NOPE
NOPE
NOPE
PROBABLY
This is our opportunity
The “user” is a lie
The User
Mythical perfect
human being with
ample time and patience
plus a comprehensive
understanding of the web.
There are no users.
There are only people.
The design process
starts and ends
with people.
Good design improves
communication.
Great design improves
understanding.
To design great user experiences
we first have to understand
the people who use them.
The only thing we know
is that the people
who use our creations
are not us.
Data will save us all
The 4-Step Solution to the
Malaise of Web Design
• Collect real data
• Avoid theory dependence
• Be aware of your selectio...
Web Design with
Humans in Mind:
• Identify the target audience
• Get to know the people
• Understand their motivations
• C...
Who are they?
• Identify existing visitors, if any
• Describe ideal target audience
• Consider secondary audience
• Gather...
Get to know the people
• Conduct staff interviews
• Conduct audience interviews
• Issue questionnaires
• Create fact-based...
Understand their motivations
• What are they here for?
• What are their goals?
• What inspires them to visit?
• What deter...
Consider Context
• Where are they when they visit?
• What device(s) are they using?
• What are their distractions / obstac...
Personas
Anny
Age: 30
Home: Brooklyn, NY
Currently: Brooklyn, NY
Job: Data Analyst
Why are you here?
To find information on pricing,...
Angela
Age: 37
Home: Vancouver, BC
Currently: Vancouver
Job: Producer
Why are you here?
To find information on menu,
reserv...
Angela
Age: 37
Home: Vancouver, BC
Currently: Brooklyn, NY
Job: Producer
Why are you here?
Confirm information on menu,
res...
Empathy Maps
Think + Feel
Hear See
Say + Do
Pains Gains
%
Empathy Maps
Think + Feel:

What is important to the person? What are their hopes,
dreams, fears?
Say + Do:

What does the...
Empathy Maps
See:

Where is the person, and what is in front of them? Who
are they with? What distractions or alternatives...
Empathy Maps
Pains:

What are the fears, frustrations, and obstacles for the
person? What worries and deters them?
Gains:
...
Empathy is not a silver bullet
The 4-Step Solution to the
Malaise of Web Design
• Collect real data
• Avoid theory dependence
• Be aware of your selectio...
You are not the target audience.
Neither is your client.
The 4-Step Solution to the
Malaise of Web Design
• Collect real data
• Avoid theory dependence
• Be aware of your selectio...
http://goo.gl/hXa32C
Initial user interviews
Personas + Empathy Maps
Wireframes
Card sorting
Post-launch testing
Iteration
Prototype testing
Li...
User research can
uncover unknown potential,
reveal new opportunities,
and prevent disasters.
User research ensures
your designs are made
for human beings.
People are complicated.
That’s what makes them awesome.
!
@MOR10
Designing Websites for Human Beings - Embracing the Importance of User Testing
Designing Websites for Human Beings - Embracing the Importance of User Testing
Designing Websites for Human Beings - Embracing the Importance of User Testing
Designing Websites for Human Beings - Embracing the Importance of User Testing
Designing Websites for Human Beings - Embracing the Importance of User Testing
Designing Websites for Human Beings - Embracing the Importance of User Testing
Prochain SlideShare
Chargement dans…5
×

Designing Websites for Human Beings - Embracing the Importance of User Testing

36 678 vues

Publié le

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.

Publié dans : Design, Technologie, Formation
  • Identifiez-vous pour voir les commentaires

Designing Websites for Human Beings - Embracing the Importance of User Testing

  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
  23. 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/
  24. ASSUMPTION: Visitors don’t mind being exposed to advertising to get access to content for free. http://goo.gl/8KqNAO
  25. The web has become anti-user.
  26. NOPE NOPE NOPE NOPE MAYBE YES
  27. MAYBE YES NOPE NOPE
  28. NOPE NOPE MAYBE MAYBE NOPE
  29. NOPE NOPE NOPE NOPE NOPE NOPE PROBABLY
  30. This is our opportunity
  31. The “user” is a lie
  32. The User Mythical perfect human being with ample time and patience plus a comprehensive understanding of the web.
  33. There are no users. There are only people.
  34. The design process starts and ends with people.
  35. Good design improves communication. Great design improves understanding.
  36. To design great user experiences we first have to understand the people who use them.
  37. The only thing we know is that the people who use our creations are not us.
  38. Data will save us all
  39. 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
  40. Web Design with Humans in Mind: • Identify the target audience • Get to know the people • Understand their motivations • Consider context
  41. Who are they? • Identify existing visitors, if any • Describe ideal target audience • Consider secondary audience • Gather demographic information
  42. Get to know the people • Conduct staff interviews • Conduct audience interviews • Issue questionnaires • Create fact-based personas
  43. 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?
  44. Consider Context • Where are they when they visit? • What device(s) are they using? • What are their distractions / obstacles? • What is their emotional state?
  45. Personas
  46. 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.
  47. 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.
  48. 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.
  49. Empathy Maps
  50. Think + Feel Hear See Say + Do Pains Gains %
  51. 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?
  52. 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?
  53. 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?
  54. Empathy is not a silver bullet
  55. 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
  56. You are not the target audience. Neither is your client.
  57. 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
  58. http://goo.gl/hXa32C
  59. Initial user interviews Personas + Empathy Maps Wireframes Card sorting Post-launch testing Iteration Prototype testing Live beta testing %
  60. User research can uncover unknown potential, reveal new opportunities, and prevent disasters.
  61. User research ensures your designs are made for human beings.
  62. People are complicated. That’s what makes them awesome.
  63. ! @MOR10

×