Information Architecture & Design BOF:Navigation Systems ... · PDF fileInformation...

Razorfish

October 1, 2002

Information Architecture & DesignBOF:Navigation Systems andDesign Rationale

2

What are Navigation Systems?

Information Architecture is “the structuraldesign of an information space to facilitatetask completion and intuitive access tocontent”

—Rosenfeld and Morville,Information Architecture for the World Wide

Web, 2000Navigation is a spatial metaphor used todescribe the user’s process of selectingcontent and completing tasks in aninformation spaceA Navigation System is the visualrepresentation of the informationarchitecture to the user, regardless of thetopic or categorization

While JupiterConsumer Surveydata indicate that 71percent of onlineusers are satisfiedwith online navigation,61 percent would usea given site moreoften if navigationwere “easy andintuitive.”

Jupiter Media Metrix,Site Navigation:

Differentiation andCustomer Loyalty via

Native Navigation,2001

3

Types of NavigationGlobal Navigation! List Styles!Horizontal Styles!Vertical Styles

Utility Navigation

Quick-access Pulldown

User-type Navigation

Task-focused Navigation

4

Global Navigation

Represents the main structure of the site tothe user; should support user tasks

Users generally want to know:! Where am I?! Where can I go from here?! How do I get back to where I was?

Hierarchy should generally be broaderrather than deeper

Screen real estate should be allocatedjudiciously; users may not travel betweensections using global navigation as often asyou might think

For almost sevenyears, my studieshave shown thesame user behavior:users look straightat the content andignore thenavigation areaswhen they scan anew page.

Jakob Nielsen,Alertbox,

January 9, 2000

5

Types of global navigation systems

List styles! Menu List! Circular List! Directory! Modular

Horizontal styles! Horizontal Nav Bar/ Tabs! Horizontal Pulldown! “L” Shaped

Vertical styles! Left Nav Bar! Right Nav Bar! Left Nav with Rollover! Left Nav with Spillopen

6

List Styles

Menu List! “Green-screen” CRT terminals commonly used menu navigation! Used now usually for very small sites with only two levels of hierarchy! Displays navigation options down the center of the page, sometimes with

graphics or text descriptions associated

Circular List! Design elements added to menu list create visual interest! Navigation elements move to nav bar on subsequent pages

Directory

Modular

New York Public Library

New York Public Library

9

Lampshades

10

McDonald’s

McDonald’s 2

12

List Styles

Menu List

Circular List

Directory! Lists 1st and some 2nd level navigation options in columns in center of page! Often known as “Yahoo!” style navigation! Usually uses “breadcrumb” trail to show navigation path down the

hierarchy (breadcrumbs are not exclusive to this style)! Appropriate for sites where the taxonomy is the user experience

Modular

13

Google Directory

14

Google 2

15

List Styles

Menu List

Circular List

Directory

Modular! Access to lower-level pages provided via modules (blocks) in page body! Less emphasis on categorizing pages, more on user tasks! Surfaces functionality to provide more context, fewer clicks

16

SprintPCS

17

Types of global navigation systems

List styles! Menu List! Circular List! Directory! Modular

Horizontal styles! Horizontal Nav Bar/ Tabs! Horizontal Pulldown! “L” Shaped

Vertical styles! Left Nav Bar! Right Nav Bar! Left Nav with Rollover! Left Nav with Spillopen

18

Horizontal styles

Horizontal Nav Bar or “Tabs”! Navigation elements arranged in a horizontal strip across the top! Sometimes buttons designed to look like folder tabs! Reverse highlighting denotes current section! 2nd level options can appear in second bar – “layer cake”! Number of navigation categories limited by horizontal real estate

“L” Shaped

Horizontal Pulldown

19

Amazon

20

Apple

21

Horizontal styles

Horizontal Nav Bar or “Tabs”

“L” Shaped! 1st level options arranged horizontally; 2nd level arranged vertically! Color and shading can be used to show relationship between levels! Very common in early days of web; used less frequently now

Horizontal Pulldown

22

NYNMA

23

Horizontal styles

Horizontal Nav Bar or “Tabs”

“L” Shaped

Horizontal Pulldown! Pulldowns at top of page mimic familiar software application design! “Tools in the drawers” vs. “Paths through the landscape”

24

Internet World

25

Citibank

26

Types of global navigation systems

List styles! Menu List! Circular List! Directory! Modular

Horizontal styles! Horizontal Nav Bar/ Tabs! Horizontal Pulldown! “L” Shaped

Vertical styles! Left Nav Bar! Right Nav Bar! Left Nav with Rollover! Left Nav with Spillopen

27

Vertical styles

