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

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.