Chapter 6 Prototyping
description
Transcript of Chapter 6 Prototyping
![Page 1: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/1.jpg)
HCI PrototypingChapter 6
Prototyping
![Page 2: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/2.jpg)
Learning Outcomes
• At the end of this lecture, you should be able to:– Define the term “prototyping”– Explain the importance of prototyping
in designing for usability– Identify the types of prototypes
![Page 3: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/3.jpg)
Key Terms you must be able to use
If you have mastered this topic, you should be able to use the following terms correctly in your assignments and exams:
• prototype• Low-fidelity prototype• High-fidelity prototype• Storyboards
![Page 4: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/4.jpg)
Design Process
• Two types of design: – conceptual – developing conceptual model,
captures what the product will do and how it will behave
– physical – details of the design, e.g. screen, icons, graphics, menus
• To effectively evaluate the design of an interactive product, we must produce and interactive versions of the design
![Page 5: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/5.jpg)
Prototyping in Usability Engineering
Parallel Design Sketches
Participatory Design
Iterative Design
Final Released Product
Users, Tasks, Environment Analysis
Usability Goals , Competitive Analysis
First Prototype
Formative Testing
![Page 6: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/6.jpg)
Prototype
• A limited representation of a design that allows users to interact with it and to explore its suitability
• Allows stakeholders to interact with the envisioned product, gain some experience of using and explore imagined uses– E.g. paper-based storyboards of a system, cardboard
mockup for a desktop laser printer, hyperlinked screens– E.g. PalmPilot’s founder Jeff Hawkin, carry a carved wood
about the shape and size of the device to simulate scenarios of use.
![Page 7: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/7.jpg)
Iterative Process of Prototyping
![Page 8: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/8.jpg)
Why prototype
• Communication device among team members• Test out technical feasibility of an idea• Effective way for user testing/evaluation• Clarifying vague requirements• Check if the design direction is compatible with the
rest of the system development
Recommended in software design, to come before any writing of code
![Page 9: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/9.jpg)
Types of prototyping
![Page 10: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/10.jpg)
• The prototype only retains limited characteristics of the final product
• They are cheap and quick to produce -they support the exploration of alternativedesigns (multiple iterations), can re-design at lower cost
• They are particularly good for:– Considering early design issues, e.g. layout of controls
and display items, sequencing, etc.– Identifying fundamental problems, i.e. those which lead
to errors, confusions, major dislikes
Low-fidelity prototyping
![Page 11: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/11.jpg)
• Storyboarding– Series of sketches showing how a user might
progress through a task using the device being developed
– Often based on scenarios - typical activities– involving the product/system in a story form, e.g.
“a patron wants to purchase Harry Potter movie ticket from the cinema, he uses his mobile phone
to make the booking while he is on the bus”
Low-fidelity prototyping - examples
![Page 12: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/12.jpg)
Examples of Storyboards
![Page 13: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/13.jpg)
• Index Card/Stickies– Each card/sticky represents an element of a task, one
screen or a screen element– Used in user evaluations where a member of the design
team “plays the computer”– Difficulties encountered are observed and/or recorded
Low-fidelity prototyping
![Page 14: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/14.jpg)
• Advantages– Lower cost– Evaluate multiple design concepts– Useful communication device
• Disadvantages– Limited error/usability checking– Facilitator driven– Navigational and flow limitations
Low-fidelity prototyping
![Page 15: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/15.jpg)
• Retains many of the characteristics of the final product• Time consuming and expensive to develop, however:
– Enable a wider range of usability issues/ problems to be considered/uncovered
– Enable other quality attributes such as aesthetics to be evaluated
– Impress management, serve as a good marketing and sales tool
• A range of materials may be employed• Very useful when the physical fit/feel of the product is
critical, e.g. a handheld device, a wearable device
High-fidelity prototyping
![Page 16: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/16.jpg)
• Software prototyping • Computer-based mock-ups of interface enabling
sophisticated user-system interactions• Variety of prototyping tools exist to support developers with
differing levels of fidelity, e.g.– MS PowerPoint– Authorware– Macromedia Flash– Macromedia Director
High-fidelity prototyping
![Page 17: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/17.jpg)
Examples of High-Fidelity Prototyping
![Page 18: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/18.jpg)
• Advantages– Complete functionality, look and feel of final product– Fully interactive– User-driven– Marketing/sales tools
• Disadvantages– Expensive to develop– Time-consuming to create
High-fidelity prototyping
![Page 19: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/19.jpg)
(Hall, 2001) Comparing prototyping
![Page 20: Chapter 6 Prototyping](https://reader035.fdocuments.net/reader035/viewer/2022062810/56815e60550346895dccdaad/html5/thumbnails/20.jpg)
Learning Outcomes revisited
• Check yourself to see if you can now:– Define the term “prototyping”– Explain the importance of prototyping
in designing for usability– Identify the types of prototypes– Apply prototyping in the design