Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

31,104 views

Published on

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.

Published in: Design, Technology, Education
  • Download The Complete Lean Belly Breakthrough Program with Special Discount. ●●● https://tinyurl.com/bkfitness4u
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Profollica�'s all-natural formula helped 90% of men reduce hair loss in a clinical trial. ★★★ https://tinyurl.com/y49r9d8j
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Is it possible to improve your memory? How can I improve my memory recall? more info... ➤➤ https://bit.ly/2GEWG9T
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×