View
273
Download
1
Category
Tags:
Preview:
Citation preview
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
Recommended