Navigation and Information Architecture

David KirshDept of Cognitive ScienceUCSD

IA is about organizing a site's content into categories and creating an interface to support those categories

Some Common Ideas about IA

We should distinguish between:

IA: Organizing a site's content into categories, and creating a rational network of nodes

Navigation: creating an interface to support those categories and traversing the network

• They are formally different

• Navigation needs of user are different than the IA needs of user

• Desiderata for good IA are different than for good navigation

Why they’re different

Formally different• The formal problem of navigation is to provide a user

with the signposts to efficiently and effectively browse

• like a ‘keyhole’ problem

Given a formal structure and a window in which you can see at most n neighbors find the maximally effective display

•

•

••

•

••

••

••

•

•• •

••••

• •• •

••

••

••••

•• • • • •••

•

•Last Next

Some formal IA structures

•

•

•

•

•

•

•

•

•

••

•

••

••

••

•

•• •

••••

• •• •

••

••

••••

•• • • • •••

•

•Ordered list

Tree

Graph

Lattice

List vs. Tree

•

•

•

•

•

•

•

Tree1, 2, 3, 4 …

1(2, (4, (10,11,12) 5,6), 3,(7,8,9))Philosophy

Praxis | Theoria Ethics, Aesthetics, Mind | Logic, Ontology, Epistemology

Ethics, MetaEthics, Comparative | …

Lattice vs. Graph

•

•

••

•

••

••

••

• •• •

••••

• •• •

••

••

••••

•• • • • •••

•

•

Directed Acyclic(one child, two parents)

Graphpotentially bidirectional, cyclic

Yahoo, Open Directory

Core IA problems

• Build an effective taxonomic system T– Complete

• Any page under at least one category

– Intuitive• T is in user community’s familiar language

– Consistent• Transitive, if a has progeny b, and b has progeny c, then has a

has progeny c• No node is a child of itself or a parent of itself (is its own

progeny)

Effective Taxonomy .. cont

• Balanced– Categories should have a similar number of

subcategories– We create a taxonomy that is sensitive to the

supply of documents we have rather than create an a priori categorization that marks all logical differences

• Minimize descriptive complexity of document space

Some Navigation Structures

Subcategory1

Subcategory2

Subcategory3Subcategory3

Subcategory4

subcategory5

Categories

Two levels of hierarchyNot counting home

I II III IV V VI

Technique reveals linkage between levels

•

•

••

•

••

••

••

•

Some Navigation structures

6

1 2 3 4 5 6 7 8 9 10

Navigate through a list

Another technique is the standard hyperlink, which allows one to jump to an arbitrary page, whether on your site or not.

Navigation is not so much a formal matter as one of techniques and mechanisms

•

•

•

•

•

•

•

Previous, current, next

Previous, random access, next

• Given visual display of n links, say 4, how can you show the right links to minimize the number of pages you have to view to traverse the network of pages?

Formal version of Keyhole problem

How to Minimize traversal … 1

• Change the neighborhood structure of the IA by folding etc.

Instead of O(n)we can now traversein O(√n)

This is why lists areshown in columns

Navigational Desiderata

• Greater the number of pages in a category the more important the category

• More frequently used pages are more important• More important pages should be more ‘visible’• Importance of link:

– f (#pages under it, how frequently those pages are hit, special reasons – promotion)

• So which is most important: shortest distance, average, or most frequent tour?

What shall we minimize?

• Distort the IA topology in 2D to minimize:

– Worst case tour– Average tour– Most frequent tour

How to Minimize traversal …2

• Add new nodes and structure

How to minimize traversal .. 3

• Add new connections between far away nodes

• Hyperlink to new regions• Fisheye view jumps us 1,2,4,8,16 and so is

O(log n)

Inductive Version of Keyhole problem

•• •

••••

• •• •

••

••

••••

•• • • • •••

•

•

The structure seems to be changing in the window, so it is hard to get a sense of the overall structure of the network.

On the basis of a few restricted views infer where other nodes will be. Navigation as an induction problem.

The real keyhole problem is more complex because navigation

needs are more complex

• Many navigation needs:– Where am I?

• How did I get here?• Where am I in ‘absolute’structure (or horizon

limited structure)?– Where can I go from here?– Where are P-type things? – Where is page p7?

How to Minimize traversal: Interaction

• Pan and zoom interfaces• Filter• Sort list by date, alphabet, category, level

(twisties)

How to Minimize traversal: Information Scent

• Add semantics to nodes to structure expectations

• Examples:– Good taxonomy (animal mammal rodent

squirrel red squirrel …)– Descriptive labels– Gists– Narrative (anaphora)

Theoretical solutions are partial

• Wayfinding needs of user are greater• Example: where am I?• Seems more of an art than a science of

design – Layout design to structure expectations

Actual Layout mechanisms

• IA element

– List

• Nav function

– Move sequentially

• Mechanism

• List of named links

6

1 2 3 4 5 6 7 8 9 10

Actual Layout mechanisms

• IA element

– Tree

– tree

• Nav function

– Move between nodes on same level

– Level 1a 1c– Level 2a 2d– Level 3– Move between nodes

across levels– Level 1a 2a, 1 3

• Mechanism

• primary navbar• Sitemap• Linked dropdowns• Cascade• Twistees

• Primary and secondary navbars

Actual Layout mechanisms

• IA element

– Current node

• Nav function

– Where am I?

• Mechanism

• Breadcrumb• Highlighting• url/ Directory

structure

Actual Layout mechanisms

• IA element

– List

– tree

• Nav function

– Move sequentially

• Mechanism

• List of named links

6

1 2 3 4 5 6 7 8 9 10

Questions for Discussion

• Is formal analysis relevant• How much of their nodal neighborhood do

users need to know? – Where is the horizon?

• Do users build mental models of IA/• Or do they gain navigational competence

wrt a navigational system?

Notions of consistency are different in IA and Navigation

• Navigation can be circular– Can link from child to parent – paths are often bi-

directional (home on every page)• Navigational consistency refers to consistent interface

principles to ensure reliability of expectations– Surface consistency vs. deep consistency– Surface – primary and secondary navbar in same place– Deep – recursive structure to navigation

• As descend through hierarchy subsites use same navigation style even though primary and secondary are really level n and level n+1 navigation

Core Navigation Problems

• (Navigation = Browse) ≠ Search1. Known item searching -- p

• I saw this page on this site before• Someone told me they have the dept phone #

2. Known kind of item searching -- Px• I’m looking for bargain cashmere sweaters

• P = bargain cashmere sweaters• X = any valid instance

Core Navigation Problems

3. Known function f(x) searching• I’m looking for something interesting, similar enough

to K• f = interest function, I regard as interesting any page

such that f(x) > 5• Analogous to unknown item searching with a clear

decision rule• General idea of what I’m looking for because it is related to

something I have in mind – e.g. European Universities like Lund

• Serendipity – not really looking for anything in particular, but while browsing something jumps out and you say ‘I’ve got to see that’, gotta have that

Core Navigation Problems

Navigation Needs

• Organization —“How will information be arranged? Alphabetically? Spatially? By time or topic?”

• Presentation —“How is the information conveyed? With words, charts, illustrations, photographs, audio, video…?”

• Navigation—“How will visitors find what they’re looking for? … How will they know where they are?”

• Change —“How will the elements of your site hold up over time? Will the structure support the site’s growth?”

Some Common Ideas about IA ...

The information architect maps the entire structure of the site and organizes the positioning of pages within sections, developing a functional and intuitive plan to get the user from point A to point B on the path of least resistance.

IA and navigation here?