SlideShare ist ein Scribd-Unternehmen logo
1 von 63
Effective Prototyping
definition • best practices • tools




    Jonathan Arnowitz • Michael Arent • Nevin Berger
                  SF Bay IxDA/BayCHI
                 Google, Mountain View
                    16 January 2008

                                                       1
Agenda



•   Forward


•   What is prototyping, who does it and why? (Michael Arent)


•   Prototyping Process (Jonathan Arnowitz)


•   Rapid Prototyping with Excel (Nevin Berger)


•   Q&A
Forward: why this talk?

    Our goals for effective prototyping are:


•   Democratize prototyping


•   Demystify


    •   the design process


    •   the prototyping activity


•   Help people create higher quality software


•   Make your prototyping help the software creation process and make you look
    good
Short exercise

You have 3 minutes.
Quickly jot down the following on two note cards.

When nished hand your cards up to the front to us.

2 most important best practices with prototyping
  • Best practice 1
  • Best practice 2
2 most important things that denes a prototype to you
  • Aspect 1
  • Aspect 2
When nished hand your cards up to the front to us.
What is prototyping,
who does it and why?
What is a prototype:
                      the dictionary

Denition No. 1


   • pro·to·type
     n. 1. An original or model after which anything is copied; the pattern of anything to be
     engraved, or otherwise copied, cast, or the like; a primary form; exemplar; archetype.
     – Webster’s 1913 Dictionary



Denition No. 2


   • pro·to·type n.
     1. An original type, form, or instance serving as a basis or standard for later stages.
     2. An original, full-scale, and usually working model of a new product or new version of an
     existing product.
     3. An early, typical example.
      – Dictionary.com (2007)
What is a prototype:
         A Designer’s definition

“The use of simplified and incomplete
   models of a design to

  1.explore     ideas,
  2.elaborate      requirements,
  3.rene     specications,
  4.and    test functionality.”
William Lidwell et al, Universal Principles of Design, 2003
What is a prototype: A software
     development denition

A prototype is a model of a design that is:

• complete or incomplete
• portraying specific content and fidelity
• for a specific planned purpose
• for a specific audience(s) and purpose
• planned with specific characteristics
• done in a specific method
• created with a specific tool
What is prototyping?

To be sure it is…




• The most important design artifact in a software project

• The life blood of achieving a rational design outcome with
  or without UCD




Without any planning its success relies purely on serendipity.
What is prototyping?
  If it isn’t for you now, it can be...

•formalized

•manageable

•predictable

•professional

Fact 1: No one has either a degree in prototyping or certicate of proof
they can do it – only a portfolio of examples, at best.

Fact 2: You’re at the mercy of the practitioner’s competence/
incompetence as well as a company’s evolved or non-evolved practices.
What is prototyping?
              It is changing...




• Attention to the topic of prototyping and details of its
  practice have grown 500% in average HCI texts

  Albeit, that is a change from 3 pages to 15 pages in a book
  that is 400-800 pages long.
Why do we prototype?
• Explore and try out design ideas – thus increase
  innovation and creativity

• Validate design requirements and assumptions

• Communicate your ideas to a cross disciplinary group:

    • Fellow software makers

    • Stakeholders

    • End users

    • Customers


• Greatly reduce the high risk and costs of developing poor
  designs
What is prototyping?



                                     +
         Engineering                               Design
Focuses on functions, features and       Focuses on product experience
      technical capabilities.                    and usability.
Who prototypes?
Software makers: Those who envision, design then produce
                       software.

  • Software engineers       • Interaction designers

  • Product managers         • Graphic designers

  • Visionaries              • User researchers

  • Marketers                • Game designers

  • Functional analysts      • and many others…
Excercise 2



On a sheet of paper:

• Make a quick sketch prototype of one screen in a contact
  management software

Again – you have just 3 minutes.
What do you prototype?

Software:                 Software elements:
• Desktop apps            • Information design
• Mobile apps             • Interaction design
• Web sites               • Navigation model
• Web apps and services   • Transaction design
• Visual design           • Visual design and layout
• Utilities               • Branding
• Lots of other stuff…    • System performance
Benets of prototyping

• Verifies or disproves assumptions

• Clarifies requirements – helps set expectations and avoid
  confusion

• Helps identify issues early on

• Brings user perspective early in the process

• Minimizes risks/costs

• Keeps coding rework to a minimum
The Prototyping Process




Jonathan Arnowitz
The Prototyping Process

“Best practice prototyping requires a process -- an effective one.
       Prototyping should not be a random act of design.”
Prototyping Process



• Phase 1: Plan - Decide what you want to prototype

• Phase 2: Prepare - Decide how you want to prototype

• Phase 3: Design - Create a prototype

