Download - SBD: Information Design
![Page 1: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/1.jpg)
SBD:Information Design
Chris North
cs3724: HCI
![Page 2: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/2.jpg)
HW#1
• HTA vs. Flow chart
![Page 3: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/3.jpg)
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
![Page 4: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/4.jpg)
Execution
Action plan
Systemgoal
Last month’sbudget... ?
Interpretation
PerceptionMakingsense
GULF OFEVALUATION
GULF OFEXECUTION
Stages of Action in HCIfocus ofinformationdesign
focus ofinteractiondesign
![Page 5: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/5.jpg)
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
![Page 6: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/6.jpg)
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
![Page 7: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/7.jpg)
Analogy to Verbal Comm.
1. Hear• Sound waves
• Syllables
2. Parse• Syntax
• Language = vocabulary + grammar
3. Understand• Semantics, meaning
![Page 8: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/8.jpg)
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
![Page 9: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/9.jpg)
![Page 10: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/10.jpg)
Gestalt Principles of PerceptionProximity Similarity
Closure Area
Symmetry Continuity
![Page 11: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/11.jpg)
Gestalt in User Interface Design
Try the “squint test”...What principles are in action?
![Page 12: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/12.jpg)
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
![Page 13: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/13.jpg)
Task-oriented grouping
• Visual distinctions for grouping, but not too many distinctions
• More information vs. complexity
![Page 14: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/14.jpg)
Interpretation
• Results of perception is recognized
• Visual language• Vocabulary:
• Grammar:
• Design goal: make the interpretation process rapid and accurate
![Page 15: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/15.jpg)
Leveraging Familiarity
• Familiar “vocabulary”:• Widgets
• Text Labels
• Speak the user’s language
![Page 16: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/16.jpg)
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
![Page 17: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/17.jpg)
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
![Page 18: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/18.jpg)
Affordances
![Page 19: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/19.jpg)
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
![Page 20: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/20.jpg)
Information Integration
![Page 21: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/21.jpg)
A physical calculator as a visual metaphor
What is good orbad about this design?
Visual Metaphors
![Page 22: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/22.jpg)
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
![Page 23: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/23.jpg)
Which network is easier to understand?
![Page 24: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/24.jpg)
Menu Guidelines
![Page 25: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/25.jpg)
Breadth vs. Depth
• Broad-shallow vs. narrow-deep
• Depth = logbranchingFactor numPages
• Usability: max depth 3-4
![Page 26: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/26.jpg)
My goal:
find ratings concerning Sony Vaio laptops
![Page 27: SBD: Information Design](https://reader036.vdocuments.us/reader036/viewer/2022081501/56812ee0550346895d947f07/html5/thumbnails/27.jpg)