Post on 31-Dec-2015
description
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