Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Image © Crowhouse
@clarissa
Designing for Users:
How to Create a Better User Experience
Credit:WOCinTech Chat / BY
Understand your users aren't you
Credit: Javier Bouzas / CC BY NC ND
Find out who your users are
Explain what the site is for
Credit: Rosenfeld Media / CC BY
Define the user flow
Define the user flow
Define the user flow
Define the user flow
Define the user flow
Make processes simpler
Make processes simpler
Credit:Trickyboy / CC BY SA
Don't ignore conventions
Don't ignore conventions
Avoid overlays
No
Avoid overlays
More
No
Credit: Sarah Horrigan / CC BY NC
Have a content strategy
Credit: Jason Powers / CC BY ND
Use plain language
Split up long paragraphs
No
Credit: Kimberly B. / CC BY ND
Increase font size
Allow adequate line height
Allow adequate line height
No
Have enough white space
Have enough white space
Make pages easy to scan
Make pages easy to scan
Use lists whenever possible
Nope
Use lists whenever possible
Use lists whenever possible
Use lists whenever possible
Use lists whenever possible
No
Use lists whenever possible
Don't forget microcontent
Have a helpful 404 error page
No
Have a helpful 404 error page
Credit:Anna
Debenham /
CC BY NC
Think about devices
Credit:WOCinTech Chat / CC BY
Think about devices
Make your site responsive
Make your site responsive
Make your site responsive
Make your site responsive
Make your site responsive
Make your site responsive
Credit: Kārlis Dambrāns / CC BY
Make your site responsive
Make touch targets large enough
Credit:Yahoo! Accessibility Lab / CC BY SA
Know users have different abilities
Learn how a screen reader works
Include alt text
Include alt text
Include alt text
Ensure link text is descriptive
No
No
No
Don't rely on color
Normal
Deuteranope Protanope Tritanope
Credit: Christopher Fynn / CC BY
Credit: Christopher Fynn / CC BY
Credit: Christopher Fynn / CC BY
Credit: Ruhrfisch / CC BY SA
Don't rely on color
Credit: Ruhrfisch / CC BY SA
Don't rely on color
=
Credit: Rosenfeld Media / CC BY
Don't rely on color
Don't rely on color
Make sure there's enough contrast
Can you
see it?
Make sure there's enough contrast
Credit:Accessibility and Usability at Penn State
Make sure there's enough contrast
WebAIM Color Contrast Checker
Make sure there's enough contrast
Credit: ClearFrost / CC BY SA
Make sure there's enough contrast
Make sure there's enough contrast
No
Add captions to videos
Accessibility Guidelines (Vox Media)
Use an accessibility checklist
Don't include unnecessary fields
Don't include unnecessary fields
Too
much
Use appropriate input types
<input'type="email">
Include instructions when needed
Include instructions when needed
Tell me
the rules
first
Show which fields are required
Show which fields are required
Show which fields are required
Provide helpful error messages
Credit: Nuno Sousa / CC BY NC ND
Think about speed
Credit: Chris JL / CC BY NC ND
Think about speed
Credit:Wendi Dunlap / CC BY NC SA
Think about speed
Credit: Bortzmeyer / CC BY SA
Think about speed
Source: CNN
Think about speed
Use responsive images
PageSpeed Insights (Google Developers)
Test your site's performance
Test your site's performance
Credit:WOCinTech Chat / CC BY
Make sure nothing is broken
Credit: Jeremy Keith / CC BY
Test on different devices & browsers
Mobile Emulators & Simulators:The Ultimate Guide (Breaking the Mobile Web)
Test on different devices & browsers
Test on different devices & browsers
Fangs Screen Reader Emulator (Firefox Add-On)
Test on screen readers
Test on screen readers
Image © Crowhouse
Image © Crowhouse
Clarissa Peterson
clarissapeterson.com
@clarissa
Thank you!
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
Próxima SlideShare
Cargando en…5
×

Designing for Users: How to Create a Better User Experience

1.694 visualizaciones

Publicado el

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.

Publicado en: Diseño
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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!

×