rapid prototyping

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 1

Prototyping

Uday M. Shankar Yahoo! Bangalore, India

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 2

Uday M. Shankar

Working with Yahoo! R&D as Principal Engineer, Prototyping

Around 10 years in UI/UX space

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 3

WHAT’S THIS SESSION ABOUT?!

What? What’s possible with the Flash platform?!

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 4

WHAT’S PROTOTYPING?!

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 5

Wine Tasting

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 6

It actually makes a difference.

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 7

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 8

Origin - 1603, from Gk. prototypon "a first or primitive form," protos "first" + typos "impression."

Prototyping

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 9

it’s an art.

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 10

an art of managing expectations

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 11

SETTHERIGHTEXPECTATIONS

And deliver u p to tho se expectation s

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 12

Design evolves

Low fidelity

Less functional detail Static Less formal testing Disposable Paper

Understand Explore&Validate Communicate

High fidelity

More functional detail Interactive

More formal testing Re-purpose-able

Code

• Going back to the drawing board is not a problem!

• Clear out misunderstandings and communication gaps of requirement study

• Documented design evaluation

•  Sign off on design decisions

Why do this?

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 14

FACT

Mostpeoplealreadyspendtimeonprototyping!!!

• Create the body – the blueprint

• Make it beautiful - Graphic tools

• Breath life into it - Prototyping tools

• Add the brains - Technology

In 4 steps

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 16

BalsamiqMockups

Mockflow

Powerpoint

Protoshare

DesignerVista

AxureRPPro

Petra

EasyPrototype

JusDnmind

FluidIAiPlotz

Flairbuilder

Simulify

SketchFlow

VisioProfessional

MockupScreens

OmniGraffle

Pencil

ForeUI

Denim

SketchFlow

Fireworks

RapidRabb.it

LucidSpec

FlashCatalyst

GUIDesignStudio

HotGloo

iRise

Whatwouldhelpyoudoyourjob?

Paper Protos 12/2/09 17 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 18

Wireframes

www.balsamiq.com

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 19

Flex/AIR Protos • A familiar technology

• Great WySiWyG tool

•  Inter-portability between web and desktop

•  Skinning & Cool effects!

• Easy integration with backend

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 20

DEMO

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 21

Flash Catalyst •  Integration with Adobe tools

• Timeline feature for effects

• Easier handling of states

• More designer friendly

• More animator friendly

• Lot more developer friendly too!!!

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 22

Single glance

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 23

Second glance

Image Mockups

Flash XML Graphics

Flash Catalyst

Flex Project

Flash Builder

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 24

DEMO?

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 25

Prototyping as a career?

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 26

Ground rules • Write quick & dirty code

•  Scalability > optimization

• Goal is to test experience, concept and feasibility. Not robustness.

• Abstract front-end from back-end

• Always use dummy data while prototyping

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 27

Ideas are cheap!!Developing them is not!!

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 28

Every single ‘detail’

matters!

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 29

Have multiple options to evaluate

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 30

Bottom line: Make it work!

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 31

Designer vs.

Developer

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 32

Workwith‘real’usersto

understandthem

• Adaptive design & rapid prototyping - Mark Rickerby

• Modeling the mobile UX - Bryan Reiger •  Principles of rapid prototyping for design -

KeeKim Heng

•  Spoilt for choice - Suze Ingram

•  Slideshare.net

References

12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 34

What I hear. I forget. What I see, I remember. What I do, I understand.

–Lao Tse UDAYMS@GMAIL.COM

@UDAYMS

UDAYMS.WORDPRESS.COM

Questions?

Email udayms@gmail.com

Blogs udayms.wordpress.com flexed.wordpress.com

Twitter @udayms