webinar

Paper prototyping

Maksim Gaponov

Moscow

www.luxoft.com

About presenter

Maksim GaponovAgile Coach, Luxoft Russia

www.luxoft.com

What prototype is?

Prototype is a working

model of future system

www.luxoft.com

What prototypes are used for?

Know more about a product

Get feedback

Get information about possible problems during production

Get an ability to change something before production

www.luxoft.com

Prototype as documentation

Far more compact than text

Does not take much time to

understand

Simplifies development

Reduces development time

www.luxoft.com

Prototype as communication

– So, it’s all clear now?

– Sure! Yes!

www.luxoft.com

Why people use products?

Users have goals

To achieve goals users

perform tasks

Tools are used to

accomplish tasks

www.luxoft.com

How product is born?

www.luxoft.com

Levels suitable for prototyping

Pro

toty

pin

g

www.luxoft.com

Have more than one option? Prototype!

www.luxoft.com

Fast & cheap

Right fidelity

No software/hardware

limitations

Power of paper prototyping

Collaborative

Can be done with clients

No special skills needed

www.luxoft.com

Basic tools

Paper

Pencils, pens, markers,

sharpies

Stickers of different sizes

Scissors

Scotch tape

Transparent paper

www.luxoft.com

Extra tools

Special sets for different

interfaces (desktop, web,

mobile)

Rulers with interface

elements

www.luxoft.com

DIY tools

Printed and cutout interface

elements on magnet paper

Interface elements printed

on stickers

www.luxoft.com

Start with a sketch!

www.luxoft.com

Personal card example

www.luxoft.com

Editing personal data

www.luxoft.com

Adding a child

www.luxoft.com

Seems pretty interactive? Argh!

www.luxoft.com

More than one screen? Use sketchboards!

www.luxoft.com

Sketchboard for galleries prototype

www.luxoft.com

Gallery page prototype

www.luxoft.com

Adding an image modal window

www.luxoft.com

Added new image

www.luxoft.com

Setting up access to gallery

www.luxoft.com

Access changed

www.luxoft.com

Testing a prototype

How to prepare for testing

Decide what exactly you

want to test

Prepare scenarios

Think about interactions

Keep in mind

Wrong people lead to wrong

results

Moderation should be

moderate

www.luxoft.com

Running a test

People needed

User

Moderator

Watcher

Test phases

Set the stage

Test prototype

Get feedback

www.luxoft.com

Analyzing test results

Task completion frequency

Task completion time

Errors and missteps

User comments

Watcher notes

www.luxoft.com

Refining your prototype

Prototyping is an iterative

process

Build a prototype, test it on

users, refine prototype with

new knowledge

2-3 iterations are usually

enough

www.luxoft.com

Gallery page refinements

www.luxoft.com

Editing gallery name

www.luxoft.com

Rotating an image

www.luxoft.com

Further reading

• Prototyping by Todd Zaki Warfel

• Paper Prototyping: The Fast and Easy Way to Design

and Refine User Interfaces by Carolyn Snyder

• Sketching User Experiences: Getting the Design Right

and the Right Design by Bill Buxton

• The Elements of User Experience: User-Centered

Design for the Web and Beyond by Jesse James Garrett

www.luxoft.com

Thanks!