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

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. 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 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. What is prototyping,
who does it and why?

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. 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. 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. 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 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. 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. 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. The Prototyping Process
Jonathan Arnowitz

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

24. Agile Development
23

25. Agile Development
24

26. Agile Development
24

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 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. 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
Defines 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
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. 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. Develop Task Flows and Scenarios

35. Prototyping process
Phase 2: Prepare
• Determine characteristics
• Choose a method
• Choose a tool

36. Define content and fidelity
Low fidelity (wireframe)
High fidelity

37. Define content and fidelity
Low fidelity (wireframe)
High fidelity

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

41. Card Sorting

42. Wireframe Prototyping

43. Storyboard Prototyping

44. Paper Prototyping

45. Digital Prototyping

46. Blank Model Prototyping

47. Video Prototyping

48. Wizard of Oz Prototyping

49. Coded 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 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. 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
• 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. 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. 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. 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. 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