SBD:Information Design

Chris North

cs3724: HCI

HW#1

• HTA vs. Flow chart

Problem scenarios

summativeevaluation

Information scenarios

claims about current practice

analysis ofstakeholders,field studies

Usability specifications

Activityscenarios

Interaction scenarios

iterativeanalysis ofusability claims andre-design

metaphors,informationtechnology,HCI theory,guidelines

formativeevaluation

DESIGN

ANALYZE

PROTOTYPE & EVALUATE

Execution

Action plan

Systemgoal

Last month’sbudget... ?

Interpretation

PerceptionMakingsense

GULF OFEVALUATION

GULF OFEXECUTION

Stages of Action in HCIfocus ofinformationdesign

focus ofinteractiondesign

Information Design

• Define and arrange the visual (or other modality) elements of a user interface

• “Big picture”, overall info model

• Detailed screen layout

1. Perceiving

2. Interpreting

3. Making sense

Activity design scenarios:transform current activities to

use new design ideas

Information design scenarios:

Elaborate to include visual presentation details

Last month’sbudget... ?

Making Sense of an Information Display

color, shading, linescharacters, squares,spatial organization

Excel worksheet, a cellis selected, formula isdisplayed at top

Income worksheet,Total tax income is beingcalculated, the wrong multiplier is being used

Making Sense

Interpretation

Perception

Analogy to Verbal Comm.

1. Hear• Sound waves

• Syllables

2. Parse• Syntax

• Language = vocabulary + grammar

3. Understand• Semantics, meaning

Perception

• Visually encode information

• Vision:• lines, shapes, colors “extracted”

• grouped as rows, columns, grids, …

• very fast, generally with no conscious thought

• Design goal:• make perceptual process rapid and accurate

Gestalt Principles of PerceptionProximity Similarity

Closure Area

Symmetry Continuity

Gestalt in User Interface Design

Try the “squint test”...What principles are in action?

Minimal significant difference

• To organize information elegant designs exploit: – position, thematic repetition, low-key color schemes,

and white space,

• instead of:– lines, boxes, and labels

Task-oriented grouping

• Visual distinctions for grouping, but not too many distinctions

• More information vs. complexity

Interpretation

• Results of perception is recognized

• Visual language• Vocabulary:

• Grammar:

• Design goal: make the interpretation process rapid and accurate

Leveraging Familiarity

• Familiar “vocabulary”:• Widgets

• Text Labels

• Speak the user’s language

Images: Realism and Refinement

• Abstract: • Road signs

• Refined for speed

• Realistic images • Accurately and memorable

• but are more complex, take longer to process

• Remove unnecessary detail

Leveraging AffordancesAn affordance gives clues about how to use

an object• door knob, steering wheel, pen

• scrollbar, title bar, window “handles”

• pointer feedback

• Visible vs. popup

Affordances

Making Sense of Information

• Connecting to user tasks:• Do I understand what the system is telling me? • Were my actions successful? • Have I made progress?

• Build the “big picture”

• Design goal: help the user make connections between UI information and task goals

• execution/evaluation cycle

Information Integration

A physical calculator as a visual metaphor

What is good orbad about this design?

Visual Metaphors

Information Models

• An “information space” or structure that users navigate

• Common models:• spatial: timelines (1D), maps (2D), VR (3D)

• tabular: lists, tables, databases

• hierarchy: menu systems, folders, index pages

• directed graph: hypertext, web

Which network is easier to understand?

Menu Guidelines

Breadth vs. Depth

• Broad-shallow vs. narrow-deep

• Depth = logbranchingFactor numPages

• Usability: max depth 3-4

My goal:

find ratings concerning Sony Vaio laptops