Chapter 6: Street signs and Breadcrumbs

DESIGNING NAVIGATION

Web navigation

You're usually trying to find something
You decide whether to ask first or browse first
If you choose to browse, you make your way through a hierarchy, using signs to guide you
Eventually, if you can't find what you're looking for, you'll leave.

The unbearable lightness of browsing

No sense of scale
No sense of direction
No sense of location
- Back button accounts for 30-45% of all web clicks

The overlooked purpose of navigation

It gives us something to hold on to
It tells us what's here
It tells us how to use the site
It gives us confidence in the people who built it

Web navigation conventions

Navigation Conventions

Don't look now but I think it's following us

5 elements of navigation
1. Site ID
2. A way home
3. Sections
4. A way to search
5. Utilities
Navigation should be uniform throughout pages

Rule Exceptions (Did I say every page)

The Home Page
Forms - require minimal navigation

Site ID (Now I know we're not in Kansas)

Top Left
Needs to be on every page
Distinctive Typeface
Recognizable Graphic
Hierarchy:
- This site
  - sections of this site
    - sub sections
      - sub sub-sections, etc.
        
        this page
        
        areas of this page
        
        items on this page

The Sections (Primary Navigation)

The Utilities

Examples:
not really part of the content heirarchy
Less Prominent
Only 4 or 5 of the most needed tools

"There's no place like home"

include in sections or utilities
or add the word "Home" to the Site ID

A Way to Search

Search Examples

Avoid:
- fancy wording
- instructions
- options

Secondary, Tertiary, and whatever comes after tertiary

Work out top-to-bottom navigation from the beginning
Third level navigation needs as much though as the first level

Page names, or "Why I love to drive in L.A."

Street signs are big. When you're stopped at an intersection, you can read the sign for the next cross street.
They're I the right place--hanging over the street you're driving on, so all you have to do is glance up.
Page names are street signs
Every Page needs a name
The name needs to be in the right place
The name needs to match what I clicked

"You are here"

Navigation Conventions

Breadcrumbs

You are here: Home > Assignments > Outlines > "Don't Make Me Think" > Chapter 6

Put them at the top
Use > between levels
Use tiny type
Use the words "You are here."
Boldface the last item
Don't use them instead of a page name

Four reasons why I love tabs

They're self-evident
They're hard to miss
They're slick
They suggest a physical space

If you love amazon so much, why don't you marry it?

They're drawn correctly
They load fast
- Two image system rather than rollovers
  - Because rollovers have flaws
  - There is a misguided belief that rollovers will load faster after the first page
They're color coded
There's a tab selected when you enter the site

Try the trunk test

If you're dumped in the middle of a site, you should be able to answer:
- What site is this? (Site ID)
- What page am I on? (Page name)
- What are the major sections of this site? (Sections)
- What are my options at this level? (Local navigation)
- Where am I in the scheme of things? ("You are here" indicators)
- How can I search?
How to perform the trunk test:
1. Choose a page anywhere in the site at random, and print it
2. Hold it at arms length or squint so you can't really study it closely
3. As quickly as possible, try to find and circle each item in the list below. (You won't find all of the items on every page)
  1. Site ID
  2. Page Name
  3. Sections and subsections
  4. Local navigation
  5. "You are here" indicators
  6. Search