Top 11 Usability Recommendationsfor 2011<br />June 10, 2011<br />
Agenda<br />Introduction<br />Top 11 Usability Issues<br />Q & A with your sites<br />Interactive Technology Solutions<br />
Introducing Bridgeline Digital<br />We help our customers achieve their key initiatives by leveraging web technologies<br ...
Introducing our Speakers<br />John Whalen<br />VP User Experience<br />Brian Lantz<br />EVP & General Manager<br />Interac...
Webinar Series<br />The Secrets to a Great Web Redesign: Getting the ROI from your investmentThu, Jun 16, 2011 10:00 AM - ...
ForeSee Satisfaction Scores Are Not Improving<br />Interactive Technology Solutions<br />
Maybe we need…<br />Interactive Technology Solutions<br />
Or maybe we need… SoLoMo?<br />Interactive Technology Solutions<br />
Let’s not forget what we are we trying to avoid?<br />Interactive Technology Solutions<br />
Let’s not forget what we are we trying to avoid?<br />Interactive Technology Solutions<br />
Time to revisit Usability 101<br />Navigation<br />Content<br />Interaction<br />Visual Design<br />…And now on to the Top...
1. Provide strong cues about where I am on site<br />Interactive Technology Solutions<br />
1. Provide strong cues about where I am on site<br /><ul><li>Top Nav + SelectedNav visual cue
Breadcrumbs
Secondary Nav location
Page Title Prominent</li></ul>Interactive Technology Solutions<br />
2. Effective Search + Refine<br />Interactive Technology Solutions<br />
2. Effective Search + Refine<br /><ul><li>Location of search box
Search results ordered by relevance
No extraneous information on page
Provide option to “Search + Refine”</li></ul>Interactive Technology Solutions<br />
3. Make it clear where I can and can’t click (affordances)<br />Interactive Technology Solutions<br />
3. Make it clear where I can and can’t click (affordances)<br />Interactive Technology Solutions<br />
3. Make it clear where I can and can’t click (affordances)<br />Interactive Technology Solutions<br />
4. Support www.____.com and ___.com<br />Interactive Technology Solutions<br />
5. Make it easy to navigate to the “Top Tasks” on your site<br />Interactive Technology Solutions<br />
6. Create a clear visual hierarchy<br />Interactive Technology Solutions<br />
6. Create a clear visual hierarchy<br />Pretty good…<br />Interactive Technology Solutions<br />
6. Create a clear visual hierarchy<br />Well…<br />Interactive Technology Solutions<br />
6. Create a clear visual hierarchy<br />I’ve never seen all three done correctly…<br />Use multiple cues:<br />Visual Cont...
7. Make Content Easy to Scan<br />Classic “F-pattern” when scanning<br />Interactive Technology Solutions<br />
7. Make Content Easy to Scan<br />Not easy to scan…no hierarchy, no contrast.<br />Interactive Technology Solutions<br />
7. Make Content Easy to Scan<br />What do you think?<br />Interactive Technology Solutions<br />
7. Make Content Easy to Scan<br />Middle section isn’t bad…<br />Interactive Technology Solutions<br />
7. Make Content Easy to Scan<br />…except it keeps going and going.<br />Interactive Technology Solutions<br />
8. Make content a reasonable size, font and contrast<br />Am I that old, or is that a small font!<br />Interactive Technol...
8. Make content a reasonable size, font and contrast<br />Center column pretty good, if there wasn’t so much else on the p...
9. Create well structured form and provide clear assistance<br />Let’s consider this in detail – it’s a million dollar pag...
9. Create well structured form and provide clear assistance<br /><ul><li>Good that they provide help and a phone number.
Upcoming SlideShare
Loading in...5
×

Top 11 usability recommendations for 2011

1,026

