Prof. James A. Landay University of Washington Autumn 2007 Video Prototyping October 16, 2007

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation2 Hall of Fame or Shame?

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation3 Hall of Fame UI is clean & uncluttered Multiple language options are clearly indicated Similarity & connectedness to present strong aesthetic & indicate navigation –ex. of Gestalt Principles Use of red/green troubling, but not an issue in this UI

Prof. James A. Landay University of Washington Autumn 2007 Video Prototyping October 16, 2007

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation5 Outline Review Finish Teams Overview Types of Prototypes Video Brainstorming Video Prototyping Forms of Video Prototyping Steps to Create Video Prototypes Tips & Tricks Introductions

Human Abilities Review Color can be helpful, but pay attention to ? –how colors combine –limitations of human perception –people with color deficiency Model Human Processor ? –perceptual, motor, cognitive processors + memory –model allows us to make predictions e.g., perceive distinct events in same cycle as one Memory ? –three types: sensor, WM, & LTM –interference can make hard to access LTM –cues in WM can make it easier to access LTM Key time to remember? –100 ms (~processor cycle time & memory access) Fitts’ Law ? –moving hand is a series of microcorrections –time to move hand to target size S, distance D away given by T pos = a + b log 2 (D/S + 1) –time to move hand depends only on relative precision required CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation6

CSE440 - Autumn Teams vs. Groups Groups –strong leader –individual accountability –organizational purpose –individual work products –efficient meetings –measures performance by influence on others –delegates work Teams –shared leadership –individual & mutual accountability –specific team purpose –collective work products –open-ended meetings –measures performance from work products –does real work together Teams & good performance are inseparable –a team is more than the sum of its parts User Interface Design, Prototyping, and Evaluation

CSE440 - Autumn Keys to Team Success Common commitment –requires a purpose in which team members believe “prove that all children can learn”, “revolutionizing X…” Specific performance goals –comes directly from the common purpose “increasing the scores of graduates form 40% to 95%” –helps maintain focus – start w/ something achievable A right mix of skills –technical/functional expertise (programming/design/writing) –problem-solving & decision-making skills –interpersonal skills Agreement –who will do particular jobs, when to meet & work, schedules User Interface Design, Prototyping, and Evaluation

CSE440 - Autumn Team Action Items Meet & get used to each other Figure out strengths of team members Assign each person a role –responsible for seeing work is organized & done –not responsible for doing it themselves Names/roles listed on next assign. turned in Roles –design (visual/interaction) –user testing –group manager (coordinate - big picture) –documentation (writing) User Interface Design, Prototyping, and Evaluation

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation10 Types of Prototypes Prototypes are concrete representations of a design Prototype dimensions –representation: form of the prototype off-line (paper) or on-line (software) –precision: level of detail (e.g., informal or polished) –interactivity: watch-only vs. fully interactive fixed prototype (video clips) fixed-path prototype (each step triggered by specified actions) –at extreme could be 1 path or possibly more open (e.g., Denim) open prototype (real, but limited error handling or performance) –evolution: expected life cycle of prototype e.g., throw away or iterative

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation11 Video Brainstorming Participants act ideas out in front of a video camera Goal is to create as many new ideas as possible –each should take 2-5 minutes to generate & capture –run standard brainstorming session first for ideas Advantages –video easier to understand later than notes –participants actively experience interaction & preserve record of the idea Video brainstorming of an animated character in Prototyping Tools & Techniques by Beaudouin-Lafon & Mackay. Character follows user with its eyes.

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation12 Video Prototyping Illustrate how users will interact w/ system Unlike brainstorming, video prototyping contracts the design space Quick to build Inexpensive Forces designers to consider details of how users will react to the design May better illustrate context of use

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation13 Forms of Video Prototypes May build upon paper prototypes or use existing software & images of real settings Narration optional 1)narrator explains events & others move images/illustrate interaction 2)actors perform movements & viewer expected to understand w/o voice-over Usually fixed prototypes, but can also use in open prototypes –live video as a Wizard of Oz tool & 2 nd camera to capture If have good storyboards, should be able to create video prototype in 1 hour

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation14 Wizard of Oz Video Prototype Image from Beaudouin-Lafon & Mackay

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation15 Steps to Create a Video Prototype 1)Review field data about users & work practices 2)Review ideas from video brainstorm 3)Create use scenario in words 4)Develop storyboard of each action/event w/ annotations explaining what is happening in scene. Put each element on a card.

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation16 Steps to Create a Video Prototype Image from X by Beaudouin-Lafon & Mackay

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation17 Steps to Create a Video Prototype 1)Review field data about users & work practices 2)Review ideas from video brainstorm 3)Create use scenario in words 4)Develop storyboard of each action/event w/ annotations explaining what is happening in scene. Put each element on a card. 5)Shoot a video clip for each storyboard card avoid editing in the camera – just shoot in storyboard order 6)Use title cards to separate clips (like a silent movie) if you make an error, rewind to last title card & reshoot

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation18 Example Videos

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation19 Video Prototyping Tutorial

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation20 Tips & Tricks Add structure to better explain context –begin with a title –follow with an “establishing shot” shows user in context defined by the scenario –create series of closeup & mid-range shots, interspersed with title cards to tell the story –place a final card with credits at the end Use colored paper for title cards to make easy to find when editing/searching video “Time-lapse photography” lets images appear & disappear based on user interaction –e.g., illustrate pop-up menu by recording clip of user pressing button, pause camera, add menu, restart camera Be careful about taking video out of the original design setting for ethical reasons (context matters)

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation21 High Quality (& Budget) Video Prototypes

CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation22 Next Time Presentations