22-3376 Web Design 2 // Columbia College Chicago

Web Navigation

Types of Navigation

Structural1

Associative2

Utility3

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

1

bswift.com SITE MAPupdated Nov 1, 2011

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

3.1 Overview/List2.1 Why bswift?

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

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

2

Utility extra-sitetoolboxeslanguage/country selectorsjump links (intra-page links)search

3

Types of Pages

Navigational 1

Content2

Functional3

Navigational 1

Navigational 1

Content2

Navigational 1

Content2

Functional3

Evaluating Navigation

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)

1

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.

!

!

2 MentalModels

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)

“I’m Driving”

“I’m Shopping”

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.

3

What is the learning curve of an ATM?

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

4

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 from20 percent of the students

!

!

PROXIMITY COMMON REGION

SIMILARITY

Size Shape Shade Color

CONNECTEDNESS

LARGE TO SMALL IRREGULAR TO REGULAR DARK SHADE TO LIGHTSATURATED TO

UNSATURATED COLOR

Gestalt Principles