infm 700: session 3 organization and navigation (cont’d) paul jacobs the ischool university of...
TRANSCRIPT
INFM 700: Session 3
Organization and Navigation (cont’d)
Paul JacobsThe iSchoolUniversity 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
iSchool
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
iSchool
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)
iSchool
Analogy: Printed Book Organization System:
Chapters Sections Paragraphs
Navigation System: Table of contents Index Page numbers Cross-references …
Established over 500 years… Not all present at the dawn of printing
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
Organization Site organization
Content organization
Different organization methods/tools
Expressing organization/blueprints
Users’ Needs
Architecture Components
OrganizationSystems
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
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
Depth vs. Breadth“shallow but wide”
“narrow but deep”
What are the tradeoffs?
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
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
iSchool
“Exact” Systems Alphabetical
Chronological
Geographical
Organizational (for Intranets)
Any inherent attribute of entities
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
“Inexact” Systems Topic
Task
User
Metaphors
Hybrid
Organizational (in general)
ProcessUsers’ Needs
Architecture Components
OrganizationSystems
iSchool
Hypertext
Diana
Philip
Elizabeth
Charles
Balmoral
Tony
ElizabethUsers’ Needs
Architecture Components
OrganizationSystems
iSchool
Social Taggingdel.icio.us
flickr
YouTube del.icio.us
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
Other Organizational Tools Relational databases/tables
Wizards
Hybrids
. . .
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
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
iSchool
Organization and Behavior Bookmarks
Arrangement of tabs and windows
Social tagging
Personal homepage
Blogs
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
So what do we do?
Type of task/content Type of organization system
User generated content (e.g. blogs) Structured database/formOverall site content/task Hierarchy (e.g. “buy a book”, “contact us”) Chapter/sectionLocal site content/task User Tags (e.g. “cars for sale”, “product specs”)Local site content/task Hypertext (e.g., “today’s news”) Calendars/mapsFrequently consulted content Task/User/OrganizationRelated/required content
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
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
iSchool
Blueprint: Conceptual
MainHomepage
Teaching ResearchOther
Activities
LBSC 690
INFM 718R
INFM 700
Ph.D. Students
Publications
Projects
IRColloquium
TREC
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
Blueprint: Physical
Index Page
Index Page
“other”“teaching” “research”
“teaching” “research” “other”
Users’ Needs
Architecture Components
OrganizationSystems
iSchool
Blueprint: Conceptual
MainHomepage
Teaching ResearchOther
Activities
LBSC 690
INFM 718R
INFM 700
Ph.D. Students
Publications
Projects
IRColloquium
TREC
Organization
Navigation
Page Layout
iSchool
Fitting the Pieces Together
See http://www.adobe.com/education/webtech/CS2/unit_planning2/sd_organization_id.htm
Organization
Navigation
Page Layout
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 underservedOrganization
Navigation
Page Layout
iSchool
Opening Moves
Organization
Navigation
Page Layout
iSchool
Opening Moves
Organization
Navigation
Page Layout
iSchool
Opening Moves
Organization
Navigation
Page Layout
iSchool
Opening Moves
Organization
Navigation
Page Layout
iSchool
End Game
Organization
Navigation
Page Layout
iSchool
Middle Game
Organization
Navigation
Page Layout
iSchool
Middle Game
Organization
Navigation
Page Layout
iSchool
Middle Game
Organization
Navigation
Page Layout
iSchool
Supporting the “Middle Game” Navigation systems must support moves through
the information space
Analogy: User views a projection of the information space
Information SpacePossibly Relevant Information
What the user seesOrganization
Navigation
Page Layout
iSchool
Possible “Moves”
n1n2
b2b1
s1 s2 j1 j2
narrow broaden
shift jump
Organization
Navigation
Page Layout
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
iSchool
Navigation Patterns
$$
Mostly navigation Mostly content
Organization
Navigation
Page Layout
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
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 Amazon Example from IBM
Organization
Navigation
Page Layout
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
iSchool
CRAPy Pages: Contrast
ImportantLess importantLess importantLess important
ImportantLess importantLess importantLess important
ImportantLess importantLess importantLess important
Important• Less important• Less important• Less important
Organization
Navigation
Page Layout
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
iSchool
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
iSchool
CRAPy Pages: Proximity
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
Related
Related
Less Related
Organization
Navigation
Page Layout
iSchool
Page Layout: Conventions
Navig
ation
ContentContent
Navig
ation
(Lo
cal)
Navigation (Global)
Navigation
ContentContent
Navig
ation
(Co
ntextu
al)
Organization
Navigation
Page Layout
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
iSchool
Grid Layout: NY Times
Organization
Navigation
Page Layout
iSchool
Grid Layout: NY Times
Navigation (Global)
Banner Ad
Another Ad
Content
PopularArticles
Users’ Needs
OrganizationSystems
NavigationSystems
Page Layoutand Design
iSchool
Grid Layout: ebay
Organization
Navigation
Page Layout
iSchool
Grid Layout: ebay
Navigation (Global)
Banner Ad
Search Results
Nav
igat
ion
(Lo
cal)
Navigation (Search)
Organization
Navigation
Page Layout
iSchool
Grid Layout: Amazon
Organization
Navigation
Page Layout
iSchool
Grid Layout: Amazon
Navigation (Global)
Search Results
Nav
igat
ion
(Co
nte
xtu
al)
Navigation (Contextual)
Users’ Needs
OrganizationSystems
NavigationSystems
Page Layoutand Design
iSchool
Navigation Overload
Organization
Navigation
Page Layout
iSchool
Beware: Navigation Overload
Navigation
Content
Mo
re N
avig
atio
n
Eve
n M
ore
Nav
igat
ion
Organization
Navigation
Page Layout
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