10 Most Common Usability Mistakes and how to avoid them

John Whalen, PhDDirector, User Experience and Design, e.magination

• Founded in 1992• 50+ employees• Cleared facility & staff

• Largest Web Design Firm in Baltimore 2007 - 2009

• Over 700 Web sites launched

e.magination is a full service Web presence and application development firm offering persuasive design brought to life by innovative use of technology.

The 10 Most Common Usability Mistakes

• Interaction Mistakes• Scanability Mistakes• Poor Design• Navigation Mistakes• Lack of Persuasive Design

The 10 Most Common Usability Mistakes

• Interaction Mistakes• Scanability Mistakes• Poor Design• Navigation Mistakes• Lack of Persuasive Design

1. Inconsistent interactions

1. Inconsistent interactions

1. Inconsistent interactions

• Make standard for links– Need to be

blue/underlined?

1. Inconsistent interactions

• Make standard for links– Need to be

blue/underlined?

• Make standards for non-links

1. Inconsistent interactions

• Make standard for links– Need to be

blue/underlined?

• Make standards for non-links

• Make standards for navigation

1. Inconsistent interactions

• Make standard for links– Need to be

blue/underlined?

• Make standards for non-links

• Make standards for navigation

• Be consistent

2. People don’t know where to click

• Where can I click?

2. People don’t know where to click

• Where can I click?

• Where do I want to click?

2. People don’t know where to click

• Where can I click?

• Where do I want to click?

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)

2. People don’t know where to click

2. People don’t know where to click

2. People don’t know where to click

The 10 Most Common Usability Mistakes

• Interaction Mistakes• Scanability Mistakes• Poor Design• Navigation Mistakes• Lack of Persuasive Design

3. Content difficult to scan

✓

Users scan content in an “F” pattern

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.

4. No visual cues to information hierarchy

4. No visual cues to information hierarchy

• Use several cues:

– Visual Contrast

4. No visual cues to information hierarchy

• Use several cues:

– Visual Contrast

– Color

4. No visual cues to information hierarchy

• Use several cues:

– Visual Contrast

– Color

– Shape

4. No visual cues to information hierarchy

• Use several cues:

– Visual Contrast

– Color

– Shape

• I couldn’t find anyone who used all 3 well!

The 10 Most Common Usability Mistakes

• Interaction Mistakes• Scanability Mistakes• Poor Design• Navigation Mistakes• Lack of Persuasive Design

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

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

5. Don’t follow accessibility / SEO guidelines

• Make great for SEO AND Accessibility

• Use H1, H2 Tags

5. Don’t follow accessibility / SEO guidelines

• Make great for SEO AND Accessibility

• Use H1, H2 Tags

• Use meaningful image descriptions

6. Visual noise / flashing

6. Visual noise / flashing

6. Visual noise / flashing

6. Visual noise / flashing

6. Visual noise / flashing

• Reduce clutter

• Determine your strategic top priorities

• Less is more

The 10 Most Common Usability Mistakes

• Interaction Mistakes• Scanability Mistakes• Poor Design• Navigation Mistakes• Lack of Persuasive Design

7. Opening extra windows / PDFs

• Send users to the same window whenever possible

• Don’t send people to a PDF without advance notice

8. People can’t tell where they are

8. People can’t tell where they are

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

The 10 Most Common Usability Mistakes

• Interaction Mistakes• Scanability Mistakes• Poor Design• Navigation Mistakes• Lack of Persuasive Design

9. Poor headlines / link titles

9. Poor headlines / link titles

9. Poor headlines / link titles

9. Poor headlines / link titles

9. Poor headlines / link titles

9. Poor headlines / link titles

9. Poor headlines / link titles

• Make links unambiguous

• Make titles detailed enough – 7-11 words to be easily scanned and anticipate content

10. Registration required to view content

• Which link did I click to get the login screen?

10. Registration required to view content

• Please, I’m begging!

Warn me when something is password protected.

Its okay to tease…

The 10 Most Common Usability Mistakes

The 10 Most Common Usability Mistakes

1. Inconsistent interactions

2. Not clear where to click

The 10 Most Common Usability Mistakes

1. Inconsistent interactions

2. Not clear where to click

3. Content difficult to scan

4. No visual cues to information hierarchy

The 10 Most Common Usability Mistakes

1. Inconsistent interactions

2. Not clear where to click

3. Content difficult to scan

4. No visual cues to information hierarchy

5. Don’t follow accessibility/SEO guidelines

6. Visual noise / flashing

The 10 Most Common Usability Mistakes

1. Inconsistent interactions

2. Not clear where to click

3. Content difficult to scan

4. No visual cues to information hierarchy

5. Don’t follow accessibility/SEO guidelines

6. Visual noise / flashing

7. Opening extra windows / PDFs

8. Users can’t tell where they are

The 10 Most Common Usability Mistakes

1. Inconsistent interactions

2. Not clear where to click

3. Content difficult to scan

4. No visual cues to information hierarchy

5. Don’t follow accessibility/SEO guidelines

6. Visual noise / flashing

7. Opening extra windows / PDFs

8. Users can’t tell where they are

9. Poor navigation / link titles

10. Registration required to view content (no warning)

How to avoid mistakes?

Usability Reviews & Usability Testing

THANK YOU!

John Whalen, PhD

Director, User Experience

Twitter: @johnwhalen

Email: john.whalen@emagination.com

LinkedIn: http://www.linkedin.com/in/johnwhalen

Thank you