Downloaded 36 times
Uploaded byClarissa Peterson
Designing for Users: How to Create a Better User Experience
The document provides guidelines for creating a better user experience by understanding user needs, simplifying processes, and ensuring accessibility. It emphasizes the importance of responsive design, sufficient contrast, and helpful content strategies, such as using plain language and lists. Additionally, it highlights the necessity of testing across devices and browsers to ensure functionality and usability.
More Related Content
Similar to Designing for Users: How to Create a Better User Experience
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Designing for Users: How to Create a Better User Experience
- 1. Image © Crowhouse @clarissa Designingfor 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 thesite is for
- 5. Credit: Rosenfeld Media/ CC BY Define the user flow
- 6.
- 7.
- 8.
- 9.
- 10.
- 12.
- 13. Credit:Trickyboy / CCBY SA Don't ignore conventions
- 14.
- 15.
- 16.
- 17. Credit: Sarah Horrigan/ CC BY NC Have a content strategy
- 18. Credit: Jason Powers/ CC BY ND Use plain language
- 19. Split up longparagraphs No
- 20. Credit: Kimberly B./ CC BY ND Increase font size
- 21. Allow adequate lineheight
- 22. Allow adequate lineheight No
- 23. Have enough whitespace
- 24. Have enough whitespace
- 25. Make pages easyto scan
- 27. Make pages easyto scan
- 28. Use lists wheneverpossible Nope
- 29. Use lists wheneverpossible
- 30. Use lists wheneverpossible
- 31. Use lists wheneverpossible
- 32. Use lists wheneverpossible No
- 33. Use lists wheneverpossible
- 34.
- 35. Have a helpful404 error page No
- 36. Have a helpful404 error page
- 37. Credit:Anna Debenham / CC BYNC Think about devices
- 38. Credit:WOCinTech Chat /CC BY Think about devices
- 39. Make your siteresponsive
- 40. Make your siteresponsive
- 41. Make your siteresponsive
- 42. Make your siteresponsive
- 43. Make your siteresponsive
- 44. Make your siteresponsive
- 45. Credit: Kārlis Dambrāns/ CC BY Make your site responsive
- 46. Make touch targetslarge enough
- 47. Credit:Yahoo! Accessibility Lab/ CC BY SA Know users have different abilities
- 48. Learn how ascreen reader works
- 49.
- 50.
- 51.
- 52. Ensure link textis descriptive No No No
- 53. Don't rely oncolor 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 oncolor
- 61. Make sure there'senough contrast Can you see it?
- 62. Make sure there'senough contrast
- 63. Credit:Accessibility and Usabilityat Penn State Make sure there's enough contrast
- 64. WebAIM Color ContrastChecker Make sure there's enough contrast
- 65. Credit: ClearFrost /CC BY SA Make sure there's enough contrast
- 66. Make sure there'senough contrast No
- 67. Add captions tovideos
- 68. Accessibility Guidelines (VoxMedia) Use an accessibility checklist
- 69.
- 70. Don't include unnecessaryfields Too much
- 71. Use appropriate inputtypes <input'type="email">
- 72.
- 73. Include instructions whenneeded Tell me the rules first
- 74. Show which fieldsare required
- 75. Show which fieldsare required
- 76. Show which fieldsare required
- 77. Provide helpful errormessages
- 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.
- 83.
- 84. PageSpeed Insights (GoogleDevelopers) Test your site's performance
- 85. Test your site'sperformance
- 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 differentdevices & browsers
- 90. Fangs Screen ReaderEmulator (Firefox Add-On) Test on screen readers
- 91. Test on screenreaders
- 92.
- 93. Image © Crowhouse ClarissaPeterson clarissapeterson.com @clarissa Thank you!