1

Paper (low-fidelity) Prototypes

2

When we are designing

• When we are thinking about design • We are visualizing the interface inside our head

(imaginary)• Our short term memory is limited• For most of us, manipulating images mentally is quite

difficult

• Expressing a design idea in a concrete form• As a sketch, model ……• Acts as a feedback mechanism to the designer

(backtalk)• Allows people to communicate ideas to others.• materials, platforms, cost

3

Why not use a computer tool?

• Our mental processes are much faster than our ability to express the ideas

• Drawing is much faster than using a design environment (cad, ide etc)

• With a drawing you can be ambiguous and sketchy• Where computer tools often force premature decisions

• With a drawing you don’t worry about alignment, size, colour, font …..• All of these are distracters when

• form and function should be the focus early in the design process

At then ends of the spectrum

• These two designs are the same (bad) solutions to a problem• Sketch 8.6 changes• VB Form 6.5 changes

So what happens if you partly tidy?

What happened?

• Number of changes • Enjoyment

0

2

4

6

8

10

12

14

16

18

20

22

24

26

28

30

Low formality(paper)

Low formality Medium-lowformality

Medium-highformality

High formality

Levels of formality

To

tal c

ha

ng

es

Mean total change

3.37(sd = 1.35)

4.2(sd= 1.35)

3.17(sd = 1.15)

2.53(sd = 0.90)

1.7(sd = 1.02)

0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

High formality Medium-highformality

Medium-lowformality

Low formality Low formality(paper)

Levels of formality

Mea

n ra

nk

References

• Plimmer, B. E., Apperley, M., Evaluating a Sketch Environment for Novice Programmers, in proc SIGCHI, ACM, (2003), 1018-1019

• Plimmer, B. E., Apperley, M., Software for Students to Sketch Interface Designs, in proc Interact, (2003), 73-80

• Yeung, L. W. S., Exploring beautification and the effects of designs' level of formality on the design performance during the early stages of the design process Department of Psychology, MSc, University of Auckland, (2007)

8

How to make a low-fi prototype

• Pen, paper, coloured pencils, scissors, cellotape …..• Just like primary school • Phone interface for airline booking

9

10

Make a device

• Use the cornflakes box, a hunk of polystyrene ……

• Paint/ draw on the controls• Stick on junk• Use buttons to represent dials

Nancy Frishberg, Prototyping with junk, Interactions,2006, V13:1 Pp 21 – 23, ACM

11

Wizard of Oz

• Use the prototype and your imagination to interact with the interface

• One person is the computer• One person is the user• One person is the observer

• The user might say ‘click’ a button• The computer response by displaying the next screen

(or what ever)

• There is a nice video of this on you tube “Hanmail Paper Prototype” http://www.youtube.com/watch?v=GrV2SZuRPv0&eurl=http://deeplinking.net/paper-web/

12

Iterate rapidly

• When you find a problem with the interface• Change it – tape over … twink

Observer • Write down what is changed AND why• Write down the functions the system needs to

support

• If you don’t write them down you WILL forget!!!!

Case Study – old interface

13

manufacturing scheduler

Attributes by task

14

This is about ¼ of the table

Competitors

15

Lo-fi Prototype

16

Hi-fi Prototype

17