1. INFM 700: Session 3 Organization and Navigation (cont’d) Paul Jacobs The iSchool University of Maryland Tuesday, February 17, 2009 This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for detailshttp://creativecommons.org/licenses/by-nc-sa/3.0/us/

2. iSchool Today’s Topics Continuation of organization discussion Segue from organization into navigation Aspects of navigation Tools for navigation Basics of page layout and design Organization Navigation Page Layout

3. iSchool Site Organization Content Metadata Presentation Organization Navigation Page Layout

4. iSchool Hierarchical Organization Systems of organization are mostly hierarchical Represents a specific mode of thinking: reductionistic, decompositional, general-to-specific Why? “Natural order” Convention and familiarity Physical limitations Cognitive limitations Hierarchies are everywhere: Human organizations Computer file systems Physical file systems Biological organisms Organization Navigation Page Layout

5. iSchool Blueprint: Conceptual Main Homepage TeachingResearch Other Activities LBSC 690 INFM 718R INFM 700 Ph.D. Students Publications Projects IR Colloquium TREC Organization Navigation Page Layout

6. iSchool Fitting the Pieces Together See http://www.adobe.com/education/webtech/CS2/unit_planning2/sd_organization_id.htm Organization Navigation Page Layout

7. iSchool Design Navigation Systems Chess analogy: a few simple rules that disguise an infinitely complex game The three-part structure Openings: many strategies, lots of books about this End game: well-defined, well-understood Middle game: nebulous, hard to describe Information navigation has a similar structure! Middle game is underserved Organization Navigation Page Layout

8. iSchool Opening Moves Organization Navigation Page Layout

9. iSchool Opening Moves Organization Navigation Page Layout

10. iSchool Opening Moves Organization Navigation Page Layout

11. iSchool Opening Moves Organization Navigation Page Layout

12. iSchool End Game Organization Navigation Page Layout

13. iSchool Middle Game Organization Navigation Page Layout

14. iSchool Middle Game Organization Navigation Page Layout

15. iSchool Middle Game Organization Navigation Page Layout

16. iSchool Supporting the “Middle Game” Navigation systems must support moves through the information space Analogy: User views a projection of the information space Information Space Possibly Relevant Information What the user sees Organization Navigation Page Layout

17. iSchool Possible “Moves” n1n1 n2n2 b2b2 b1b1 s1s1 s2s2 j1j1 j2j2 narrow broaden shift jump Organization Navigation Page Layout

18. iSchool Navigation Patterns Movement in the organization hierarchy Move up a level Move down a level Move to sister Move to next (natural sequences) Move to sister of parent Drive to content Drive to advertisement Jump to related Jump to recommendations Organization Navigation Page Layout

19. iSchool Navigation Patterns $$ Mostly navigationMostly content Organization Navigation Page Layout

20. iSchool Types of Navigation Systems Global Shown everywhere Tells the user “what’s important” Local Shown in specific parts of the site Tells the user “what’s nearby” Contextual Shown only in specific situations Tells the user “what’s related” Organization Navigation Page Layout

21. iSchool You are here Remind users “where they are” Not everyone starts from the front page Don’t assume that the “back button” is meaningful Example from AmazonExample from IBM Organization Navigation Page Layout

22. iSchool Designing CRAPy Pages Contrast: make different things different to bring out dominant elements to mute lesser elements Repetition: repeat design throughout the interface to create consistency to foster familiarity Alignment: visually connect elements to create flow to convey organization Proximity: make effective use of spacing to group related elements to separate unrelated elements From: Saul Greenberg Organization Navigation Page Layout

23. iSchool CRAPy Pages: Contrast Important Less important Important Less important Important Less important Important Less important Organization Navigation Page Layout

24. iSchool CRAPy Pages: Repetition Block 1 My points You points Their points Block 2 Blah Argh Shrug http://www.trademarks.umd.edu/trademarks/web.cfm Organization Navigation Page Layout

25. iSchool CRAPy Pages: Alignment Major Bullets Secondary bullet Major Bullet Secondary bullet Alignment denotes items “at the same level” Organization Navigation Page Layout

26. iSchool CRAPy Pages: Proximity Important Less important Important Less important Important Less important Important Less important Related Less Related Organization Navigation Page Layout

27. iSchool Page Layout: Conventions Navigation Content Navigation (Local) Navigation (Global) Navigation Content Navigation (Contextual) Organization Navigation Page Layout

28. iSchool It’s all about the grid! Natural correspondence to organization hierarchy Conveys structure Easy to implement in tables Easy to control alignment and proximity Organization Navigation Page Layout

29. iSchool Grid Layout: NY Times Organization Navigation Page Layout

30. iSchool Grid Layout: NY Times Navigation (Global) Banner Ad Another Ad Content Popular Articles Users’ Needs Organization Systems Navigation Systems Page Layout and Design

31. iSchool Grid Layout: ebay Organization Navigation Page Layout

32. iSchool Grid Layout: ebay Navigation (Global) Banner Ad Search Results Navigation (Local) Navigation (Search) Organization Navigation Page Layout

33. iSchool Grid Layout: Amazon Organization Navigation Page Layout

34. iSchool Grid Layout: Amazon Navigation (Global) Search Results Navigation (Contextual) Users’ Needs Organization Systems Navigation Systems Page Layout and Design

35. iSchool Navigation Overload Organization Navigation Page Layout

36. iSchool Beware: Navigation Overload Navigation Content More Navigation Even More Navigation Organization Navigation Page Layout

37. iSchool Labeling System Direct manifestations of possible user actions Mutually constrained by: Organization system Navigation system Page layout and design Warning: poor labels can ruin a good organization and navigation system! How so? Organization Navigation Page Layout

38. iSchool Language of Labels Different types of phrases: Nouns (“Flight reservations”) Verb phrases (“Book a flight”) Gerunds (“Giving to Maryland”) Prepositional phrases (“For applicants”) Questions (“How do I sign up?”) Idiomatic (“What’s new?”, “Guestbook”, “Shopping cart”) Icons Natural affinity between label types and organization systems Organization Navigation Page Layout

39. iSchool Hierarchy Structure → Links How do you fit so many links on a page? Organization Navigation Page Layout

40. iSchool Link Organization Open Directory Project Craig’s List Organization Navigation Page Layout

41. iSchool Menu Systems Slashdot ESPN ORAA UMD Organization Navigation Page Layout

42. iSchool Wireframes Visual displays that define the layout and placement of fundamental design elements My expectations for projects: Site prototypes with wireframes Basically, everything minus “pretty graphics” Of course, appropriate graphic design can certainly enhance the presentation Organization Navigation Page Layout

43. iSchool Putting it all together… Furnas’ Theory of Effective View Navigation Definitions: Logical graph: underlying structure View graph: structure as visible from any given node Residue: indication of what lies at the target and beyond Requirements: Small views: reasonable out-degree at each node Short paths: short distances between pairs of nodes Navigability: good out-link info Residue distribution: every node should have good residue at every other node George W. Furnas. (1997) Effective View Navigation. Proceedings of SIGCHI 1997 Conference on Human Factors in Computing Systems (CHI 1997). Organization Navigation Page Layout

44. iSchool Effective View Navigation $$ Organization Navigation Page Layout

45. iSchool The Reality Content Metadata Organization Navigation Page Layout

46. iSchool Recap of Today’s Topics Organization Systems Navigation Systems How users move through the information space Dynamic in nature Different tools/consideration at each level Reflect both user and organizational behavior Page layout and design Focus on content, repetition, alignment, proximity Use wireframes to express organization and content Organization Navigation Page Layout