TechTalks by ResellerClub - Simran Talreja: Usability 101
•
0 likes•536 views
The document provides guidelines for improving website usability. It recommends starting with understanding the intended user and their goals. Key goals are to help users find information quickly and eliminate questions. This should be achieved by designing an clear overall site structure, using visual hierarchies to group related content, following conventions, making interactive elements obvious, eliminating distractions, and reducing excess content. The guidelines emphasize starting with the user perspective and ensuring the design supports their efficient use of the site.
Recommended
More Related Content
Viewers also liked
Viewers also liked (11)
Similar to TechTalks by ResellerClub - Simran Talreja: Usability 101
Similar to TechTalks by ResellerClub - Simran Talreja: Usability 101 (20)
More from ResellerClub
More from ResellerClub (20)
Recently uploaded
Recently uploaded (11)
TechTalks by ResellerClub - Simran Talreja: Usability 101
- 1. USABILITY 101 Basic rules to make user-friendly websites and applications by
- 2. Usability helps users find their way on your website and helps them complete their goals in the best possible way
- 3. Where Should You Start?
- 4. Always, always, always START WITH THE USER
- 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. First, How do users behave online?
- 7. Users don’t read web pages - they scan to find only those words that closely resemble what they are looking for
- 8. Help the User find what he is looking for as quickly as possible GOAL NO.1
- 9. Reduce Cognitive Load - Eliminate any questions from the user’s mind GOAL NO.2
- 10. RULES OF USABILITY How do we achieve these goals?
- 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. How can we do this well?
- 13. Design an overarching structure of your website RULE NO. 1 The lay of the land
- 14. ● BREAK CONTENT INTO LOGICAL SECTIONS
- 15. ● BREAK CONTENT INTO LOGICAL SECTIONS ● WHAT CONTENT IS MORE IMPORTANT THAN THE OTHERS?
- 16. ● BREAK CONTENT INTO LOGICAL SECTIONS ● WHAT CONTENT IS MORE IMPORTANT THAN THE OTHERS? ● HOW SHOULD CONTENT BE ORGANIZED BASED ON THE IMPORTANCE?
- 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. Create effective visual hierarchies RULE NO. 2 To aid scanning
- 19. ● PROMINENCE Use font, size and colour to establish hierarchy
- 20. ● PROMINENCE Use font, size and colour to establish content hierarchy ● GROUPING Related content should be visually grouped together ● Proximity
- 21. ● PROMINENCE Use font, size and colour to establish content hierarchy ● GROUPING Related content should be visually grouped together ● Proximity
- 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. Reduce Cognitive Load - Eliminate any questions from the user’s mind GOAL NO.2
- 24. Use Conventions RULE NO. 3 Don’t re-invent the wheel
- 25. Use Conventions RULE NO. 3 Don’t re-invent the wheel
- 26. Use Conventions RULE NO. 3 Don’t re-invent the wheel
- 27. Conventions In the Virtual World
- 28. Conventions In the Virtual World
- 29. Conventions In the Virtual World
- 30. Conventions In the Virtual World
- 31. Conventions In the Virtual World
- 32. Make it obvious what is clickable RULE NO. 4 Design for mindless clicks
- 33. Make it obvious what is clickable Unclear Requires Thought Obvious! Buy Now! Compare Prices >> Buy Now! Compare Prices Compare Prices No affordance!
- 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. Eliminate Distractions RULE NO. 5 Reduce clutter - focus on what’s important
- 37. Reduce content RULE NO. 6 Get rid of half of your content, and then get rid of half of what’s left!
- 39. TO SUMMARIZE….
- 40. Help users find what they’re looking for quickly TO SUMMARIZE…. #1
- 41. Help users find what they’re looking for quickly TO SUMMARIZE…. Eliminate any question marks in the user’s mind #1 #2
- 42. 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
- 43. 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
Editor's Notes
- To put it into perspective.. "What is usability"...."accomplishing their goals in the best possible way" Show next slide when Abbas says "So where should we start"
- Abbas: "So where should we start"
- Simran: "Usability always always always starts with the user" till “what this user is coming to your site for”
- Simran: "Before you start any design project..." Show next slide when "where do we really start.."
- "Core behavioural aspects of users before we dive into designing" Change slide when I say "Studies have proven.."
- “Studies have proven Users dont ready anything.. they scan" till “there are 2 goals we should keep in mind when approaching design”
- "The first goal of your design should be to..."
- “And the second goal is... till ... small things that add unnecessary noise in a customer's mind.."
- “This is where we actually get into the rules of usability”
- “So when we speak about the first goal, our intetion is to orient the user” till “let him navigate and find his way around”
- “If you really want to do this well, you can do 2 or 3 things…”
- “The number one thing is..” till “think deeply about the lay of the land”
- “What content is important - how can you categorize that content into logical blocks”
- “What content is more important than the others - so prioritize your content”
- “And then maybe at a very rough level… how would you want to place these blocks”
- “So this is where a little bit of your navigation comes into the pic” till “how about you touch upon the 2nd rule as well”
- “So the 2nd rule is would be to you create effective visual hierarchy”... “people don’t read they scan”
- “So visual hierarchy is all about having the most prominent pieces of information called out” … you could be using spacing”
- “You could be doing grouping”
- Or you have a broad level category and sub-categories within them”
- So grouping is one thing, nesting is another till “It’s very very clear.
- “You know the other thing is you want to use conventions” … “some of that comes from trying to understand what things are”
- “Now if you use conventions”....
- “Things like a stop sign” … “you would know it’s a stop sign”
- “It could be in english, it could be in any other language..”
- “You have visual cues which are universally accepted in the web world as well”...
- “So when you come to a website people always expect the Site ID..” till “i’m going to click on the logo and go back to the homepage”
- “Similarly we have the shopping cart” till “it’s pre-processed”
- “The search icon”
- “Even social networking share buttons” till “wow! That seems like a really wise quote”
- “Making it obvious what’s clickable”...
- “A lot of flat design has come into the picture where affordances are not clear” till “you may not understand right”
- “So whenever you are designing buttons, links, make sure that you use the location, the shape and the formatting” till “he should just know it”
- “Another really important thing is to eliminate distractions” till “thats what’s when we speak about distractions”
- “When you go to a homepage, it is super cluttered” Till “so thats the best way to eliminate distractions”
- “So you need very very little content” till “and then get rid of half of what’s left”
- “Be really, really stringent” Till “so there’s absolutely no point in putting them up there” → see this slide in presentation mode.
- “I think in summary there’s 2 imortant things..”
- “Goal no.1 is..”
- “And goal no.2 is..”
- “You can do no.1 by…”
- “You can do no.2 by…”