SBD: Information Design Chris North cs3724: HCI

HW#1 HTA vs. Flow chart

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

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

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

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

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

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

Gestalt Principles of Perception Proximity 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 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

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

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

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