top 11 usability recommendations for 2011

June 10, 2011

Top 11 Usability Recommendations for 2011

Interactive Technology Solutions

Agenda

• Introduction

•Top 11 Usability Issues

•Q & A with your sites

Interactive Technology Solutions

Introducing Bridgeline Digital

We help our customers achieve their key initiatives by leveraging web technologies

The Building Blocks For Web Success

Interactive Technology Solutions

John Whalen

VP User Experience

Brian Lantz

EVP & General Manager

Introducing our Speakers

Interactive Technology Solutions

Webinar Series

•The Secrets to a Great Web Redesign: Getting the ROI from your investment

Thu, Jun 16, 2011 10:00 AM - 11:00 AM EDT

•ROI of Web Engagement Management; iAPPS Demonstration

Thu, Jun 23, 2011 1:00 PM - 2:00 PM EDT

Interactive Technology Solutions

ForeSee Satisfaction Scores Are Not Improving

Interactive Technology Solutions

Maybe we need…

Interactive Technology Solutions

Or maybe we need… SoLoMo?

Interactive Technology Solutions

Let’s not forget what we are we trying to avoid?

Interactive Technology Solutions

Let’s not forget what we are we trying to avoid?

Interactive Technology Solutions

Time to revisit Usability 101

•Navigation

•Content

• Interaction

•Visual Design

…And now on to the Top 11…

Interactive Technology Solutions

1. Provide strong cues about where I am on site

Interactive Technology Solutions

1. Provide strong cues about where I am on site

• Top Nav + Selected Nav visual cue

• Breadcrumbs

• Secondary Nav location

• Page Title Prominent

Interactive Technology Solutions

2. Effective Search + Refine

Interactive Technology Solutions

2. Effective Search + Refine

• Location of search box

• Search results ordered by relevance

• No extraneous information on page

• Provide option to “Search + Refine”

Interactive Technology Solutions

3. Make it clear where I can and can’t click (affordances)

Interactive Technology Solutions

3. Make it clear where I can and can’t click (affordances)

Interactive Technology Solutions

3. Make it clear where I can and can’t click (affordances)

Interactive Technology Solutions

4. Support www.____.com and ___.com

Interactive Technology Solutions

5. Make it easy to navigate to the “Top Tasks” on your site

Interactive Technology Solutions

6. Create a clear visual hierarchy

Interactive Technology Solutions

6. Create a clear visual hierarchyPretty good…

Interactive Technology Solutions

6. Create a clear visual hierarchyWell…

Interactive Technology Solutions

6. Create a clear visual hierarchy

• Use multiple cues:

• Visual Contrast

• Color

• Shape

I’ve never seen all three done correctly…

Interactive Technology Solutions

7. Make Content Easy to ScanClassic “F-pattern” when scanning

Interactive Technology Solutions

7. Make Content Easy to ScanNot easy to scan…no hierarchy, no contrast.

Interactive Technology Solutions

7. Make Content Easy to ScanWhat do you think?

Interactive Technology Solutions

7. Make Content Easy to ScanMiddle section isn’t bad…

Interactive Technology Solutions

7. Make Content Easy to Scan…except it keeps going and going.

Interactive Technology Solutions

8. Make content a reasonable size, font and contrastAm I that old, or is that a small font!

Interactive Technology Solutions

8. Make content a reasonable size, font and contrast

Center column pretty good, if there wasn’t so much else on the page…

Interactive Technology Solutions

9. Create well structured form and provide clear assistance

Let’s consider this in detail – it’s a million dollar page for Geico.

Interactive Technology Solutions

9. Create well structured form and provide clear assistance

• Good that they provide help and a phone number.

• Let me know where problem is, what problem is, example of how to fix.

• Provide error message where problem is.

• Don’t let the names of the fields disappear as I type the information.

Interactive Technology Solutions

10. Make sure you’re covering SEO 101

• Have a strong, meaningful page title on each page

• Use H1, H2 tags for key content.

Really nicely done…

Interactive Technology Solutions

11. Pass SEO 101: link, title, H1/H2 tags

• Have a strong, meaningful page title on each page.

• Have a human-understandable linking structure.

• Use H1, H2 tags for key content.

…so what happened?

Interactive Technology Solutions

11. Accessibility 101: Alt tags, Alt Nav, Degrades Gracefully

• Each image should have an alt tag.

• Navigation, major titles should be text.

• Ensure you can use alternate means of entry (e.g., keyboard only OR iPad)

Interactive Technology Solutions

11. Accessibility 101: Alt tags, Alt Nav, Degrades Gracefully

• Took 115 tab presses & 4 enter presses but I got to this page.

• Then, enter won’t work on ADD TO CART!!!!

• No image alt tags.

• Do accessibility for those in need, and those with mobile!

Interactive Technology Solutions

Top 11 Critical Usability Tips for 2011

1. Provide strong cues about where I am on site.

2. Effective search + refine.

3. Make it clear where I can and can’t click (affordances).

4. Support www.____.com and ___.com.

5. Make it easy to navigate to the “Top Tasks” on your site.

6. Create a clear visual hierarchy (visual contrast, size, shape).

7. Make content easy to scan.

8. Make content a reasonable size, font and contrast.

9. Create well structured form and provide clear assistance

10. Pass SEO 101: link, title, H1/H2 tags

11. Accessibility 101: Alt tags, Alt Nav, Degrades Gracefully

Interactive Technology Solutions

http://www.bridgelinedigital/resource-center

John Whalen

jwhalen@blinedigital.com@johnwhalen

Brian Lantz

blantz@blinedigital.com

Thank you