Human-Computer Interaction CA357 Lecture 7 More on Prototyping
Overview By the end of the session, you should be aware of: Design Importance of prototyping Low fidelity vs High fidelity prototyping Why are we doing this? Prototyping is useful for developing any system VB gives you an additional skill for your CV 3
What is a prototype? To construct a version of a system that may be Functionally incomplete Does not cover the whole system Lacks the performance of the final system. 3
What is a prototype? A storyboard, i.e. a cartoon-like series of scene sketches A Powerpoint slide show A cardboard mock-up A piece of software with limited functionality written in the target language or in another language 4
Why do we prototype? To test out technical feasibility of design ideas To clarify vague requirements For initial user testing and evaluation Checks that a design direction is compatible with the rest of the system development 5
Why do we prototype? Support designers by choosing between alternative designs Stakeholders can interact with a prototype more easily than viewing a document or drawing Enables team members to discuss ideas for improvement 6
What do we prototype? Screen layouts and information display Work flow, task design Difficult, controversial, critical areas 7
What do we prototype? Fidelity refers to level of detail Low-fidelity vs high-fidelity We can iterate the prototype until it meets the needs and requirements of the user 8
Low fidelity prototyping Quick and dirty Uses a medium which is unlike the final medium, e.g. paper, cardboard E.g. Cardboard cutouts, Post-it notes, Storyboards Used for exploring design ideas 9
Low fidelity examples Sketches Drawing of the outward appearance of the intended system Often concentrate on high level concepts Difficult to envision progression between screens 10
Low fidelity examples Storyboards Graphical depiction of outward appearance of intended system May show showing how a user might progress through a task using the device Can be used with a scenario 11
Low fidelity examples Storyboards 12
Low fidelity examples Wizard of Oz The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users expectations Why might this approach not be appropriate? 13
Question What are the benefits and weaknesses of low fidelity prototyping? 14
High fidelity prototyping Uses materials similar to the final product Prototype looks more like the final system E.g. Macromedia Director, Visual Basic, C++ Used for purposes of exploration and testing 15
High fidelity example Interface Builder 16
Question What are the benefits and weaknesses of high fidelity prototyping? 17
Compromises Vertical prototyping Limited features Narrow system with lots of functionality Can only test limited part of the system Horizontal prototyping Surface layer designed Limited underlying functionality Can test appearance 18
Three main types of prototype Throw-Away Incremental Evolutionary Final product must then be engineered and evaluated 19
Evolutionary prototype From a storyboard 20
Evolutionary prototype To a high-fidelity version 21
Evolutionary prototype To a high-fidelity version 22
Summary Prototypes answer questions, so prototype appropriately Low fidelity prototypes are more suitable for exploration High fidelity prototypes are more suitable for learning Iterate and use prototypes for choosing between alternatives 23
References Preece, J., Rodgers, H. and Sharp, Y. (2007) Interaction design: Beyond human-computer interaction. (2nd Edition) Chapter 11. For next time, please read: Sharp et al. Chapter 15 24