10 Most Common Usability Mistakes and how to avoid them<br />John Whalen, PhD<br />Director, User Experience and Design, e...
e.magination is a full service Web presence and applicationdevelopment firm offering persuasive design brought to life by ...
The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation...
The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation...
1. Inconsistent interactions<br />
1. Inconsistent interactions<br />
1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />
1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />Make standards for non-lin...
1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />Make standards for non-lin...
1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />Make standards for non-lin...
2. People don’t know where to click<br />Where can I click?<br />
2. People don’t know where to click<br />Where can I click?<br />Where do I want to click?<br />
2. People don’t know where to click<br />Where can I click?<br />Where do I want to click?<br />
2. People don’t know where to click<br />Make images clickable<br />Make titles clickable (e.g., blogs, news sites)<br />A...
2. People don’t know where to click<br />
2. People don’t know where to click<br />
2. People don’t know where to click<br />
The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation...
3. Content difficult to scan<br />✓<br />
Users scan content in an “F” pattern<br />
3. Content difficult to scan<br />Break information into manageable chunks visually.<br />Forewarn reader of what’s to com...
4. No visual cues to information hierarchy<br />
4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />
4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />Color<br />
4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />Color<br />Shape<br />
4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />Color<br />Shape<br />I couldn...
The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation...
5. Don’t follow accessibility / SEO guidelines<br />No hovers on images<br />Text colors styles aren’t representative of w...
5. Don’t follow accessibility / SEO guidelines<br />No hovers on images<br />Text colors styles aren’t representative of w...
5. Don’t follow accessibility / SEO guidelines<br />Make great for SEO AND Accessibility<br />Use H1, H2 Tags<br />
5. Don’t follow accessibility / SEO guidelines<br />Make great for SEO AND Accessibility<br />Use H1, H2 Tags<br />Use mea...
6. Visual noise / flashing<br />
6. Visual noise / flashing<br />
6. Visual noise / flashing<br />
6. Visual noise / flashing<br />
6. Visual noise / flashing<br />Reduce clutter<br />Determine your strategic top priorities<br />Less is more<br />
The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation...
7. Opening extra windows / PDFs<br />Send users to the same window whenever possible<br />Don’t send people to a PDF witho...
8. People can’t tell where they are <br />
8. People can’t tell where they are <br />
8. People can’t tell where they are <br />Provide active understanding of where the person is.<br />If needed, use breadcr...
The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation...
9. Poor headlines / link titles<br />
9. Poor headlines / link titles<br />
9. Poor headlines / link titles<br />
9. Poor headlines / link titles<br />
9. Poor headlines / link titles<br />
9. Poor headlines / link titles<br />
9. Poor headlines / link titles<br />Make links unambiguous<br />Make titles detailed enough – 7-11 words to be easily sca...
10. Registration required to view content<br />Which link did I click to get the login screen?<br />
10. Registration required to view content<br />Please, I’m begging!Warn me when something is password protected.Its okay t...
The 10 Most Common Usability Mistakes<br />
The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />
The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult ...
The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult ...
The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult ...
The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult ...
How to avoid mistakes? Usability Reviews & Usability Testing       <br />
Thank you!<br />Thank you<br />John Whalen, PhD<br />Director, User Experience<br />Twitter: 		@johnwhalen<br />Email: 		j...
Upcoming SlideShare
Loading in …5
×

10 Common Usability Mistakes

3,642 views

Published on

Published in: Design