• Phase 4: Results - Decide what to do next
Prototyping | Waterfall
                          Prototyping steps (not waterfall
                                       steps)
                              Requirements                  Design               Build                  Test
                          Understand Users            Design UIs       Build Prototype          Ensure Usability

                                                                                   Measure design improvement

                                                                                Develop UI specifications

                                                                          Validate prototypes

                                                                Create iterative prototypes

                                                          Validate task scenarios/flows

                                                  Create task scenarios/flows

                                      Define requirements

                           Conduct field studies/focus groups
Prototyping steps                 (not waterfall steps)




Understand Users   Design UIs   Build Prototype        Ensure Usability
Prototyping steps                 (not waterfall steps)




Understand Users   Design UIs   Build Prototype        Ensure Usability
Agile Development




                    23
Agile Development




                    24
Agile Development




                    24
Prototyping process


Phase 1: Plan

• Verify requirements

• Define user or user group

• Develop task flows and scenarios
Types of prototyping requirements

Four main types of requirements (which are contradictory
a fact which should be recognized not swept under the
carpet)

•Business/marketing

•Functional

•Technical

•Usability
Business/marketing requirements
Generally derived from market eld research, market analysis, competitive
analysis, domain expertise, sales force intelligence, focus groups and other
                                   means.

• Regulatory and policy requirements; e.g. accessibility,
  localization, etc.

• Branding considerations

• Marketability and salability potential

• And others…
Functional requirements
The functions required to support business or marketing requirements, such as
                                the ability to:

• Fetch and read mail

• Engage with a transaction process

• Tabulate and manage game points

• Schedule and manage time

• And gazillions of others…
Technical Requirements

  Denes the technology needed to provide the required functionality:

• Software architecture considerations

• Platform considerations

• Development tool considerations

• Optimal performance

• And other technical considerations…
Usability Requirements

 Denes the user experience and usability needs for customer and user
                      adoption of the software:
• Ease of use

• Learnability

• Pragmatics

• Satisfaction/pleasure

• Cognitive and ergonomic considerations
Dene users




How to get information about your users:
• Conduct user research -- site visits, etc.
• Get info from field engineers and sales force
• Participate in user group forums
Develop Task Flows and Scenarios
Prototyping process


Phase 2: Prepare


• Determine characteristics

• Choose a method

• Choose a tool
Dene content and delity
Low delity (wireframe)

                                      High delity
Dene content and delity
Low delity (wireframe)

                                      High delity
Fidelity Matrix
                                 Fidelity

    Content           Low       Medium              High


 Visual Design   1     2    3      4        5   6    7

  Interaction
                 1     2    3      4        5   6    7
    Design

  Information
                 1     2    3      4        5   6    7
     Design

Editorial Content 1    2    3      4        5   6    7

    System
                 1     2    3      4        5   6    7
 Performance
Determine Characteristics

•   Audience: Internal/External


•   Stage: Early/Midterm/Late


•   Speed: Rapid/Diligent


•   Longevity: Short/Medium/Long


•   Expression: Conceptual/Experiential


•   Fidelity: Low/Medium/High


•   Style: Narrative/Interactive


•   Medium: Physical/Digital
Choose a Method
                   The method of prototyping you use will change
                   as your software product develops and evolves.




•   Card sorting
                                                •Blank model prototyping
•   Wireframe prototyping
                                                •Video prototyping
•   Storyboard prototyping
                                                •Wizard of Oz prototyping

•   Paper prototyping
                                                •Coded prototyping (including
                                                scripting and HTML)
•   Digital prototyping
Card Sorting
Wireframe Prototyping
Storyboard Prototyping
Paper Prototyping
Digital Prototyping
Blank Model Prototyping
Video Prototyping
Wizard of Oz Prototyping
Coded Prototyping
Choose a Prototyping Tool

•Word           •VisualBasic
•PowerPoint     •HTML Editor
•Excel          •Dreamweaver
•Visio          •Flex
•Paper          •Director
•Acrobat        •Java
•Photoshop      •VisualStudio
•QuickTime
Choose a Prototyping Tool
                       The right tool for the right method…


   Tools       Storyboard    Wireframe   Visualization   Paper   Wizard of Oz   Blank model   Coded



   Word           ++            +              -          ++          0             0           -

PowerPoint        +++           ++            +           ++         ++             0           -

   Excel           +           +++            ++          +          ++             0           0

   Visio           +           +++            0           +           0             0          +

   Paper          ++           +++            0          +++          0             +           0

  Acrobat         +++           ++            ++          ++         ++             0          +

 Photoshop         +            +            +++          +           +             0          +

 QuickTime         +            0            +++          0          +++            0          ++

VisualBasic        -            ++            ++          +           +             0         +++

