November 3, 2009 CS 350 Lecture 19 1CS 350: Computer/Human InteractionLecture 19 Overview●Interaction design and SBD●Summary of SBD process●Prototyping●Group project●Assignment out: Homework 4●Handout: Revised schedule for rest of termNovember 3, 2009 CS 350 Lecture 19 2CS 350: Computer/Human InteractionInteraction Design●Third phase of design of user interfaces●Goal is to specify the mechanisms for accessing and manipulating task information. Want to lead users to do the right things at the right times.●Focus on the Gulf of Execution: how to get from user task goal to the physical movements to accomplish the task.November 3, 2009 CS 350 Lecture 19 3CS 350: Computer/Human InteractionStages of ActionGulf of Execution Task goalSystem goal ⇐ ⇓Action plan ⇓Executing plan ⇒Gulf of EvaluationMaking sense ⇑Interpretation ⇑Perception November 3, 2009 CS 350 Lecture 19 4CS 350: Computer/Human InteractionInteraction Design & SBD●Elaborate activity and information scenarios into interaction design scenarios (same stories with interaction details); also called dialog design●Concentrates on exchange between humans and the system; specify how users will select or manipulate system information●Make claims regarding interaction features and analyze consequencesNovember 3, 2009 CS 350 Lecture 19 5CS 350: Computer/Human InteractionExample●Problem scenario: Dr. Hwang builds a circuit by getting a breadboard, getting parts from the stockroom... She inserts parts connected to same node into same row of breadboard...●Activity scenario: Dr. Hwang builds a circuit using a simulation program... She chooses a part and places it. She repeats this for another part, then she connects them...November 3, 2009 CS 350 Lecture 19 6CS 350: Computer/Human InteractionExample●Information scenario: Dr. Hwang builds a circuit using a simulation program... She notices that it looks very much like a drawing program like OpenOffice Draw. It has toolbars containing buttons with different shapes... The shapes appear to be the different circuit element types...November 3, 2009 CS 350 Lecture 19 7CS 350: Computer/Human InteractionExplore Metaphors●Use the same ones as in activity and information design or new ones to brainstorm●Concentrate on what they suggest with regard to interaction●Example:–Wiring an electrical circuit is like...November 3, 2009 CS 350 Lecture 19 8CS 350: Computer/Human InteractionExplore Technology●Elaborate what technology being considered acts like●Example:–Wiring an electrical circuit is like...November 3, 2009 CS 350 Lecture 19 9CS 350: Computer/Human InteractionInteraction Design Scenarios●Identify claims features of activity and information scenarios that can be supported by specific choices of interaction●Rewrite scenario with interaction details●Consider consequences, side effectsNovember 3, 2009 CS 350 Lecture 19 10CS 350: Computer/Human InteractionClaims Analysis●Same as before: identify feature of interaction scenario, consider consequences of feature●Pros and cons from the point of view of the interaction being presented as related to activity and information claims●Goal is to maximize overall pros and minimize overall consNovember 3, 2009 CS 350 Lecture 19 11CS 350: Computer/Human InteractionExample●Interaction scenario: Dr. Hwang launches a simulation program... She clicks on the toolbar button with the resistor symbol. This causes the cursor to turn into the resistor symbol. She moves the mouse to where she wants to place the resistor and clicks the mouse. A horizontal resistor symbol appears in the circuit...November 3, 2009 CS 350 Lecture 19 12CS 350: Computer/Human InteractionExample●Interaction claim: Having the cursor change shape to the element selected+ ...- ...November 3, 2009 CS 350 Lecture 19 13CS 350: Computer/Human InteractionRefining Interaction Design●Design eventually must map each action to a specific device with specific visual/auditory feedback. etc.●Storyboard sketches can be used to elaborate interaction (over text-only)November 3, 2009 CS 350 Lecture 19 14CS 350: Computer/Human InteractionSummary of SBD Process●Develop root concept (overall vision/rationale), identify stakeholders●Problem scenarios describe current activities●Activity scenarios transform problem scenarios into activities using new concepts, new technologyNovember 3, 2009 CS 350 Lecture 19 15CS 350: Computer/Human InteractionSummary of SBD Process●Information scenarios specify representations of task's objects and actions that help users perceive, interpret, and make sense●Interaction scenarios specify how users will select or manipulate system informationNovember 3, 2009 CS 350 Lecture 19 16CS 350: Computer/Human InteractionSummary of SBD Process●Brainstorm and consider HCI principles at each design phase.●Develop claims regarding features; present both positive and negative effects; feedback into scenarios and into following phases●Overriding goal is to maximize positive effects and minimize negative effects.November 3, 2009 CS 350 Lecture 19 17CS 350: Computer/Human InteractionWhat is a Prototype?●Any concrete, but partial implementation of a system design created to explore system issues●In particular, a UI prototype is used to explore usability issues●Four goals of prototyping–Exploring user requirements–Choosing among alternatives–Usability testing–Evolutionary developmentNovember 3, 2009 CS 350 Lecture 19 18CS 350: Computer/Human InteractionExplore User Requirements●Illustrate current or future use●Used in participatory design with stake-holders; record questions, reactions, and ideas for changes●Low fidelity prototypes – storyboards, paper mockups●High fidelity prototypes – Wizard of Oz, video, computer animation, scenario machine, rapid prototype, partial implementationsNovember 3, 2009 CS 350 Lecture 19 19CS 350: Computer/Human InteractionExplore User Requirements●Issues in choosing how to prototype include–Goals and resources of project team–Expertise of project team with prototype tools–Expectations of audience–Presentation context●Want to be careful that the prototype does not define the final system...November 3, 2009 CS 350 Lecture 19 20CS 350: Computer/Human InteractionChoosing Among Alternatives●Prototypes can be built to answer specific questions regarding system function. E.g.,–Direct manipulation vs.