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.

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
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
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!