HTML Editor       ++            ++            +            -          -             0          ++

Dreamweaver       ++            ++            ++           -          -             0         +++

   Flex            +            ++             -           -          +             +         +++

  Director        ++            ++             -           -          +             +         +++

   Java            -             -             -           -          -              -        +++

VisualStudio       -             -             -           -          +              -        +++
Prototyping process


Phase 3: Design


• Select the design criteria

• Create the design

• Build the prototype
Select Design Criteria

                                     Interaction design criteria:
Visual design criteria:


•    Information flow                 •   Users should feel in control


•    Grid-based organization         •   Complex info should be progressively disclosed


•    Harmonious rhythm and pattern   •   Interaction and navigation should be efficient


•    Unity and variety               •   Minimize user’s memory load

•    Typography                      •   Speak the user’s language

•    Balance                         •   Explicitly show required actions and fields

•    Logical grouping
                                     •   User interfaces should be accessible
Exercise 3
On yet another sheet of paper


•   Make a quick sketch prototype of another screen in a contact management
    system


•   Feedback on your screen design is positive for functionality and information


However new VC money has arrived with new requirements:


    •   The information will be displayed on a mobile device


    •   It will feature emergency contacts for the elderly


    •   This prototype you want to show the product manager and check for all
        functional requirements
Prototyping process

Phase 4: Results


• Define and communicate results to stakeholders


• Validate with domain experts and users as needed


•   Ensure most effective transfer of prototyping results to next steps, including:


     •Definition of a new product
     •Another prototype
     •Development of the product
Prototyping success

Prototyping success depends on:


•   Well defined objectives and areas of responsibility regarding who owns the
    prototype


•   Team trust, empathy, and open mindedness


•   Collaboration and communication with all key stakeholders


•   Effective Prototyping Strategy


•   All supported by a common understanding of prototyping tools and methods
The Book:




Available now at your favorite bookseller.
Rapid Prototyping in Excel




Nevin Berger
Prototyping in Excel?
                  I can’t picture it!
•   Usual reaction


•   Traditionally the tool of choice for managers and accountants


•   Re-inventing an old tool to a new purpose


           • A new way of using features you may have used many time before

•   How Excel prototyping got started


           • Mark Miller and the Enforcer

•   How it has evolved


           • Built a methodology for building prototypes in Excel
Benets of using Excel as a
             prototyping tool
•   Short learning curve – existing expertise


•   Easy access, Excel is often standard issue


•   Can create low to middle fidelities


•   Can create interactive prototypes


•   Supports iterative prototyping because can be very easy and fast to use


•   Workbook is self-contained file


            • Includes all the elements needed to create a prototype

            • The prototype

            • Annotations that support the requirements document
Application features that support
            prototyping
• Can create customized color palette


• Can easily color table cells and put borders on cells to create designs


• Table cell designs can easily be cut and pasted for rapid design


• Has scrollable canvas to meet all design size needs


• Can create simple graphics or use graphics from other programs


• Has hyperlink functionality for linking between pages


• Enforces a grid that is flexible for alignment of graphics and text


• Has robust text tools


• Has a presentation mode
What Excel cannot do

•   Create complicated graphics


            • Need to rely on graphical programs

•   Limited animation effects


            • PowerPoint

            • Ways around this limitation

•   Limited interactivity


            • Compared to Dreamweaver or other HTML programs

            • Have to be creative in interactivity

            • Limited digital testing ability
The End


• To get these samples plus copy of our presentation go
  to:

• http:www.effectiveprototyping.com

• Go to the forum and register

    • Registration is for anti-spam purposes. We will
      never contact you by email unless you let us
      (opt-in)


                                                          85

Weitere ähnliche Inhalte

Was ist angesagt?

Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
User Centered Design Overview
User Centered Design OverviewUser Centered Design Overview
User Centered Design OverviewAaron Hursman
 
Requirements Engineering
Requirements EngineeringRequirements Engineering
Requirements EngineeringBenoy Ramachandran
 
Ch 4 software engineering
Ch 4 software engineeringCh 4 software engineering
Ch 4 software engineeringMohammed Romi
 
395813092-kendall-sad9-pp-01-ppt.ppt
395813092-kendall-sad9-pp-01-ppt.ppt395813092-kendall-sad9-pp-01-ppt.ppt
395813092-kendall-sad9-pp-01-ppt.ppttdimalibot
 
Introduction to Usability
Introduction to UsabilityIntroduction to Usability
Introduction to UsabilityGretchen Thomas
 
Software requirement and specification
Software requirement and specificationSoftware requirement and specification
Software requirement and specificationAman Adhikari
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface designZdeněk Lanc
 
