infm 700: session 3 organization and navigation (contd) paul jacobs the ischool university of...
DESCRIPTION
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 Organization Navigation Page LayoutTRANSCRIPT
INFM 700: Session 3Organization and Navigation (cont’d)
Paul JacobsThe iSchoolUniversity 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
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
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
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
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
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: ConceptualMain
Homepage
Teaching Research OtherActivities
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: ConceptualMain
Homepage
Teaching Research OtherActivities
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 Space Possibly 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: ProximityImportant• 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
Navigation
ContentContent
Navigation(Local)
Navigation (Global)
Navigation
ContentContent
Navigation
(Contextual)
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 AdContent
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
(Loc
al)
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
(Con
text
ual)
Navigation (Contextual)
Users’ Needs
OrganizationSystems
NavigationSystems
Page Layoutand Design
iSchool
Navigation Overload
Organization
Navigation
Page Layout
iSchool
Beware: Navigation Overload
Navigation
Content
Mor
e N
avig
atio
n
Even
Mor
e N
avig
atio
n
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