rapid prototyping

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

Prototyping

Uday M. Shankar Yahoo! Bangalore, India


Uday M. Shankar

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

Around 10 years in UI/UX space


WHAT’S THIS SESSION ABOUT?!

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


WHAT’S PROTOTYPING?!


Wine Tasting


It actually makes a difference.


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

Prototyping


it’s an art.


an art of managing expectations


SETTHERIGHTEXPECTATIONS

And deliver u p to tho se expectation s


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?


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


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


Wireframes

www.balsamiq.com


Flex/AIR Protos • A familiar technology

• Great WySiWyG tool

•  Inter-portability between web and desktop

•  Skinning & Cool effects!

• Easy integration with backend


DEMO


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!!!


Single glance


Second glance

Image Mockups

Flash XML Graphics

Flash Catalyst

Flex Project

Flash Builder


DEMO?


Prototyping as a career?


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


Ideas are cheap!!Developing them is not!!


Every single ‘detail’

matters!


Have multiple options to evaluate


Bottom line: Make it work!


Designer vs.

Developer


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


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

–Lao Tse [email protected]

@UDAYMS

UDAYMS.WORDPRESS.COM

Questions?

Email [email protected]

Blogs udayms.wordpress.com flexed.wordpress.com

Twitter @udayms

rapid prototyping

Technology

prototyping tools

prototyping origin

hyderabad india12

adobe tools timeline

flash catalyst integration

design evaluation

design decisions

paper protos