top 11 usability recommendations for 2011
DESCRIPTION
User Experience (UX) professionals know that audiences are demanding ever increasing levels of sophistication from your websites. However, before you invest big bucks in the latest [social/mobile/local] solution, let's make sure your site passes 11 basic tests for usability.A majority of sites still make Usability 101 mistakes. Are you leaving customers frustrated or losing business because of errors that can be fixed hours or days? Join our webinar and take our 2011 Usability Test to find out how you score (then call us to help with the social/mobile/local project).TRANSCRIPT
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
[email protected]@johnwhalen
Brian Lantz
Thank you