Web Site Navigation November 2002 The core of a web site Building a User Friendly Web Site.

Web Site Navigation

November 2002

The core of a web site

Building a User Friendly Web Site

“Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.”

–Hansel and Gretel

Quick Overview

• What is Web Site Navigation?

• It’s about the End User

• Organizing a Web Site

• Navigation Techniques

• What’s New: Navigation Innovation

• Resources

Web Site Navigation

What is it?

Why should you care?

It’s about the End User

• Web sites are used by people

People are Emotional

People have innate traits

• Web is still evolving but…

• Creativity can interfere with usability

People Are Emotional!

We do not like:

Feeling stupid

Being lost

Getting overwhelmed

And we have limitations …

Decisions

• Logic Decision• Analysis Paralysis• Satisfying + Sufficing =

Satisficing

Locus of Attention

One thing at a time

Locus of Attention - Habit

Locus of Attention - Habit

Locus of Attention – Multi Tasking

Web Usage – The Theory

• Read text• Figure out

organization• Weigh all options• Carefully decide on

link

Web Usage - In reality

• Quickly scan page• Looking for a

halfway decent match

• Click on first match• Use the Back button

The Web is still developing but…

• The web is still growing• No longer a novelty• Users expect web sites that work

Creativity Can Interfere

• Avoid Design Centric Sites• Avoid Latest and Greatest• Remember the End User!

Uncommon Common Sense

Organization: Hierarchies

• Hierarchies• Challenges• Schema• Labeling

Hierarchies

• Organizational Charts• Family Trees• Books

Shallow Hierarchy

Deep Hierarchy

Hierarchy Guidelines

• The X number of clicks rule• 7 plus or minus 2• Mindless choices

Organization: Challenges

• Ambiguity• Heterogeneity• Perspective• Internal Politics• Organizational Scheme & Structure

Organization: Schema

Exact– Alpha– Chrono– Geo

Ambiguous

– Topical

– Task oriented

– Audience specific

– Metaphor-driven

Organization: Labeling

• Consistency • Web standards• Professional / Field

standards• Metaphors

Navigation: Types

HierarchicalGlobalLocalRemoteAd Hoc

Hierarchical Navigation

Global Navigation

Local Navigation

Remote Navigation

Ad Hoc Navigation

Navigation: Tools

• Browser features• Search engines• Drop Down Menus• Navigation bars• Bread crumb trial

• Embedded links• Icons• Frames• Indexes (indices for some

of you)

• .PDFs

Browser Features

• Back and Forward Button• History Menu• Bookmarks• Color coded hyperlinks• Destination URL

Search Engines

Drop Down Menus

Navigation Bars

• Top = Good• Bottom = Required• Left = Acceptable• Right = Avoid

Bread Crumb Trail

You are here: Home> Hobbies> Book Collecting> Welcome

Embedded Links

Icons

Frames

Just Say No

Indexes

.PDFs

Users with Disabilities

The two themes of Accessible Web Design are…

1. Ensuring graceful transformation.

2. Making content understandable & navigable

Where to Start

• Goals• Audience• Use Cases• Mapping/Hierarchies• Usability testing• Graphic designers

At the Beginning …

Use Case

Site Mapping

Usability Testing

The Trunk Test• What site is this?• What page am I on?• What are the major sections of this site?• What are my options on this level?• Where am I in the scheme of things• How can I search?

Innovations in Navigation

• Concept Mapping

• ZUI

Concept Mapping

• Institute for Human and Machine Cognition at the University of Florida

• http://cmap.coginst.uwf.edu/index.html

Concept Mapping

Concept Mapping (STORM-LK)

Concept Mapping – METOC Detail

COMMAND HISTORY of the NASP METOC

The “Aerological” Office at Naval Air Station, Pensacola, is almost as old as naval aviation itself.  It was the first weather office established to support naval aviation. The requirement for an Aerological Unit was identified on 8 May 1917 when a request was made to the Commandant of the Pensacola Naval Station to employ a competent civilian to keep records of air conditions and other meteorological phenomena at NAS Pensacola.  The necessity for a Meteorological Unit was further recognized when wind directions and velocities aloft to altitudes of approximately 1,500 feet were needed in connection with the dirigible, free balloon, and kite balloon …

METOC Experts who helped build STORM-LK

Commander Dan Soper is Commander of the NASP METOC.  He  has served as Combat Officer and Weapons Officer in addition to his service in aerography.  As Ocean Services Officer at Pearl Harbor  and Fleet Oceanographer for the Second Fleet, he was responsible for all oceanographic products. At Pearl he also prepared the "Local Forecaster's Handbook." He also served as Instructor in Environmental Support for the Atlantic Tactical and Navy Doctrine School, as Executive Officer at the Naval Ice Center, and as amember of the Staff of the OCeanographer of the Navy.  His diverse experience amounts to nearly 14,500 hours at weather forecasting and oceanography-related tasks.

…

Zooming User Interfaces

• PAD++• Developed at University of Maryland• www.cs.umd.edu/pad++

Zooming User Interfaces

Zooming User Interfaces

Zooming User Interfaces

Resources

• Don’t Make Me Think! – Steve Krug

• Information Architecture for the World Wide Web - Louis Rosenfeld and Peter Moreville

• Designing Web Usability – Jakob Nielsen

• The Human Interface – Jef Raskin

More Resources

• UseIt.com – Jakob Nielsen• WebMonkey.com• W3C.org• HumanFactors.com

Conclusion –

Don’t Make Them Think!

People want to know:

Where am I?

Where have I been?

Where can I go?

Thank you!

Questions?

Comments?

Contact Information

Modus:web, inc.1940 Eleanor AveSt. Paul, MN 55116612.710.2704www.moduswc.com

Andrea [email protected]