TechTalks by ResellerClub - Simran Talreja: Usability 101
•
0 j'aime•536 vues
Good #WebDesign isn't rocket science, anyone can achieve it. #UI #UX #TechTalksByRC
Recommandé
Contenu connexe
En vedette
En vedette (11)
Similaire à TechTalks by ResellerClub - Simran Talreja: Usability 101
Similaire à TechTalks by ResellerClub - Simran Talreja: Usability 101 (20)
Plus de ResellerClub
Plus de ResellerClub (20)
Dernier
Dernier (20)
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
Notes de l'éditeur
- 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…”