Incorporating Navigation Research Into a Design Method

1
Incorporating Navigation Research Into a Design
Method

• Victor Lombardi
• Information Architecture
• Summit 2004

2
Tell em what youre gonna tell em

• Survey recent navigation research
• Suggest ways to use research findings
• Integrate research into a design method

3
At the last Summit, there was a wonderful debate
revealing how little we agreed on
4
Scope of My Work

• Browsing and directed search
• Mostly top-down, user-centered
• Any medium, not just the web
• Excludes classification

5
The Shape of Information
6
(No Transcript)
7
Food Delivery
Home Menus Delivery About Us
Home Menus Chinese

• Chinese Menu

Chinese Greek Indian Italian
Number 01 02 03 04 05 06 07 08
Spicy? Yes Yes No No No Yes No No
Price 4.95 4.95 4.95 4.95 4.95 4.95 4.95 4
.95
Name Chicken with Garlic Sauce Garlic Chicken L
o Mein Chow Mein Veg Egg Foo Young Sesame Chick
en
Chicken with Snow Peas Fried Rice
8

• The shape of
• information is
• conveyed both by
• physical form and by
• information content.

(Dillon et al)
9
(No Transcript)
10
The form of a document is a powerful
metaphorical construct in document recognition.
11
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce (cold) 4.95 Chicken in Cold Noodles (cold)
4.95 Hot and Sour Cabbages (cold) 2.95 Sweet
And Sour Cucumber (cold) 2.95 Shrimp Dim Sum
3.95 Scallion Shrimp Toast (4) 3.95 Fried
Chicken Wings Chicken in Cold Noodles (cold)
4.95 Hot and Sour Cabbages (cold) 2.95 Sweet
And Sour Cucumber (cold) 2.95 Shrimp Dim Sum
3.95 Scallion Shrimp Toast (4) 3.95 Fried
Chicken Wings (8)
12

• 99 xxxxxxxxxxxxxxxxx xxxx xxxx xxxxxxx xxxxxx
  
  
• xxxx xxxxxxxxxx xxxxxxxxxxx xxx xxxxxxxxxx
  
  
• 99 xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxx xxxx
  
  
• 99 xx xxxxx xx xxxxxxxxxxxxxx xx xx
  xxxxxxxxx
  
• 99 xxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxx
  
  
• 99 xxxxxxxx xxxxxxxx xxxxxxx xxx xxx xxxxxxx
  
  
• 99 xxxxxxxxxxxxxxxxx xxxx xxxx xx xx xxx
  xxxxxx
  
• 99 xxxxxxxxxxxxxxxxx xxxx xxxx xxxxxxx
  xxxxxx
  
• 99 xxxx xxxxxxxxxx xxxxxxxxxxx xxx
  xxxxxxxxxx
  
• 99 xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxx xxxx
  
  
• 99 xx xxxxx xx xxxxxxxxxxxxxx xx xx
  xxxxxxxxx
  
• xxxxxxxxxxxxxxx xxxxxxxxxxxxxx xxxxxxxxx
• 99 xxxxxxxx xxxxxxxx xxxxxxx xxx xxx xxxxxxx
  
  
• 99 xxxxxxxxxxxxxxxxx xxxx xxxx xx xx xxx
  xxxxxx
  
• 99 xxxxxxxxxxxxxxxxx xxxx xxxx xxxxxxx
  xxxxxx
  
• xxxx xxxxxxxxxx xxxxxxxxxxx xxx xxxxxxxxxx
  
  
• 99 xxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxx xxxx
  

9.99 9.99 9.99 9.99 9.99 9.99 9.99 9.99 9.
99
9.99 9.99 9.99 9.99 9.99 9.99 9.99 9.99
13
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spi
cy Sauce (cold) 4.95 Chicken in Cold Noodles
(cold) 4.95 Hot and Sour Cabbages (cold) 2.95
Sweet And Sour Cucumber (cold) 2.95 Shrimp Dim
Sum 3.95 Scallion Shrimp Toast (4) 3.95 Fried
Chicken Wings (8) 2.95 Wonton in Hot Oil 3.9
5 Cold or Hot Noodles in Spicy Sauce 3.95
Marinated beef (2) 3.50 Fantail shrimp (4) 4.95
Hacked Chicken in Spicy Sauce (cold) 4.95 Chi
cken in Cold Noodles (cold) 4.95 Hot and Sour
Cabbages (cold) 2.95 Sweet And Sour Cucumber
(cold) 2.95
14
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
15
I love Chinese food
Stewart 38 years old Actor
I cant boil an egg
Has anyone seen the Ruby Foo menu?
16

• EXPERTISE
• Computers
• Menu Website
• Ordering Food

17
?
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
Shrimp Toast (4) 3.95 Fried Chicken Wings (8)
2.95 Wonton in Hot Oil 3.95 Cold or Hot Noodles
in Spicy Sauce 3.95 Marinated beef (2) 3.50
Fantail shrimp (4) 4.95 Hacked Chicken in Spicy
Sauce
18
Transitional Volatility
19

• all-or-nothing volatility distributions were
  more noticeable, and more disorienting, than more
  subtle and graded changes.

(Danielson)
20
(No Transcript)
21
(No Transcript)
22
(No Transcript)
23
(No Transcript)
24
Vegetarian Chicken Beef Pork
NOODLES
Vegetarian Chicken Beef Pork
NOODLES
Vegetarian Chicken Beef Pork
NOODLES