Left Nav Bar! Navigation elements arranged vertically down the left side of page! Most common navigation style! Provides flexibility in number of navigation options

Right Nav Bar! Navigation elements arranged controversially on right side of page! Closer to scroll bar but breaks with common Western text conventions

Left Nav with Rollover

Left Nav with Spillopen

28

Wine Store

29

Audi

30

Vertical styles

Left Nav Bar

Right Nav Bar

Left Nav with Rollover! 2nd level options (and even 3rd level options) appear on mouseover! Speeds access to lower level pages but users do not see content on 1st

level page

Left Nav with Spillopen

31

Bed Bath & Beyond 1

32

Bed Bath & Beyond 2

33

Bed Bath & Beyond 3

34

Bed Bath & Beyond 4

35

Bed Bath & Beyond 5

36

Vertical styles

Left Nav Bar

Right Nav Bar

Left Nav with Rollover

Left Nav with Spillopen! Visually communicates hierarchical relationships between pages! If spillopen occurs on page reload, users may not see new navigation

options! Pushes anything below the left nav down the page

37

MSDN Library

38

MSDN Library2

39

MSDN Library3

40

Cisco 1

41

Cisco 2

42

Cisco 3

43

Cisco 2 Repeat 2nd Tier

44

Cisco 4 – Products Flyout

45

Cisco 3 – Steps

46

Cisco 3

47

Schwab

48

Types of NavigationGlobal Navigation! List Styles!Horizontal Styles!Vertical Styles

Utility Navigation

Quick-access Pulldown

User-type Navigation

Task-focused Navigation

49

Utility Navigation

Utilities are tools or functions that are not part of the overall sitetaxonomy

Common examples include:! Shopping cart! Store Locator! Profile! Contact Us

Often utilities are generic options that could appear on any site;differentiated from global navigation which is site-specific

Placement on page should be visually distinct from globalnavigation; often utilities are set in small type and placed in theupper right corner

!Help!Customer Service!Site Map

50

West Marine

51

Alamo

52

Cisco 3 – Global Nav

53

Cisco 3 – Sitewide Toolkit

54

Quick access pulldown

! Some sites use a pulldown menu to provide quick access to 1st

and 2nd levels of the taxonomy

! Can provide navigation access to many pages using verysmall amount of real estate; but hides options and forcesusers to click to see what’s there

! Useful for large sites that are visited frequently by expert users;these users will become familiar with the site structure

! Not useful for smaller sites or those with infrequent visitors;requires too much recall

! Should use exactly the same structure as global navigation toavoid confusion

55

Firestone

56

Cisco 3 - Pulldown

57

User type navigation

! Sites are beginning to offer navigation by user type as well asthrough the categories of global navigation

! Users may not be able to identify if what they need is in “Office”or “Business Solutions,” but can identify that they are part ofan “Educational Institution”

! Useful for sites who want to address the needs of particularcustomer groups; evidences a stronger user focus

! Requires additional pages to address needs of specificaudiences; those pages often have links back to the overalltaxonomy

58

BigChalk

59

Island

60

Task-focused navigation

! Global navigation systems oftenstructure information without directlyaddressing user tasks

! A user who wants to “attend a seminar”would not know whether to look under“Products,” “Services,” or “Support”

! Task-focused navigation addresses thisproblem directly by identifying mostcommon user needs and listing themusing active verbs

! Requires additional pages to addressneeds of specific audiences; thosepages often have links back to theoverall taxonomy

Your homepageshould offerusers a clearstarting point forthe main one tofour tasks they'llundertake whenvisiting your site.

Jakob Nielsen,Alertbox,

January 9, 2000

61

Avaya

62

Other Systems

! Animated Systems (flash/dhtml)

! Non-euclidean Hyperbolic Trees

63

Other Systems

! Animated Systems (flash/dhtml)

! Non-Euclidean Hyperbolic Trees

plumbdesign Visual Thesaurus (www.visualthesaurus.com)

Hyperbolic data from Young Hyun of CAIDA , San Diego Supercomputer facility

64

Investigating Navigation Directions

! There is more then one solution.

! There is not always a solution thatoutweighs all other directions

! Tradeoffs and decisions during thedesign process are made for manyreasons! Software Limitations! Screen Real Estate! Stakeholder preferences

! This is rarely a formalized processduring design.

65

Design Rationale

! Based on work done on ProcessOriented Design Rationales! Graphical Issue-Based System (gIBIS),

Conklin & Yakemovic, 1991

! Issues are stated

! Positions are put forth as a “potential”solution(s) or response to the issue

! Arguments Support Positions

! Sub-Issues can branch off of the mainissue

