Prototyping

Prototyping

• Brings designs to life for:– Designers– Users

• Can be as sophisticated or as crude as you want

• Allows you to explore ideas• Used properly, it is at the heart of human-

centred design

Prototyping

• May (rarely) mimic the whole system.• More usually looks at horizontal or verticcal

slice through the system• May evolve into final product, or be replaced

by an idea that worked better.• A prototype is about the presentation of ideas• Different prototyping methods suit different

situations.

Prototyping

• Low fidelity prototypes explore initial concepts and broad ideas.

• High fidelity prototypes help evaluate "look and feel" and functionality.

• The main purpose of prototyping is to evaluate designs with users.

Prototyping

• The engineers at Apollo missions built a full-size cardboard prototype of the lunar landing module to test the position and size of the windows in relation to the field of view of the astronauts. This experimentation led to the design decision that the astronauts would stand not sit inside the lander. This allowed the windows to be smaller, saving crucial weight.

Prototyping

• A prototype is a concrete but partial representation of a system design.

• It may be built to demonstrate a concept, test details of a concept or as a specification for the final product.

• It may be made of paper or cardboard, or using a software package.

Prototyping

• Prototypes are always interactive. They are made so that users can interact with part of the system.

• In the crudest example, a paper print-out of a web site can be made interactive: A user "presses" a button with his pen. The designer then changes the print-out to represent the system's response. (He might swap print-outs)

Wake up!!!

• You are presenting your ideas for a diary tool to a PDA software designer. What type of prototype would you use?

• Write your own notes on this at first• Then form a group of three to compare notes• When the group have their stories straight,

we can compare them in plenary session.

Hi-fi Prototypes

• Hi-fi prototypes have a similar look and feel to the final product.

• They need not have the functionality of the final product.

• The Hi-fi prototype on the next slide has no functionality whatsoever. It is a photograph. Nevertheless, I can add the effect of a purchase.

• Useful for an evaluation of the main design elements:– Content– Visuals– Interactivity– Functionality– Media

• Can be used to measure how fast a person can learn the system.

Hi-fi Prototypes

Hi-fi Prototypes

• Useful for getting client approval before developing all the functionality. "The site will look like this. Would you like changes before I go on?"

• Usually appears well into the project.• Beware: it looks so realistic that the client will

regard it as real. Any typos will be treated seriously and will distract from the main purpose.

Hi-fi Prototypes

• Beware: It is possible to prototype systems that cannot be produced using today's technology.

Lo-fi Prototypes

• Usually made from paper or cardboard• Designed to be produced quickly and thrown

away after use• Focuses on underlying design ideas:– Content– Form– Structure– Functionality– Navigation

Lo-fi Prototypes

• Usually made of card and post-it notes• Permanent features drawn on the cardboard.• Changing features simulated by adding and

removing post-it notes• Can use acetate and wipe-off pens

• Next slide: Prototype messaging screen for home information centre

18

Home information system

• Different screens on different pages of the binder• Simulated pop-up keyboard• Acetate panel for adding comments

19

Lo-fi Prototypes

Main issues:• Robustness: It needs to be strong enough for

use• Scope: Keep it simple so users can follow the

story• Instructions: Too little and they get lost. Too

much and they obey without thinking• Flexibility: Invite users to redesign the mock-

up so as to sidestep problems encountered

Using Lo-fi Prototypes

• Need to record what happens: take notes, sound record or use video.

• Have 2 designers, one to interact with the user, one to "play computer"

• User points to where they would click next.• Use a narrative: "You are interested in this

shirt, but you want to know what sort of material it's made of. What would you do?

Types of prototype

• A Full Prototype provides full functionality, but with less power

• A Horizontal Prototype mimics the whole system, but many of the functions don't actually work.

• A Vertical prototype only mimics a part of the system (e.g. Login, registration), but what is there actually works.

Types of prototype

• Evolutionary and Incremental prototypes eventually develop into the finished system. They are a form of Rapid Programming, Extreme Programming or Agile Programming.

The philosophy is to get a partial prototype to the customer within a week or so of starting the project. Features are added in order of priority and the model is refined using customer feedback.

Trade-offs

• Hi-fi prototypes can give you exciting prototypes...

• Special-purpose prototypes can answer specific questions...

• Realistic prototypes may increase validity of user test data...

• ...but can lead to premature commitment to design decisions

• ...but building all those prototypes is expensive, in time at least.

• ...but may delay testing and require more prototype building

Trade-offs

• Iterative refinement enables continual testing and feedback...

• ...but may discourage radical transformations

Other Comments

• If you see the term "Requirements Animation", it means a quick prototype to show the client to make sure you are thinking along the same lines

• Rapid Prototyping ("throw-away prototyping") uses multimedia software to imitate the user interface. It must be thrown away because the final implementation will be in a different language.

Wake up!!

• What are the advantages and problems of prototyping software at the very early stages of development?

• Write your own notes on this at first• Then form a group of three to compare notes• When the group have their stories straight,

we can compare them in plenary session.

Tools for Prototyping

• Allows easy modification of interface details or functionality

• Allow manipulation of prototype components• For evolutionary prototypes, allow reuse of

code• Not constrain the designer to default styles for

interface objects

Tools for Prototyping

• Requirements animation:– Paper– Powerpoint– Drawing packages

• Vertical & Horizontal prototype development environments:– Visual Basic– Delphi– Java

Tools for Prototyping

• Throw-away prototypes:– Director– Visual Basic– Powerpoint– Dreamweaver– Flash

• Evolutionary & Incremental Prototypes:– Object oriented languages

Presenting Designs in a Meeting

• If presenting to Senior Management:– Vision– Concepts– Key features– Impact– Image

• If presenting to client:– Detail of design– Workings of system

Presenting Designs in a Meeting

• If aimed at getting a contract:– The main selling point– Differences between your product and others

• If aim is to agree a concept:– Restate client brief– Clarify requirements– Scope the project

Presenting Designs in a Meeting

• If evaluating early designs:– Design principles– How the parts fit together– Basic navigation

• If evaluating detailed designs:– Size– Shape– Colour– Text

Presenting Designs in a Meeting

• Be clear on what the presentation is about:– Functionality and events?– Content and structure?– Interactions and usability?– Look and feel?– Ease of use?

Sources

• Benyon, D., Turner, P., and Turner, S. (2005) Designing Interactive Systems, Addison Wesley, Harlow, UK.