Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TechTalks by ResellerClub - Simran Talreja: Usability 101

169 views

Published on

Good #WebDesign isn't rocket science, anyone can achieve it. #UI #UX
#TechTalksByRC

Published in: Design
  • Be the first to comment

  • Be the first to like this

TechTalks by ResellerClub - Simran Talreja: Usability 101

  1. 1. USABILITY 101 Basic rules to make user-friendly websites and applications by
  2. 2. Usability helps users find their way on your website and helps them complete their goals in the best possible way
  3. 3. Where Should You Start?
  4. 4. Always, always, always START WITH THE USER
  5. 5. Before you start any design project, make sure you understand 2 things: ● WHO THE USER IS? ● WITH WHAT INTENTION IS HE COMING TO THE WEBSITE?
  6. 6. First, How do users behave online?
  7. 7. Users don’t read web pages - they scan to find only those words that closely resemble what they are looking for
  8. 8. Help the User find what he is looking for as quickly as possible GOAL NO.1
  9. 9. Reduce Cognitive Load - Eliminate any questions from the user’s mind GOAL NO.2
  10. 10. RULES OF USABILITY How do we achieve these goals?
  11. 11. Help the User find what he is looking for as quickly as possible GOAL NO.1 ● ORIENT THE USER ○ Where is he? ○ What are the main sections? ○ Where can he go from here?
  12. 12. How can we do this well?
  13. 13. Design an overarching structure of your website RULE NO. 1 The lay of the land
  14. 14. ● BREAK CONTENT INTO LOGICAL SECTIONS
  15. 15. ● BREAK CONTENT INTO LOGICAL SECTIONS ● WHAT CONTENT IS MORE IMPORTANT THAN THE OTHERS?
  16. 16. ● BREAK CONTENT INTO LOGICAL SECTIONS ● WHAT CONTENT IS MORE IMPORTANT THAN THE OTHERS? ● HOW SHOULD CONTENT BE ORGANIZED BASED ON THE IMPORTANCE?
  17. 17. ● BREAK CONTENT INTO LOGICAL SECTIONS ● WHAT CONTENT IS MORE IMPORTANT THAN THE OTHERS? ● HOW SHOULD CONTENT BE ORGANIZED BASED ON THE IMPORTANCE? ● WHAT COMMON ELEMENTS SHOULD EXIST ON ALL PAGES?
  18. 18. Create effective visual hierarchies RULE NO. 2 To aid scanning
  19. 19. ● PROMINENCE Use font, size and colour to establish hierarchy
  20. 20. ● PROMINENCE Use font, size and colour to establish content hierarchy ● GROUPING Related content should be visually grouped together ● Proximity
  21. 21. ● PROMINENCE Use font, size and colour to establish content hierarchy ● GROUPING Related content should be visually grouped together ● Proximity
  22. 22. ● PROMINENCE Use font, size and colour to establish content hierarchy ● GROUPING Related content should be visually grouped together ● Proximity ● NESTING What is a part of what
  23. 23. Reduce Cognitive Load - Eliminate any questions from the user’s mind GOAL NO.2
  24. 24. Use Conventions RULE NO. 3 Don’t re-invent the wheel
  25. 25. Use Conventions RULE NO. 3 Don’t re-invent the wheel
  26. 26. Use Conventions RULE NO. 3 Don’t re-invent the wheel
  27. 27. Conventions In the Virtual World
  28. 28. Conventions In the Virtual World
  29. 29. Conventions In the Virtual World
  30. 30. Conventions In the Virtual World
  31. 31. Conventions In the Virtual World
  32. 32. Make it obvious what is clickable RULE NO. 4 Design for mindless clicks
  33. 33. Make it obvious what is clickable Unclear Requires Thought Obvious! Buy Now! Compare Prices >> Buy Now! Compare Prices Compare Prices No affordance!
  34. 34. Make it obvious what is clickable LOCATION SHAPE FORMATTING If located in the menu bar, navigation bar or footer Looks like a button, has the proper affordances of being clickable Formatted like a link - font color, underline
  35. 35. Eliminate Distractions RULE NO. 5 Reduce clutter - focus on what’s important
  36. 36. Reduce content RULE NO. 6 Get rid of half of your content, and then get rid of half of what’s left!
  37. 37. TO SUMMARIZE….
  38. 38. Help users find what they’re looking for quickly TO SUMMARIZE…. #1
  39. 39. Help users find what they’re looking for quickly TO SUMMARIZE…. Eliminate any question marks in the user’s mind #1 #2
  40. 40. Help users find what they’re looking for quickly TO SUMMARIZE…. ● Design an overarching structure ● Create effective visual hierarchies ● Break pages up into logical sections Eliminate any question marks in the user’s mind #1 #2
  41. 41. Help users find what they’re looking for quickly TO SUMMARIZE…. Eliminate any question marks in the user’s mind ● Use Conventions ● Make it obvious what is clickable ● Eliminate distractions ● Reduce content #1 #2 ● Design an overarching structure ● Create effective visual hierarchies ● Break pages up into logical sections

×