1 / 52

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 Wednesday, Feb. 8, 2012.

lilika
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 Wednesday, Feb. 8, 2012 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 • Finish organization discussion • Segue from organization into navigation • Aspects of navigation • Tools for navigation • Basics of page layout and design Organization Navigation Page Layout

  3. Organization and Navigation • Organization: “How we categorize Information” • (can be by subject, task, code number, alphabet, etc.) • Navigation: “How we browse or move through information” • (can fit with organization, or can be sequential, or much more haphazard) • Navigational tools can match organization (e.g., top-level menus, breadcrumbs) or not (e.g., hyperlinks, cross-references, suggestions) • Even where navigational tools reflect organization, the user’s navigation may not (think of breadcrumbs)

  4. Analogy: Printed Book • Organization System: • Chapters • Sections • Paragraphs • Navigation System: • Table of contents • Index • Page numbers • Cross-references • … Users’ Needs Architecture Components OrganizationSystems Established over 500 years… Not all present at the dawn of printing

  5. Organization • Site organization • Content organization • Different organization methods/tools • Expressing organization/blueprints Users’ Needs Architecture Components OrganizationSystems

  6. 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 Users’ Needs Architecture Components OrganizationSystems

  7. Depth vs. Breadth “shallow but wide” “narrow but deep” Users’ Needs Architecture Components OrganizationSystems What are the tradeoffs?

  8. Non-Hierarchical Systems • Hypertext • Direct links between different information segments • Pre-dates the Web • Social tagging • “Wisdom of the mob” • Shows what everyone else likes • Web 2.0 (hype?) Users’ Needs Architecture Components OrganizationSystems

  9. “Exact” Systems • Alphabetical • Chronological • Geographical • Organizational (for Intranets) • Any inherent attribute of entities Users’ Needs Architecture Components OrganizationSystems

  10. “Inexact” Systems • Topic • Task • User • Metaphors • Hybrid • Organizational (in general) • Process Users’ Needs Architecture Components OrganizationSystems

  11. Hypertext Balmoral Charles Elizabeth Diana Elizabeth Users’ Needs Architecture Components OrganizationSystems Tony Philip

  12. Social Tagging del.icio.us flickr Users’ Needs Architecture Components OrganizationSystems del.icio.us YouTube

  13. Other Organizational Tools • Relational databases/tables • Wizards • Hybrids • . . . Users’ Needs Architecture Components OrganizationSystems

  14. Ideas in Tension • Does a hierarchical organization system defeat the entire point of hypertext? • Does a hierarchical organization system decrease emphasis on users? • Does social tagging eliminate the need for organization systems? Users’ Needs Architecture Components OrganizationSystems

  15. Organization and Behavior • Bookmarks • Arrangement of tabs and windows • Social tagging • Personal homepage • Blogs Users’ Needs Architecture Components OrganizationSystems

  16. So what do we do? Type of task/content Type of organization system User generated content (e.g. blogs) Structured database/form Overall site content/task Hierarchy (e.g. “buy a book”, “contact us”) Chapter/section Local site content/task User Tags (e.g. “cars for sale”, “product specs”) Local site content/task Hypertext (e.g., “today’s news”) Calendars/maps Frequently consulted content Task/User/Organization Related/required content Users’ Needs Architecture Components OrganizationSystems

  17. Blueprints • Blueprints are diagrams outlining the organization system of an information space • Can provide overview at different levels • Conceptual level • Physical level (i.e., how pages are actually linked) • Keep it simple and uncluttered! • Choose the appropriate level of detail Users’ Needs Architecture Components OrganizationSystems

  18. Blueprint: Conceptual Main Homepage Teaching Research OtherActivities LBSC 690 Ph.D. Students IR Colloquium Users’ Needs Architecture Components OrganizationSystems INFM 718R Publications TREC INFM 700 Projects

  19. Blueprint: Physical Index Page “teaching” “research” “other” Index Page Users’ Needs Architecture Components OrganizationSystems “teaching” “research” “other”

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

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

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

  23. Opening Moves Organization Navigation Page Layout

  24. Opening Moves Organization Navigation Page Layout

  25. Opening Moves Organization Navigation Page Layout

  26. Opening Moves Organization Navigation Page Layout

  27. End Game Organization Navigation Page Layout

  28. Middle Game Organization Navigation Page Layout

  29. Middle Game Organization Navigation Page Layout

  30. Middle Game Organization Navigation Page Layout

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

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

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

  34. Navigation Patterns $$ Organization Navigation Page Layout Mostly navigation Mostly content

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

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

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

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

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

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

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

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

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

  44. Grid Layout: NY Times Organization Navigation Page Layout

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

  46. Grid Layout: ebay Organization Navigation Page Layout

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

  48. Grid Layout: Amazon Organization Navigation Page Layout

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

  50. Navigation Overload Organization Navigation Page Layout

More Related