10 usability & ux guidelines

Download 10 Usability & UX Guidelines

Post on 28-Jan-2015




1 download

Embed Size (px)


http://shawncalvert.com/webdesign-1Web Design 1 Columbia College Chicago


  • 1. 22-3375 Web Design I 10 usability & UX guidelines that will help make you a better designer

2. 1Mental ModelsA mental model (or map) is an internal representation of onesenvironment. People form mental maps to help them navigate inspace.What users believe they know about a UI strongly impacts howthey use it. Mismatched mental models are common, especiallywith designs that try something new. 3. A users mental model does not necessarily = your conceptual model 4. Im DrivingThe mental model for most people ofa car is get-in-and-go, not the mechanicsof combustion engines. 5. Im Shopping 6. The mental model is not reality 7. 2The 80/20 RuleThe 80/20 rule (aka the Pareto Principle) states that 80%of the effects come from 20% of the causes. 8. 80 percent of a products usage involves20 percent of its features80 percent of a towns traffic is on20 percent of its roads80 percent of a companys revenue comes from20 percent of its products80 percent of innovation comes from20 percent of the people80 percent of the errors are causes by20 percent of the components80 of the critique comments are from20 percent of the students 9. 3Fitts LawThe time required to rapidly move to a target area is afunction of the distance to and the size of the target. 10. Make sure that controls are near or large, particularly whenrapid movements are required and accuracy is important.Likewise, make controls more distant and smaller when theyshould not be frequently used, or when they cause problems ifaccidentally activated. (Lidwell, Universal Principles of Design) 11. 4Hicks LawThe time it takes to make a decision increases as thenumber of alternatives increases.The best web design creates an environment wherethe users feel they have just enough control to feelempowered, but not so many choices that they areoverwhelmed. 12. What is the learning curve of an ATM? 13. Not all web sites/applications need to be as simple as an ATM 14. 5Seven plus or minus one (or 2)Short-term memory holds only about 7 chunks of information,and these fade from your brain in about 20 seconds.This rule is highly debatable, but the main takeaway is thatyou cannot rely on the users memory for navigation or contentrecall. 15. 6The Two Second RuleUsers shouldnt have to wait longer than 2 seconds for certaintypes of system responses. The less they wait, the better theexperience. 16. 7F-Shaped reading pattern/Users scan instead of readF for fast. Thats how users read your precious content. In a fewseconds, their eyes move at amazing speeds across yourwebsites words in a pattern thats very different from what youlearned in school. (useit.com) 17. The F patterns implications for Web design are clear and show theimportance of following the guidelines for writing for the Web insteadof repurposing print content: Users wont read your text thoroughly in a word-by-word manner.Exhaustive reading is rare, especially when prospective customersare conducting their initial research to compile a shortlist ofvendors. Yes, some people will read more, but most wont. The first two paragraphs must state the most importantinformation. Theres some hope that users will actually read thismaterial, though Start subheads, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the leftside of your content in the final stem of their F-behavior. Theyllread the third word on a line much less often than the first twowords.(useit.com) 18. 8The Trunk TestAt any point in your site, users should be able to tell where theyare, where they have been, and where they can go next (as ifyou were driven somewhere in a trunk and dropped off).(Krug, Dont Make Me Think) 19. Why is navigation so critical to the user experience?Poorly designed navigation accounts for approximately 80%of usability problems. Usable navigation has the followingcharacteristics: Shows users where they are. There is a clear indication of thecurrent location within the navigation structure. Shows users where they can go. It shows the full range ofnavigation options at each hierarchical level. Shows users how they can get back. It shows how to return directlyto the home page or default page. Provides users with alternatives. Offers more than one way toaccess content or perform tasks. Is obvious to the user. Good navigation should not be hidden tothe user. It matches the users mental model. It behaves in ways that meetthe users expectations. 20. WorksheetDoes your site navigation meetthis criteria? 21. 9ConsistencyConsistency in navigation, behavior, alignment, layout, and theoverall rhetoric of the site builds user trust and rewardsexperienced users. 22. Color and Consistency StudyFar and away, the most common cue for signaling that pages orelements should be grouped together was color. After color,participants looked to the grid/navigation structure to indicatebelongingness. They looked to background elements and font aboutequally often (and third). The logo was identified as a component thatcreated consistency only once in the study.1. Color is the most powerful cue to coherence and connection both within a page and across pages within a site.2. Grid structure and persistent navigation elements support perceived consistency across pages within a site.3. Common logo is not a powerful indicator of connectedness.4. Users "see" color first. And they will attempt to derive a meaningful grouping from similarly colored elements whether the designer intends it to or not.from http://www.humanfactors.com/downloads/mar05.asp 23. 10Form follows function. 24. 100 Things Every Designer Needs to Know About People by Susan WeinschenkDesigning with the Mind in Mind: Simple Guide toUnderstanding User Interface Design Rulesby Jeff JohnsonUniversal Principles of Designby William Lidwell , Kritina Holden, Jill Butler