Ch19-Software Engineering 9
Ch19-Software Engineering 9Ch19-Software Engineering 9
Ch19-Software Engineering 9Ian Sommerville
 
Software prototyping
Software prototypingSoftware prototyping
Software prototypingBirju Tank
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential TheoriesRavi Bhadauria
 
Software Engineering - chp3- design
Software Engineering - chp3- designSoftware Engineering - chp3- design
Software Engineering - chp3- designLilia Sfaxi
 
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayUser Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayThomas Memmel
 
1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdfJejeCans
 

Was ist angesagt? (20)

User Centered Design 101
User Centered Design 101User Centered Design 101
User Centered Design 101
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
User Centered Design Overview
User Centered Design OverviewUser Centered Design Overview
User Centered Design Overview
 
Requirements Engineering
Requirements EngineeringRequirements Engineering
Requirements Engineering
 
Ch 4 software engineering
Ch 4 software engineeringCh 4 software engineering
Ch 4 software engineering
 
Ch7 implementation
Ch7 implementationCh7 implementation
Ch7 implementation
 
395813092-kendall-sad9-pp-01-ppt.ppt
395813092-kendall-sad9-pp-01-ppt.ppt395813092-kendall-sad9-pp-01-ppt.ppt
395813092-kendall-sad9-pp-01-ppt.ppt
 
Unit 3
Unit 3Unit 3
Unit 3
 
Introduction to Usability
Introduction to UsabilityIntroduction to Usability
Introduction to Usability
 
Software requirement and specification
Software requirement and specificationSoftware requirement and specification
Software requirement and specification
 
Ch25 configuration management
Ch25 configuration managementCh25 configuration management
Ch25 configuration management
 
Basic Principles of Interface design
Basic Principles of Interface designBasic Principles of Interface design
Basic Principles of Interface design
 
Ch19-Software Engineering 9
Ch19-Software Engineering 9Ch19-Software Engineering 9
Ch19-Software Engineering 9
 
Software prototyping
Software prototypingSoftware prototyping
Software prototyping
 
Introduction to Lean UX
Introduction to Lean UXIntroduction to Lean UX
Introduction to Lean UX
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
 
Software Engineering - chp3- design
Software Engineering - chp3- designSoftware Engineering - chp3- design
Software Engineering - chp3- design
 
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping TodayUser Interface Prototyping - Low- and High-Fidelity Prototyping Today
User Interface Prototyping - Low- and High-Fidelity Prototyping Today
 
LeanUX - Presentation slides
LeanUX - Presentation slidesLeanUX - Presentation slides
LeanUX - Presentation slides
 
1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf1. Design - Intro UIUX Design.pdf
1. Design - Intro UIUX Design.pdf
 

Andere mochten auch

Software Prototyping
Software PrototypingSoftware Prototyping
Software Prototypingdrjms
 
Prototype model
Prototype modelPrototype model
Prototype modelshuisharma
 
A Research Study on importance of Testing and Quality Assurance in Software D...
A Research Study on importance of Testing and Quality Assurance in Software D...A Research Study on importance of Testing and Quality Assurance in Software D...
A Research Study on importance of Testing and Quality Assurance in Software D...Sehrish Asif
 
Iterative Incremental development
Iterative Incremental developmentIterative Incremental development
Iterative Incremental developmentOliver Schreck
 
Bringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototypingBringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototypingService Design Berlin
 
The spiral model
The  spiral  modelThe  spiral  model
The spiral modelphatcom10
 
Spiral Model
Spiral ModelSpiral Model
Spiral ModelSaqib Ahmed
 
Spiral model : System analysis and design
Spiral model : System analysis and designSpiral model : System analysis and design
Spiral model : System analysis and designMitul Desai
 
1 rapid prototyping model
1 rapid prototyping model1 rapid prototyping model
1 rapid prototyping modeldelaco
 
Storyboard
StoryboardStoryboard
Storyboardcmorsburn
 
Spiral model
Spiral modelSpiral model
Spiral modelrewa_monami
 
Modelo basado en prototipos - IngenierĂ­a de Software
Modelo basado en prototipos - IngenierĂ­a de SoftwareModelo basado en prototipos - IngenierĂ­a de Software
Modelo basado en prototipos - IngenierĂ­a de SoftwareJoan Fernando Chipia Lobo
 
Spiral model explanation
Spiral model  explanationSpiral model  explanation
Spiral model explanationUmar Farooq
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideFramebench
 
Modelo de prototipo
Modelo de prototipoModelo de prototipo
Modelo de prototipoyanezcabrera
 
Prototyping is an attitude
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitudeWith Company
 

Andere mochten auch (20)

Software Prototyping
Software PrototypingSoftware Prototyping
Software Prototyping
 
Prototype model
Prototype modelPrototype model
Prototype model
 
