Prototyping

What is a prototype?prototypenouna first or preliminary model of something from which other forms are developed or copied

Webster Dictionary

Prototypes are not the final system, merelyrepresentations of that system

Why prototyping?Identifying user interface and other requirements.

Putting together a prototype will force you to think through the details and user experience of your product ideas.

Once you have a prototype, you'll be able to show it to people and collect detailed continuos feedback.

Keep in mind:

★ It doesn’t need to be computer based

★ It doesn’t need to be fully functional

★ we can rely on tools...

Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.

low fidelity high fidelitystart design end design

Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.

low fidelity high fidelitystart design end design

Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.

low fidelity high fidelitystart design end design

Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.

low fidelity high fidelitystart design end design

Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.

low fidelity high fidelitystart design end design

Prototyping iterationsAs the Prototyping refines, the Fidelity of the prototype increases.

low fidelity high fidelitystart design end design

TestingTest scenarios against the prototypes and get feedback on the interaction

Scenarios can represent the workflow (storyboard) of the concept

Participants of a test session:

Facilitator

Observer

“Application” or “Human Computer”

User

Low-Fi PrototypingTakes only a few hours

Can test multiple alternatives

Can change the design as you test

Allows designers & users to work together

★ Observe how users are interacting with the interface – go with what they think!

Adapt!

Example

Your turn! Make a paper prototype of a

concept that you have analyzed in your project

Have someone else test it

Make a video!

40 mins

Hi-fi prototypesAre similar in look and feel to final product

It is useful for detailed evaluation of the main design elements (content, visuals, interactivity, functionality and media)

It often constitutes a crucial stage in client acceptance (final design document)

Developed an stage of the project when ideas are beginning to firm up

“Wizard of Oz” prototypingUser thinks having interacting with a computer, but a developer is responding to output rather than the system.

Usually done early in design to understand users’ expectations (requirements)

Trade-offs in prototypingHigh-quality graphics and animation can be used to create convincing and exciting prototypes but may also lead to premature commitment to some design decision.

Detailed special-purpose prototypes help to answer specific questions about a design, but building a meaningful prototype for each issue is expensive.

Realistic prototypes increase the validity of user test data, but may postpone testing, or require construction of throw-away prototypes.

Iterative refinement of an implementation enables continual testing and feedback, but may discourage consideration of radical transformations.

Prototyping toolsLo-fi: Hi-fi:

Pape

r, Pen

, Pos

t-it,

Scis

ors,

etc.

* Paid tools, some have trial versions available

Moc

king

bird

*

Balsa

miq*

popA

pp

Mak

eyM

akey

Litt

leBits

Ardu

ino

RAW

Pow

er Po

int /

Key

note

Illus

trat

or/P

hoto

shop

/Visi

o

invi

sio

All!Websites

Mobile appsHardware (interfaces, games, sensors)

Data Visualization3D modeling

Tink

erca

d

Prototyping toolsLo-fi: Hi-fi:

Pape

r, Pen

, Pos

t-it,

Scis

ors,

etc.

All!

Prototyping toolsLo-fi: Hi-fi:

Illus

trat

or/P

hoto

shop

/Visi

o

Websites Mobile appsData Visualization

Prototyping toolsLo-fi: Hi-fi:

Pow

er Po

int /

Key

note

Websites Mobile appsData Visualization

Prototyping toolsLo-fi: Hi-fi:

* Paid tools, some have trial versions available

Moc

king

bird

*

Balsa

miq*

Websites Mobile apps

Prototyping toolsLo-fi: Hi-fi:

* Paid tools, some have trial versions available

popA

pp

invi

sion

Websites Mobile apps

Prototyping toolsLo-fi: Hi-fi:

Mak

eyM

akey

Hardware (interfaces, games, sensors)

Prototyping toolsLo-fi: Hi-fi:

Litt

leBits

Hardware (interfaces, games, sensors)

Prototyping toolsLo-fi: Hi-fi:

3D modelingTi

nker

cad

Prototyping toolsLo-fi: Hi-fi:

Ardu

ino

Hardware (interfaces, games, sensors)

Prototyping toolsLo-fi: Hi-fi:

RAW

Data Visualization

Prototyping toolsLo-fi: Hi-fi:

Pape

r, Pen

, Pos

t-it,

Scis

ors,

etc.

* Paid tools, some have trial versions available

Moc

king

bird

*Ba

lsam

iq*

popA

pp

Mak

eyM

akey

Litt

leBits

Ardu

ino

RAW

Pow

er Po

int /

Key

note

Illus

trat

or/P

hoto

shop

/Visi

o

invi

sio

All!Websites

Mobile appsHardware (interfaces, games, sensors)

Data Visualization3D modeling

Tink

erca

d

Prototyping Timeframe

BrainstormRough ideas of interface styleTasks workflow and redesign

Fine tune interface, screen design

Usability testing and redesign

Low fidelity paper prototypes

Medium fidelity prototypes

High fidelity prototypes / restricted systems

Working systems

Early Stage

Final Stage

Ask yourselfWho is the prototype aimed at?

What is the designer (you) trying to achieve with the prototype?

What stage of the project are things at and what is the context for the use of the prototype?

What technologies (hi-fi or lo-fi) are appropriate?

How easy is it to learn them?

“The point is to explore ideas, not to build an entiresystem or product”