Computer/Human InteractionLecture 19Overview:Information designGulf of EvaluationPerceptionInterpretationMaking SenseJava Prototype assignment is outStages 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ExecutionInformation 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 sheetsPerception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 backgroundGestalt PrinciplesProximity – elements close together tend to be grouped together.Similarity – elements with shared characteristics tend to be grouped togetherClosure – tend to organize elements into closed groupsGestalt Principles 2Area – tend to organize elements to form smallest groupSymmetry – tend to group symmetric elementsContinuity – tend to organize elements into repeating patternsExample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?Tradeoffs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...Interpretation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 affordanceFamiliarityUse common vocabulary, even if the words do not convey precisely what task is taking place. Example: “display” vs. “render”; documents are organized into “folders”, not “boxes”Caution: some words are ambiguous. Example: enter, check, update, viewConsider audience. Example: adult vs. child, other cultureswww.gui-bloopers.comRealismRealistic images increase recognition and long-term memoryBut often are more complex, slower to load, and suggest specific instances rather than conceptsAffordance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