A Research Study on importance of Testing and Quality Assurance in Software D...
A Research Study on importance of Testing and Quality Assurance in Software D...A Research Study on importance of Testing and Quality Assurance in Software D...
A Research Study on importance of Testing and Quality Assurance in Software D...
 
Iterative Incremental development
Iterative Incremental developmentIterative Incremental development
Iterative Incremental development
 
Spiral model
Spiral modelSpiral model
Spiral model
 
Bringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototypingBringing ideas to life – the dimensions of prototyping
Bringing ideas to life – the dimensions of prototyping
 
The spiral model
The  spiral  modelThe  spiral  model
The spiral model
 
Spiral Model
Spiral ModelSpiral Model
Spiral Model
 
Spiral model : System analysis and design
Spiral model : System analysis and designSpiral model : System analysis and design
Spiral model : System analysis and design
 
PROTOTYPING
PROTOTYPINGPROTOTYPING
PROTOTYPING
 
1 rapid prototyping model
1 rapid prototyping model1 rapid prototyping model
1 rapid prototyping model
 
Storyboard
StoryboardStoryboard
Storyboard
 
Spiral model
Spiral modelSpiral model
Spiral model
 
Modelo basado en prototipos - IngenierĂ­a de Software
Modelo basado en prototipos - IngenierĂ­a de SoftwareModelo basado en prototipos - IngenierĂ­a de Software
Modelo basado en prototipos - IngenierĂ­a de Software
 
Spiral model explanation
Spiral model  explanationSpiral model  explanation
Spiral model explanation
 
Prototipos
PrototiposPrototipos
Prototipos
 
Prototype Model
Prototype ModelPrototype Model
Prototype Model
 
Lean Prototyping - A Practical Guide
Lean Prototyping - A Practical GuideLean Prototyping - A Practical Guide
Lean Prototyping - A Practical Guide
 
Modelo de prototipo
Modelo de prototipoModelo de prototipo
Modelo de prototipo
 
Prototyping is an attitude
Prototyping is an attitudePrototyping is an attitude
Prototyping is an attitude
 

Ähnlich wie Effective Prototyping Process for Software Creation

User Experience Prototyping
User Experience PrototypingUser Experience Prototyping
User Experience PrototypingAlan Ho
 
Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012Ariadna Font Llitjos
 
Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012drewz lin
 
Nailing It Down: Detailed Design to Preserve the UX Vision
Nailing It Down: Detailed Design to Preserve the UX VisionNailing It Down: Detailed Design to Preserve the UX Vision
Nailing It Down: Detailed Design to Preserve the UX Visionjsokohl
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and AgileUserZoom
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&processSheSaysCREATIVE
 
Understanding The Value Of User Research, Usability Testing, and Information ...
Understanding The Value Of User Research, Usability Testing, and Information ...Understanding The Value Of User Research, Usability Testing, and Information ...
Understanding The Value Of User Research, Usability Testing, and Information ...Kyle Soucy
 
Using rapid prototying_for_design_iteration
Using rapid prototying_for_design_iterationUsing rapid prototying_for_design_iteration
Using rapid prototying_for_design_iterationdrewz lin
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationMark Billinghurst
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityArabella David
 
50500113 spiral-model
50500113 spiral-model50500113 spiral-model
50500113 spiral-modelasidharath
 
People-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application LifecyclePeople-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application LifecycleRofiqi Setiawan
 
Just Married: User Centered Design and Agile
Just Married: User Centered Design and AgileJust Married: User Centered Design and Agile
Just Married: User Centered Design and AgileMemi Beltrame
 
ui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SW
ui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SWui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SW
ui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SWui42
 
UX in Action: IBM Watson
UX in Action: IBM WatsonUX in Action: IBM Watson
UX in Action: IBM WatsonUserTesting
 
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...nForm User Experience
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleICS
 
Product Design & Development Process By- Achia Nila
Product Design & Development Process  By- Achia NilaProduct Design & Development Process  By- Achia Nila
Product Design & Development Process By- Achia NilaAchia Nila
 
Usability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter eventUsability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter eventKay Aubrey
 

Ähnlich wie Effective Prototyping Process for Software Creation (20)

User Experience Prototyping
User Experience PrototypingUser Experience Prototyping
User Experience Prototyping
 
Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012Exploring UX Practices 4 Product Development Agile2012
Exploring UX Practices 4 Product Development Agile2012
 
Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012Exploring ux practices 4 product development agile2012
Exploring ux practices 4 product development agile2012
 
Nailing It Down: Detailed Design to Preserve the UX Vision
Nailing It Down: Detailed Design to Preserve the UX VisionNailing It Down: Detailed Design to Preserve the UX Vision
Nailing It Down: Detailed Design to Preserve the UX Vision
 
