Your SlideShare is downloading. ×

10 Common Usability Mistakes

3,184
views

Published on

Published in: Design

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,184
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 10 Most Common Usability Mistakes and how to avoid them
    John Whalen, PhD
    Director, User Experience and Design, e.magination
  • 2. e.magination is a full service Web presence and applicationdevelopment firm offering persuasive design brought to life by innovative use of technology.
    Founded in 1992
    50+ employees
    Cleared facility & staff
    Largest Web Design Firm in Baltimore 2007 - 2009
    Over 700 Web sites launched
  • 3. The 10 Most Common Usability Mistakes
    Interaction Mistakes
    Scanability Mistakes
    Poor Design
    Navigation Mistakes
    Lack of Persuasive Design
  • 4. The 10 Most Common Usability Mistakes
    Interaction Mistakes
    Scanability Mistakes
    Poor Design
    Navigation Mistakes
    Lack of Persuasive Design
  • 5. 1. Inconsistent interactions
  • 6. 1. Inconsistent interactions
  • 7. 1. Inconsistent interactions
    Make standard for links
    Need to be blue/underlined?
  • 8. 1. Inconsistent interactions
    Make standard for links
    Need to be blue/underlined?
    Make standards for non-links
  • 9. 1. Inconsistent interactions
    Make standard for links
    Need to be blue/underlined?
    Make standards for non-links
    Make standards for navigation
  • 10. 1. Inconsistent interactions
    Make standard for links
    Need to be blue/underlined?
    Make standards for non-links
    Make standards for navigation
    Be consistent
  • 11. 2. People don’t know where to click
    Where can I click?
  • 12. 2. People don’t know where to click
    Where can I click?
    Where do I want to click?
  • 13. 2. People don’t know where to click
    Where can I click?
    Where do I want to click?
  • 14. 2. People don’t know where to click
    Make images clickable
    Make titles clickable (e.g., blogs, news sites)
    Always make best choice most prominent (e.g., button)
  • 15. 2. People don’t know where to click
  • 16. 2. People don’t know where to click
  • 17. 2. People don’t know where to click
  • 18. The 10 Most Common Usability Mistakes
    Interaction Mistakes
    Scanability Mistakes
    Poor Design
    Navigation Mistakes
    Lack of Persuasive Design
  • 19. 3. Content difficult to scan

  • 20. Users scan content in an “F” pattern
  • 21. 3. Content difficult to scan
    Break information into manageable chunks visually.
    Forewarn reader of what’s to come.
    Consider table of contents for large content areas.
  • 22. 4. No visual cues to information hierarchy
  • 23. 4. No visual cues to information hierarchy
    Use several cues:
    Visual Contrast
  • 24. 4. No visual cues to information hierarchy
    Use several cues:
    Visual Contrast
    Color
  • 25. 4. No visual cues to information hierarchy
    Use several cues:
    Visual Contrast
    Color
    Shape
  • 26. 4. No visual cues to information hierarchy
    Use several cues:
    Visual Contrast
    Color
    Shape
    I couldn’t find anyone who used all 3 well!
  • 27. The 10 Most Common Usability Mistakes
    Interaction Mistakes
    Scanability Mistakes
    Poor Design
    Navigation Mistakes
    Lack of Persuasive Design
  • 28. 5. Don’t follow accessibility / SEO guidelines
    No hovers on images
    Text colors styles aren’t representative of what would show up in SEO or a screen reader
  • 29. 5. Don’t follow accessibility / SEO guidelines
    No hovers on images
    Text colors styles aren’t representative of what would show up in SEO or a screen reader
    Unable to use keyboard to control interior pages
  • 30. 5. Don’t follow accessibility / SEO guidelines
    Make great for SEO AND Accessibility
    Use H1, H2 Tags
  • 31. 5. Don’t follow accessibility / SEO guidelines
    Make great for SEO AND Accessibility
    Use H1, H2 Tags
    Use meaningful image descriptions
  • 32. 6. Visual noise / flashing
  • 33. 6. Visual noise / flashing
  • 34. 6. Visual noise / flashing
  • 35. 6. Visual noise / flashing
  • 36. 6. Visual noise / flashing
    Reduce clutter
    Determine your strategic top priorities
    Less is more
  • 37. The 10 Most Common Usability Mistakes
    Interaction Mistakes
    Scanability Mistakes
    Poor Design
    Navigation Mistakes
    Lack of Persuasive Design
  • 38. 7. Opening extra windows / PDFs
    Send users to the same window whenever possible
    Don’t send people to a PDF without advance notice
  • 39. 8. People can’t tell where they are
  • 40. 8. People can’t tell where they are
  • 41. 8. People can’t tell where they are
    Provide active understanding of where the person is.
    If needed, use breadcrumbs
    Use clear page titles
    Imagine yourself landing here from search
  • 42. The 10 Most Common Usability Mistakes
    Interaction Mistakes
    Scanability Mistakes
    Poor Design
    Navigation Mistakes
    Lack of Persuasive Design
  • 43. 9. Poor headlines / link titles
  • 44. 9. Poor headlines / link titles
  • 45. 9. Poor headlines / link titles
  • 46. 9. Poor headlines / link titles
  • 47. 9. Poor headlines / link titles
  • 48. 9. Poor headlines / link titles
  • 49. 9. Poor headlines / link titles
    Make links unambiguous
    Make titles detailed enough – 7-11 words to be easily scanned and anticipate content
  • 50. 10. Registration required to view content
    Which link did I click to get the login screen?
  • 51. 10. Registration required to view content
    Please, I’m begging!Warn me when something is password protected.Its okay to tease…
  • 52. The 10 Most Common Usability Mistakes
  • 53. The 10 Most Common Usability Mistakes
    Inconsistent interactions
    Not clear where to click
  • 54. The 10 Most Common Usability Mistakes
    Inconsistent interactions
    Not clear where to click
    Content difficult to scan
    No visual cues to information hierarchy
  • 55. The 10 Most Common Usability Mistakes
    Inconsistent interactions
    Not clear where to click
    Content difficult to scan
    No visual cues to information hierarchy
    Don’t follow accessibility/SEO guidelines
    Visual noise / flashing
  • 56. The 10 Most Common Usability Mistakes
    Inconsistent interactions
    Not clear where to click
    Content difficult to scan
    No visual cues to information hierarchy
    Don’t follow accessibility/SEO guidelines
    Visual noise / flashing
    Opening extra windows / PDFs
    Users can’t tell where they are
  • 57. The 10 Most Common Usability Mistakes
    Inconsistent interactions
    Not clear where to click
    Content difficult to scan
    No visual cues to information hierarchy
    Don’t follow accessibility/SEO guidelines
    Visual noise / flashing
    Opening extra windows / PDFs
    Users can’t tell where they are
    Poor navigation / link titles
    Registration required to view content (no warning)
  • 58. How to avoid mistakes? Usability Reviews & Usability Testing
  • 59. Thank you!
    Thank you
    John Whalen, PhD
    Director, User Experience
    Twitter: @johnwhalen
    Email: john.whalen@emagination.com
    LinkedIn: http://www.linkedin.com/in/johnwhalen

×