1. Web Navigation
22-3376 Web Design 2 // Columbia College Chicago

2. Types of Navigation

3. 1 Structural
2 Associative
3 Utility

4. Structural
Main nav (aka global nav, primary nav)
Local nav (aka sub-nav, page-level nav)
1

5. 1 HOMEPAGE
3 Case Studies
HN Header Navigation
HN.1 Contact Us
HN.3 Community
4 INSIGHTS 5 NEWS
HN.4 Social media links
FT Footer
FT.1 Legal?
HN.2 Login
HN.2.1 Login form
HN.3.1 Community site
2 Our Solution
HN.1.1 Form
2.1 Why bswift? 3.1 Overview/List
6 PRESS 7 About Us 8 Summit
2.2 for Employers
2.3 for Exchanges
2.4 for Brokers
3.2 Case Study Articles
4.1 Overview/List
4.2 Articles
5.1 List 6.1 Overview/List
6.2 Articles
7.1 Overview/bios 8.1 Landing page

13. Associative
Contextual: embedded nav, related links
Adaptive: quick links, recommendations, social
Footer
2

19. Utility
extra-site
toolboxes
language/country selectors
jump links (intra-page links)
search
3

26. Types of Pages

27. 1 Navigational
2 Content
3 Functional

28. 1 Navigational

34. 1 Navigational
2 Content

38. 1 Navigational
2 Content
3 Functional

42. Evaluating Navigation

43. 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)
1

44. 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.
!
!

45. 2
Mental
Models

46. A mental model is what the user believes about
the system at hand.
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.
(useit.com)

50. “I’m Driving”

54. “I’m Shopping”

60. 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.
3

61. What is the learning curve of an ATM?

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

65. 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
!
!

66. PROXIMITY COMMON REGION
SIMILARITY
CONNECTEDNESS
Size Shape Shade Color
LARGE TO SMALL IRREGULAR TO REGULAR DARK SHADE TO LIGHT
SATURATED TO
UNSATURATED COLOR
Gestalt Principles