Paper Prototypes and Wire Frames Debug your applications before you write code
 
<ul><li>Prototyping helps to clarify specifications, reduce risk </li></ul><ul><li>Paper Prototyping </li></ul><ul><ul><li...
Definitions <ul><li>Prototype: an individual that exhibits the essential features of a later type (Merriam Webster) </li><...
The Problem
Telling vs. Doing
Best Quality Shortest Time Lowest Cost Pick any 2
Cost of Software Fixes UAT Prototyping
40% Patterns of large software systems: failure and success (Capers Jones)
Prototyping Results
Hidden Requirements
Application Ownership
Common Understanding
Team Building
World Peace! At least no more opinion wars!
Your Toolbox <ul><li>HTML </li></ul><ul><li>Visio </li></ul><ul><li>Visual Basic </li></ul><ul><li>Photoshop </li></ul><ul...
Demo Time: BALSAMIC MOCKUPS
If it looks to good it took too long!
Now it needs to work!
Problem here: <ul><li>Effort similar to full application </li></ul><ul><li>Change cycles to long </li></ul><ul><li>Wrong i...
Paper?
Looking good is bad!
If it looks good, users expect it to be completed and available!
So how does it actually work?
Let user interact!
But it is Paper? You are the CPU!
 
Demo Time (Video on Youtube)
What can you test?
This works: <ul><li>Concepts </li></ul><ul><li>Terminology </li></ul><ul><li>Navigation </li></ul><ul><li>Workflow </li></...
Other tests required: <ul><li>Micro actions </li></ul><ul><li>Keyboard/Mouse errors </li></ul><ul><li>Size </li></ul><ul><...
Setting up a prototype
Breath & Depth
Interaction Model
2 Distinct Steps! Create! Test!
Create!
Test! Get your story right! <ul><li>Breath </li></ul>Look Depth Interaction
Keep the unfinished look!!!!
Overcome Objections <ul><li>It doesn’t look real </li></ul><ul><li>Waste of time </li></ul><ul><li>Not scientific </li></u...
Session Preparation <ul><li>Location, Setup </li></ul><ul><li>Participants </li></ul><ul><ul><li>Facilitator </li></ul></u...
Observers <ul><li>The developers </li></ul><ul><li>The system architect </li></ul><ul><li>The project manager </li></ul><u...
The Session <ul><li>Introduce the session </li></ul><ul><li>Introduce to observers </li></ul><ul><li>Ask for consent if yo...
The Facilitator's Roles <ul><li>Flight Attendant </li></ul><ul><li>Sports Caster </li></ul><ul><li>Scientist </li></ul>
Findings <ul><li>Watch what users do </li></ul><ul><li>Listen what users say </li></ul><ul><li>Give feedback only  AFTER  ...
Debriefing <ul><li>The debriefing session is  as important  as the test </li></ul><ul><li>Affinity diagrams </li></ul><ul>...
Common Challenges
Screen estates
More Pitfalls <ul><li>Selection of testers </li></ul><ul><li>Session disruptions </li></ul><ul><li>Available scope </li></...
Resources <ul><li>http://www.paperprototyping.com </li></ul><ul><li>http://www.useit.com </li></ul><ul><li>http://www.upas...
http://www.balsamiq.com/products/mockups
http://mayo.svidnik.com/images/blog_pics/feed-icon.png
Q&A
Thank you! Stephan H. Wissel Lotus Technology & Productivity Advisor [email_address]
Upcoming SlideShare
Loading in...5
×

Paperprototyping

697

Published on

Talk about Prototyping for Microsoft's RIAction day 2009

