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

10 Usability & UX Guidelines

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: 10 Usability & UX Guidelines

10 usability & UXguidelines that will help make you a better designer

22-3375 Web Design I

Page 2: 10 Usability & UX Guidelines

Mental ModelsA mental model (or map) is an internal representation of one’s environment. People form mental maps to help them navigate in space.

What users believe they know about a UI strongly impacts how they use it. Mismatched mental models are common, especially with designs that try something new.

1

Page 3: 10 Usability & UX Guidelines

A user’s mental model does not necessarily = your conceptual model

Page 4: 10 Usability & UX Guidelines
Page 5: 10 Usability & UX Guidelines
Page 6: 10 Usability & UX Guidelines
Page 7: 10 Usability & UX Guidelines

“I’m Driving”

The mental model for most people of a car is get-in-and-go, not the mechanics

of combustion engines.

Page 8: 10 Usability & UX Guidelines
Page 9: 10 Usability & UX Guidelines
Page 10: 10 Usability & UX Guidelines
Page 11: 10 Usability & UX Guidelines

“I’m Shopping”

Page 12: 10 Usability & UX Guidelines
Page 13: 10 Usability & UX Guidelines
Page 14: 10 Usability & UX Guidelines
Page 15: 10 Usability & UX Guidelines
Page 16: 10 Usability & UX Guidelines

The mental model is not “reality”

Page 17: 10 Usability & UX Guidelines

The 80/20 RuleThe 80/20 rule (aka the Pareto Principle) states that 80% of the effects come from 20% of the causes.

2

Page 18: 10 Usability & UX Guidelines

80 percent of a product’s usage involves 20 percent of its features

80 percent of a town’s traf!c is on 20 percent of its roads

80 percent of a company’s revenue comes from 20 percent of its products

80 percent of innovation comes from 20 percent of the people

80 percent of the errors are causes by 20 percent of the components

80 of the critique comments are from20 percent of the students

Page 19: 10 Usability & UX Guidelines

Fitts LawThe time required to rapidly move to a target area is a function of the distance to and the size of the target.

3

Page 20: 10 Usability & UX Guidelines

Make sure that controls are near or large, particularly when rapid movements are required and accuracy is important. Likewise, make controls more distant and smaller when they should not be frequently used, or when they cause problems if accidentally activated. (Lidwell, Universal Principles of Design)

Page 21: 10 Usability & UX Guidelines

Hicks LawThe time it takes to make a decision increases as the number of alternatives increases.

The best web design creates an environment where the users feel they have just enough control to feel empowered, but not so many choices that they are overwhelmed.

4

Page 22: 10 Usability & UX Guidelines

What is the learning curve of an ATM?

Page 23: 10 Usability & UX Guidelines
Page 24: 10 Usability & UX Guidelines
Page 25: 10 Usability & UX Guidelines

Not all web sites/applications need to be as simple as an ATM

Page 26: 10 Usability & UX Guidelines

Seven 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 that you cannot rely on the user’s memory for navigation or content recall.

5

Page 27: 10 Usability & UX Guidelines

The Two Second RuleUsers shouldn’t have to wait longer than 2 seconds for certain types of system responses. The less they wait, the better the experience.

6

Page 28: 10 Usability & UX Guidelines

F-Shaped reading pattern/Users scan instead of readF for fast. That's how users read your precious content. In a few seconds, their eyes move at amazing speeds across your website’s words in a pattern that's very different from what you learned in school. (useit.com)

7

Page 29: 10 Usability & UX Guidelines

The F pattern's implications for Web design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:

• Users won't 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 won't.

• The !rst two paragraphs must state the most important information. There's 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 !nal stem of their F-behavior. They'll read the third word on a line much less often than the !rst two words.

(useit.com)

Page 30: 10 Usability & UX Guidelines

The Trunk TestAt any point in your site, users should be able to tell where they are, where they have been, and where they can go next (as if you were driven somewhere in a trunk and dropped off).(Krug, Don’t Make Me Think)

8

Page 31: 10 Usability & UX Guidelines

Why is navigation so critical to the user experience?

Poorly designed navigation accounts for approximately 80% of usability problems. Usable navigation has the following characteristics:

• 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 user's mental model. It behaves in ways that meet the user's expectations.

Page 32: 10 Usability & UX Guidelines

Worksheet

Does your site navigation meetthis criteria?

Page 33: 10 Usability & UX Guidelines

ConsistencyConsistency in navigation, behavior, alignment, layout, and the overall rhetoric of the site builds user trust and rewards experienced users.

9

Page 34: 10 Usability & UX Guidelines

Color and Consistency StudyFar and away, the most common cue for signaling that pages or elements should be grouped together was color. After color, participants looked to the grid/navigation structure to indicate belongingness. They looked to background elements and font about equally often (and third). The logo was identi!ed as a component that created 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 !rst. 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

Page 35: 10 Usability & UX Guidelines

10

Form follows function.

Page 36: 10 Usability & UX Guidelines

100 Things Every Designer Needs to Know About Peopleby Susan Weinschenk

Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules by Jeff Johnson

Universal Principles of Designby William Lidwell , Kritina Holden, Jill Butler