1. SBD: Information Design
Chris North
cs3724: HCI

2. HW#1
HTA vs. Flow chart

3. Information scenarios
ANALYZE
analysis of
stakeholders,
field studies
claims about current
practice
Problem scenarios
DESIGN
Activity
scenarios
metaphors,
information
technology,
HCI theory,
guidelines
iterative
analysis of
usability
claims and
re-design
Information scenarios
Interaction scenarios
PROTOTYPE & EVALUATE
summative
evaluation
formative
evaluation
Usability specifications

4. Stages of Action in HCI focus of information design focus of
Execution
Action plan
System
goal
Last month’s
budget... ?
Interpretation
Perception
Making
sense
GULF OF
EVALUATION
EXECUTION
focus of
interaction
design

5. Information Design
Define and arrange the visual (or other modality) elements of a user interface
“Big picture”, overall info model
Detailed screen layout
Perceiving
Interpreting
Making sense
Activity design scenarios:
transform current activities to use new design ideas
Information design scenarios:
Elaborate to include visual presentation details

6. Making Sense of an Information Display
Interpretation
Excel worksheet, a cell
is selected, formula is
displayed at top
Making Sense
Income worksheet,
Total tax income is being
calculated, the wrong
multiplier is being used
Perception
color, shading, lines
characters, squares,
spatial organization
Last month’s
budget... ?

7. Analogy to Verbal Comm. Hear Parse Understand Sound waves Syllables
Syntax
Language = vocabulary + grammar
Understand
Semantics, meaning

8. Perception Visually encode information Vision: Design goal:
lines, shapes, colors “extracted”
grouped as rows, columns, grids, …
very fast, generally with no conscious thought
Design goal:
make perceptual process rapid and accurate

10. Gestalt Principles of Perception
Proximity
Similarity
Closure
Area
Symmetry
Continuity

11. Gestalt in User Interface Design
Try the “squint test”...
What principles are in action?

12. 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

13. Task-oriented grouping
Visual distinctions for grouping, but not too many distinctions
More information vs. complexity

14. Interpretation Results of perception is recognized Visual language
Vocabulary:
Grammar:
Design goal: make the interpretation process rapid and accurate

15. Leveraging Familiarity
Familiar “vocabulary”:
Widgets
Text Labels
Speak the user’s language

16. 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

17. 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

18. Affordances

19. 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

20. Information Integration

21. Visual Metaphors A physical calculator as a visual metaphor
What is good or
bad about this design?

22. 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

23. Which network is easier to understand?

24. Menu Guidelines

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

26. My goal:
find ratings concerning Sony Vaio laptops