Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing for Users: How to Create a Better User Experience

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.

Clarissa Peterson

September 25, 2017
Tweet

More Decks by Clarissa Peterson

Other Decks in Design

Transcript

  1. Image © Crowhouse
    @clarissa
    Designing for Users:
    How to Create a Better User Experience

    View full-size slide

  2. Credit: WOCinTech Chat / BY
    Understand your users aren't you

    View full-size slide

  3. Credit: Javier Bouzas / CC BY NC ND
    Find out who your users are

    View full-size slide

  4. Explain what the site is for

    View full-size slide

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

    View full-size slide

  6. Define the user flow

    View full-size slide

  7. Define the user flow

    View full-size slide

  8. Define the user flow

    View full-size slide

  9. Define the user flow

    View full-size slide

  10. Make processes simpler

    View full-size slide

  11. Make processes simpler

    View full-size slide

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

    View full-size slide

  13. Don't ignore conventions

    View full-size slide

  14. Avoid overlays
    No

    View full-size slide

  15. Avoid overlays
    More
    No

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. Split up long paragraphs
    No

    View full-size slide

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

    View full-size slide

  20. Allow adequate line height

    View full-size slide

  21. Allow adequate line height
    No

    View full-size slide

  22. Have enough white space

    View full-size slide

  23. Have enough white space

    View full-size slide

  24. Make pages easy to scan

    View full-size slide

  25. Make pages easy to scan

    View full-size slide

  26. Use lists whenever possible
    Nope

    View full-size slide

  27. Use lists whenever possible

    View full-size slide

  28. Use lists whenever possible

    View full-size slide

  29. Use lists whenever possible

    View full-size slide

  30. Use lists whenever possible
    No

    View full-size slide

  31. Use lists whenever possible

    View full-size slide

  32. Don't forget microcontent

    View full-size slide

  33. Have a helpful 404 error page
    No

    View full-size slide

  34. Have a helpful 404 error page

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Make your site responsive

    View full-size slide

  38. Make your site responsive

    View full-size slide

  39. Make your site responsive

    View full-size slide

  40. Make your site responsive

    View full-size slide

  41. Make your site responsive

    View full-size slide

  42. Make your site responsive

    View full-size slide

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

    View full-size slide

  44. Make touch targets large enough

    View full-size slide

  45. Credit: Yahoo! Accessibility Lab / CC BY SA
    Know users have different abilities

    View full-size slide

  46. Learn how a screen reader works

    View full-size slide

  47. Include alt text

    View full-size slide

  48. Include alt text

    View full-size slide

  49. Include alt text

    View full-size slide

  50. Ensure link text is descriptive
    No
    No
    No

    View full-size slide

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

    View full-size slide

  52. Credit: Christopher Fynn / CC BY

    View full-size slide

  53. Credit: Christopher Fynn / CC BY

    View full-size slide

  54. Credit: Christopher Fynn / CC BY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. Don't rely on color

    View full-size slide

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

    View full-size slide

  60. Make sure there's enough contrast

    View full-size slide

  61. Credit: Accessibility and Usability at Penn State
    Make sure there's enough contrast

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. Make sure there's enough contrast
    No

    View full-size slide

  65. Add captions to videos

    View full-size slide

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

    View full-size slide

  67. Don't include unnecessary fields

    View full-size slide

  68. Don't include unnecessary fields
    Too
    much

    View full-size slide

  69. Use appropriate input types

    View full-size slide

  70. Include instructions when needed

    View full-size slide

  71. Include instructions when needed
    Tell me
    the rules
    first

    View full-size slide

  72. Show which fields are required

    View full-size slide

  73. Show which fields are required

    View full-size slide

  74. Show which fields are required

    View full-size slide

  75. Provide helpful error messages

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. Source: CNN
    Think about speed

    View full-size slide

  81. Use responsive images

    View full-size slide

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

    View full-size slide

  83. Test your site's performance

    View full-size slide

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

    View full-size slide

  85. Credit: Jeremy Keith / CC BY
    Test on different devices & browsers

    View full-size slide

  86. Mobile Emulators & Simulators: The Ultimate Guide (Breaking the Mobile Web)
    Test on different devices & browsers

    View full-size slide

  87. Test on different devices & browsers

    View full-size slide

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

    View full-size slide

  89. Test on screen readers

    View full-size slide

  90. Image © Crowhouse

    View full-size slide

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

    View full-size slide