How to Integrate UX and Agile
How to Integrate UX and AgileHow to Integrate UX and Agile
How to Integrate UX and Agile
 
05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process05 DIGI CREATIVE people&process
05 DIGI CREATIVE people&process
 
Understanding The Value Of User Research, Usability Testing, and Information ...
Understanding The Value Of User Research, Usability Testing, and Information ...Understanding The Value Of User Research, Usability Testing, and Information ...
Understanding The Value Of User Research, Usability Testing, and Information ...
 
Using rapid prototying_for_design_iteration
Using rapid prototying_for_design_iterationUsing rapid prototying_for_design_iteration
Using rapid prototying_for_design_iteration
 
COMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and EvaluationCOMP 4026 Lecture3 Prototyping and Evaluation
COMP 4026 Lecture3 Prototyping and Evaluation
 
The Design Discovery Jetpack
The Design Discovery JetpackThe Design Discovery Jetpack
The Design Discovery Jetpack
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction Usability
 
50500113 spiral-model
50500113 spiral-model50500113 spiral-model
50500113 spiral-model
 
People-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application LifecyclePeople-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application Lifecycle
 
Just Married: User Centered Design and Agile
Just Married: User Centered Design and AgileJust Married: User Centered Design and Agile
Just Married: User Centered Design and Agile
 
ui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SW
ui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SWui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SW
ui42 World Usability Day 2013 Martin Krupa Ako zapojit UX do vyvoja SW
 
UX in Action: IBM Watson
UX in Action: IBM WatsonUX in Action: IBM Watson
UX in Action: IBM Watson
 
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...User Experience Design: 5 Techniques for Creating Better Websites and Applica...
User Experience Design: 5 Techniques for Creating Better Websites and Applica...
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
Product Design & Development Process By- Achia Nila
Product Design & Development Process  By- Achia NilaProduct Design & Development Process  By- Achia Nila
Product Design & Development Process By- Achia Nila
 
Usability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter eventUsability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter event
 

KĂźrzlich hochgeladen

Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptxVanshNarang19
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...Amil baba
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
 
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...nagunakhan
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Yantram Animation Studio Corporation
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...Suhani Kapoor
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...Pooja Nehwal
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Call Girls in Nagpur High Profile
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxjeswinjees
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...Call Girls in Nagpur High Profile
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 

KĂźrzlich hochgeladen (20)

Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
 
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
NO1 Trending kala jadu Love Marriage Black Magic Punjab Powerful Black Magic ...
 
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
Nepali Escort Girl Gomti Nagar \ 9548273370 Indian Call Girls Service Lucknow...
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
 

