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