COMP5047 – Design Prototyping and storyboards Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Acknowledgements: Materials from: lecture by Dr Josiah Poon, James Landay (U Wash), Rogers, Sharp, Preece. Interaction Design: beyond human-computer interaction, Ch11.Interaction Design: beyond human-computer interaction

HAI2008. Lifelong ambient companions: challenges and steps to overcome them Postconditions Describe the meaning and uses of: prototyping storyboards high fidelity and low fidelity prototyping Use both paper and phone prototyping for your project

Example: Palm Pilot case of the wooden prototype Designing the PalmPilot: a conversation with Rob Haitani Information Appliances and Beyond: Interaction Design for Consumer Products, Morgan Kaufmann, 2000

HAI2008. Lifelong ambient companions: challenges and steps to overcome them Previous handhelds (eg Apple Newton) had failed - designers thought in terms of more features... Jeff Hawkins concluded small size was critical

HAI2008. Lifelong ambient companions: challenges and steps to overcome them 'I would print up some screenshot as we were developing the UI, and he'd hold it and pretend he was entering things, and people thought he was weird. He’d be in a meeting furiously scribbling on this mockup, and people would say, "Uh, Jeff, that's a piece of wood.” ’ My bold italics

HAI2008. Lifelong ambient companions: challenges and steps to overcome them “.... we showed them a simulation of synchronization with HotSync and the cradle, which at the time was a revolutionary concept, and they went totally nuts." My bold italics

7 What is a prototype? In interaction design it can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide show a video simulating the use of a system a lump of wood (e.g. PalmPilot) a cardboard mock-up a piece of software with limited functionality (eg Balsamiq) Adapted form Rogers et al

8 Why prototype? In relation to others: Evaluation and feedback are critical; Stakeholders can see, hold, interact with a prototype more easily than a single static document or a drawing Team members can communicate effectively For you: You can test out ideas It encourages reflection: very important aspect of designalternatives

HAI2008. Lifelong ambient companions: challenges and steps to overcome them Prototyping: Low-Fidelity (lo-fi) prototypes Quick to construct East to design alternatives Provide limited or no functionality Aim to show user the general look and feel, NOT the detail Help communication and exchange of ideas with users

What is a Prototype? (Landay, 2013) 10 “A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.” – Wikipedia a working representation of a final artifact

Types of Prototypes (Landay, 2013) 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 Winter 2013CSE 440: User Interface Design, Prototyping, & Evaluation 11 Karem SuerPJ McCormick

Fidelity in Prototyping (Landay, 2013) Fidelity refers to the level of detail High fidelity? prototypes look like the final product Low fidelity? artists renditions with many details missing Winter 2013CSE 440: User Interface Design, Prototyping, & Evaluation 12

Materials for very lo-fi prototypes Large, heavy, white paper (A3 or 11x17) 5x8 in./A5/A6 index cards Tape, stick glue, correction tape Pens & markers (many colors & sizes) Post-its Overhead transparencies Scissors, cutters… Winter (adapted from Landay, 2013)

CSE440 - Autumn 2012 User Interface Design, Prototyping, & Evaluation 14 ZAPT  (Landay, 2013)

15 Storyboards Often used with scenarios, bringing more detail, and a chance to role play Can be a series of sketches showing how a user might progress through a task using the device Used early in design

HAI2008. Lifelong ambient companions: challenges and steps to overcome them Lo-fi prototyes: Storyboards (2)‏ Storyboards/Tutorials/Manuals Manuals - storyboards set within textual explanations- people often read manuals of competing products to check: interface/functionality/match to task

17 High-fidelity prototyping Prototype looks more like the final system than a low-fidelity version. Danger that users think they have a full system…….see compromises

HAI2008. Lifelong ambient companions: challenges and steps to overcome them High Fidelity (Hi-fi) prototypes Hi-fi prototypes Characterised by a high-tech representation of the design concepts Resulting in partial to complete functionality. Advantage: Enables users to truly interact with the system.

HAI2008. Lifelong ambient companions: challenges and steps to overcome them Problems with Hi-fi prototypes Take time to build  higher cost Testers and reviewers comment on fit and finish issues Reluctance to change the design Software prototypes can set expectations that are hard to change Users may think they have a full system A single bug can lead to a complete halt in evaluation

HAI2008. Lifelong ambient companions: challenges and steps to overcome them Design Process & Prototyping Brainstorm different representations Choose a representation Rough out interface style Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Limited field testing Alpha/Beta tests Lo-fi prototypes Medium-fi prototypes Hi-fi prototypes Working Systems Early Design Late Design