Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,670 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 />

×