Upload
ngokhue
View
222
Download
2
Embed Size (px)
Citation preview
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
Address BookCalculatorE-mail MessagesGraphsNotes
[User]Work Play
GamesNotesCalendar
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
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
Address BookCalculatorE-mail Messages
[User]Work Play
GamesNotesCalendarAppointmentsBooksContacts
Address BookCalculatorE-mail MessagesGraphsNotes
Page is rendered below
this line
Browser cutoff
69
Redesign ExamplePositions: Initial Solutions and design artifacts
[User]Work Play
GamesNotesCalendarAppointmentsBooksContacts
Address BookCalculatorE-mail MessagesGraphsNotes
Issue:
[User] - [Page Title]
AppointmentsBooksContacts
Address BookCalculatorE-mail Messages
GraphsNotes
GamesNotesCalendar
[User] - [Page Type]Address Book Status E-mail Messages Graphs Notes
Play Games Notes Calendar Appointments Books Contacts
Profile
[User]Work Play
Address BookCalculatorE-mail MessagesGraphsAdministration
[User]Work Play
GamesNotesCalendarAppointmentsBooksContacts
[User] Print [User]
GamesNotesCalendarAppointmentsBooksContacts
PlayAddress BookCalculatorE-mail MessagesGraphsAdministration
Solutions:
70
Redesign ExamplePositions: Initial Solutions and design artifacts
[User] - [Page Title]
AppointmentsBooksContacts
Address BookCalculatorE-mail Messages
GraphsNotes
GamesNotesCalendar
[User] - [Page Type]Address Book Status E-mail Messages Graphs Notes
Play Games Notes Calendar Appointments Books Contacts
Profile
[User]Work Play
Address BookCalculatorE-mail MessagesGraphsAdministration
[User]Work Play
GamesNotesCalendarAppointmentsBooksContacts
[User] Print [User]
GamesNotesCalendarAppointmentsBooksContacts
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.