October 6, 2009 CS 350 Lecture 12 1CS 350: Computer/Human InteractionLecture 12 Overview●Information design●Gulf of Evaluation–Perception–Interpretation–Making SenseOctober 6, 2009 CS 350 Lecture 12 2CS 350: Computer/Human InteractionStages of Action in HCI●Information Design: Gulf of Evaluation – how users understand tasks–Perception–Interpretation–Making sense●Interaction Design: Gulf of Execution – how systems support user’s task goals–System goal–Action plan–ExecutionOctober 6, 2009 CS 350 Lecture 12 3CS 350: Computer/Human InteractionInformation Design●Design interface to get from perception to making sense as quickly as possible●Example–Perception – lines, color, shading, spatial organization–Interpretation – Excel worksheet, cell, formula–Making sense – budget worksheet, grade book sheetsOctober 6, 2009 CS 350 Lecture 12 4CS 350: Computer/Human InteractionPerception●Mind organizes and encodes the data it is given into groups●Generally, no conscious thought involved●Gestalt ( German for “whole”) principles describe how information is grouped, what is related to each other, what is foreground or backgroundOctober 6, 2009 CS 350 Lecture 12 5CS 350: Computer/Human InteractionGestalt Principles●Proximity – elements close together tend to be grouped together.●Similarity – elements with shared visual characteristics tend to be grouped together●Closure – tend to organize elements into closed groupsOctober 6, 2009 CS 350 Lecture 12 6CS 350: Computer/Human InteractionGestalt Principles●Area – tend to organize elements to form smallest group●Symmetry – tend to group symmetric elements●Continuity – tend to organize elements into repeating patternsOctober 6, 2009 CS 350 Lecture 12 7CS 350: Computer/Human InteractionPerception Example●Border and Shading dialog box in Word●See an immediate sense of organization●Also see individual control elements●“Squint test” - close one eye and squint with the other. Is the organization of display apparent?October 6, 2009 CS 350 Lecture 12 8CS 350: Computer/Human InteractionTradeoffs●Want to display all possible active tasks to understand what is possible, but each display element adds complexity●Contrasting cues highlight and group elements, but more distinctions will make each one less noticeable●Elegant designs exploit position, thematic repetition, low-key color schemes and white space. I.e., not at all like the PPP examples...October 6, 2009 CS 350 Lecture 12 9CS 350: Computer/Human InteractionInterpretation●Result of perceptual encoding is recognition of the task being performed●Mixture of bottom-up and top-down processing by user●Need to anticipate and support users’ reactions to interface elements to speed up process. Leverage familiarity, realism, and affordanceOctober 6, 2009 CS 350 Lecture 12 10CS 350: Computer/Human InteractionFamiliarity●Use common vocabulary, even if not precise as to what task is taking place. Example: “display” vs. “render”; documents are organized into “folders”, not “boxes” or “directories”●Caution: some words are ambiguous. Example: enter, check, update, view●Consider audience. Example: adult vs. child, other culturesOctober 6, 2009 CS 350 Lecture 12 11CS 350: Computer/Human InteractionRealism●Realistic images increase recognition and long-term memory●But often are more complex, slower to load, and suggest specific instances rather than conceptsOctober 6, 2009 CS 350 Lecture 12 12CS 350: Computer/Human InteractionAffordance●Affordance is when characteristics of an object make it obvious how it is used.●Common in real world. Examples: door knob, steering wheel.●Examples in HCI: scrollbars, window handlesOctober 6, 2009 CS 350 Lecture 12 13CS 350: Computer/Human InteractionMaking Sense●User integrate information to make sense of their perceived and interpreted information●Connect new information to–Personal knowledge–Domain expertise–Recent eventsOctober 6, 2009 CS 350 Lecture 12 14CS 350: Computer/Human InteractionMaking Sense●Users detect patterns and relationships in presented information and relate them to patterns of knowledge and of the task●Various techniques facilitate users’ making sense of user interface–Consistency–Visual metaphors–Information models–Dynamic displaysOctober 6, 2009 CS 350 Lecture 12 15CS 350: Computer/Human InteractionConsistency●Visual design program allows users to create and benefit from expectations–Example: fonts, labeling●Placement of elements–Example: window buttonsOctober 6, 2009 CS 350 Lecture 12 16CS 350: Computer/Human InteractionConsistency●Terminology, command language–Example: “Move backward”, “Backward”, “Reverse”–Infer: “Move forward”, “Forward”, “Forward”●Internal (within screen) and external (across screens)●See: www.gui-bloopers.comOctober 6, 2009 CS 350 Lecture 12 17CS 350: Computer/Human InteractionVisual Metaphor●Consistency with real world objects and actions●Designers explore and are inspired by real world●Allows users to recognize task easily●Tradeoff: Metaphor can be too literal–Example: Desktop calculator in Figure 4.7; irrelevant information/actionsOctober 6, 2009 CS 350 Lecture 12 18CS 350: Computer/Human InteractionInformation Model●Information model is a set of concepts, relationships and representations to facilitate understanding of large amounts of data and complex functionality●Most common is hierarchy (i.e., tree model)–Example: library classification, Web site mapsOctober 6, 2009 CS 350 Lecture 12 19CS 350: Computer/Human InteractionInformation Model●Tradeoffs: Breadth vs. depth, organization vs. inflexibility, exposing intermediate categories●Network models common on webOctober 6, 2009 CS 350 Lecture 12 20CS 350: Computer/Human InteractionDynamic Displays●Redisplay or animate information based on context●Humans are good at making sense of motion and depth variations●Fish-eye view: clearer, more detail at the point of interest●Generalized to focus+context visualization (Figure 4.9)October 6, 2009 CS 350 Lecture 12 21CS 350: Computer/Human InteractionDynamic Displays●Semantic filtering: use semantic attributes to determine whether to display, color and shape, etc.●Multiple coordinated views: panel of windows that show different, related views of information–Example: Visual Studio IDE, Java API documentation