Chapter 6: Street signs and Breadcrumbs

DESIGNING NAVIGATION

In-store Navigation   Web 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:
    Utilities
  • 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  >  Learning  >  Usability  >  "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

  1. They're self-evident
  2. They're hard to miss
  3. They're slick
  4. 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