Effective Prototyping
definition • best practices • tools




    Jonathan Arnowitz • Michael Arent • Nevin Berger
        ...
Agenda



•   Forward


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


•   Prototyping Process (Jonathan ...
Forward: why this talk?

    Our goals for effective prototyping are:


•   Democratize prototyping


•   Demystify


    ...
Short exercise

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

When finished hand your cards up to ...
What is prototyping,
who does it and why?
What is a prototype:
                      the dictionary

Definition No. 1


   • pro·to·type
     n. 1. An original or mo...
What is a prototype:
         A Designer’s definition

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

  1.e...
What is a prototype: A software
     development definition

A prototype is a model of a design that is:

• complete or inc...
What is prototyping?

To be sure it is…




• The most important design artifact in a software project

• The life blood o...
What is prototyping?
  If it isn’t for you now, it can be...

•formalized

•manageable

•predictable

•professional

Fact ...
What is prototyping?
              It is changing...




• Attention to the topic of prototyping and details of its
  prac...
Why do we prototype?
• Explore and try out design ideas – thus increase
  innovation and creativity

• Validate design req...
What is prototyping?



                                     +
         Engineering                               Design
F...
Who prototypes?
Software makers: Those who envision, design then produce
                       software.

  • Software en...
Excercise 2



On a sheet of paper:

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

Aga...
What do you prototype?

Software:                 Software elements:
• Desktop apps            • Information design
• Mobi...
Benefits of prototyping

• Verifies or disproves assumptions

• Clarifies requirements – helps set expectations and avoid
  c...
The Prototyping Process




Jonathan Arnowitz
The Prototyping Process

“Best practice prototyping requires a process -- an effective one.
       Prototyping should not ...
Prototyping Process



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

• Phase 2: Prepare - Decide how you want to pr...
Prototyping | Waterfall
                          Prototyping steps (not waterfall
                                       ...
Prototyping steps                 (not waterfall steps)




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




Understand Users   Design UIs   Build Prototype        Ensure ...
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 recogni...
Business/marketing requirements
Generally derived from market field research, market analysis, competitive
analysis, domain...
Functional requirements
The functions required to support business or marketing requirements, such as
                    ...
Technical Requirements

  Defines the technology needed to provide the required functionality:

• Software architecture con...
Usability Requirements

 Defines the user experience and usability needs for customer and user
                      adopti...
Define users




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


Phase 2: Prepare


• Determine characteristics

• Choose a method

• Choose a tool
Define content and fidelity
Low fidelity (wireframe)

                                      High fidelity
Define content and fidelity
Low fidelity (wireframe)

                                      High fidelity
Fidelity Matrix
                                 Fidelity

    Content           Low       Medium              High


 Vis...
Determine Characteristics

•   Audience: Internal/External


•   Stage: Early/Midterm/Late


•   Speed: Rapid/Diligent


•...
Choose a Method
                   The method of prototyping you use will change
                   as your software produ...
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  ...
Choose a Prototyping Tool
                       The right tool for the right method…


   Tools       Storyboard    Wiref...
Prototyping process


Phase 3: Design


• Select the design criteria

• Create the design

• Build the prototype
Select Design Criteria

                                     Interaction design criteria:
Visual design criteria:


•    I...
Exercise 3
On yet another sheet of paper


•   Make a quick sketch prototype of another screen in a contact management
   ...
Prototyping process

Phase 4: Results


• Define and communicate results to stakeholders


• Validate with domain experts a...
Prototyping success

Prototyping success depends on:


•   Well defined objectives and areas of responsibility regarding wh...
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 ...
Benefits of using Excel as a
             prototyping tool
•   Short learning curve – existing expertise


•   Easy access,...
Application features that support
            prototyping
• Can create customized color palette


• Can easily color table...
What Excel cannot do

•   Create complicated graphics


            • Need to rely on graphical programs

•   Limited anim...
The End


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

• http:www.effectiveprototyping.com

• Go to the ...
Upcoming SlideShare
Loading in...5
×

Effective Prototyping Process for Software Creation

11,866

Published on

A short version of the Effective Prototyping process as covered in the book by Arnowitz, Arent, and Berger: Effective Prototyping for Software Makers.

Published in: Design
3 Comments
47 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,866
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1
Comments
3
Likes
47
Embeds 0
No embeds

No notes for slide

Transcript of "Effective Prototyping Process for Software Creation"

  1. 1. Effective Prototyping definition • best practices • tools Jonathan Arnowitz • Michael Arent • Nevin Berger SF Bay IxDA/BayCHI Google, Mountain View 16 January 2008 1
  2. 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. 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. 4. Short exercise You have 3 minutes. Quickly jot down the following on two note cards. When finished 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 defines a prototype to you • Aspect 1 • Aspect 2 When finished hand your cards up to the front to us.
  5. 5. What is prototyping, who does it and why?
  6. 6. What is a prototype: the dictionary Definition 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 Definition 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. 7. 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.refine specifications, 4.and test functionality.” William Lidwell et al, Universal Principles of Design, 2003
  8. 8. What is a prototype: A software development definition 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
  9. 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. 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 certificate 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. 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. 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. 13. What is prototyping? + Engineering Design Focuses on functions, features and Focuses on product experience technical capabilities. and usability.
  14. 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. 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. 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. 17. Benefits 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
  18. 18. The Prototyping Process Jonathan Arnowitz
  19. 19. The Prototyping Process “Best practice prototyping requires a process -- an effective one. Prototyping should not be a random act of design.”
  20. 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. 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. 22. Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability
  23. 23. Prototyping steps (not waterfall steps) Understand Users Design UIs Build Prototype Ensure Usability
  24. 24. Agile Development 23
  25. 25. Agile Development 24
  26. 26. Agile Development 24
  27. 27. Prototyping process Phase 1: Plan • Verify requirements • Define user or user group • Develop task flows and scenarios
  28. 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. 29. Business/marketing requirements Generally derived from market field 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. 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. 31. Technical Requirements Defines the technology needed to provide the required functionality: • Software architecture considerations • Platform considerations • Development tool considerations • Optimal performance • And other technical considerations…
  32. 32. Usability Requirements Defines 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. 33. Define 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
  34. 34. Develop Task Flows and Scenarios
  35. 35. Prototyping process Phase 2: Prepare • Determine characteristics • Choose a method • Choose a tool
  36. 36. Define content and fidelity Low fidelity (wireframe) High fidelity
  37. 37. Define content and fidelity Low fidelity (wireframe) High fidelity
  38. 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. 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. 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
  41. 41. Card Sorting
  42. 42. Wireframe Prototyping
  43. 43. Storyboard Prototyping
  44. 44. Paper Prototyping
  45. 45. Digital Prototyping
  46. 46. Blank Model Prototyping
  47. 47. Video Prototyping
  48. 48. Wizard of Oz Prototyping
  49. 49. Coded Prototyping
  50. 50. Choose a Prototyping Tool •Word •VisualBasic •PowerPoint •HTML Editor •Excel •Dreamweaver •Visio •Flex •Paper •Director •Acrobat •Java •Photoshop •VisualStudio •QuickTime
  51. 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. 52. Prototyping process Phase 3: Design • Select the design criteria • Create the design • Build the prototype
  53. 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 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
  54. 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. 55. 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
  56. 56. 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
  57. 57. The Book: Available now at your favorite bookseller.
  58. 58. Rapid Prototyping in Excel Nevin Berger
  59. 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. 60. Benefits 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
  61. 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. 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. 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

×