8 Critical Usability Tips:  Quick low cost ways to get impressive results John Whalen, PhD Director, User Experience and D...
Usability Reviews  and  Usability Testing
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Tip 1: Navigation – KISS – Harder than you think…
Tip 1: Navigation – KISS – Harder than you think… Trying to describe  10 steps… … but page has 42 links  … 29 related to t...
Take a step back, think like the user
Make an obvious first step
Distinguish primary and secondary navigation
Provide a table of contents
Informal Test – Where should you click first? 30% Correct e.mag design 100% Correct
Tip 2: Navigation – Less is More
Tip 2: Navigation – Less is More 2 sets of tabs… Clickable buttons for navigation…  Clickable buttons for actions… Clickab...
Tip 2: Navigation – Less is More Next Previous
Informal Test – Which would you prefer? Next Previous 8% e.mag design 92%
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Tip 3: Content – Provide visual clues that direct eyes.
A B 0 Seconds
A B 5 Seconds
A B 15 Seconds After 15 seconds, users “below the fold”
Tip 4: Content – Create scan-able content ✓
Users scan content in an “F” pattern
They skip irrelevant content
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Tip 5: Interaction – Make the next step “duh” obvious
Informal Test – Where should you click next? 6% Correct Amazon 91% Correct
What makes it obvious? <ul><li>Distinct color </li></ul><ul><li>Size </li></ul><ul><li>Affordance (click-ability) </li></u...
Tip 6: Interaction – Search + Refine
Do you prefer Search + Refine? No  15% Yes 85%
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li...
Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Reciprocity:  </li></ul><ul><li>Give thi...
Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Social Validation:  </li></ul><ul><li>Yo...
Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Similarity:  </li></ul><ul><li>People  j...
Tip 8: Persuasion – Find the right social networks and provide thought leadership Source: Forrester.com
Tip 8: Persuasion – Find the right social networks and provide thought leadership <ul><li>Develop a  B.E.S.T.  formula </l...
8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>K.I.S.S. – Make the first step obvious </li></ul><ul><li>Le...
Your Summer Reading List…
THANK YOU! <ul><li>John Whalen, PhD </li></ul><ul><li>Director, User Experience </li></ul><ul><li>Twitter:  @johnwhalen </...
Upcoming SlideShare
Loading in...5
×

8 Critical Usability Tips Slideshare Post

1,032

Published on

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

No Downloads
Views
Total Views
1,032
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

8 Critical Usability Tips Slideshare Post

  1. 1. 8 Critical Usability Tips: Quick low cost ways to get impressive results John Whalen, PhD Director, User Experience and Design, e.magination
  2. 2. Usability Reviews and Usability Testing
  3. 3. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  4. 4. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  5. 5. Tip 1: Navigation – KISS – Harder than you think…
  6. 6. Tip 1: Navigation – KISS – Harder than you think… Trying to describe 10 steps… … but page has 42 links … 29 related to task at hand … 13 leaving page. Where do I start?? Notice the numbering: 4,5,6,7,8… 4,5,6,7,8…4???
  7. 7. Take a step back, think like the user
  8. 8. Make an obvious first step
  9. 9. Distinguish primary and secondary navigation
  10. 10. Provide a table of contents
  11. 11. Informal Test – Where should you click first? 30% Correct e.mag design 100% Correct
  12. 12. Tip 2: Navigation – Less is More
  13. 13. Tip 2: Navigation – Less is More 2 sets of tabs… Clickable buttons for navigation… Clickable buttons for actions… Clickable objects for navigation… Large distance between question and “Next” button Large distance between help and question
  14. 14. Tip 2: Navigation – Less is More Next Previous
  15. 15. Informal Test – Which would you prefer? Next Previous 8% e.mag design 92%
  16. 16. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  17. 17. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  18. 18. Tip 3: Content – Provide visual clues that direct eyes.
  19. 19. A B 0 Seconds
  20. 20. A B 5 Seconds
  21. 21. A B 15 Seconds After 15 seconds, users “below the fold”
  22. 22. Tip 4: Content – Create scan-able content ✓
  23. 23. Users scan content in an “F” pattern
  24. 24. They skip irrelevant content
  25. 25. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  26. 26. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  27. 27. Tip 5: Interaction – Make the next step “duh” obvious
  28. 28. Informal Test – Where should you click next? 6% Correct Amazon 91% Correct
  29. 29. What makes it obvious? <ul><li>Distinct color </li></ul><ul><li>Size </li></ul><ul><li>Affordance (click-ability) </li></ul><ul><li>Next in user eye-flow </li></ul><ul><li>Absence of any other items with that style </li></ul><ul><li>Consistency in positioning </li></ul>
  30. 30. Tip 6: Interaction – Search + Refine
  31. 31. Do you prefer Search + Refine? No 15% Yes 85%
  32. 32. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  33. 33. Top 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul><ul><li>Persuasive Design </li></ul>
  34. 34. Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Reciprocity: </li></ul><ul><li>Give things away. </li></ul><ul><li>Create an environment where you contribute, then ask for something in return. </li></ul>
  35. 35. Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Social Validation: </li></ul><ul><li>You’re making the right choice. </li></ul><ul><li>Lots of other people choose this too. </li></ul>
  36. 36. Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Similarity: </li></ul><ul><li>People just like you choose us. </li></ul>
  37. 37. Tip 8: Persuasion – Find the right social networks and provide thought leadership Source: Forrester.com
  38. 38. Tip 8: Persuasion – Find the right social networks and provide thought leadership <ul><li>Develop a B.E.S.T. formula </li></ul><ul><li>Behavioral: Everything you communicate is designed to change customer behavior </li></ul><ul><li>Essential: Your communications really help your customers succeed in their jobs </li></ul><ul><li>Strategic: Your content becomes a integral part of your business strategy </li></ul><ul><li>Targeted: Target your content so that it is truly relevant to your clients. </li></ul>
  39. 39. 8 Critical Usability Tips <ul><li>Navigation </li></ul><ul><li>K.I.S.S. – Make the first step obvious </li></ul><ul><li>Less is More – Remove unnecessary navigation </li></ul><ul><li>Content </li></ul><ul><li>Provide visual clues that direct eyes to next step </li></ul><ul><li>Create scan-able content </li></ul><ul><li>Interaction </li></ul><ul><li>Make the next step “duh” obvious </li></ul><ul><li>Search + Refine </li></ul><ul><li>Persuasion </li></ul><ul><li>Invoke reciprocity, social validation, and similarity </li></ul><ul><li>Find the right social networks and provide thought leadership </li></ul>
  40. 40. Your Summer Reading List…
  41. 41. THANK YOU! <ul><li>John Whalen, PhD </li></ul><ul><li>Director, User Experience </li></ul><ul><li>Twitter: @johnwhalen </li></ul><ul><li>Email: [email_address] </li></ul><ul><li>LinkedIn: http://www.linkedin.com/in/johnwhalen </li></ul>… or talk to us!
  1. A particular slide catching your eye?

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

×