1. COMP5047 – Design Prototyping and storyboards Judy Kay CHAI: Computer human adapted interaction research group School of Information Technologies Acknowledgement: Parts of this lecture are is heavily based on a lecture prepared by Dr Josiah Poon

2. 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 Given a problem, design a prototype Use prototyping for your project Justify the use of prototyping and storyboards in the overall process of designing a pervasive computing application (...links to evaluation)‏

3. Class Activity What is a prototype? High/Low fidelity? What is a storyboard? Benefits?

4. Familiar examples: Models of buildings

5. 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

6. 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

7. HAI2008. Lifelong ambient companions: challenges and steps to overcome them 'I would print up some screenshot as we were developing UI, and he'd hold it and pretend he was entering things, and people thought he was weird. He's be in a meeting furiously scribbling on this mockup, and people would say, "Uh, Jeff, that's a piece of wood." '.... 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."

8. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Lo-fi prototypes: examples and purpose Examples Mock-ups Low Detail Foam/Cardboard/Foam Core Models Paper Computers Sketch, printed widgets Storyboards/Tutorials/Manuals Acting with physical props Pictives Video cards Purpose Visualise competing designs Reveal interaction issues/uses Elicit user reactions Elicit user modifications/ suggestions

9. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Lo-fi prototyes: Storyboards (1)‏ Storyboards - key frames showing particular points in the interaction Disposable pump usage

10. 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

11. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Lo-fi prototypes: PICTIVES PICTIVES - plastic interface for collaborative technology initiatives through video exploration A participatory design Design is multiple layers of sticky/post-it notes and plastic overlays - different sized stickies represent icons, menus, windows etc. Interaction demonstrated by manipulating notes- contents changed quickly by user/designer with pen and note repositioning Session videotaped for later analysis

12. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Prototyping Prototypes are experimental and incomplete design which are cheaply and fast developed. Purpose of prototyping To involve users in testing design ideas and get early feedback. To provide an efficient and effective way to refine and optimize interfaces through discussion, exploration, testing and iterative revision. Early evaluation is available before the start of a full- scale implementation.

13. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Prototyping: Low-Fidelity (lo-fi) prototypes Quick to construct to describe concepts, design alternatives and screen layouts, rather than to model the user interaction with a system Provide limited or no functionality Intended to demonstrate the general look and feel, but NOT the detail how the application operates Created for the communication and exchange of ideas with users – not to serve as a coding and testing

14. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Low-Fidelity (lo-fi) prototypes Self-checking Communicating with others Interaction prototyping Empowering users

15. 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. The main advantage of hi-fi prototypes Enables users to truly interact with the system.

16. 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 A single bug can lead to a complete halt in evaluation

17. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Prototyping Techniques Paper-based sketches Paper-based storyboard Computer-aided sketches/storyboard Wizard of Oz / Video-prototyping Computer-based scenario simulation Computer-based Horizontal simulation Computer-based Vertical simulation Computer-based full functionality simulation Lo-Fi Hi-Fi

18. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Lo-fi prototype: Why? Hands-on experience Encourage user involvement beyond the detached reading of system specification Understandable No confusion between the simulation and the real thing Everyone equally able to make modification; no programming knowledge required Cheap Many iterations and separate evaluations possible without massive resource cost Fun Therefore, encouraging participation (Ehn & Kyng, 1991)‏

19. HAI2008. Lifelong ambient companions: challenges and steps to overcome them Comparing Lo-fi and Hi-fi Time-consuming to create Inefficient for proof-of-concept designs Blind users to major representational flaws Managements may think it is real Partial/complete functionality Interactive User-driven Clearly defines navigational scheme Use for exploration and test Marketing & sales tool Hi-fi Limited usefulness for usability tests Navigational and flow limitations Facilitator-driven Poor detailed spec Less time & lower cost Evaluate multiple design concepts Useful communication device Lo-fi DisadvantagesAdvantagesType

20. 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