1

SBD:Information Design

CS 3724

Thanks to Chris North and Scott M cCrickard for their original slides.

Problem scenarios

summativeevaluation

Information scenarios

claims aboutcurrentpractice

analysis ofstakeholders,field studies

Usability specifications

Activityscenarios

Interaction scenarios

iterativeanalysis ofusability claims andre-design

metaphors,informationtechnology,HCI theory,guidelines

formativeevaluation

DESIGN

ANALYZE

PROTOTYPE & EVALUATE

3

Information Design Goal: identify methods for representing and

arranging the objects and actions possible ina system in a way that facilitates perceptionand understanding

Define and arrange the visual (or othermodality) elements of a user interface “Big picture”, overall info model Detailed screen layout

Activity design scenarios:transform current activities to

use new design ideas

Information design scenarios:Elaborate to include visual

presentation details

Problem andactivity designclaims: look for

representations thataddress negatives,but keep positives

+/-

Informationdesign space:

brainstormrepresentations in

metaphors andtechnology

HCIknowledge

aboutinformation

designClaims analysis: features ofthe information design with key

implications for use+/-

SBD andInformationDesign

2

Execution

Action plan

Systemgoal

Last month’sbudget... ?

Interpretation

PerceptionMakingsense GULF OF

EVALUATION

GULF OFEXECUTION

Stages of Action in HCIfocus ofinformationdesign

focus ofinteractiondesign

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

7

Analogy to verbalcommunication1. Hear

Sound waves Syllables

2. Parse Syntax Language = vocabulary + grammar

3. Understand Semantics, meaning

8

Human Vision Highest bandwidth sense (100 MB/sec) Dominant sense (50% of brain involved in

processing visual information) Parallel processing Pre-attentive Pattern recognition Extends memory and cognitive capacity People think visually Visual attention (fovea vs. periphery,

saccades)

3

9

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

Which state has highest income? Relationship between income and education? Outliers?

Per Capita Income

Colle

ge D

egre

e %

4

13

Gestalt Principles ofPerception

Proximity Similarity

Closure Area

Symmetry Continuity

14

Gestalt in User InterfaceDesign

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

15

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

16

Interpretation Results of perception are recognized Visual language

Design goal: make the interpretationprocess rapid and accurate

5

17

Leveraging Familiarity Familiar “vocabulary”:

Widgets Text Labels Speak the user’s language

18

Images: Realism andRefinement Abstract:

Road signs Refined for speed

Realistic images Accurate and memorable but are more complex, take longer to process

Remove unnecessarydetail

19

Leveraging Affordances An affordance gives clues about how to

use an object door knob, steering wheel, pen scrollbar, title bar, window “handles” pointer feedback

Visible vs. popup

20

Affordances

6

21

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 makeconnections between UI information and taskgoals Execution/evaluation cycle

22

Consistency Internal consistency (within a system)

On the same screen: button shape, labels, fonts, From screen to screen: UI controls, layout Vocabulary consistency: e.g. “previous/next”

instead of “previous/down” External consistency (between systems, or

with real world) Why?

More rapid/accurate pattern recognition More confident interaction behavior Transfer of learning

23

Information Integration

24

VisualMetaphors A physical

calculator as avisual metaphor

What is good or badabout this design?

7

25

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

28

Breadth vs. Depth Broad-shallow vs. narrow-deep Depth = logbranchingFactor numPages Usability: max depth ≈ 3-4

8

29

Where to put knowledge In the head

memory (long-term or working?) what level of precision?

In the world “external storage” for a user problem of display clutter

30

Short-term memory load Remember the “magical number 7+/- 2” Chunking of information

My goal:find ratingsconcerningSony Vaiolaptops