22-3375 Web Design I 10 usability & UX guidelines that will help make you a better designer
1Mental ModelsA mental model (or map) is an internal representation of one’senvironment. 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.
A user’s mental model does not necessarily = your conceptual model
“I’m Driving” The mental model for most people ofa car is get-in-and-go, not the mechanics of combustion engines.
2The 80/20 RuleThe 80/20 rule (aka the Pareto Principle) states that 80%of the effects come from 20% of the causes.
80 percent of a product’s usage involves20 percent of its features80 percent of a town’s traffic is on20 percent of its roads80 percent of a company’s 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
3Fitts LawThe time required to rapidly move to a target area is afunction of the distance to and the size of the target.
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)
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.
Not all web sites/applications need to be as simple as an ATM
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 user’s memory for navigation or contentrecall.
6The Two Second RuleUsers shouldn’t have to wait longer than 2 seconds for certaintypes of system responses. The less they wait, the better theexperience.
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 yourwebsite’s words in a pattern thats very different from what youlearned in school. (useit.com)
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 customers are conducting their initial research to compile a shortlist of vendors. Yes, some people will read more, but most wont.• The first two paragraphs must state the most important information. Theres some hope that users will actually read this material, though• Start subheads, paragraphs, and bullet points with information- carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behavior. Theyll read the third word on a line much less often than the first two words. (useit.com)
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, Don’t Make Me Think)
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 the current location within the navigation structure.• Shows users where they can go. It shows the full range of navigation options at each hierarchical level.• Shows users how they can get back. It shows how to return directly to the home page or default page.• Provides users with alternatives. Offers more than one way to access content or perform tasks.• Is obvious to the user. Good navigation should not be hidden to the user.• It matches the users mental model. It behaves in ways that meet the users expectations.
WorksheetDoes your site navigation meet this criteria?
9ConsistencyConsistency in navigation, behavior, alignment, layout, and theoverall rhetoric of the site builds user trust and rewardsexperienced users.
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
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.