Prototyping

1

PROTOTYPING

Eman Abed AlWahhab

OUTLINE

What is a prototype? Goals of prototyping How to Prototype? Why prototype? What to prototype? General Features of Prototyping Benefits of Prototyping Disadvantages of Prototyping Prototyping Approaches and Techniques References

2

3

PROTOTYPING

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

Production of an intermediary product to be used as a basis for testing

Aim is to save on time and money Aim is to have something that can be tested with real

users

4

PROTOTYPING

You never get it right first time If at first you don’t succeed …

prototype evaluatedesign

re-design

done!OK?

5

6

WHAT IS A PROTOTYPE

In interaction design it can be any of the following (and more): A series of screen sketches A storyboard, i.e. a cartoon-like series of scenes A PowerPoint slide show A video simulating the use of a system A piece of software with limited functionality written

in the target language or in another language

7

8

PITFALLS OF PROTOTYPING

Moving little by little … but to where

1. need a good start point 2. need to understand what is wrong

9

GOALS OF PROTOTYPINGPrototyping enables evaluation, happens throughout

Exploring requirements Market analysis, participatory design

Choosing among alternatives Risky or critical features, go/no-go decisions

Empirical usability testing As early as possible, try out ideas with target users

Evolutionary development May deliberately choose a malleable software platform, building

software in incremental, iterative fashion

10

HOW TO PROTOTYPE?Build a prototype of the basic functionality, especially

the interface

Test the prototype, which will uncover design errors

Correct the errors

Repeat until you have a clean design

Prototyping is a major tool for improving usability Heavily used in industry

11

12

JOURNEY OF THE PROTOTYPING PROCESS

Goals

Functionality Evaluate

Develop

PROTOTYPING PROCESS

13

14

WHY PROTOTYPE

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

15

WHY PROTOTYPE

Traditional software development: you can’t test until you implement

Implementation is expensive, and there is nothing to test until you have made that expenditure of effort and schedule time

Result: any design errors are built in to the first thing you can test, and it is very expensive to make changes

Result: design errors, unless they are really bad, are left in the product

16

WHAT IS PROTOTYPED ?

Technical issues

Work flow, task design

Screen layouts and information display

Difficult, critical areas

17

18

GENERAL FEATURES OF PROTOTYPING Enables the designer to quickly build or create

examples of :- The data entry form The menu structure and order The dialogue styles Error messages

Should be inexpensive to develop – intention is to discard/modify it

Should not require programming skills

19

PROTOTYPING FOR USABILITY

Usability = ease of use of an application Design typical user task scenarios Identify tasks based on the scenarios Use “Real Users” to test Watch user performing task Iterate design based on test

20

COST OF PROTOTYPING

Cheaper than not doing it...... Cost of repairing an error made in analysis and design

phase can cost up to 100 times the original cost Usability work should amount for 5-10% of a project’s

budget Testing early, iterating often makes the product

cheaper. Prototyping offers a cheap means of testing usability

early in the lifecycle

21

USERS & PROTOTYPES

The only way to really test the interface of a prototype is with real users

The lifecycles give us a way to feed what we discover back into the development process

The question remains of the best way of involving the users

22

Early prototyping Used to evaluate function and interface

Late prototyping Used to evaluate performance

EARLY PROTOTYPING VS. LATE PROTOTYPING

BENEFITS OF PROTOTYPING

Can be used to test every detail of the final product before the product is built

Results in higher user satisfaction

Users are better at evaluating an existing (vs described) system

It brings the users into the process early

23

DISADVANTAGES OF PROTOTYPING

Users may be unfamiliar with the technique.

Management may think that the project is nearly finished if the prototype is “too good,” or that the prototype can be converted into the final product.

24

EVALUATION

It is no good building a prototype if you do not evaluate it!!

Evaluation is another key feature of user centred design

Evaluation will be covered later in the module

25

26

PROTOTYPE REPRESENTATION

How to represent the prototype? Mockup Storyboard Sketches Scenarios Screenshots Functional interface

27

EXAMPLE USE TAGLINES / CAPTIONS

Keep it short: show as much as necessary but not more

28

MOCKUPS / WIREFRAMES

Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the details

PROTOTYPING APPROACHES AND TECHNIQUES

Approaches: Throwaway vs Evolutionary vs Incremental Horizontal vs Vertical Low vs High fidelity

Different techniques including: Storyboards Paper prototypes Wizard of Oz Software prototypes

29

30

PROTOTYPING TECHNIQUES

The three major kinds of prototyping are “Throw away” prototyping ( “rapid prototyping”)

used exclusively in requirements gathering Incremental prototyping

not actually prototyping at all, but the delivery of prioritized functions incrementally to a single, overall design

Evolutionary prototyping (“Rapid Application Development, RAD) as for incremental prototyping but with evolving design

THROWAWAY-EVOLUTIONARY-INCREMENTAL Throwaway (or revolutionary) prototypes

are built, tested and thrown away (useful in early stages) knowledge gained contributes to final system / next prototype can be expensive The prototype is used to get the specs right, then discarded!!

Incremental prototypes final system built as separate components which are released

separately and gradually integrated

Evolutionary prototypes are not discarded but serve as basis for next iteration of the

design danger of initially bad designs persisting The prototype eventually becomes the product

31

THROW-AWAY PROTOTYPING

32

INCREMENTAL DEVELOPMENT PROCESS

33

EVOLUTIONARY PROTOTYPING

34

OTHER PROTOTYPING TECHNIQUES

