Web Usability: Making Your Sites More Awesomer
0 likes606 views
The document discusses usability for web design. It defines usability as the absence of frustration for users to accomplish tasks easily and intuitively. Key elements of usability include usefulness, effectiveness, learnability and memorability, and satisfaction. The document provides tips for usability testing at different stages of development and discusses common usability mistakes in areas like information architecture, mobile design, forms, and general web design. It also outlines several "usability maxims" or principles for designing intuitive and easy-to-use interfaces.
Web Usability: Making Your Sites More Awesomer
- 1. Usability for the Web Making Your Sites More Awesomer by Jen Riehle
- 2. What is usability? Usability is the absence of frustration. The user can use the product to do what they want, the way they want, without hinderance, hesitation or questions.
- 3. Elements of Usability Usefulness Effectiveness Learnability (...and Memorability) Satisfaction
- 4. What usability isn’t Accessibility Accessibility is having access to the things one needs to complete tasks. Accessibility helps facilitate usability.
- 5. What usability isn’t webpagesthatsuck.com; 2009 http://www.belladesoto.us/ http://www.georgehutchins.com/ http://www.historianofthefuture.com/
- 6. Usability Testing: Early Development Parallel Design with rapid prototyping Task Analysis Activity Analysis Tree-testing and card-sorting
- 7. Usability Testing: Mid-Development Focus Groups or subjects-in-tandem Questionnaires/ Surveys Advanced Usability Testing
- 8. Usability Testing: Late Development Cognitive walkthrough Benchmarking Questionnaires/ Surveys
- 9. More Testing Tips Test your users Test the right pages, not the easy pages Get the most accurate results possible Don’t take too long Don’t judge the user You don’t have to test 100’s of people!
- 10. Benefits Reduced long-term development costs Reduced support costs Increased user efficiency Increased user satisfaction
- 11. Let’s give it a shot... Let’s try a five-second usability test, shall we? See what you can remember about this website after 5 seconds.
- 13. Five Second Test What did you see? General impressions? http://fivesecondtest.com/
- 14. Why is pretty > usable? If design were ruled by aesthetics the world would be prettier but less comfortable; if ruled by usability it would be simple but boring. Perception that prettier things are easier to use and better quality Simple design does not mean simple to use
- 15. Why is pretty > usable? “pretty” wins awards Designers like “pretty” Clients like “pretty” “pretty” makes us happy and we want to come back
- 16. What do the studies say? Fitt’s Law: model of human movement- don’t make ‘em move too far to get to those links Inverted Pyramid: Put the conclusion at the beginning of the content- let people know what you’re writing about
- 17. What do the studies say? 3-Click Rule: new sites get three clicks to find content 2-Second Rule: response time expected of a click 7+/-2 Principle
- 18. Knowledge Knowledge in the world Knowledge in the head
- 20. Knowledge in the head Natural mapping Visual connections Constraints Affordances
- 21. Natural Mapping
- 23. Constraints Limitations or restrictions we must work with to complete our tasks
- 24. Constraints Industry-imposed (design standards) Client-imposed (“I like rainbows”) University-imposed (campus branding) And many others...
- 25. Affordances Possibilities which are perceivable by a user based on their goals, beliefs, values and past experiences. What do you expect out of your webpages?
- 26. Affordances Search Footer Header links home Something underlined is a link Login link in the upper right-hand corner
- 27. The Facts of Life We want a search tool We ignore banners and ads We don’t read pages, we scan them We don’t read instructions, we muddle through We don’t choose best option, we choose the first one
- 28. Designing for Error Minimize the common causes of error Make it easy to discover errors early Make it possible to undo errors - easily 404 page... or a 301 redirect
- 29. Common Web Application Mistakes Inconsistent icons, controls, naming conventions, etc. No perceived affordances No feedback No default values Unhelpful error messages
- 30. Common Info Architecture Mistakes Search and site structure not integrated Too many top-level links Missing category landing pages Made up Menu Options (mystery-meat)
- 31. Common Mobile Website Mistakes Not having one Not designing for the mobile platform Not testing on multiple devices Missing the point of the audience Over-complicating things
- 32. Common Form Mistakes Using the wrong input for the task Not enough room to type Looooong forms Convoluted information handling Non-descriptive or poorly-placed labels
- 33. Common Web Design Mistakes No search/ bad search Not changing the colors of visited links Non-scannable text Fixed font size Violating design affordances
- 34. Usability Maxims Know the user. You are not the user.
- 35. Usability Maxims Things that look the same should act the same.
- 36. Usability Maxims Make the information available in simple, natural, logical ways.
- 37. Usability Maxims Everyone makes mistakes so every mistake should be fixable. Quickly.
- 38. Usability Maxims The user should always know what’s happening.
- 39. Usability Maxims Keep it simple. Don’t overload the users’ buffers.
- 40. Usability Maxims Eliminate unnecessary decisions and illuminate the rest.
- 41. Questions? Thanks!