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
   

   View Slide

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

   View Slide

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

   View Slide

4. Explain what the site is for
   

   View Slide

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

   View Slide

6. Define the user flow
   

   View Slide

7. Define the user flow
   

   View Slide

8. Define the user flow
   

   View Slide

9. Define the user flow
   

   View Slide

10. Make processes simpler
    

    View Slide

11. View Slide

12. Make processes simpler
    

    View Slide

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

    View Slide

14. Don't ignore conventions
    

    View Slide

15. Avoid overlays
    No
    

    View Slide

16. Avoid overlays
    More
    No
    

    View Slide

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

    View Slide

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

    View Slide

19. Split up long paragraphs
    No
    

    View Slide

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

    View Slide

21. Allow adequate line height
    

    View Slide

22. Allow adequate line height
    No
    

    View Slide

23. Have enough white space
    

    View Slide

24. Have enough white space
    

    View Slide

25. Make pages easy to scan
    

    View Slide

26. View Slide

27. Make pages easy to scan
    

    View Slide

28. Use lists whenever possible
    Nope
    

    View Slide

29. Use lists whenever possible
    

    View Slide

30. Use lists whenever possible
    

    View Slide

31. Use lists whenever possible
    

    View Slide

32. Use lists whenever possible
    No
    

    View Slide

33. Use lists whenever possible
    

    View Slide

34. Don't forget microcontent
    

    View Slide

35. Have a helpful 404 error page
    No
    

    View Slide

36. Have a helpful 404 error page
    

    View Slide

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

    View Slide

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

    View Slide

39. Make your site responsive
    

    View Slide

40. Make your site responsive
    

    View Slide

41. Make your site responsive
    

    View Slide

42. Make your site responsive
    

    View Slide

43. Make your site responsive
    

    View Slide

44. Make your site responsive
    

    View Slide

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

    View Slide

46. Make touch targets large enough
    

    View Slide

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

    View Slide

48. Learn how a screen reader works
    

    View Slide

49. Include alt text
    

    View Slide

50. Include alt text
    

    View Slide

51. Include alt text
    

    View Slide

52. Ensure link text is descriptive
    No
    No
    No
    

    View Slide

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

    View Slide

54. Credit: Christopher Fynn / CC BY
    

    View Slide

55. Credit: Christopher Fynn / CC BY
    

    View Slide

56. Credit: Christopher Fynn / CC BY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

60. Don't rely on color
    

    View Slide

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

    View Slide

62. Make sure there's enough contrast
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. Make sure there's enough contrast
    No
    

    View Slide

67. Add captions to videos
    

    View Slide

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

    View Slide

69. Don't include unnecessary fields
    

    View Slide

70. Don't include unnecessary fields
    Too
    much
    

    View Slide

71. Use appropriate input types
    
    

    View Slide

72. Include instructions when needed
    

    View Slide

73. Include instructions when needed
    Tell me
    the rules
    first
    

    View Slide

74. Show which fields are required
    

    View Slide

75. Show which fields are required
    

    View Slide

76. Show which fields are required
    

    View Slide

77. Provide helpful error messages
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

82. Source: CNN
    Think about speed
    

    View Slide

83. Use responsive images
    

    View Slide

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

    View Slide

85. Test your site's performance
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. Test on different devices & browsers
    

    View Slide

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

    View Slide

91. Test on screen readers
    

    View Slide

92. Image © Crowhouse
    

    View Slide

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

    View Slide