Mixed Veggies Spinach Broccoli Pickled Cabbag
e
Vegetarian
Chicken Feet Sun Sun Style Fun Fun Style Shre
dded
Chicken
Noodle In Broth Bean Sprouts Mandarin Cantone
se
Beef



25
Navigate
Predict

• Incorporate

Reorient
26
Keep navigation consistent
27
Keep navigation consistent
28
Change navigation in subtle ways
Keep navigation consistent
29
What Do Web Users Do?
30

• Page revisitationaccounts for 81 of page
  visits.
  
• The most frequently occurring time gap between
  subsequent pages was one second, and gaps of more
  than ten seconds were relatively rare.

(Cockburn and McKenzie)
31

• Support revisitation
• Design pages to load quickly
• Shorten navigation paths
• Minimize transient pages

32
Food Delivery Chinese Greek Indian Italian
Food Delivery Chinese Lao-tzu, a Chinese phi
losopher once said Governing a great nation is
like cooking a small fish - too much handling
will spoil it. He also said The Way that can be
experienced is not true The world that can be
constructed is not real. The Way manifests all
that happens and may happen The world represents
all that exists and may exist. To experience
without abstraction is to sense the world To
experience with abstraction is to know the world.
These two experiences are indistinguishable
Their construction differs but their effect is
the same. Beyond the gate of experience flows the
Way, Which is ever greater and more subtle than
the world.
Home Menus Delivery About Us
Home Menus Delivery About Us

33
First time user
nth time user
of site use Information priorities

• 70
• Place order
• Re-place a past order

• 30
• Comprehend breadth of service
• Understand process
• Place order

34
Effective View Navigation
35

• Despite the vastness of an information
  structure, the views must be small, moving around
  must not take too many steps and the route to any
  target be must be discoverable.

(Furnas)
36

• Always remember the strategy of putting a
  traversable infrastructure on an otherwise unruly
  information structure!

37
A Navigation Method
38
(No Transcript)
39
(No Transcript)
40
There is a wide gap between designers'
articulation of constraints and designers'
effective implementation of them.
(Chevalier Ivory)
41
ExperimentCreate GuidelinesClassify
42

• Requirements Engineering
• Site Specification
• Site Design
• Site Development
• Site Usage and Evaluation
• Site Maintenance

• Introduction
• Planning
• User analysis
• Design
• Structure
• Production
• Preparation
• Maintenance
• Administration
• e-commerce topics

43

• Site Genres
• Creating a Navigation Framework
• Creating a Powerful Homepage
• Writing and Managing Content
• Building Trust and Credibility
• Basic E-Commerce
• Advanced E-Commerce
• Helping Customers Complete Tasks
• Designing Effective Page Layouts
• Making Site Search Fast and Relevant
• Making Navigation Easy
• Speeding Up Your Site

44
ExperimentCreate GuidelinesClassifyContextua
lize
45
Summarize Research
Create Intended Experience
Gather Content
Navigation Interaction Design
Classify Information
46
Summarize Research
User (incl. expertise, revisitation, etc.)
Strategy
Operations
Marketing
Brand
Technology
47
Create Intended Experience
Storyboard
Scenario
Prototype
Identify Stages (e.g. Kuhlthaus ISP)
Address Mental Model
48
Gather Content
Identify New Content
Content Audit
Shape Content
49
Navigation Interaction Design
Link Content (e.g. with transient and destination
pages)
Change Nav Subtly
Interaction Design
Optimize Structure
50
Classify Information
Choose Model
Create Model
Classify
51
Summary

• Read research
• Do research
• Incorporate it into your own method

52
References

• Design of Sites
• Douglas van Duyne, James Landay, Jason Hong
• http//www.designofsites.com/
• Effective View Navigation
• George W. Furnas
• http//www.si.umich.edu/furnas/Papers/CHI97-EVN.2
  .pdf
  
• Expertise and the Perception of Shape in
  Information
  
• Andrew Dillon and Dillon Schaap
• Journal of the American Society for Information
  Science, 47, 10, 786-788.
  
• A Framework for Organizing Web Usability
  Guidelines
  
• Dominique Scapin et al
• http//www.tri.sbc.com/hfweb/scapin/Scapin.html
• It's the journey and the destination Shape and
  the emergent property of genre in evaluating
  digital documents
  
• Andrew Dillon and Misha Vaughan
• http//www.ischool.utexas.edu/adillon/publication
  s/journeydestination.pdf

53
References

• Spatial-Semantics How Users Derive Shape from
  Information Space
  
• Andrew Dillon
• http//www.asis.org/Publications/JASIS/vol51n0600.
  html
  
• Transitional Volatility
• David Danielson
• http//www.stanford.edu/group/siqss/itandsociety/v
  01i03/v01i03a08.pdf
  
• Usability Engineering
• by Jakob Nielsen
• http//www.amazon.com/exec/obidos/tg/detail/-/0125
  184069/noisebetweenstat
  
• What Do Web Users Do? An Empirical Analysis of
  Web Use
  
• Andy Cockburn and Bruce McKenzie
• http//www.cosc.canterbury.ac.nz/andy/papers/ijhc
  sAnalysis.pdf
  
• Web design guidelines
• IBM Ease of Use Group
• http//www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/
  572