Effective Prototyping Process for Software Creation

  • 1. Effective Prototyping denition • best practices • tools Jonathan Arnowitz • Michael Arent • Nevin Berger SF Bay IxDA/BayCHI Google, Mountain View 16 January 2008 1
  • 2. Agenda • Forward • What is prototyping, who does it and why? (Michael Arent) • Prototyping Process (Jonathan Arnowitz) • Rapid Prototyping with Excel (Nevin Berger) • Q&A
  • 3. Forward: why this talk? Our goals for effective prototyping are: • Democratize prototyping • Demystify • the design process • the prototyping activity • Help people create higher quality software • Make your prototyping help the software creation process and make you look good
  • 4. Short exercise You have 3 minutes. Quickly jot down the following on two note cards. When nished hand your cards up to the front to us. 2 most important best practices with prototyping • Best practice 1 • Best practice 2 2 most important things that denes a prototype to you • Aspect 1 • Aspect 2 When nished hand your cards up to the front to us.
  • 5. What is prototyping, who does it and why?
  • 6. What is a prototype: the dictionary Denition No. 1 • pro¡to¡type n. 1. An original or model after which anything is copied; the pattern of anything to be engraved, or otherwise copied, cast, or the like; a primary form; exemplar; archetype. – Webster’s 1913 Dictionary Denition No. 2 • pro¡to¡type n. 1. An original type, form, or instance serving as a basis or standard for later stages. 2. An original, full-scale, and usually working model of a new product or new version of an existing product. 3. An early, typical example. – Dictionary.com (2007)
  • 7. What is a prototype: A Designer’s denition “The use of simplied and incomplete models of a design to 1.explore ideas, 2.elaborate requirements, 3.rene specications, 4.and test functionality.” William Lidwell et al, Universal Principles of Design, 2003
  • 8. What is a prototype: A software development denition A prototype is a model of a design that is: • complete or incomplete • portraying specic content and delity • for a specic planned purpose • for a specic audience(s) and purpose • planned with specic characteristics • done in a specic method • created with a specic tool
  • 9. What is prototyping? To be sure it is… • The most important design artifact in a software project • The life blood of achieving a rational design outcome with or without UCD Without any planning its success relies purely on serendipity.
  • 10. What is prototyping? If it isn’t for you now, it can be... •formalized •manageable •predictable •professional Fact 1: No one has either a degree in prototyping or certicate of proof they can do it – only a portfolio of examples, at best. Fact 2: You’re at the mercy of the practitioner’s competence/ incompetence as well as a company’s evolved or non-evolved practices.
  • 11. What is prototyping? It is changing... • Attention to the topic of prototyping and details of its practice have grown 500% in average HCI texts Albeit, that is a change from 3 pages to 15 pages in a book that is 400-800 pages long.
  • 12. Why do we prototype? • Explore and try out design ideas – thus increase innovation and creativity • Validate design requirements and assumptions • Communicate your ideas to a cross disciplinary group: • Fellow software makers • Stakeholders • End users • Customers • Greatly reduce the high risk and costs of developing poor designs
  • 13. What is prototyping? + Engineering Design Focuses on functions, features and Focuses on product experience technical capabilities. and usability.
  • 14. Who prototypes? Software makers: Those who envision, design then produce software. • Software engineers • Interaction designers • Product managers • Graphic designers • Visionaries • User researchers • Marketers • Game designers • Functional analysts • and many others…
  • 15. Excercise 2 On a sheet of paper: • Make a quick sketch prototype of one screen in a contact management software Again – you have just 3 minutes.
  • 16. What do you prototype? Software: Software elements: • Desktop apps • Information design • Mobile apps • Interaction design • Web sites • Navigation model • Web apps and services • Transaction design • Visual design • Visual design and layout • Utilities • Branding • Lots of other stuff… • System performance
  • 17. Benets of prototyping • Veries or disproves assumptions • Claries requirements – helps set expectations and avoid confusion • Helps identify issues early on • Brings user perspective early in the process • Minimizes risks/costs • Keeps coding rework to a minimum
  • 19. The Prototyping Process “Best practice prototyping requires a process -- an effective one. Prototyping should not be a random act of design.”
  • 20. Prototyping Process • Phase 1: Plan - Decide what you want to prototype • Phase 2: Prepare - Decide how you want to prototype • Phase 3: Design - Create a prototype • Phase 4: Results - Decide what to do next
  • 21. Prototyping | Waterfall Prototyping steps (not waterfall steps) Requirements Design Build Test Understand Users Design UIs Build Prototype Ensure Usability Measure design improvement Develop UI specifications Validate prototypes Create iterative prototypes Validate task scenarios/flows Create task scenarios/flows Define requirements Conduct field studies/focus groups
  • 22. Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability
  • 23. Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability
  • 27. Prototyping process Phase 1: Plan • Verify requirements • Define user or user group • Develop task flows and scenarios
  • 28. Types of prototyping requirements Four main types of requirements (which are contradictory a fact which should be recognized not swept under the carpet) •Business/marketing •Functional •Technical •Usability
  • 29. Business/marketing requirements Generally derived from market eld research, market analysis, competitive analysis, domain expertise, sales force intelligence, focus groups and other means. • Regulatory and policy requirements; e.g. accessibility, localization, etc. • Branding considerations • Marketability and salability potential • And others…
  • 30. Functional requirements The functions required to support business or marketing requirements, such as the ability to: • Fetch and read mail • Engage with a transaction process • Tabulate and manage game points • Schedule and manage time • And gazillions of others…
  • 31. Technical Requirements Denes the technology needed to provide the required functionality: • Software architecture considerations • Platform considerations • Development tool considerations • Optimal performance • And other technical considerations…
  • 32. Usability Requirements Denes the user experience and usability needs for customer and user adoption of the software: • Ease of use • Learnability • Pragmatics • Satisfaction/pleasure • Cognitive and ergonomic considerations
  • 33. Dene users How to get information about your users: • Conduct user research -- site visits, etc. • Get info from eld engineers and sales force • Participate in user group forums
  • 34. Develop Task Flows and Scenarios
  • 35. Prototyping process Phase 2: Prepare • Determine characteristics • Choose a method • Choose a tool
  • 36. Dene content and delity Low delity (wireframe) High delity
  • 37. Dene content and delity Low delity (wireframe) High delity
  • 38. Fidelity Matrix Fidelity Content Low Medium High Visual Design 1 2 3 4 5 6 7 Interaction 1 2 3 4 5 6 7 Design Information 1 2 3 4 5 6 7 Design Editorial Content 1 2 3 4 5 6 7 System 1 2 3 4 5 6 7 Performance
  • 39. Determine Characteristics • Audience: Internal/External • Stage: Early/Midterm/Late • Speed: Rapid/Diligent • Longevity: Short/Medium/Long • Expression: Conceptual/Experiential • Fidelity: Low/Medium/High • Style: Narrative/Interactive • Medium: Physical/Digital
  • 40. Choose a Method The method of prototyping you use will change as your software product develops and evolves. • Card sorting •Blank model prototyping • Wireframe prototyping •Video prototyping • Storyboard prototyping •Wizard of Oz prototyping • Paper prototyping •Coded prototyping (including scripting and HTML) • Digital prototyping
  • 48. Wizard of Oz Prototyping
  • 50. Choose a Prototyping Tool •Word •VisualBasic •PowerPoint •HTML Editor •Excel •Dreamweaver •Visio •Flex •Paper •Director •Acrobat •Java •Photoshop •VisualStudio •QuickTime
  • 51. Choose a Prototyping Tool The right tool for the right method… Tools Storyboard Wireframe Visualization Paper Wizard of Oz Blank model Coded Word ++ + - ++ 0 0 - PowerPoint +++ ++ + ++ ++ 0 - Excel + +++ ++ + ++ 0 0 Visio + +++ 0 + 0 0 + Paper ++ +++ 0 +++ 0 + 0 Acrobat +++ ++ ++ ++ ++ 0 + Photoshop + + +++ + + 0 + QuickTime + 0 +++ 0 +++ 0 ++ VisualBasic - ++ ++ + + 0 +++ HTML Editor ++ ++ + - - 0 ++ Dreamweaver ++ ++ ++ - - 0 +++ Flex + ++ - - + + +++ Director ++ ++ - - + + +++ Java - - - - - - +++ VisualStudio - - - - + - +++
  • 52. Prototyping process Phase 3: Design • Select the design criteria • Create the design • Build the prototype
  • 53. Select Design Criteria Interaction design criteria: Visual design criteria: • Information flow • Users should feel in control • Grid-based organization • Complex info should be progressively disclosed • Harmonious rhythm and pattern • Interaction and navigation should be efcient • Unity and variety • Minimize user’s memory load • Typography • Speak the user’s language • Balance • Explicitly show required actions and elds • Logical grouping • User interfaces should be accessible
  • 54. Exercise 3 On yet another sheet of paper • Make a quick sketch prototype of another screen in a contact management system • Feedback on your screen design is positive for functionality and information However new VC money has arrived with new requirements: • The information will be displayed on a mobile device • It will feature emergency contacts for the elderly • This prototype you want to show the product manager and check for all functional requirements
  • 55. Prototyping process Phase 4: Results • Dene and communicate results to stakeholders • Validate with domain experts and users as needed • Ensure most effective transfer of prototyping results to next steps, including: •Denition of a new product •Another prototype •Development of the product
  • 56. Prototyping success Prototyping success depends on: • Well dened objectives and areas of responsibility regarding who owns the prototype • Team trust, empathy, and open mindedness • Collaboration and communication with all key stakeholders • Effective Prototyping Strategy • All supported by a common understanding of prototyping tools and methods
  • 57. The Book: Available now at your favorite bookseller.
  • 58. Rapid Prototyping in Excel Nevin Berger
  • 59. Prototyping in Excel? I can’t picture it! • Usual reaction • Traditionally the tool of choice for managers and accountants • Re-inventing an old tool to a new purpose • A new way of using features you may have used many time before • How Excel prototyping got started • Mark Miller and the Enforcer • How it has evolved • Built a methodology for building prototypes in Excel
  • 60. Benets of using Excel as a prototyping tool • Short learning curve – existing expertise • Easy access, Excel is often standard issue • Can create low to middle delities • Can create interactive prototypes • Supports iterative prototyping because can be very easy and fast to use • Workbook is self-contained le • Includes all the elements needed to create a prototype • The prototype • Annotations that support the requirements document
  • 61. Application features that support prototyping • Can create customized color palette • Can easily color table cells and put borders on cells to create designs • Table cell designs can easily be cut and pasted for rapid design • Has scrollable canvas to meet all design size needs • Can create simple graphics or use graphics from other programs • Has hyperlink functionality for linking between pages • Enforces a grid that is flexible for alignment of graphics and text • Has robust text tools • Has a presentation mode
  • 62. What Excel cannot do • Create complicated graphics • Need to rely on graphical programs • Limited animation effects • PowerPoint • Ways around this limitation • Limited interactivity • Compared to Dreamweaver or other HTML programs • Have to be creative in interactivity • Limited digital testing ability
  • 63. The End • To get these samples plus copy of our presentation go to: • http:www.effectiveprototyping.com • Go to the forum and register • Registration is for anti-spam purposes. We will never contact you by email unless you let us (opt-in) 85