SlideShare a Scribd company logo

Rapid Prototyping in UX Design

•
•
Stephen Denning
Stephen Denning

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.

Related slideshows

Great Value Proposition Design
Great Value Proposition DesignGreat Value Proposition Design
Great Value Proposition Design
 
The difference between art & design
The difference between art & designThe difference between art & design
The difference between art & design
 
Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon
Scenarios For Design: Interaction10 Workshop by Elizabeth BaconScenarios For Design: Interaction10 Workshop by Elizabeth Bacon
Scenarios For Design: Interaction10 Workshop by Elizabeth Bacon
 
1 of 35
Rapid Prototyping Stephen Denning – Senior UX Consultant
Rapid Prototyping in UX Design
What we will cover… • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
What is the User Experience (UX)? user experience: n. the overall experience and satisfaction a user has when using a product or system
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
Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
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)
What is a prototype?
What is a prototype? Three dimensions: 1. Scope (Distinct aspect Entire product/service) 2. Form (Abstract Tangible) 3. Fidelity (Rough representation Exact representation)
Prototypes vs Wireframes Wireframe • Layout • Content • Structure • Specification Prototype • Look • Feel • Experience • Flow
Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
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)
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)
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.
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
Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
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
#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
#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
#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
#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
#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
#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
#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
#6 - HTML Fully-fledged web pages Best use: For finalising design decisions Advantages: Full interaction, expandable, easily transportable Disadvantages: Time and effort, requires expertise
Where are we…? • Background • What is a prototype? • Why use prototypes? • A brief look at the toolkit • Prototyping principles
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
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
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
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
Six Prototyping principles (Raskin) #5 Borrow liberally • Don’t reinvent the wheel • Don’t waste time with the painting and decorating
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!
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/)
Eye tracking Questions?
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

More Related Content

Rapid Prototyping in UX Design

  • 1. Rapid Prototyping Stephen Denning – Senior UX Consultant
  • 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)
  • 8. What is a prototype?
  • 9. What is a prototype? Three dimensions: 1. Scope (Distinct aspect Entire product/service) 2. Form (Abstract Tangible) 3. Fidelity (Rough representation Exact representation)
  • 10. Prototypes vs Wireframes Wireframe • Layout • Content • Structure • Specification Prototype • Look • Feel • Experience • Flow
  • 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