Published in: Self Improvement, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Paperprototyping

  1. 1. Paper Prototypes and Wire Frames Debug your applications before you write code
  2. 3. <ul><li>Prototyping helps to clarify specifications, reduce risk </li></ul><ul><li>Paper Prototyping </li></ul><ul><ul><li>- is fast, fun, effective </li></ul></ul><ul><ul><li>improves on team building and communication </li></ul></ul><ul><ul><li>- needs proper facilitation </li></ul></ul>Executive Summary
  3. 4. Definitions <ul><li>Prototype: an individual that exhibits the essential features of a later type (Merriam Webster) </li></ul><ul><li>Usability: The extend to which a product can be used by specific users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.&quot; (ISO 9241:11) </li></ul>
  4. 5. The Problem
  5. 6. Telling vs. Doing
  6. 7. Best Quality Shortest Time Lowest Cost Pick any 2
  7. 8. Cost of Software Fixes UAT Prototyping
  8. 9. 40% Patterns of large software systems: failure and success (Capers Jones)
  9. 10. Prototyping Results
  10. 11. Hidden Requirements
  11. 12. Application Ownership
  12. 13. Common Understanding
  13. 14. Team Building
  14. 15. World Peace! At least no more opinion wars!
  15. 16. Your Toolbox <ul><li>HTML </li></ul><ul><li>Visio </li></ul><ul><li>Visual Basic </li></ul><ul><li>Photoshop </li></ul><ul><li>Prototyping Software </li></ul><ul><ul><li>Denim (Berkeley University) </li></ul></ul><ul><ul><li>Balsamic Mockups </li></ul></ul>
  16. 17. Demo Time: BALSAMIC MOCKUPS
  17. 18. If it looks to good it took too long!
  18. 19. Now it needs to work!
  19. 20. Problem here: <ul><li>Effort similar to full application </li></ul><ul><li>Change cycles to long </li></ul><ul><li>Wrong impressions about progress </li></ul>
  20. 21. Paper?
  21. 22. Looking good is bad!
  22. 23. If it looks good, users expect it to be completed and available!
  23. 24. So how does it actually work?
  24. 25. Let user interact!
  25. 26. But it is Paper? You are the CPU!
  26. 28. Demo Time (Video on Youtube)
  27. 29. What can you test?
  28. 30. This works: <ul><li>Concepts </li></ul><ul><li>Terminology </li></ul><ul><li>Navigation </li></ul><ul><li>Workflow </li></ul><ul><li>Task flow </li></ul><ul><li>Content </li></ul><ul><li>Functionality </li></ul><ul><li>Layout </li></ul><ul><li>Brand </li></ul>
  29. 31. Other tests required: <ul><li>Micro actions </li></ul><ul><li>Keyboard/Mouse errors </li></ul><ul><li>Size </li></ul><ul><li>Timing </li></ul><ul><li>Long term use </li></ul><ul><li>Compatibility </li></ul>Looks?
  30. 32. Setting up a prototype
  31. 33. Breath & Depth
  32. 34. Interaction Model
  33. 35. 2 Distinct Steps! Create! Test!
  34. 36. Create!
  35. 37. Test! Get your story right! <ul><li>Breath </li></ul>Look Depth Interaction
  36. 38. Keep the unfinished look!!!!
  37. 39. Overcome Objections <ul><li>It doesn’t look real </li></ul><ul><li>Waste of time </li></ul><ul><li>Not scientific </li></ul><ul><li>Unprofessional </li></ul>
  38. 40. Session Preparation <ul><li>Location, Setup </li></ul><ul><li>Participants </li></ul><ul><ul><li>Facilitator </li></ul></ul><ul><ul><li>Computer (max. 0.00001 MHz) </li></ul></ul><ul><ul><li>Observers </li></ul></ul><ul><ul><li>Tester </li></ul></ul><ul><li>Introduction, Ground Rules </li></ul>
  39. 41. Observers <ul><li>The developers </li></ul><ul><li>The system architect </li></ul><ul><li>The project manager </li></ul><ul><li>NOT the boss of the test person </li></ul>
  40. 42. The Session <ul><li>Introduce the session </li></ul><ul><li>Introduce to observers </li></ul><ul><li>Ask for consent if you tape it </li></ul><ul><li>Introduce the tasks: </li></ul><ul><ul><li>Scheduled duration </li></ul></ul><ul><ul><li>Think aloud </li></ul></ul><ul><ul><li>No spoon feeding!!! </li></ul></ul>
  41. 43. The Facilitator's Roles <ul><li>Flight Attendant </li></ul><ul><li>Sports Caster </li></ul><ul><li>Scientist </li></ul>
  42. 44. Findings <ul><li>Watch what users do </li></ul><ul><li>Listen what users say </li></ul><ul><li>Give feedback only AFTER the session and only about the prototype </li></ul><ul><li>Use creativity </li></ul><ul><li>techniques to sort </li></ul><ul><li>out your findings </li></ul>
  43. 45. Debriefing <ul><li>The debriefing session is as important as the test </li></ul><ul><li>Affinity diagrams </li></ul><ul><li>Mind maps </li></ul><ul><li>Action plan </li></ul>
  44. 46. Common Challenges
  45. 47. Screen estates
  46. 48. More Pitfalls <ul><li>Selection of testers </li></ul><ul><li>Session disruptions </li></ul><ul><li>Available scope </li></ul><ul><li>Guidance (too much / too little) </li></ul><ul><li>User goals incomplete </li></ul>
  47. 49. Resources <ul><li>http://www.paperprototyping.com </li></ul><ul><li>http://www.useit.com </li></ul><ul><li>http://www.upassoc.org/ </li></ul><ul><li>http://www.formsthatwork.com </li></ul><ul><li>http://www.origami.com/ </li></ul><ul><li>Your local papershop </li></ul>
  48. 50. http://www.balsamiq.com/products/mockups
  49. 51. http://mayo.svidnik.com/images/blog_pics/feed-icon.png
  50. 52. Q&A
  51. 53. Thank you! Stephan H. Wissel Lotus Technology & Productivity Advisor [email_address]
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×