1 / 27

SBD: Information Design

SBD: Information Design. Chris North cs3724: HCI. HW#1. HTA vs. Flow chart. ANALYZE. analysis of stakeholders, field studies. claims about current practice. Problem scenarios. DESIGN. Activity scenarios. metaphors, information technology, HCI theory, guidelines. iterative

honorato-berger
Download Presentation

SBD: Information Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SBD:Information Design Chris North cs3724: HCI

  2. HW#1 • HTA vs. Flow chart

  3. 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. Interpretation Perception Making sense GULF OF EVALUATION Last month’s budget... ? GULF OF EXECUTION Execution System goal Action plan Stages of Action in HCI focus of information design 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 • Sound waves • Syllables • Parse • Syntax • Language = vocabulary + grammar • Understand • Semantics, meaning

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

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

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

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

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

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

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

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

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

  17. Affordances

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

  19. Information Integration

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

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

  22. Which network is easier to understand?

  23. Menu Guidelines

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

  25. My goal: find ratings concerning Sony Vaio laptops

More Related