Download - Navigation and Information Architecture
![Page 1: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/1.jpg)
Navigation and Information Architecture
David KirshDept of Cognitive ScienceUCSD
![Page 2: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/2.jpg)
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
![Page 3: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/3.jpg)
• 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
![Page 4: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/4.jpg)
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
![Page 5: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/5.jpg)
Some formal IA structures
•
•
•
•
•
•
•
•
•
••
•
••
••
••
•
•• •
••••
• •• •
••
••
••••
•• • • • •••
•
•Ordered list
Tree
Graph
Lattice
![Page 6: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/6.jpg)
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 | …
![Page 7: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/7.jpg)
Lattice vs. Graph
•
•
••
•
••
••
••
• •• •
••••
• •• •
••
••
••••
•• • • • •••
•
•
Directed Acyclic(one child, two parents)
Graphpotentially bidirectional, cyclic
Yahoo, Open Directory
![Page 8: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/8.jpg)
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)
![Page 9: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/9.jpg)
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
![Page 10: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/10.jpg)
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
•
•
••
•
••
••
••
•
![Page 11: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/11.jpg)
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
![Page 12: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/12.jpg)
• 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
![Page 13: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/13.jpg)
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
![Page 14: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/14.jpg)
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?
![Page 15: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/15.jpg)
What shall we minimize?
• Distort the IA topology in 2D to minimize:
– Worst case tour– Average tour– Most frequent tour
![Page 16: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/16.jpg)
How to Minimize traversal …2
• Add new nodes and structure
![Page 17: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/17.jpg)
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)
![Page 18: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/18.jpg)
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.
![Page 19: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/19.jpg)
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?
![Page 20: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/20.jpg)
How to Minimize traversal: Interaction
• Pan and zoom interfaces• Filter• Sort list by date, alphabet, category, level
(twisties)
![Page 21: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/21.jpg)
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)
![Page 22: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/22.jpg)
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
![Page 23: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/23.jpg)
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
![Page 24: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/24.jpg)
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
![Page 25: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/25.jpg)
Actual Layout mechanisms
• IA element
– Current node
• Nav function
– Where am I?
• Mechanism
• Breadcrumb• Highlighting• url/ Directory
structure
![Page 26: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/26.jpg)
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
![Page 27: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/27.jpg)
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?
![Page 28: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/28.jpg)
![Page 29: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/29.jpg)
![Page 30: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/30.jpg)
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
![Page 31: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/31.jpg)
![Page 32: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/32.jpg)
![Page 33: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/33.jpg)
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
![Page 34: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/34.jpg)
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
![Page 35: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/35.jpg)
• 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
![Page 36: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/36.jpg)
Navigation Needs
![Page 37: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/37.jpg)
• 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?”
![Page 38: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/38.jpg)
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?
![Page 39: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/39.jpg)
![Page 40: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/40.jpg)
![Page 41: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/41.jpg)
![Page 42: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/42.jpg)
![Page 43: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/43.jpg)
![Page 44: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/44.jpg)
![Page 45: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/45.jpg)
![Page 46: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/46.jpg)
![Page 47: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/47.jpg)
![Page 48: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/48.jpg)
![Page 49: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/49.jpg)
![Page 50: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/50.jpg)
![Page 51: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/51.jpg)
![Page 52: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/52.jpg)
![Page 53: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/53.jpg)
![Page 54: Navigation and Information Architecture](https://reader035.vdocument.in/reader035/viewer/2022062316/568167da550346895ddd36dd/html5/thumbnails/54.jpg)