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 for Users: How to Create a Better User Experience

1,496 views

Published on

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.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Designing for Users: How to Create a Better User Experience

  1. 1. Image © Crowhouse @clarissa Designing for Users: How to Create a Better User Experience
  2. 2. Credit:WOCinTech Chat / BY Understand your users aren't you
  3. 3. Credit: Javier Bouzas / CC BY NC ND Find out who your users are
  4. 4. Explain what the site is for
  5. 5. Credit: Rosenfeld Media / CC BY Define the user flow
  6. 6. Define the user flow
  7. 7. Define the user flow
  8. 8. Define the user flow
  9. 9. Define the user flow
  10. 10. Make processes simpler
  11. 11. Make processes simpler
  12. 12. Credit:Trickyboy / CC BY SA Don't ignore conventions
  13. 13. Don't ignore conventions
  14. 14. Avoid overlays No
  15. 15. Avoid overlays More No
  16. 16. Credit: Sarah Horrigan / CC BY NC Have a content strategy
  17. 17. Credit: Jason Powers / CC BY ND Use plain language
  18. 18. Split up long paragraphs No
  19. 19. Credit: Kimberly B. / CC BY ND Increase font size
  20. 20. Allow adequate line height
  21. 21. Allow adequate line height No
  22. 22. Have enough white space
  23. 23. Have enough white space
  24. 24. Make pages easy to scan
  25. 25. Make pages easy to scan
  26. 26. Use lists whenever possible Nope
  27. 27. Use lists whenever possible
  28. 28. Use lists whenever possible
  29. 29. Use lists whenever possible
  30. 30. Use lists whenever possible No
  31. 31. Use lists whenever possible
  32. 32. Don't forget microcontent
  33. 33. Have a helpful 404 error page No
  34. 34. Have a helpful 404 error page
  35. 35. Credit:Anna Debenham / CC BY NC Think about devices
  36. 36. Credit:WOCinTech Chat / CC BY Think about devices
  37. 37. Make your site responsive
  38. 38. Make your site responsive
  39. 39. Make your site responsive
  40. 40. Make your site responsive
  41. 41. Make your site responsive
  42. 42. Make your site responsive
  43. 43. Credit: Kārlis Dambrāns / CC BY Make your site responsive
  44. 44. Make touch targets large enough
  45. 45. Credit:Yahoo! Accessibility Lab / CC BY SA Know users have different abilities
  46. 46. Learn how a screen reader works
  47. 47. Include alt text
  48. 48. Include alt text
  49. 49. Include alt text
  50. 50. Ensure link text is descriptive No No No
  51. 51. Don't rely on color Normal Deuteranope Protanope Tritanope
  52. 52. Credit: Christopher Fynn / CC BY
  53. 53. Credit: Christopher Fynn / CC BY
  54. 54. Credit: Christopher Fynn / CC BY
  55. 55. Credit: Ruhrfisch / CC BY SA Don't rely on color
  56. 56. Credit: Ruhrfisch / CC BY SA Don't rely on color =
  57. 57. Credit: Rosenfeld Media / CC BY Don't rely on color
  58. 58. Don't rely on color
  59. 59. Make sure there's enough contrast Can you see it?
  60. 60. Make sure there's enough contrast
  61. 61. Credit:Accessibility and Usability at Penn State Make sure there's enough contrast
  62. 62. WebAIM Color Contrast Checker Make sure there's enough contrast
  63. 63. Credit: ClearFrost / CC BY SA Make sure there's enough contrast
  64. 64. Make sure there's enough contrast No
  65. 65. Add captions to videos
  66. 66. Accessibility Guidelines (Vox Media) Use an accessibility checklist
  67. 67. Don't include unnecessary fields
  68. 68. Don't include unnecessary fields Too much
  69. 69. Use appropriate input types <input'type="email">
  70. 70. Include instructions when needed
  71. 71. Include instructions when needed Tell me the rules first
  72. 72. Show which fields are required
  73. 73. Show which fields are required
  74. 74. Show which fields are required
  75. 75. Provide helpful error messages
  76. 76. Credit: Nuno Sousa / CC BY NC ND Think about speed
  77. 77. Credit: Chris JL / CC BY NC ND Think about speed
  78. 78. Credit:Wendi Dunlap / CC BY NC SA Think about speed
  79. 79. Credit: Bortzmeyer / CC BY SA Think about speed
  80. 80. Source: CNN Think about speed
  81. 81. Use responsive images
  82. 82. PageSpeed Insights (Google Developers) Test your site's performance
  83. 83. Test your site's performance
  84. 84. Credit:WOCinTech Chat / CC BY Make sure nothing is broken
  85. 85. Credit: Jeremy Keith / CC BY Test on different devices & browsers
  86. 86. Mobile Emulators & Simulators:The Ultimate Guide (Breaking the Mobile Web) Test on different devices & browsers
  87. 87. Test on different devices & browsers
  88. 88. Fangs Screen Reader Emulator (Firefox Add-On) Test on screen readers
  89. 89. Test on screen readers
  90. 90. Image © Crowhouse
  91. 91. Image © Crowhouse Clarissa Peterson clarissapeterson.com @clarissa Thank you!

×