SlideShare a Scribd company logo
1 of 35
Download to read offline
Uday M. Shankar
                                                               Yahoo! Bangalore, India




12/2/09
          Prototyping

            Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India      1
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
What?                                                                      !
                                                                                         !
12/2/09    Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India           3
!
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 - India   6
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
     "impression."


12/2/09              Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   8
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   10
SET
THE
RIGHT

          EXPECTATIONS




                  And deliver up to those expectations

12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   11
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
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
FACT


 Most
people
already
spend

   time
on
prototyping!!!

12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   14
In 4 steps 
• Create the body – the blueprint
• Make it beautiful - Graphic tools
• Breath life into it - Prototyping
  tools
• Add the brains - Technology
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
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 - India   18
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
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 designer friendly
•  More animator friendly
•  Lot more developer friendly too!!!
12/2/09        Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   21
Single glance




12/2/09      Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   22
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
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
   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
Ideas are cheap!!
 Developing them is not!!
12/2/09      Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   27
Every single
                                   ‘detail’
                                 matters!



12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   28
Have multiple options
                    to evaluate

12/2/09      Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   29
Bottom line:
                                Make it work!




12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   30
Designer
                                       vs.
                                    Developer
12/2/09   Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   31
Work
with
‘real’

                 users
to

          understand
them





12/2/09    Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India   32
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
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
Questions?

Email     udayms@gmail.com

Blogs     udayms.wordpress.com
          flexed.wordpress.com

Twitter   @udayms

More Related Content

What's hot

Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Lifegoodfriday
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overviewJenni Leder
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithmscxpartners
 
Rapid Prototyping With jQuery
Rapid Prototyping With jQueryRapid Prototyping With jQuery
Rapid Prototyping With jQueryPaul Bakaus
 
Introduction to Building Wireframes (with OmniGraffle)
Introduction to Building Wireframes (with OmniGraffle)Introduction to Building Wireframes (with OmniGraffle)
Introduction to Building Wireframes (with OmniGraffle)Erin 'Folletto' Casali
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopNetSquared
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to WireframeWilliam Evans
 
Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Chad Udell
 
From PDFs to HTML Prototypes (Short Form)
From PDFs to HTML Prototypes (Short Form)From PDFs to HTML Prototypes (Short Form)
From PDFs to HTML Prototypes (Short Form)nathanacurtis
 
From PDFs to HTML Prototypes
From PDFs to HTML PrototypesFrom PDFs to HTML Prototypes
From PDFs to HTML Prototypesnathanacurtis
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototypingsawsan slii
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Boost Turku - Prototyping Workshop -  Mobile and Web PrototypingBoost Turku - Prototyping Workshop -  Mobile and Web Prototyping
Boost Turku - Prototyping Workshop - Mobile and Web PrototypingJoni Juup
 
Essential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursEssential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursBow Kraivanich
 

What's hot (20)

Design Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to LifeDesign Prototyping: Bringing Wireframes to Life
Design Prototyping: Bringing Wireframes to Life
 
Wireframes - a brief overview
Wireframes - a brief overviewWireframes - a brief overview
Wireframes - a brief overview
 
Interaction designers vs algorithms
Interaction designers vs algorithmsInteraction designers vs algorithms
Interaction designers vs algorithms
 
Rapid Prototyping With jQuery
Rapid Prototyping With jQueryRapid Prototyping With jQuery
Rapid Prototyping With jQuery
 
Prototyping in the design process
Prototyping in the design processPrototyping in the design process
Prototyping in the design process
 
Introduction to Building Wireframes (with OmniGraffle)
Introduction to Building Wireframes (with OmniGraffle)Introduction to Building Wireframes (with OmniGraffle)
Introduction to Building Wireframes (with OmniGraffle)
 
Tech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping WorkshopTech4goodPGH – Rapid Prototyping Workshop
Tech4goodPGH – Rapid Prototyping Workshop
 
Right Way to Wireframe
Right Way to WireframeRight Way to Wireframe
Right Way to Wireframe
 
Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2Designers are from Venus - Presentationas Given to CD2
Designers are from Venus - Presentationas Given to CD2
 
Prototyping
PrototypingPrototyping
Prototyping
 
From PDFs to HTML Prototypes (Short Form)
From PDFs to HTML Prototypes (Short Form)From PDFs to HTML Prototypes (Short Form)
From PDFs to HTML Prototypes (Short Form)
 
