Designing for Users: How to Create a Better User Experience

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=47 Clarissa Peterson
September 25, 2017

Designing for Users: How to Create a Better User Experience

You can launch the best-looking website ever, but if it’s not easy to use, it’s not going to be successful. Learn to think like a user and uncover usability problems that might not be apparent at first glance. Find out some basic improvements you can implement to make your site more usable and accessible. User experience isn’t just for designers to think about: everyone who works on a website has the opportunity to make the user experience better. Even little changes can make a big difference.

Presented at WordCamp Calgary, OpenWest, Web Unleashed, ThunderPlains, and ConFoo Vancouver in 2017. Presented at ConFoo Montreal in 2018.

Aca8eb0a7adcd5bb914b01fc2f3c713d?s=128

Clarissa Peterson

September 25, 2017
Tweet

Transcript

  1. Image © Crowhouse @clarissa Designing for Users: How to Create

    a Better User Experience
  2. Credit: WOCinTech Chat / BY Understand your users aren't you

  3. Credit: Javier Bouzas / CC BY NC ND Find out

    who your users are
  4. Explain what the site is for

  5. Credit: Rosenfeld Media / CC BY Define the user flow

  6. Define the user flow

  7. Define the user flow

  8. Define the user flow

  9. Define the user flow

  10. Make processes simpler

  11. None
  12. Make processes simpler

  13. Credit: Trickyboy / CC BY SA Don't ignore conventions

  14. Don't ignore conventions

  15. Avoid overlays No

  16. Avoid overlays More No

  17. Credit: Sarah Horrigan / CC BY NC Have a content

    strategy
  18. Credit: Jason Powers / CC BY ND Use plain language

  19. Split up long paragraphs No

  20. Credit: Kimberly B. / CC BY ND Increase font size

  21. Allow adequate line height

  22. Allow adequate line height No

  23. Have enough white space

  24. Have enough white space

  25. Make pages easy to scan

  26. None
  27. Make pages easy to scan

  28. Use lists whenever possible Nope

  29. Use lists whenever possible

  30. Use lists whenever possible

  31. Use lists whenever possible

  32. Use lists whenever possible No

  33. Use lists whenever possible

  34. Don't forget microcontent

  35. Have a helpful 404 error page No

  36. Have a helpful 404 error page

  37. Credit: Anna Debenham / CC BY NC Think about devices

  38. Credit: WOCinTech Chat / CC BY Think about devices

  39. Make your site responsive

  40. Make your site responsive

  41. Make your site responsive

  42. Make your site responsive

  43. Make your site responsive

  44. Make your site responsive

  45. Credit: Kārlis Dambrāns / CC BY Make your site responsive

  46. Make touch targets large enough

  47. Credit: Yahoo! Accessibility Lab / CC BY SA Know users

    have different abilities
  48. Learn how a screen reader works

  49. Include alt text

  50. Include alt text

  51. Include alt text

  52. Ensure link text is descriptive No No No

  53. Don't rely on color Normal Deuteranope Protanope Tritanope

  54. Credit: Christopher Fynn / CC BY

  55. Credit: Christopher Fynn / CC BY

  56. Credit: Christopher Fynn / CC BY

  57. Credit: Ruhrfisch / CC BY SA Don't rely on color

  58. Credit: Ruhrfisch / CC BY SA Don't rely on color

    =
  59. Credit: Rosenfeld Media / CC BY Don't rely on color

  60. Don't rely on color

  61. Make sure there's enough contrast Can you see it?

  62. Make sure there's enough contrast

  63. Credit: Accessibility and Usability at Penn State Make sure there's

    enough contrast
  64. WebAIM Color Contrast Checker Make sure there's enough contrast

  65. Credit: ClearFrost / CC BY SA Make sure there's enough

    contrast
  66. Make sure there's enough contrast No

  67. Add captions to videos

  68. Accessibility Guidelines (Vox Media) Use an accessibility checklist

  69. Don't include unnecessary fields

  70. Don't include unnecessary fields Too much

  71. Use appropriate input types <input'type="email">

  72. Include instructions when needed

  73. Include instructions when needed Tell me the rules first

  74. Show which fields are required

  75. Show which fields are required

  76. Show which fields are required

  77. Provide helpful error messages

  78. Credit: Nuno Sousa / CC BY NC ND Think about

    speed
  79. Credit: Chris JL / CC BY NC ND Think about

    speed
  80. Credit: Wendi Dunlap / CC BY NC SA Think about

    speed
  81. Credit: Bortzmeyer / CC BY SA Think about speed

  82. Source: CNN Think about speed

  83. Use responsive images

  84. PageSpeed Insights (Google Developers) Test your site's performance

  85. Test your site's performance

  86. Credit: WOCinTech Chat / CC BY Make sure nothing is

    broken
  87. Credit: Jeremy Keith / CC BY Test on different devices

    & browsers
  88. Mobile Emulators & Simulators: The Ultimate Guide (Breaking the Mobile

    Web) Test on different devices & browsers
  89. Test on different devices & browsers

  90. Fangs Screen Reader Emulator (Firefox Add-On) Test on screen readers

  91. Test on screen readers

  92. Image © Crowhouse

  93. Image © Crowhouse Clarissa Peterson clarissapeterson.com @clarissa Thank you!