0
Uday M. Shankar
                                                               Yahoo! Bangalore, India




12/2/09
       ...
Uday M. Shankar

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

 Around 10 years in UI/UX space

12/2/09   ...
What?                                                                      !
                                             ...
!
12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   4
Wine
  Tasting



12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   5
It actually makes a difference.
12/2/09                 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - ...
12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   7
Prototyping

     Origin - 1603, from Gk. prototypon "a first or
     primitive form," protos "first" + typos
     "impres...
12/2/09
          it’s an art.
             Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   9
an art of 
     managing expectations
12/2/09    Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India  ...
SET
THE
RIGHT

          EXPECTATIONS




                  And deliver up to those expectations

12/2/09   Prototyping Us...
Design evolves
                                          Explore
&

          Understand
                                 ...
Why do this?
•  Going back to the drawing board is not a
   problem!
•  Clear out misunderstandings and
   communication g...
FACT


 Most
people
already
spend

   time
on
prototyping!!!

12/2/09   Prototyping User Experiences | Adobe DevSummit 200...
In 4 steps 
• Create the body – the blueprint
• Make it beautiful - Graphic tools
• Breath life into it - Prototyping
  t...
Axure
RP

                                                            Pro

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




           www.balsamiq.com
12/2/09      Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - ...
Flex/AIR Protos
•  A familiar technology
•  Great WySiWyG tool
•  Inter-portability between web and desktop
•  Skinning & ...
DEMO

12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   20
Flash Catalyst
•  Integration with Adobe tools
•  Timeline feature for effects
•  Easier handling of states
•  More design...
Single glance




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

                     Flash XML Graphics                                        Flex Project




          I...
DEMO?

12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   24
Prototyping
as a career?
12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   25
Ground rules
•  Write quick & dirty code
•  Scalability > optimization
•  Goal is to test experience, concept and
   feasi...
Ideas are cheap!!
 Developing them is not!!
12/2/09      Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad -...
Every single
                                   ‘detail’
                                 matters!



12/2/09   Prototypin...
Have multiple options
                    to evaluate

12/2/09      Prototyping User Experiences | Adobe DevSummit 2009 | ...
Bottom line:
                                Make it work!




12/2/09   Prototyping User Experiences | Adobe DevSummit 20...
Designer
                                       vs.
                                    Developer
12/2/09   Prototyping Us...
Work
with
‘real’

                 users
to

          understand
them





12/2/09    Prototyping User Experiences | Adob...
References
•  Adaptive design & rapid prototyping - Mark
  Rickerby
•  Modeling the mobile UX - Bryan Reiger
•  Principles...
What I hear. I forget.
                What I see, I remember.
                What I do, I understand.
                  ...
Questions?

Email     udayms@gmail.com

Blogs     udayms.wordpress.com
          flexed.wordpress.com

Twitter   @udayms
Upcoming SlideShare
Loading in...5
×

Rapid Prototyping

7,242

Published on

Presentation used at Adobe DevSummit 2009.

Published in: Technology, Travel
1 Comment
9 Likes
Statistics
Notes



  • <b>[Comment posted from</b> http://flexed.wordpress.com/]
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,242
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
516
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Rapid Prototyping"

  1. 1. Uday M. Shankar Yahoo! Bangalore, India 12/2/09 Prototyping
 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 1
  2. 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 2
  3. 3. What? ! ! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 3
  4. 4. ! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 4
  5. 5. Wine Tasting 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 5
  6. 6. It actually makes a difference. 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 6
  7. 7. 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 7
  8. 8. Prototyping Origin - 1603, from Gk. prototypon "a first or primitive form," protos "first" + typos "impression." 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 8
  9. 9. 12/2/09 it’s an art. Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 9
  10. 10. an art of managing expectations 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 10
  11. 11. SET
THE
RIGHT
 EXPECTATIONS

 And deliver up to those expectations 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 11
  12. 12. Design evolves Explore
&
 Understand
 Communicate
 Validate
 Low fidelity High fidelity Less functional detail More functional detail Static Interactive Less formal testing More formal testing Disposable Re-purpose-able Paper Code 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 12
  13. 13. Why do this? •  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
  14. 14. FACT
 Most
people
already
spend
 time
on
prototyping!!!
 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 14
  15. 15. In 4 steps  • Create the body – the blueprint • Make it beautiful - Graphic tools • Breath life into it - Prototyping tools • Add the brains - Technology
  16. 16. Axure
RP
 Pro
 Lucid
Spec
 iPlotz
 Fluid
IA
 Flairbuilder
 Denim
 HotGloo
 Designer
 Mockup
 Petra
 GUI
Design
 Simulify
 Vista
 Screens
 Studio
 Flash
 Catalyst
 Pencil
 Balsamiq
 Mockups
 JusDnmind
 OmniGraffle
 SketchFlow
 Powerpoint
 SketchFlow
 RapidRabb.i t
 Protoshare
 iRise
 Easy
 Prototype
 Visio
 ForeUI
 Mockflow
 Fireworks
 Professional
 What
would
help
you
 do
your
job?
 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 16
  17. 17. Paper Protos 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 17
  18. 18. Wireframes www.balsamiq.com 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 18
  19. 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 19
  20. 20. DEMO 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 20
  21. 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 21
  22. 22. Single glance 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 22
  23. 23. Second glance Flash XML Graphics Flex Project Image Mockups Flash Catalyst Flash Builder 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 23
  24. 24. DEMO? 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 24
  25. 25. Prototyping as a career? 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 25
  26. 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 26
  27. 27. Ideas are cheap!! Developing them is not!! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 27
  28. 28. Every single ‘detail’ matters! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 28
  29. 29. Have multiple options to evaluate 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 29
  30. 30. Bottom line: Make it work! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 30
  31. 31. Designer vs. Developer 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 31
  32. 32. Work
with
‘real’
 users
to
 understand
them
 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 32
  33. 33. References •  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
  34. 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
 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 34
  35. 35. Questions? Email udayms@gmail.com Blogs udayms.wordpress.com flexed.wordpress.com Twitter @udayms
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×