Information Architecture

Navigation

Goals1. Organization systems

2. Navigation: Conventions

3. Login & Forms Task | Dreamweaver

4. Client Project 2 Blue Archer CONSOL Entergy Center

Content Organization

An organizational system consists of an organizational scheme and an organizational structure.

Organizational schemes: classification systems for organizing content into groups

Organizational structures: defining the relationships among the groups

Exact organizational schemes Alphabetical scheme uses alphabet to order

content items (e.g., author index in a library).

Chronological scheme uses time to order the content items (e.g., books and history books).

Geographical scheme uses location to order items (e.g., floor plans, weather maps)

Ambiguous Organizational SchemesContent and Navigation

Ambiguous organizational schemes Situations where there is more than one

reasonable way to group things.e.g., Books organized by author, title, by

audience, price, etc. Types:

1) Topical

2) Task-oriented

3) Audience-specific

Topical organizational scheme

Organizes content by topic or subject Encyclopedia Chapter titles in textbooks E.g., fiction/non-fiction, clothing - shoes,

shirts, coats; mike, bread, meats, etc.

Topical organizational scheme

Topics/Categories

Task-oriented organizational scheme

Example:

Autobytel.com

By Tasks

Audience-specific organizational scheme

Specific audience

s

Hybrid organizational scheme

Combines multiple organizational schemes

Quite common, but must be done with care to avoid confusion

Example: Nordstrom

Hybrid organizational scheme

Category

Audience

Task

Hybrid organizational scheme

Category

Audience

Task

Types of organizational structures

Hierarchy Hypertext Database

Hierarchical structure

CLOTHINGBOOKS BUYMUSIC

HOME

ROCKJAZZ CLASSICAL

FOLK

REGGIE

http://www.surl.org/usabilitynews/42/hypertext.asp

http://www.otal.umd.edu/SHORE/bs04/

Hypertext organizational structures

Database organizational structures

Navigation

Navigation

“Navigation isn’t a feature of the Web site, it is the Web site… without it there’s no there.”

Krug, S. (2001)

Design for the user’s convenience, not yours.

Nielsen, J. (2006)

Navigation: How do we find something? Do you decide to ask first or browse

Search dominant usersLink dominant users

We make our way though hierarchy using signs to guide us.

Source: Krug, S. (2001). Don’t make me think.

In a Store

On the Web

Navigation

The Web lacks cues we rely on in physical spaces.

Source: Krug, S. (2001). Don’t make me think.

Navigation

1. No sense of scale – how big is this site?

2. No sense of direction (no left, right, up down).

3. No sense of location.

Navigation

Size/scale | Location | Direction

Text density???

Navigation

Unlike physical spaces, on the Web, we must remember where something is in the conceptual hierarchy and retrace steps.

The importance of the Home page (Home base) Depicting the information hierarchy The Back button

Navigation: Purpose

Informs user about what is on site. Make a visible hierarchy to convey what is on site.

Informs user how to use site - where to begin and the options available.

Builds user confidence.

Navigation

Conventions

Navigation: Conventions

Good navigation design shows users: where they are where things are located, and how to get the things they need.

Navigation: Conventions

It is predictable and makes people feel comfortable exploring the site.

Doesn’t need to be studied or memorized.

Reflects users impression of how information should be represented in Web space.

Site IDSections

Utilities

Subsections

Location

Local navigation

Small Text Navigation

Global Location

Conventions

Navigation | site map Translate site map | flowchart into navigation

Global Navigation

Sub-level Navigation

Site IDSections

Utilities

Subsections

Location

Local navigation

Small Text Navigation

Conventions

Global Location

Site IDSections

Utilities

Subsections

Location

Navigation: Conventions

Navigation: Conventions Navigation is in same location on every page.

Exceptions – the home page, forms.

Mains topics static and appear at once – users skim the choices

Keep Site ID (logo) on every page of site – upper left.

Site ID is the highest element in the hierarchy

Site IDBooks

Computer Books

Perl scripting made easy

Conveys that items are under this section

12

3

4

Navigation: Conventions

Site ID must look like a Site ID

Site ID should also function as a link to Home.

Add Search to every page: A box, a button, and Search No unique words

Navigation: Conventions

• Primary/persistent navigation also includes space for secondary navigation.

Primary

Secondary

Navigation: ConventionsUtilities

• Utilities are not part of the hierarchy

• Helps users use the site

• Provide information about site publisher

• Only include the most important 4-5 utilities on Primary navigation

• Make utilities list less prominent than sections

Navigation: Page names

• Name your pages

• Page Name should frame content unique to the page.

• Names should be prominent

• Name should match what user clicks.

Site IDBooksName pages

Navigation: You are here

Tell the user his/her location – you are here.

Navigation: Breadcrumbs

Use “>” between levels Use small type Special visual treatment for last item

Navigation: Links | Repeated information Placing duplicate links all over the page

decreases likelihood that viewers see them.

Fewer objects on the page, the more likely people will notice them.

With many competing elements, all items lose prominence.

Navigation: Conventions | Words

People tend to skip meaningless words.

Remove extraneous words.

Links that start with identical or redundant phrases require people to carefully read all of them to glean the differences.

Help people quickly differentiate links by giving them informative names.

Navigation: Your page should answer these questions. What is the site ID? What page am I on (page name)? What are the major sections (global

navigation) Where am I? (global and local navigation) How can I search?