From PDFs to HTML Prototypes
From PDFs to HTML PrototypesFrom PDFs to HTML Prototypes
From PDFs to HTML Prototypes
 
UX Work Shop
UX Work ShopUX Work Shop
UX Work Shop
 
UCD and low-fidelity prototyping
UCD and low-fidelity prototypingUCD and low-fidelity prototyping
UCD and low-fidelity prototyping
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
UX. How to start?
UX. How to start?UX. How to start?
UX. How to start?
 
Prototyping
PrototypingPrototyping
Prototyping
 
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
Boost Turku - Prototyping Workshop -  Mobile and Web PrototypingBoost Turku - Prototyping Workshop -  Mobile and Web Prototyping
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
 
Essential Prototyping for Entrepreneurs
Essential Prototyping for EntrepreneursEssential Prototyping for Entrepreneurs
Essential Prototyping for Entrepreneurs
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 

Viewers also liked

Rapid prototyping technology
Rapid prototyping technologyRapid prototyping technology
Rapid prototyping technologyanil mangalan
 
Laminated object manufacturing
Laminated object manufacturingLaminated object manufacturing
Laminated object manufacturingAnkit Raghuwanshi
 
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSTYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSNurhuda Hayati
 
Rapid Prototyping and its Applications
Rapid Prototyping and its ApplicationsRapid Prototyping and its Applications
Rapid Prototyping and its Applicationsmalikusman
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User ExperienceGrant Robinson
 
Rapid prototyping seminar
Rapid prototyping seminarRapid prototyping seminar
Rapid prototyping seminaravwhysoserious
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineeringajithsrc
 

Viewers also liked (9)

Rapid prototyping technology
Rapid prototyping technologyRapid prototyping technology
Rapid prototyping technology
 
Laminated object manufacturing
Laminated object manufacturingLaminated object manufacturing
Laminated object manufacturing
 
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESSTYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
TYPES OF RAPID PROTOTYPING - ADDITIVE PROCESS
 
Rapid Prototyping and its Applications
Rapid Prototyping and its ApplicationsRapid Prototyping and its Applications
Rapid Prototyping and its Applications
 
Visualising the User Experience
Visualising the User ExperienceVisualising the User Experience
Visualising the User Experience
 
Rapid prototyping seminar
Rapid prototyping seminarRapid prototyping seminar
Rapid prototyping seminar
 
Concurrent Engineering
Concurrent EngineeringConcurrent Engineering
Concurrent Engineering
 
Creativity & Innovation
Creativity & InnovationCreativity & Innovation
Creativity & Innovation
 
Creativity & innovation
Creativity & innovationCreativity & innovation
Creativity & innovation
 

Similar to Rapid Prototyping

Science of prototyping
Science of prototypingScience of prototyping
Science of prototypingUday Shankar
 
SnapEngage integration with SAP Business ByDesign
SnapEngage integration with SAP Business ByDesignSnapEngage integration with SAP Business ByDesign
SnapEngage integration with SAP Business ByDesignChristian Happel
 
Are good SharePoint solutions only a myth?
Are good SharePoint solutions only a myth?Are good SharePoint solutions only a myth?
Are good SharePoint solutions only a myth?Adis Jugo
 
Sap net weaver business client introduction
Sap net weaver business client   introductionSap net weaver business client   introduction
Sap net weaver business client introductionRajesh Adhate
 
Mood Board Creator for Wedding Planning Institutions
Mood Board Creator for Wedding Planning InstitutionsMood Board Creator for Wedding Planning Institutions
Mood Board Creator for Wedding Planning InstitutionsSampleBoard
 
Pragmatic Model Driven Development In Java Using Smart Use Cases
Pragmatic Model Driven Development In Java Using Smart Use CasesPragmatic Model Driven Development In Java Using Smart Use Cases
Pragmatic Model Driven Development In Java Using Smart Use CasesRody Middelkoop
 
SAP Screen Personas overview December 2012
SAP Screen Personas overview   December 2012SAP Screen Personas overview   December 2012
SAP Screen Personas overview December 2012Peter Spielvogel
 
The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...
The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...
The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...Matthias Zeller
 
【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>
【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>
【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>智治 長沢
 
Sap personas presentation to sap mentors sept 2012
Sap personas presentation to sap mentors sept 2012Sap personas presentation to sap mentors sept 2012
Sap personas presentation to sap mentors sept 2012Peter Spielvogel
 
