Chapter 9Chapter 9

Prototyping

Objectives

Describe the basic terminology of prototyping Describe the role and techniques of prototyping Enable you to produce a simple prototype Enable you to attempt some aspects of physical

design Describes types of prototyping Describes the benefits of prototyping

Introduction Design activities begin once a set of requirements

has been established. There are two types of design:

– Conceptual design– Physical design

Conceptual design – developing conceptual model that capture what the product/system will do and how it will behave.

Physical design – concerned with of the design such as screen and menu structures, icons, graphic and other interaction styles.

Iterative process : repeated design – evaluation – redesign cycles , which involving users.

Introduction

For users to effectively evaluate the design of an interactive product, the designers must produce an interactive version of their ideas.

At early stage, the early versions may be made of paper and cardboard.

While as design progresses and ideas become more detailed, they may be polished software, metal or plastic that resemble the final product.

Introduction

Two distinct circumstances for design:– Start from scratch– Modifying an existing product

Prototyping Process model/ paradigm

Prototyping

Prototyping is a technique, not a specific tool. A prototype can be anything from a paper-based

storyboard through to a complex piece of software, and from a cardboard mockup to a molded or pressed piece of metal.

A prototype allows stakeholders to:– Interact with an envisioned product– Gain some experience of using it– Explore imagined users

Prototyping Example: When the idea for the PalmPilot was being

developed, the founder-Jeff Hawkin carved a piece of wood about the size and shape of the device he had imagined. He used to carry this piece of wood around with him and pretend to enter information into it. This is just to see what it would like to own such a device (Bergman & Haitani, 2000)

Prototyping

In other words, a prototype is a limited representation of a design that allows users to interact with it and to explore its suitability.

Why prototypes?

• Evaluation and feedback are central to interaction design

• Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing

• Team members can communicate effectively• You can test out ideas for yourself • It encourages reflection: very important aspect of

design • Prototypes answer questions, and support designers in

choosing between alternatives

Why prototypes?

Refers to the handout. The figure 8.1 shows a paper-based prototype of the design for a handheld device to help an autistic child communicate.

This prototype shows the intended functions and buttons, their positioning and labeling and the overall shape of the device, but none of the buttons work.

This kind of prototype is sufficient to investigate scenarios of use and to decide for example whether the buttons are appropriate and the functions sufficient, but not to test the response time or whether the speech is loud enough.

What to prototype?

• Technical issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial, critical areas

Low-Fidelity prototyping

A low-fidelity prototype is one that does not look very much like the final product.

The prototype of Palm pilot described in the previous slide is a low-fidelity prototype.

It is useful because it tends to be simple, cheap and quick to produce and quick to modify.

Apply at the early design stage, during conceptual design. This is because prototype are used for exploring ideas and it should be flexible and encourage.

Low-Fidelity prototyping

Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’

Storyboard

• Often used with scenarios, bringing more detail, and a chance to role play

• It is a series of sketches showing how a user might progress through a task using the device

• Used early in design

Sketching

• Sketching is important to low-fidelity prototyping

• Don’t be inhibited about drawing ability. Practice simple symbols

Using Index Card

• Index cards (3 X 5 inches)

• Each card represents one screen

• Often used in website development

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

• What is ‘wrong’ with this approach?

High-fidelity prototyping

• Uses materials that you would expect to be in the

final product.

• Prototype looks more like the final system than a

low-fidelity version.

• For a high-fidelity software prototype common

environments include Macromedia Director,

Visual Basic, and Smalltalk.

• Danger that users may think they have a full

system…

High-fidelity prototyping Matt Rettig (1994) identifies problems with high-

fidelity prototype:– They take too long to build– Reviewers and testers tend to comment on

superficial aspects rather than content– Developers reluctant to change something they

have worked for hours– A software prototype can set expectations too

high– Just one bug in a high-fidelity prototype can bring

the testing to a halt. High-fidelity prototyping is useful for selling ideas to

people and for testing out technical issues.

Prototyping on Web Basic terminology:

– Design– One or more prototypes, each followed by testing and

redesign– Implementation– Site goes live

If a prototype becomes so nearly complete – evolutionary prototype.

Developers can start from scratch If the developers use the prototype only as a

specification – throwaway prototype. They may use it to guide the implementation but then it will be discarded.

Prototyping on Web

Horizontal prototype- has little depth of functionality (or no functionality), only to show number of features it presents prototyped

Not prototyped

Prototyping on Web Vertical prototype presents only a limited number of

features, but the functionality of those features is fully developed. Ex. On web, one set of links leading from the home page to a terminal page.

prototyped

Not prototyped

Summary

• Different kinds of prototyping are used for different purposes and at different stages

• Prototypes answer questions, so use prototype appropriately