Chapter 7 Navigation Systems From Information Architecture: Rosenfeld and Moreville.

Chapter 7

Navigation Systems

From Information Architecture: Rosenfeld and Moreville

Navigation Systems• “Hansel and Gretel - breadcrumbs” (the old fables just keep coming back). You are

“here” scenario is very important to let the user feel familiarity.

• Three embedded navigation systems:– Global– Local– Contextual

Embedded Systems

• Each type of supplemental navigation system serves a unique purpose and is designed to fit within the broader framework of integrated searching and browsing systems

Gray Matters

• Navigation design takes us into the gray matter between: IA, interaction design, information design, interface design, visual design and usability.

Navigation Systems:

• Context is king!• Present the

structure of information hierarchy in a clear and consistent manner so the user can build a mental model

• A few “rules of thumb:”– Where are they? “YOU

ARE HERE”• (even if they enter

through a sub-page)

– Always extend the sites: name, logo and graphic identity all throughout the site

– Navigation Stress Test

1. Ignore the home page and jump directly into the middle of the site2. For each random page, can you figure out where you are in relation to the rest of the site? What major section are you in? What tells you that? What is the parent page?3. Can you tell where the page will lead you next? Are the links descriptive enough to give you a clue what each is about? Is the labeling different enough to help you choose one over another?

Navigation Systems

• Improving flexibility within your design:– Balance flexibility with

the dangers of clutter

• Lateral Navigation– Jumps across branches

• Vertical Navigation– Jumps to multiple levels

of hierarchy– Example of both Apple

website

• The most common design crimes are:– Cluelessly modifying

the visited / unvisited link colors

– Killing the back button

– Crippling the bookmark feature

Embedded Nav Systems

• Global (site wide) systems– The single consistent nav element in the

site, having a huge impact on usability, most of the time on top of the website

Embedded Nav Systems

• Local Navigation Systems– Usually left-hand side of the site, referred to as subsites– Usually because areas of content are consistent to a unique

navigation approach– Usually means that content is driven by different areas or

authors– Large organizations always exhibit this

Embedded Nav Systems

• Contextual Navigation– Nav links that are specific to a page, document or

object, more ad hoc or editorial than actual architectural,

– which users could overlook (as the result of quick scans) and could be omitted in an audit or assessment

– When used in excess, they add clutter– http://www.rei.com`

Things to consider…

• Watch out for frames --- could cripple usability– Slices up pages into

individual content repositories and disables important browser functions like “bookmarking,” visited/unvisited links, history lists; reloading a page, and printing correctly

• And there will always be a significant number of users you cannot help:– Sight impaired– Limited bandwidth

• Using textual labels instead of icons (for faster download)

Sitemaps

• Represents the top level hierarchy– Always reinforce the

information hierarchy when replicating the hierarchy

– Facilitate fast with direct access to the desired contents

– Avoid overwhelming the user with too much info

Site Index

• Site Index presents the keywords or phrases alphabetically (you can be creative here)

• This is where Known-itemKnown-item finding (the perfect catch) can be exploited

• Most challenging is dealing with the level of granularity

• Use a two-step approach: 1. User selects a term from the index2. User selects a group of documents indexed with that

term

• http://usableweb.com/siteindex.html

Site Guides

• Take the form of a guided tour, tutorial and micro-portal focused around a specific audience, topic or task

• Rules of Thumb:– The guide should be

shortthe user should always be able to exit the guide whenever they want

– Navigation should be on same spot on every page

• The Guide should be setup to answer questions

• Use screenshots whenever possible to illustrate

• If the guide includes more than a few pages, it may need its own table of contents (try to avoid that)

Personalization vs. Customization

• Personalization - serving a tailored page to a user (amazon)

vs. • Customization - giving the user direct

control over some combination of what he wants, navigation and content options, user says what he wants (yahoo)

Social Navigation

• Is built upon the simple idea that value for the individual user can be derived from observing the actions of other users, and it will increase in importance as the web develops– WIKI

Where are we now? How much do we know?

• Context, Content, Users - – drives our content choices

• User Needs (:The Perfect Catch::The Lobster Trap::Drift Netting:)

• Schemas: (Exact: [alphabetic, chronological & geographical]

and Ambiguous: [topical, audience specific, task, metaphor driven & hybrid]) )

• Structures: ( hierarchy, databases and hypertext)

• Labeling: Types: contextual, headings, navigational systems, iconic, index