An abundance of choice in the cloud
An abundance of choice in the cloudAn abundance of choice in the cloud
An abundance of choice in the cloudChristian Happel
 
Prototyping user interactions in web apps
Prototyping user interactions in web appsPrototyping user interactions in web apps
Prototyping user interactions in web appsPatrick NDJIENTCHEU
 
How can you keep the customer inputs flowing, the teams running and still kno...
How can you keep the customer inputs flowing, the teams running and still kno...How can you keep the customer inputs flowing, the teams running and still kno...
How can you keep the customer inputs flowing, the teams running and still kno...AgileSparks
 
Articulate Studio '09 Presentation
Articulate Studio '09 PresentationArticulate Studio '09 Presentation
Articulate Studio '09 PresentationJenise Cook
 
Aras PLM Software Visualization
Aras PLM Software VisualizationAras PLM Software Visualization
Aras PLM Software VisualizationAras
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototypingGeorge Abraham
 

Similar to Rapid Prototyping (20)

Science of prototyping
Science of prototypingScience of prototyping
Science of prototyping
 
Anurag jangra
Anurag jangraAnurag jangra
Anurag jangra
 
SnapEngage integration with SAP Business ByDesign
SnapEngage integration with SAP Business ByDesignSnapEngage integration with SAP Business ByDesign
SnapEngage integration with SAP Business ByDesign
 
Are good SharePoint solutions only a myth?
Are good SharePoint solutions only a myth?Are good SharePoint solutions only a myth?
Are good SharePoint solutions only a myth?
 
Sap net weaver business client introduction
Sap net weaver business client   introductionSap net weaver business client   introduction
Sap net weaver business client introduction
 
Gumbo Deck
Gumbo DeckGumbo Deck
Gumbo Deck
 
Mood Board Creator for Wedding Planning Institutions
Mood Board Creator for Wedding Planning InstitutionsMood Board Creator for Wedding Planning Institutions
Mood Board Creator for Wedding Planning Institutions
 
Lean Prototyping Guide
Lean Prototyping GuideLean Prototyping Guide
Lean Prototyping Guide
 
Pragmatic Model Driven Development In Java Using Smart Use Cases
Pragmatic Model Driven Development In Java Using Smart Use CasesPragmatic Model Driven Development In Java Using Smart Use Cases
Pragmatic Model Driven Development In Java Using Smart Use Cases
 
SAP Screen Personas overview December 2012
SAP Screen Personas overview   December 2012SAP Screen Personas overview   December 2012
SAP Screen Personas overview December 2012
 
The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...
The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...
The Future of your Desktop - Trends in Enterprise Mash-Up, Collaboration and ...
 
【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>
【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>
【17-A-2】 10年後も通用する開発環境の秘訣 <デブサミ2012>
 
Sap personas presentation to sap mentors sept 2012
Sap personas presentation to sap mentors sept 2012Sap personas presentation to sap mentors sept 2012
Sap personas presentation to sap mentors sept 2012
 
Xapstr
XapstrXapstr
Xapstr
 
An abundance of choice in the cloud
An abundance of choice in the cloudAn abundance of choice in the cloud
An abundance of choice in the cloud
 
Prototyping user interactions in web apps
Prototyping user interactions in web appsPrototyping user interactions in web apps
Prototyping user interactions in web apps
 
How can you keep the customer inputs flowing, the teams running and still kno...
How can you keep the customer inputs flowing, the teams running and still kno...How can you keep the customer inputs flowing, the teams running and still kno...
How can you keep the customer inputs flowing, the teams running and still kno...
 
Articulate Studio '09 Presentation
Articulate Studio '09 PresentationArticulate Studio '09 Presentation
Articulate Studio '09 Presentation
 
Aras PLM Software Visualization
Aras PLM Software VisualizationAras PLM Software Visualization
Aras PLM Software Visualization
 
Managing change with prototyping
Managing change with prototypingManaging change with prototyping
Managing change with prototyping
 

More from Uday Shankar

Crafting delightful experiences
Crafting delightful experiencesCrafting delightful experiences
Crafting delightful experiencesUday Shankar
 
Design - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightfulDesign - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightfulUday Shankar
 
Ninja Prototyping with Templating Frameworks
Ninja Prototyping with Templating FrameworksNinja Prototyping with Templating Frameworks
Ninja Prototyping with Templating FrameworksUday Shankar
 
The Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI DesignThe Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI DesignUday Shankar
 
