Download - 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 [email protected]
@UDAYMS
UDAYMS.WORDPRESS.COM