INFM 700: Session 3 Organization and Navigation (cont’d) Paul Jacobs The iSchool University of Maryland Wednesday, Feb. 8, 2012 This work is licensed under.

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