What Drives The World
What Drives The WorldWhat Drives The World
What Drives The WorldUday Shankar
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User ExperienceUday Shankar
 
Touch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX PerspectiveTouch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX PerspectiveUday Shankar
 
Mobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & TourismMobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & TourismUday Shankar
 
Prototyping SMS/Voice Services
Prototyping SMS/Voice ServicesPrototyping SMS/Voice Services
Prototyping SMS/Voice ServicesUday Shankar
 
UI Engineering - Rebooted
UI Engineering - RebootedUI Engineering - Rebooted
UI Engineering - RebootedUday Shankar
 
Usability & Prototyping
Usability & PrototypingUsability & Prototyping
Usability & PrototypingUday Shankar
 
User Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great uiUser Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great uiUday Shankar
 
Effective UI Development using Adobe Flex
Effective UI Development using Adobe FlexEffective UI Development using Adobe Flex
Effective UI Development using Adobe FlexUday Shankar
 

More from Uday Shankar (16)

Crafting delightful experiences
Crafting delightful experiencesCrafting delightful experiences
Crafting delightful experiences
 
Design - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightfulDesign - What differentiates the useful from usable & delightful
Design - What differentiates the useful from usable & delightful
 
Ninja Prototyping with Templating Frameworks
Ninja Prototyping with Templating FrameworksNinja Prototyping with Templating Frameworks
Ninja Prototyping with Templating Frameworks
 
The Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI DesignThe Good, Bad & Ugly of UI Design
The Good, Bad & Ugly of UI Design
 
Prototyping
PrototypingPrototyping
Prototyping
 
What Drives The World
What Drives The WorldWhat Drives The World
What Drives The World
 
Demystifying User Experience
Demystifying User ExperienceDemystifying User Experience
Demystifying User Experience
 
Touch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX PerspectiveTouch & Multi Touch - A UX Perspective
Touch & Multi Touch - A UX Perspective
 
Mobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & TourismMobile Applications, Emerging Markets & Tourism
Mobile Applications, Emerging Markets & Tourism
 
Khuljaa Sim Sim
Khuljaa Sim SimKhuljaa Sim Sim
Khuljaa Sim Sim
 
Prototyping SMS/Voice Services
Prototyping SMS/Voice ServicesPrototyping SMS/Voice Services
Prototyping SMS/Voice Services
 
UI Engineering - Rebooted
UI Engineering - RebootedUI Engineering - Rebooted
UI Engineering - Rebooted
 
Usability & Prototyping
Usability & PrototypingUsability & Prototyping
Usability & Prototyping
 
User Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great uiUser Experioence - delivering great ux through great ui
User Experioence - delivering great ux through great ui
 
Effective UI Development using Adobe Flex
Effective UI Development using Adobe FlexEffective UI Development using Adobe Flex
Effective UI Development using Adobe Flex
 
Adobe® Flex™
Adobe® Flex™Adobe® Flex™
Adobe® Flex™
 

Recently uploaded

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 

Recently uploaded (20)

04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

Rapid Prototyping

  • 1. Uday M. Shankar Yahoo! Bangalore, India 12/2/09 Prototyping
 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 1
  • 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. What? ! ! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 3
  • 4. ! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 4
  • 5. Wine Tasting 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 5
  • 6. It actually makes a difference. 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 6
  • 7. 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 7
  • 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. 12/2/09 it’s an art. Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 9
  • 10. an art of managing expectations 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 10
  • 11. SET
THE
RIGHT
 EXPECTATIONS

 And deliver up to those expectations 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 11
  • 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. 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. FACT
 Most
people
already
spend
 time
on
prototyping!!!
 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 14
  • 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. 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. Paper Protos 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 17
  • 18. Wireframes www.balsamiq.com 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 18
  • 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. DEMO 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 20
  • 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. Single glance 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 22
  • 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. DEMO? 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 24
  • 25. Prototyping as a career? 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 25
  • 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. Ideas are cheap!! Developing them is not!! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 27
  • 28. Every single ‘detail’ matters! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 28
  • 29. Have multiple options to evaluate 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 29
  • 30. Bottom line: Make it work! 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 30
  • 31. Designer vs. Developer 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 31
  • 32. Work
with
‘real’
 users
to
 understand
them
 12/2/09 Prototyping User Experiences | Adobe DevSummit 2009 | Hyderabad - India 32
  • 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. 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. Questions? Email udayms@gmail.com Blogs udayms.wordpress.com flexed.wordpress.com Twitter @udayms