infm 700 session 3 organization and navigation cont d n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
INFM 700: Session 3 Organization and Navigation (cont’d) PowerPoint Presentation
Download Presentation
INFM 700: Session 3 Organization and Navigation (cont’d)

Loading in 2 Seconds...

play fullscreen
1 / 46

INFM 700: Session 3 Organization and Navigation (cont’d) - PowerPoint PPT Presentation


  • 492 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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