66

Design Rationales come in handy…

! When a proposed solution has anunanticipated limitation duringdevelopment or evolution.! Rapid “backtracking”! Documentation of Design revisions

! When an external party wants to see thereasoning process that led to decisions! Shows Accountability! Shows as many avenues were examined as

possible! Lets the client participate in the design

process by decision tree

“C.Y.A.”

Anonymous

67

Redesign Example

! When a proposed solution has an unanticipatedlimitation during development or evolution! Rapid “backtracking”! Documentation of Design revisions

[User]Work Play

GamesNotesCalendarAppointmentsBooksContacts

Print

Address BookCalculatorE-mail MessagesGraphsNotes

[User]Work Play

GamesNotesCalendar

Print

Address BookCalculatorE-mail Messages

Issue: Redesign for a system that was not intended to scale and that must deal with

software limitations.

68

Redesign ExampleIssue: Redesign for a system that was not

intended to scale and that must deal withsoftware limitations.

Logo

Lorem

Global footer

Search

Dolor

Ipsum

Sit Amet

Select AreaArea SelectionLogin

Logout Change password

[User]Work Play

GamesNotesCalendarAppointmentsBooksContacts

Print

Address BookCalculatorE-mail MessagesGraphsNotes

Enter the contents of your email below. You can type a message to anyone inyour address book or to any contacts. You can mail them appointments fromyour calendar or tell them about books that you would like to read.

Page Title

Message*:

Done

Subject*:

Cancel

To:

From*:

Reply To:

BCC:

[User]Work Play

GamesNotesCalendar

Print

Address BookCalculatorE-mail Messages

[User]Work Play

GamesNotesCalendarAppointmentsBooksContacts

Print

Address BookCalculatorE-mail MessagesGraphsNotes

Page is rendered below

this line

Browser cutoff

69

Redesign ExamplePositions: Initial Solutions and design artifacts

[User]Work Play

GamesNotesCalendarAppointmentsBooksContacts

Print

Address BookCalculatorE-mail MessagesGraphsNotes

Issue:

[User] - [Page Title]

AppointmentsBooksContacts

Print

Address BookCalculatorE-mail Messages

GraphsNotes

GamesNotesCalendar

[User] - [Page Type]Address Book Status E-mail Messages Graphs Notes

Play Games Notes Calendar Appointments Books Contacts

Print

Profile

[User]Work Play

Print

Address BookCalculatorE-mail MessagesGraphsAdministration

[User]Work Play

Print

GamesNotesCalendarAppointmentsBooksContacts

[User] Print [User]

GamesNotesCalendarAppointmentsBooksContacts

Print

PlayAddress BookCalculatorE-mail MessagesGraphsAdministration

Solutions:

70

Redesign ExamplePositions: Initial Solutions and design artifacts

[User] - [Page Title]

AppointmentsBooksContacts

Print

Address BookCalculatorE-mail Messages

GraphsNotes

GamesNotesCalendar

[User] - [Page Type]Address Book Status E-mail Messages Graphs Notes

Play Games Notes Calendar Appointments Books Contacts

Print

Profile

[User]Work Play

Print

Address BookCalculatorE-mail MessagesGraphsAdministration

[User]Work Play

Print

GamesNotesCalendarAppointmentsBooksContacts

[User] Print [User]

GamesNotesCalendarAppointmentsBooksContacts

Print

PlayAddress BookCalculatorE-mail MessagesGraphsAdministration

Solutions:Arguments:SupportingSmallest real-estate

Objecting:Hides navigation options

Vertical Push: **

Arguments:SupportingVertical Push: ****

All objects displayed

Objecting:Legibility decreases

Arguments:SupportingVertical Push: ****

Dynamic development

Objecting:Objects are hidden

71

Design Rationales cont…

! There are more formal methodologiesestablished for larger projects

! Decision Representation Language! Quantifiable weights to criteria (arguments)! Can be used to inherit relationships so that

design changes are automated.! Not very feasible for quick decisions or

small projects! Requires a formal semantics system! J. Lee & K.-Y. Lai, 1991

72

Recommendations

! Follow widely-established conventions for global and utilitynavigation

! Create broader, shallower hierarchies that enable users to see a widerange of options

! Consider how users will want to cross-navigate when allocatingscreen real-estate to navigation

! Use rollovers to speed users to lower level pages – but don’t neglectthe underlying information architecture and interface design

! Consider using supplemental navigation systems, like user-type ortask-focused navigation, if your site is large enough or your contentsupports them

! Document Design Rationale when possible for accountability anddirect representation of design direction.

73

joseph.michiels@razorfish.com

www.razorfish.com