Published on

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).

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,026
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Top 11 usability recommendations for 2011

  1. 1. Top 11 Usability Recommendationsfor 2011<br />June 10, 2011<br />
  2. 2. Agenda<br />Introduction<br />Top 11 Usability Issues<br />Q & A with your sites<br />Interactive Technology Solutions<br />
  3. 3. Introducing Bridgeline Digital<br />We help our customers achieve their key initiatives by leveraging web technologies<br />The Building Blocks For Web Success<br />Interactive Technology Solutions<br />
  4. 4. Introducing our Speakers<br />John Whalen<br />VP User Experience<br />Brian Lantz<br />EVP & General Manager<br />Interactive Technology Solutions<br />
  5. 5. Webinar Series<br />The Secrets to a Great Web Redesign: Getting the ROI from your investmentThu, Jun 16, 2011 10:00 AM - 11:00 AM EDT<br />ROI of Web Engagement Management; iAPPS DemonstrationThu, Jun 23, 2011 1:00 PM - 2:00 PM EDT<br />Interactive Technology Solutions<br />
  6. 6. ForeSee Satisfaction Scores Are Not Improving<br />Interactive Technology Solutions<br />
  7. 7. Maybe we need…<br />Interactive Technology Solutions<br />
  8. 8. Or maybe we need… SoLoMo?<br />Interactive Technology Solutions<br />
  9. 9. Let’s not forget what we are we trying to avoid?<br />Interactive Technology Solutions<br />
  10. 10. Let’s not forget what we are we trying to avoid?<br />Interactive Technology Solutions<br />
  11. 11. Time to revisit Usability 101<br />Navigation<br />Content<br />Interaction<br />Visual Design<br />…And now on to the Top 11…<br />Interactive Technology Solutions<br />
  12. 12. 1. Provide strong cues about where I am on site<br />Interactive Technology Solutions<br />
  13. 13. 1. Provide strong cues about where I am on site<br /><ul><li>Top Nav + SelectedNav visual cue
  14. 14. Breadcrumbs
  15. 15. Secondary Nav location
  16. 16. Page Title Prominent</li></ul>Interactive Technology Solutions<br />
  17. 17. 2. Effective Search + Refine<br />Interactive Technology Solutions<br />
  18. 18. 2. Effective Search + Refine<br /><ul><li>Location of search box
  19. 19. Search results ordered by relevance
  20. 20. No extraneous information on page
  21. 21. Provide option to “Search + Refine”</li></ul>Interactive Technology Solutions<br />
  22. 22. 3. Make it clear where I can and can’t click (affordances)<br />Interactive Technology Solutions<br />
  23. 23. 3. Make it clear where I can and can’t click (affordances)<br />Interactive Technology Solutions<br />
  24. 24. 3. Make it clear where I can and can’t click (affordances)<br />Interactive Technology Solutions<br />
  25. 25. 4. Support www.____.com and ___.com<br />Interactive Technology Solutions<br />
  26. 26. 5. Make it easy to navigate to the “Top Tasks” on your site<br />Interactive Technology Solutions<br />
  27. 27. 6. Create a clear visual hierarchy<br />Interactive Technology Solutions<br />
  28. 28. 6. Create a clear visual hierarchy<br />Pretty good…<br />Interactive Technology Solutions<br />
  29. 29. 6. Create a clear visual hierarchy<br />Well…<br />Interactive Technology Solutions<br />
  30. 30. 6. Create a clear visual hierarchy<br />I’ve never seen all three done correctly…<br />Use multiple cues:<br />Visual Contrast<br />Color<br />Shape<br />Interactive Technology Solutions<br />
  31. 31. 7. Make Content Easy to Scan<br />Classic “F-pattern” when scanning<br />Interactive Technology Solutions<br />
  32. 32. 7. Make Content Easy to Scan<br />Not easy to scan…no hierarchy, no contrast.<br />Interactive Technology Solutions<br />
  33. 33. 7. Make Content Easy to Scan<br />What do you think?<br />Interactive Technology Solutions<br />
  34. 34. 7. Make Content Easy to Scan<br />Middle section isn’t bad…<br />Interactive Technology Solutions<br />
  35. 35. 7. Make Content Easy to Scan<br />…except it keeps going and going.<br />Interactive Technology Solutions<br />
  36. 36. 8. Make content a reasonable size, font and contrast<br />Am I that old, or is that a small font!<br />Interactive Technology Solutions<br />
  37. 37. 8. Make content a reasonable size, font and contrast<br />Center column pretty good, if there wasn’t so much else on the page…<br />Interactive Technology Solutions<br />
  38. 38. 9. Create well structured form and provide clear assistance<br />Let’s consider this in detail – it’s a million dollar page for Geico.<br />Interactive Technology Solutions<br />
  39. 39. 9. Create well structured form and provide clear assistance<br /><ul><li>Good that they provide help and a phone number.
  40. 40. Let me know where problem is, what problem is, example of how to fix.
  41. 41. Provide error message where problem is.
  42. 42. Don’t let the names of the fields disappear as I type the information.</li></ul>Interactive Technology Solutions<br />
  43. 43. 10. Make sure you’re covering SEO 101<br />Really nicely done…<br /><ul><li>Have a strong, meaningful page title on each page
  44. 44. Use H1, H2 tags for key content.</li></ul>Interactive Technology Solutions<br />
  45. 45. 11. Pass SEO 101: link, title, H1/H2 tags<br />…so what happened?<br /><ul><li>Have a strong, meaningful page title on each page.
  46. 46. Have a human-understandable linking structure.
  47. 47. Use H1, H2 tags for key content.</li></ul>Interactive Technology Solutions<br />
  48. 48. 11. Accessibility 101: Alt tags, Alt Nav, Degrades Gracefully<br /><ul><li>Each image should have an alt tag.
  49. 49. Navigation, major titles should be text.
  50. 50. Ensure you can use alternate means of entry (e.g., keyboard only OR iPad)</li></ul>Interactive Technology Solutions<br />
  51. 51. 11. Accessibility 101: Alt tags, Alt Nav, Degrades Gracefully<br /><ul><li>Took 115 tab presses & 4 enter presses but I got to this page.
  52. 52. Then, enter won’t work on ADD TO CART!!!!
  53. 53. No image alt tags.
  54. 54. Do accessibility for those in need, and those with mobile!</li></ul>Interactive Technology Solutions<br />
  55. 55. Top 11 Critical Usability Tips for 2011<br />Provide strong cues about where I am on site.<br />Effective search + refine.<br />Make it clear where I can and can’t click (affordances).<br />Support www.____.com and ___.com.<br />Make it easy to navigate to the “Top Tasks” on your site.<br />Create a clear visual hierarchy (visual contrast, size, shape).<br />Make content easy to scan.<br />Make content a reasonable size, font and contrast.<br />Create well structured form and provide clear assistance<br />Pass SEO 101: link, title, H1/H2 tags<br />Accessibility 101: Alt tags, Alt Nav, Degrades Gracefully<br />Interactive Technology Solutions<br />
  56. 56. Thank you<br />John Whalen<br />jwhalen@blinedigital.com<br />@johnwhalen<br />Brian Lantz<br />blantz@blinedigital.com<br />http://www.bridgelinedigital/resource-center <br />Interactive Technology Solutions<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×