8 Critical Usability Tips

693 views

Published on

A guide to usability testing and simple pointers to make things work better!

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

  • Be the first to like this

No Downloads
Views
Total views
693
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

8 Critical Usability Tips

  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. 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>
  34. 34. 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>
  35. 35. 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>
  36. 36. 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>
  37. 37. Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity <ul><li>Similarity: </li></ul><ul><li>People just like you choose us. </li></ul>
  38. 38. Tip 8: Persuasion – Find the right social networks and provide thought leadership Source: Forrester.com
  39. 39. 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>
  40. 40. 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>
  41. 41. Your Summer Reading List…
  42. 42. 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!

×