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. 1
Mental Models
A 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.

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

7. “I’m Driving”
The mental model for most people of
a car is get-in-and-go, not the mechanics
of combustion engines.

11. “I’m Shopping”

16. The mental model is not “reality”

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

18. 80 percent of a product’s usage involves
20 percent of its features
80 percent of a town’s traffic 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 from
20 percent of the students

19. 3
Fitts Law
The time required to rapidly move to a target area is a
function of the distance to and the size of the target.

20. 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)

21. 4
Hicks Law
The 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.

22. What is the learning curve of an ATM?

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

26. 5
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.

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

28. 7
F-Shaped reading pattern/Users scan instead of read
F 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)

29. 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 first 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 final stem of their F-behavior. They'll
read the third word on a line much less often than the first two
words.
(useit.com)

30. 8
The Trunk Test
At 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)

31. 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.

32. Worksheet
Does your site navigation meet
this criteria?

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

34. Color and Consistency Study
Far 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 identified 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 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

35. 10
Form follows function.

36. 100 Things Every Designer Needs to Know About People
by Susan Weinschenk
Designing with the Mind in Mind: Simple Guide to
Understanding User Interface Design Rules
by Jeff Johnson
Universal Principles of Design
by William Lidwell , Kritina Holden, Jill Butler