1 / 46

INFM 700: Session 3 Organization and Navigation (cont’d)

INFM 700: Session 3 Organization and Navigation (cont’d). Paul Jacobs The iSchool University of Maryland Tuesday, February 17, 2009.

patty
Download Presentation

INFM 700: Session 3 Organization and Navigation (cont’d)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INFM 700: Session 3Organization 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 StatesSee http://creativecommons.org/licenses/by-nc-sa/3.0/us/ for details

  2. 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. Site Organization Presentation Organization Navigation Page Layout Content Metadata

  4. 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. Blueprint: Conceptual Main Homepage Teaching Research OtherActivities LBSC 690 Ph.D. Students IR Colloquium Organization Navigation Page Layout INFM 718R Publications TREC INFM 700 Projects

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

  7. 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. Opening Moves Organization Navigation Page Layout

  9. Opening Moves Organization Navigation Page Layout

  10. Opening Moves Organization Navigation Page Layout

  11. Opening Moves Organization Navigation Page Layout

  12. End Game Organization Navigation Page Layout

  13. Middle Game Organization Navigation Page Layout

  14. Middle Game Organization Navigation Page Layout

  15. Middle Game Organization Navigation Page Layout

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

  17. Possible “Moves” n1 b2 n2 b1 narrow broaden Organization Navigation Page Layout s1 s2 j1 j2 shift jump

  18. 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. Navigation Patterns $$ Organization Navigation Page Layout Mostly navigation Mostly content

  20. 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. 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 Amazon Example from IBM Organization Navigation Page Layout

  22. 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 Organization Navigation Page Layout From: Saul Greenberg

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

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

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

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

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

  28. 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. Grid Layout: NY Times Organization Navigation Page Layout

  30. Grid Layout: NY Times Navigation (Global) Banner Ad Another Ad Content Users’ Needs OrganizationSystems NavigationSystems Page Layoutand Design Popular Articles

  31. Grid Layout: ebay Organization Navigation Page Layout

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

  33. Grid Layout: Amazon Organization Navigation Page Layout

  34. Grid Layout: Amazon Navigation (Global) Navigation (Contextual) Navigation(Contextual) Users’ Needs OrganizationSystems NavigationSystems Page Layoutand Design Search Results

  35. Navigation Overload Organization Navigation Page Layout

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

  37. 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. 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. Hierarchy Structure → Links Organization Navigation Page Layout How do you fit so many links on a page?

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

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

  42. 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. 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 Organization Navigation Page Layout George W. Furnas. (1997) Effective View Navigation. Proceedings of SIGCHI 1997 Conference on Human Factors in Computing Systems (CHI 1997).

  44. Effective View Navigation $$ Organization Navigation Page Layout

  45. The Reality Content Metadata Organization Navigation Page Layout

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

More Related