COMP5047 – Design Prototyping and storyboards

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

2. 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. Designing the PalmPilot: a conversation with Rob Haitani Information Appliances and Beyond: Interaction Design for Consumer Products, Morgan Kaufmann, 2000 Example: Palm Pilotcase of the wooden prototype

6. Previous handhelds (eg Apple Newton) had failed - designers thought in terms of more features... Jeff Hawkins concluded small size was critical

7. '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. 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. Lo-fi prototyes: Storyboards (1)‏ Storyboards - key frames showing particular points in the interaction Disposable pump usage

10. 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. 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. 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. 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. Low-Fidelity (lo-fi) prototypes Self-checking Communicating with others Interaction prototyping Empowering users

15. 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. 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. 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. 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. Comparing Lo-fi and Hi-fi Type Advantages Disadvantages Lo-fi • Less time & lower cost • Evaluate multiple design concepts • Useful communication device • Limited usefulness for usability tests • Navigational and flow limitations • Facilitator-driven • Poor detailed spec Hi-fi • Partial/complete functionality • Interactive • User-driven • Clearly defines navigational scheme • Use for exploration and test • Marketing & sales tool • Time-consuming to create • Inefficient for proof-of-concept designs • Blind users to major representational flaws • Managements may think it is real

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