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.

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!