10 Common Usability Mistakes

  1. 1. 10 Most Common Usability Mistakes and how to avoid them<br />John Whalen, PhD<br />Director, User Experience and Design, e.magination<br />
  2. 2. e.magination is a full service Web presence and applicationdevelopment firm offering persuasive design brought to life by innovative use of technology. <br />Founded in 1992<br />50+ employees<br />Cleared facility & staff <br />Largest Web Design Firm in Baltimore 2007 - 2009<br />Over 700 Web sites launched<br />
  3. 3. The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation Mistakes<br />Lack of Persuasive Design<br />
  4. 4. The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation Mistakes<br />Lack of Persuasive Design<br />
  5. 5. 1. Inconsistent interactions<br />
  6. 6. 1. Inconsistent interactions<br />
  7. 7. 1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />
  8. 8. 1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />Make standards for non-links<br />
  9. 9. 1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />Make standards for non-links<br />Make standards for navigation<br />
  10. 10. 1. Inconsistent interactions<br />Make standard for links<br />Need to be blue/underlined?<br />Make standards for non-links<br />Make standards for navigation<br />Be consistent<br />
  11. 11. 2. People don’t know where to click<br />Where can I click?<br />
  12. 12. 2. People don’t know where to click<br />Where can I click?<br />Where do I want to click?<br />
  13. 13. 2. People don’t know where to click<br />Where can I click?<br />Where do I want to click?<br />
  14. 14. 2. People don’t know where to click<br />Make images clickable<br />Make titles clickable (e.g., blogs, news sites)<br />Always make best choice most prominent (e.g., button)<br />
  15. 15. 2. People don’t know where to click<br />
  16. 16. 2. People don’t know where to click<br />
  17. 17. 2. People don’t know where to click<br />
  18. 18. The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation Mistakes<br />Lack of Persuasive Design<br />
  19. 19. 3. Content difficult to scan<br />✓<br />
  20. 20. Users scan content in an “F” pattern<br />
  21. 21. 3. Content difficult to scan<br />Break information into manageable chunks visually.<br />Forewarn reader of what’s to come.<br />Consider table of contents for large content areas. <br />
  22. 22. 4. No visual cues to information hierarchy<br />
  23. 23. 4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />
  24. 24. 4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />Color<br />
  25. 25. 4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />Color<br />Shape<br />
  26. 26. 4. No visual cues to information hierarchy<br />Use several cues:<br />Visual Contrast<br />Color<br />Shape<br />I couldn’t find anyone who used all 3 well!<br />
  27. 27. The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation Mistakes<br />Lack of Persuasive Design<br />
  28. 28. 5. Don’t follow accessibility / SEO guidelines<br />No hovers on images<br />Text colors styles aren’t representative of what would show up in SEO or a screen reader<br />
  29. 29. 5. Don’t follow accessibility / SEO guidelines<br />No hovers on images<br />Text colors styles aren’t representative of what would show up in SEO or a screen reader<br />Unable to use keyboard to control interior pages<br />
  30. 30. 5. Don’t follow accessibility / SEO guidelines<br />Make great for SEO AND Accessibility<br />Use H1, H2 Tags<br />
  31. 31. 5. Don’t follow accessibility / SEO guidelines<br />Make great for SEO AND Accessibility<br />Use H1, H2 Tags<br />Use meaningful image descriptions<br />
  32. 32. 6. Visual noise / flashing<br />
  33. 33. 6. Visual noise / flashing<br />
  34. 34. 6. Visual noise / flashing<br />
  35. 35. 6. Visual noise / flashing<br />
  36. 36. 6. Visual noise / flashing<br />Reduce clutter<br />Determine your strategic top priorities<br />Less is more<br />
  37. 37. The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation Mistakes<br />Lack of Persuasive Design<br />
  38. 38. 7. Opening extra windows / PDFs<br />Send users to the same window whenever possible<br />Don’t send people to a PDF without advance notice<br />
  39. 39. 8. People can’t tell where they are <br />
  40. 40. 8. People can’t tell where they are <br />
  41. 41. 8. People can’t tell where they are <br />Provide active understanding of where the person is.<br />If needed, use breadcrumbs<br />Use clear page titles<br />Imagine yourself landing here from search<br />
  42. 42. The 10 Most Common Usability Mistakes<br />Interaction Mistakes<br />Scanability Mistakes<br />Poor Design<br />Navigation Mistakes<br />Lack of Persuasive Design<br />
  43. 43. 9. Poor headlines / link titles<br />
  44. 44. 9. Poor headlines / link titles<br />
  45. 45. 9. Poor headlines / link titles<br />
  46. 46. 9. Poor headlines / link titles<br />
  47. 47. 9. Poor headlines / link titles<br />
  48. 48. 9. Poor headlines / link titles<br />
  49. 49. 9. Poor headlines / link titles<br />Make links unambiguous<br />Make titles detailed enough – 7-11 words to be easily scanned and anticipate content<br />
  50. 50. 10. Registration required to view content<br />Which link did I click to get the login screen?<br />
  51. 51. 10. Registration required to view content<br />Please, I’m begging!Warn me when something is password protected.Its okay to tease…<br />
  52. 52. The 10 Most Common Usability Mistakes<br />
  53. 53. The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />
  54. 54. The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult to scan<br />No visual cues to information hierarchy<br />
  55. 55. The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult to scan<br />No visual cues to information hierarchy<br />Don’t follow accessibility/SEO guidelines<br />Visual noise / flashing<br />
  56. 56. The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult to scan<br />No visual cues to information hierarchy<br />Don’t follow accessibility/SEO guidelines<br />Visual noise / flashing<br />Opening extra windows / PDFs<br />Users can’t tell where they are<br />
  57. 57. The 10 Most Common Usability Mistakes<br />Inconsistent interactions<br />Not clear where to click<br />Content difficult to scan<br />No visual cues to information hierarchy<br />Don’t follow accessibility/SEO guidelines<br />Visual noise / flashing<br />Opening extra windows / PDFs<br />Users can’t tell where they are<br />Poor navigation / link titles<br />Registration required to view content (no warning)<br />
  58. 58. How to avoid mistakes? Usability Reviews & Usability Testing <br />
  59. 59. Thank you!<br />Thank you<br />John Whalen, PhD<br />Director, User Experience<br />Twitter: @johnwhalen<br />Email: john.whalen@emagination.com<br />LinkedIn: http://www.linkedin.com/in/johnwhalen<br />

×