Prototyping is a great way of developing, communicating and validating design ideas and requirements in a quick and cost-effective manner, when devising a user experience.
This presentation discusses what prototypes are, why they are useful, the various tools that can be used and some basic principles to adopt.
This presentation was delivered by Stephen Denning as part of the User Vision Breakfast Briefing series in 2012.
3. What we will cover…
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
4. What is the User Experience (UX)?
user experience:
n. the overall experience and satisfaction a user has when using a
product or system
5. Concept/Plan
• Contextual Analysis
• User Profiling/Persona
development
• User Needs Analysis
• Competitor Analysis
Design
• Wireframing
• Prototyping
• IA Analysis
• Co-Design Workshops
Evaluate
• Usability Testing
• Expert Evaluation
• Eye-tracking
• Accessibility Audits
Live Support
• Customer Surveys
• Analytics
• A/B Testing
• Multi-variate Testing
A User-Centred Design (UCD) process
6. Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
7. What is a prototype?
“An approximation of a product (or system) or its components, in
some form, for a definite purpose in its implementation”
(Chua, Leong & Lim)
“A visualisation of the requirements”
(Arnowitz)
“A representative model or simulation of the final system”
(Warfel)
9. What is a prototype?
Three dimensions:
1. Scope (Distinct aspect Entire product/service)
2. Form (Abstract Tangible)
3. Fidelity (Rough representation Exact representation)
11. Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
12. The goal of prototyping
“The goal of prototyping is to
convince yourself and others of an idea”
An idea has no value
Unless it can be communicated!
(Raskin)
13. Why use prototypes?
“My perspective is that the bulk of our industry is organized around the
demonstratable myth that we know what we want at the start, and how to
get it, and therefore build our process assuming that we will take an
optimal, direct path to get there. Nonsense. The process must reflect that
we don't know and acknowledge that the sooner we make errors and
detect and fix them, the less (not more) the cost.” (Bill Buxton)
14. Why use prototypes?
Prototyping allows us to...
Brainstorm
Design
Create
Test
Communicate
...interaction design concepts and user interfaces, early in the design
process and in a cost effective manner.
15. When applied early and often, the use of prototypes can
save time and effort, reduce waste and ultimately save money
Why use prototypes?
Benefits
They help to generate ideas
They can communicate aspects of the design that cannot be
adequately communicated by other artefacts
They increase understanding, add clarity and reduce
misinterpretation
They can be updated quickly to reflect changes
They can enable quicker identification of mistakes and risks
16. Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
17. A look at some tools
#1 Paper
#2 Office tools
#3 Vector drawing tools
#4 Web based tools
#5 Purpose-built prototyping tools
#6 HTML
18. #1 - Paper
Paper, pen, scissors, tape & post-its (Blue Peter prototyping)
Best use: To test specific interactions or competing concepts
Advantages: Fast, cheap, computer-less, lack of realism/aesthetics
Disadvantages: Not easily distributed, lack of realism/aesthetics
19. #2 – Office tools
PowerPoint, Excel, Keynote
Best use: To add basic interaction to flat designs, dashboards (Excel)
Advantages: Cheap, easy to pick up, easy to import graphics, some
interactivity, basic data/graph incorporation (Excel)
Disadvantages: Largely linear, limited editing/drawing
20. #3 – Vector drawing tools
e.g. MS Visio, Omnigraffle, Adobe InDesign, etc.
Best use: Medium/high-fidelity screen mock-ups
Advantages: Use of stencils, precise layout, potential richer interactivity
Disadvantages: More cost, interactivity requires coding knowledge
21. #4 – Web-based tools
e.g. Protoshare, Mockingbird, Protonotes
Best use: For distributed teams
Advantages: Online, collaborative, easily shared
Disadvantages: Less rich interactions, no HTML export
22. #4 – Web-based tools
Example: Protoshare
Features:
Browser-based access
Distributed comment &
review
States and dynamic
interactions
Export HTML, CSS,
JavaScript
Produce Word/PDF specs
23. #5 – Prototyping tools
e.g. Axure RP Pro, iRise, MockupScreens, Balsamiq, Fireworks
Best use: More complete/complex models
Advantages: Fast, rich interaction, collaboration, generate specs, HTML
export
Disadvantages: Costly, longer to pick up, not (always) reusable
24. #5 – Prototyping tools
Example: Axure RP Pro
Features:
Drag-and-drop
Custom widgets and masters
Rich interactions
Multiple platform templates
Mobile prototypes
Collaboration/version-control
Export to HTML
Word/PDF specs
25. #6 - HTML
Fully-fledged web pages
Best use: For finalising design decisions
Advantages: Full interaction, expandable, easily transportable
Disadvantages: Time and effort, requires expertise
26. Where are we…?
• Background
• What is a prototype?
• Why use prototypes?
• A brief look at the toolkit
• Prototyping principles
27. Six Prototyping principles (Raskin)
#1 Your first try will be wrong.
• No matter how good you are, there is no substitute
for trying it out
• Budget for it
• Design for it
28. Six Prototyping principles (Raskin)
#2 Aim to finish a usable artifact in a day
• This helps you focus and scope
• Do less
• Don’t be afraid to start again
29. Six Prototyping principles (Raskin)
#3 You are making a touchable sketch
• Do not fill in all the blanks
• Focus on key contentelements
• Remember the goal of the prototype
30. Six Prototyping principles (Raskin)
#4 You are iterating your understanding of
the problem as well as your solution
• Use the process to evaluate, validate and clarify your
requirements
• Be prepared to admit you were wrong!
• Establish a tight feedback loop
31. Six Prototyping principles (Raskin)
#5 Borrow liberally
• Don’t reinvent the wheel
• Don’t waste time with the painting and decorating
32. Six Prototyping principles (Raskin)
#6 Tell a story with your prototype
• Think about your personas
• Think about your user’s journey
• It isn’t just a set of features
• Sell the idea!
33. Other resources
Prototyping
Todd Zaki Warfel
Paper Prototyping
Carolyn Snyder
Effective Prototyping
Jonathan Arnowitz
Sketching User
Experiences
Bill Buxton
A few web resources:
• Prototyping Tools Review (http://goo.gl/QHI6m)
• “Prototypically speaking” prototyping blog (http://softwareprototyping.net/)
• Effective Prototyping site (http://www.effectiveprototyping.com/)
35. Stephen Denning
Senior User Experience Consultant
User Vision
55 North Castle Street
Edinburgh
EH2 3QA
T: 0131 225 0850
E: stephen@uservision.co.uk
W: www.uservision.co.uk
Thank You