1 / 45

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

Explore hierarchical vs. non-hierarchical systems, social tagging, blueprint structures, and design navigation systems for enhanced user experience in web layouts. Understand the importance of information organization and seamless navigation. Learn about various types of navigation patterns and system components.

tommyb
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. 23, 2011 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. 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

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

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

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

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

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

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

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

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

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

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

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

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

  16. Opening Moves Organization Navigation Page Layout

  17. Opening Moves Organization Navigation Page Layout

  18. Opening Moves Organization Navigation Page Layout

  19. Opening Moves Organization Navigation Page Layout

  20. End Game Organization Navigation Page Layout

  21. Middle Game Organization Navigation Page Layout

  22. Middle Game Organization Navigation Page Layout

  23. Middle Game Organization Navigation Page Layout

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

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

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

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

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

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

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

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

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

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

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

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

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

  37. Grid Layout: NY Times Organization Navigation Page Layout

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

  39. Grid Layout: ebay Organization Navigation Page Layout

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

  41. Grid Layout: Amazon Organization Navigation Page Layout

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

  43. Navigation Overload Organization Navigation Page Layout

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

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