Navigation and Information Architecture

1. Navigation and Information Architecture David Kirsh Dept of Cognitive Science UCSD

2. Some Common Ideas about IA IA is about organizing a site's content into categories and creating an interface to support those categories 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

3. Why they’re different • 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

4. • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 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

5. • • • • • • Tree • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Some formal IA structures Lattice Graph Ordered list

6. • • • • • • Tree • List vs. Tree 1, 2, 3, 4 … 1(2, (4, (10,11,12) 5,6), 3,(7,8,9)) PhilosophyPraxis | Theoria Ethics, Aesthetics, Mind | Logic, Ontology, Epistemology Ethics, MetaEthics, Comparative | …

7. • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Lattice vs. Graph Graphpotentially bidirectional, cyclic Directed Acyclic(one child, two parents) Yahoo, Open Directory

8. 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)

9. 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

10. • • • • • • • • • • • • Some Navigation Structures Categories I II III IV V VI Subcategory1 Subcategory2 Subcategory3 Subcategory4 subcategory5 Two levels of hierarchy Not counting home Technique reveals linkage between levels

11. • • • • • • 6 1 2 3 4 5 6 7 8 9 10 • Some Navigation structures Previous, current, next Another technique is the standard hyperlink, which allows one to jump to an arbitrary page, whether on your site or not. Previous, random access, next Navigate through a list Navigation is not so much a formal matter as one of techniques and mechanisms

12. Formal version of Keyhole problem • 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?

13. 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

14. 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?

15. What shall we minimize? • Distort the IA topology in 2D to minimize: • Worst case tour • Average tour • Most frequent tour

16. How to Minimize traversal …2 • Add new nodes and structure

17. 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)

18. • • • • • • • • • • • • • • • • • • • • • • • • • • • • • Inductive Version of Keyhole problem On the basis of a few restricted views infer where other nodes will be. Navigation as an induction 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.

19. 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?

20. How to Minimize traversal: Interaction • Pan and zoom interfaces • Filter • Sort list by date, alphabet, category, level (twisties)

21. 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)

22. 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

23. IA element List Nav function Move sequentially 6 1 2 3 4 5 6 7 8 9 10 Actual Layout mechanisms • Mechanism • List of named links

24. 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 Actual Layout mechanisms • Mechanism • primary navbar • Sitemap • Linked dropdowns • Cascade • Twistees • Primary and secondary navbars

25. IA element Current node Nav function Where am I? Actual Layout mechanisms • Mechanism • Breadcrumb • Highlighting • url/ Directory structure

26. IA element List tree Nav function Move sequentially 6 1 2 3 4 5 6 7 8 9 10 Actual Layout mechanisms • Mechanism • List of named links

27. 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?

30. 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

33. Core Navigation Problems • (Navigation = Browse) ≠ Search • Known item searching -- p • I saw this page on this site before • Someone told me they have the dept phone # • Known kind of item searching -- Px • I’m looking for bargain cashmere sweaters • P = bargain cashmere sweaters • X = any valid instance

34. Core Navigation Problems • Known functionf(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

35. Core Navigation Problems • 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

36. Navigation Needs

37. 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?”

38. 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?