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.
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
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
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
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 ďŹow ⢠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
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 ďŹexible 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