Full prototype full functionality, lower performance than production

software Horizontal prototype

displays “breadth” of functionality, no lower level detail “back end” support Ex. Database link

Vertical prototype full functionality and performance of a “slice” or small

part of the system

35

36

Different Features

Scenario

Vertical P

roto

type

Horizontal Prototype

Full System

Fu

nctio

nality

37

HORIZONTAL PROTOTYPING

Broad and shallow

Overview with limited underlying functionality

Simulation of entire interface

38

HORIZONTAL PROTOTYPE: BROAD BUT ONLY TOP-LEVEL

39

HORIZONTAL PROTOTYPING

Disadvantages Not possible to perform real work Users cannot interact with real data Often possible to create a wish list interface

Advantages Can be created quickly Gives an idea of how the whole interface will hang

together Identifies top level functionality

40

VERTICAL PROTOTYPING

Reduction of number of features In-depth functionality for a few selected features Tests part of system Tests in depth under realistic circumstances with

real user tasks Main limitation: users cannot move freely

through the system

VERTICAL PROTOTYPE: DEEP, BUT ONLY SOME FUNCTIONS

41

42

FIDELITY

Degree to which prototype accurately represents the appearance and interaction of the product

Judged by how it appears to the person viewing it Not similarity to actual application Not the degree to which the code and other

attributes invisible to the user are accurate

43

FIDELITY SPECTRUM

High Fidelity Close to final product Electronically faithful Uses similar media

Low Fidelity Basis for final product Proof of concept Use of low cost, non-electronic media

LOW-FIDELITY PROTOTYPING

Does not look very much like the final product Uses materials that are very different from the intended final

version, such as paper and cardboard rather than electronic screens and metal

Used during early stages of development Cheap and easy to modify so they support the exploration of

alternative designs and ideas It is never intended to be integrated into the final system.

They are for exploration only

44

EXAMPLES OF LOW-FIDELITY PROTOTYPING

Storyboards Sketching Index cards ‘Wizard of Oz’

45

46

STORYBOARDING A series of key frames as sketches

Originally from film; used to get the idea of a scene Snapshots of the interface at particular points in the

interaction Users can evaluate quickly the direction the interface

is heading

47

Scan the stroller ->

Change the color ->

Place the order ->

Initial screen

48

Scan the shirt ->

Touch previous item ->

Delete that item->

Alternatepath…

49

SKETCHES Drawing of the outward appearance of the intended

system Crudity means people concentrate on high level

concepts But hard to envision a dialog’s progression

Computer Telephone

Last Name:

First Name:

Phone:

Place Call Help

50

51

52

• Index cards (3 X 5 inches) • Each card represents one screen• Often used in website development

USING INDEX CARDS

INDEX CARD EXAMPLE (SCREEN1)

53

INDEX CARD EXAMPLE (SCREEN2)

54

55

‘WIZARD-OF-OZ’ PROTOTYPING• The user thinks they are interacting with a

computer, but a developer is responding to output rather than the system.

• It is the ‘wizard’ (a person from the design team) who is responding rather than the system

• Usually done early in design to understand users’ expectations

>Blurb blurb>Do this>Why?

User

HIGH-FIDELITY PROTOTYPING

Choice of materials and methods Similar or identical to the ones in the final product

Looks more like the final system Appearance, not functionality

Common development environments Macromedia Director, PowerPoint, Visual BasicWeb

development tools Misled user expectations

Users may think they have a full system

56

57

EXAMPLE

HCI Prototype - iPod iCalendar. Android used to build high-fidelity prototype for HCI adjustments

LO-FI VS HI-FI PROTOTYPINGLO-Fi Hi-Fi

58

ADVANTAGES/DISADVANTAGES

59

Prototype Advantages Disadvantages

Low-fidelity prototype

- low developmental cost- evaluate multiple design concepts

- limited error checking - navigational and flow limitations

High-fidelity prototype

- fully interactive- look and feel of final product- clearly defines navigational scheme

- more expensive to develop- time consuming to build- developers are reluctant to change something they have crafted for hours

COMPROMISES IN PROTOTYPING

All prototypes involve compromises Compromises in low-fidelity prototypes:

device doesn't actually work Compromises in high-fidelity prototypes:

slow response sketchy icons limited functionality available

Two common types of compromise ‘horizontal’: provide a wide range of functions, but

with little detail ‘vertical’: provide a lot of detail for only a few

functions 60

CONSTRUCTION

61

• Taking the prototypes (or learning from them) and creating a

whole

• Quality must be attended to: usability , reliability, robustness,

maintainability, integrity, portability, efficiency, etc..

• Product must be engineered

• Evolutionary prototyping

• ‘Throw-away’ prototyping

CONCLUSION

Prototyping is used to evaluate, iterate and improve

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

Construction: avoid temptation to build the final product from Hi-Fi prototypes

62

63

REFERENCES

Paper Prototyping: the fast and easy way to design and refine user interfaces

http://paperprototyping.com/

Models, Prototypes, and Evaluations for HCI Design: Making the Structured

Approach Practical George Casaday, Cynthia Rainis

http://www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm

www.sigchi.org/chi95/proceedings/tutors/gc_bdy.htm

http://hci.stanford.edu/research/prototyping/

http://pages.cpsc.ucalgary.ca/~saul/hci_topics/topics/prototyping.html

http://

hci.epfl.ch/teaching/hci/course_material/lofi-prototype/lecture5-lofi_proto-x6.pdf

64