Validating Ideas Through Prototyping

4,311 views
3,952 views

Published on

From my presentatioin

Published in: Design, Technology

Validating Ideas Through Prototyping

  1. 1. Validating IdeasThrough Prototyping Chris Risdon Lead Experience Designer, Adaptive Path @chrisrisdon
  2. 2. Prototypes
  3. 3. Design Principles Testing Ideas Ideation (theory) (Prototyping)Design Principles Prototype Refined Design (refined) (Usability)
  4. 4. Design Principles Testing Ideas Ideation (theory) (Prototyping)Design Principles Prototype Refined Design (refined) (Usability)
  5. 5. Design Principles Testing Ideas Ideation (theory) (Prototyping)Design Principles Prototype Refined Design (refined) (Usability)
  6. 6. Why do this?Fail early, fail cheaply
  7. 7. Before you invest time and moneyPrototype for areas you don’t knowTest risky functionalityValidate: • Core interactions • Application patterns • How content is organized
  8. 8. What are weprototyping?
  9. 9. Concepts
  10. 10. Concepts?
  11. 11. Frameworks ParadigmsApproaches
  12. 12. IdeationDesign Ideas
  13. 13. Ready to prototype? Not so fast.
  14. 14. What makes a prototype a prototype?
  15. 15. Prototypes vs. StoriesOr Interactive Prototypes vs. Narative Prototypes
  16. 16. The experience prototype allows designers to showand test the solution through an activeparticipation of the users.(2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposiumon Designing Interactive Systems.
  17. 17. The experience prototype allows designers to showand test the solution through an activeparticipation of the users.(2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposiumon Designing Interactive Systems.
  18. 18. We all use stories to communicate...and inspire.Basing stories on fact will help you communicateyour own ideas effectively. Tell your story well:youll get buy-in for the design and youll haveeveryone on the same page.Whitney Quesenbery, Storytelling for User Experience
  19. 19. We all use stories to communicate...and inspire.Basing stories on fact will help you communicateyour own ideas effectively. Tell your story well:youll get buy-in for the design and youll haveeveryone on the same page.Whitney Quesenbery, Storytelling for User Experience
  20. 20. Narrative Prototype Interactive Prototype(Story or Scenario)Storytelling stands Prototypes often requireson it’s own, doesn’t moderation, facilitation, orneed context context explained3rd person 1st personStorytelling describes a Prototypes tests parts of thecomplete experience experienceExplanation Exploration
  21. 21. Prototyping Ideas
  22. 22. Prototyping Ideas• Not about rapid, or paper, or high-fidelity or which software• It’s for users, not stakeholders• It’s about the ideas
  23. 23. Prototyping Ideas• Does it make sense to users?• Is the framework valid? (collection of features that play nice together)• Does the application pattern work? (common ways to present task based applications)• Is the content organized logically? Is it the right content?• Getting questions answered!
  24. 24. It’s not about requirements. (at least not yet)
  25. 25. Broad Not deep
  26. 26. What to prototype• What you don’t know• The products story• Everything you need to convey the product experience (but no more)
  27. 27. Fast. Cheep.Portable. Easy.
  28. 28. $20 in the app store. No cheaper software for prototyping.
  29. 29. But more on Keynote later.Really, I don’t care what you use.
  30. 30. Testing concepts? Who and what.
  31. 31. We use prototypes to answer design questions?So what are those questions?
  32. 32. What do you need to know about your designs?
  33. 33. Does it support the value proposition?
  34. 34. Does it support the vision?
  35. 35. Does it make sense to users?
  36. 36. Is this frameworkwork best for users?(Do the collection of features support the users mental model?)
  37. 37. Are users makingsense of the content?
  38. 38. Not usability testing. Stay out of the weeds. (again, broad not deep)
  39. 39. Not (small scale) usability testing.You’ll uncover large scale usability issues.
  40. 40. • Prototype for areas you don’t know• Core interactions• Application patterns• Content• Risky functionality
  41. 41. “The better it looks, the more narrow the feedback.” —Kathy Sierra
  42. 42. Use design principles
  43. 43. Charmr Design Principles Adaptive Path’s User Intensive, 2011
  44. 44. Charmr Design Principles• Wear it during sex• Make better use of data• Easy to learn and teach/No numbers• Less stuff• Keep diabetics in control• Keep diabetics motivated Adaptive Path’s User Intensive, 2011
  45. 45. Palm Pilot Design Principles ■ Fits in a shirt pocket ■ Syncs seamlessly with PC ■ Fast and easy sync ■ No more than $299Adaptive Path’s User Intensive, 2011
  46. 46. Design Principles• More than just requirements or specs. Non specific!• Combines the structured findings of research with the best ideas of ideation• Should be specific as possible and catchy• Unique to your product or design• More important than any one design• Use to determine what concept to move forward with• Also for making decisions during the project Adaptive Path’s User Intensive, 2011
  47. 47. Just one prototype? Um, no.
  48. 48. Different concepts• Develop multiple ideas• Test against design principles• Extremes in concepts for contrast and comparison
  49. 49. Make them different• Different IA: Labels, navigation, content• Different Information Design: Hierarchy and emphasis• Different Interactions: Different design patterns (ex: sliders vs. dropdowns, hovers vs. lightboxes)
  50. 50. Make them different• Making each unique• Design extremes between concepts• Welcome gaps
  51. 51. Ideas on a spectrum• More interactive > less interactive• More content heavy > less content heavy• Different messaging, or prioritized content differently• Different order of steps• Different interaction models (example: slider vs. drop-downs)
  52. 52. When not Keynote? When custominteractions are the ‘thing’ you need to validate
  53. 53. Real content!Your design idea is too abstract to the user without real content.
  54. 54. Evaluating IdeasDetermine criteria you use to evaluate the design.Keeps it from being “I like this” or “I don’t like that”
  55. 55. Evaluating Criteria• Discoverable• Trustworthy• Appropriate• Responsive• Smart• Clever• Meaningful For more, read• Pleasurable Designing for Interaction by Dan Saffer
  56. 56. Hitting many is great, but usually you are going tojust hit a few key criteria depending on goals.• Discoverable• Trustworthy• Appropriate• Responsive• Smart• Clever• Meaningful• Pleasurable
  57. 57. Hitting many is great, but usually you are going tojust hit a few key criteria depending on goals.• Discoverable• Trustworthy• Appropriate• Responsive• Smart• Clever• Meaningful• Pleasurable
  58. 58. Name your concepts.
  59. 59. “The One Pager” “The Policy Explorer” “The Worksheet”
  60. 60. Concept: The One-pager Successes: • easy to understand the steps • very narrative • good mix of visual and textual information • everything in one place/page
  61. 61. Concept: The Worksheet Successes: • Great for feedback about process and progress • Good for monitoring the “running total” • A good format for making suggestions (e.g. things you might need to provide for with your coverage) • Easy to take in at a glance or take away to share
  62. 62. Concept: The Policy Explorer Successes: • Everything all in one place • Easy to play with and see the connections and implications between the concepts • Less about process and more about action
  63. 63. 64Since last time: Concepts and TestingThemesWhat follows are the major themes we saw during concepttesting with customers. We’ve called out specific aspects,features, etc. of the concepts that represent these themes.
  64. 64. 65Themes: Estimating is central • The estimate serves as a high- level anchor • An estimate of some sort needs to be front and center (either a real estimate/quote or examples like the snapshot grid) • Members must be able to quickly get to a number (either because we suggest something, or it’s easy to generate) • Use “Estimate” rather than “quote” • Saving estimates is important (but in way that highlights differences) Snapshot gridQuick access to estimate Realtime estimate update
  65. 65. 66Themes: Provide deeper information • Deep information should not be “in the way” but should be easily accessible Contextual help • Contextual relevance is key -- offer things at the right time/place • Content should be accessible in levels or “escalation” 1. Links to available content (call out or tool tip, highly contextual) 2. Nugget (“executive summary”) 3. Full detail (not necessarily long article) • Explaining policies is the most important area for deeper information • People appreciate and trust the Explanation of policy, executive summary company’s expertise; they want deeper, editorialized information from you (“Tell Me More”) Highlight explanation of policies
  66. 66. 67Themes: Comparisons • Policy and prices side by side is powerful • Comparisons should come with suggestions or the company’s POV • Allow comparison at different levels 1. Static/initial (snapshot grid) 2. Personalized (when selecting a policy/estimate, contrast to other options) 3. Custom (comparing saved quotes – what were the differences?) Policy comparison grid Policy Comparison with suggestions
  67. 67. 68Themes: Play Around • Let people perform tasks quickly • Keep as much in one place as possible • Allow adjustability and quick feedback - “massaging the data” • Allow them to hit the target that is right for them (could be price or coverage or policy) • Especially good for numerical adjustments, but may be more difficult to use for policy and health Policy characteristics Policy, coverage, and health
  68. 68. Interactive Prototype (landing page)
  69. 69. Interactive Prototype (worksheet: quick estimate ) 70
  70. 70. Guiding the user during testing• Thinking out load• Nobody likes to admit they don’t know something or can’t figure something out• Designers observe• Tell participants: no wrong answers• Can’t offend us (“not my design”)• Interview based tasks
  71. 71. Create a protocol!• Prompts for your interview session• Based on key objectives you want to learn, or key questions you want answered• Is meant as reminders, not a rigid script
  72. 72. Interview based tasksIn interview-based tasks, the participants interests are discovered, not assigned. Unlikescavenger-hunt tasks, the tests facilitator and participant negotiate the tasks duringthe tests, instead of proceeding down a list of predefined tasks.Because each task is drawn from the experience and interest of each participant, notwo participants perform exactly the same tasks. As were looking for the usabilityproblems that pop up, were also looking for how the user approaches their problemand the level of detail they require.Surprisingly, we often see multiple participants run into the same problems. Eventhough their tasks are radically different, they have very similar experiences.As each participant designs their own tasks, they are telling us how they think aboutthe content on the site, giving us insight into the words we choose for links and howwe organize the material.Jared Spool (http://www.uie.com/articles/interview_based_tasks/)
  73. 73. Keynote:An Introduction (the very basics)
  74. 74. Inspectors (AKA Palettes) LinkingDocument Text Shape effects
  75. 75. Links Blue arrow indicates an object is linked about us about us Doesn’t show when you ‘play’ prototype Nulla dui purus presentation
  76. 76. Master Slides: Time SaverCreate your templates here Create master slide templates for elements you know will be the same fromCan be applied page to page (or state toto multiple pages state)
  77. 77. Linking Pages Select objects on screen and link to new page or state Use the palette to select where you want the link to go. (it will remember the slide if you change the order)
  78. 78. Home about us blog contactBlog Catagories Nulla dui purus Nulla dui purus, eleifend vel, consequat non, Consequat dictum porta dui purus, eleifend vel, Aenean Etiam imperdiet consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Archives Etiam imperdiet turpis. Praesent nec augue. Nulla dui purus Read more > Consequat Aenean Nulla dui purus, eleifend vel, consequat non, Etiam imperdiet dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >
  79. 79. Home about us blog contactBlog Catagories Nulla dui purus Nulla dui purus, eleifend vel, consequat non, Consequat dictum porta dui purus, eleifend vel, Aenean Etiam imperdiet consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Archives Etiam imperdiet turpis. Praesent nec augue. Nulla dui purus Read more > Consequat Aenean Nulla dui purus, eleifend vel, consequat non, Etiam imperdiet dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >
  80. 80. Home about us blog contactBlog Catagories Nulla dui purus Nulla dui purus, eleifend vel, consequat non, Consequat dictum porta dui purus, eleifend vel, Aenean Etiam imperdiet consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Archives Etiam imperdiet turpis. Praesent nec augue. Nulla dui purus Read more > Consequat Aenean Nulla dui purus, eleifend vel, consequat non, Etiam imperdiet dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >
  81. 81. Home about us blog contactBlog Catagories Nulla dui purus Nulla dui purus, eleifend vel, consequat non, Consequat dictum porta dui purus, eleifend vel, Aenean Etiam imperdiet consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Archives Etiam imperdiet turpis. Praesent nec augue. Nulla dui purus Read more > Consequat Aenean Nulla dui purus, eleifend vel, consequat non, Etiam imperdiet dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >
  82. 82. Home about us blog contactBlog Catagories Nulla dui purus Nulla dui purus, eleifend vel, consequat non, Consequat dictum porta dui purus, eleifend vel, Aenean Etiam imperdiet consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Archives Etiam imperdiet turpis. Praesent nec augue. Nulla dui purus Read more > Consequat Aenean Nulla dui purus, eleifend vel, consequat non, Etiam imperdiet dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >
  83. 83. Home about us blog contact Big Headline Goes Here Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Get Started!about featuresNulla dui purus, eleifend vel, Nulla dui purus, eleifend vel, consequat non, dictum porta dui purus, eleifend vel, consequatconsequat non, dictum porta,nulla. Duis ante mi, laoreet ut,commodo eleifend, cursus Nulla dui purus, eleifend vel, consequat non,nec, lorem. Aenean eu est. dictum porta dui purus, eleifend vel, consequat
  84. 84. Home about us blog contactBlog Catagories Nulla dui purus Nulla dui purus, eleifend vel, consequat non, Consequat dictum porta dui purus, eleifend vel, Aenean Etiam imperdiet consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Archives Etiam imperdiet turpis. Praesent nec augue. Nulla dui purus Read more > Consequat Aenean Nulla dui purus, eleifend vel, consequat non, Etiam imperdiet dictum porta dui purus, eleifend vel, consequat. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Read more >
  85. 85. Home about us blog contact Tags To: Inbox work home From: Starred sports Subject: Drafts entertainment baby Sent Nulla dui purus, eleifend vel, consequat non, work dictum porta dui purus, eleifend vel, consequat. home Junk sports Duis ante mi, laoreet ut, commodo eleifend, cursus entertainment nec, lorem. Aenean eu est. Etiam imperdiet turpis. baby Praesent nec augue.
  86. 86. That get’s you up and running today.But for proper advanced Keynote prototyping: Travis Isaacs’ Keynote Kungfu Black Belt http://www.slideshare.net/tbisaacs/keynote-kungfu-black-belt
  87. 87. Thank you! Chris RisdonLead Experience Designer, Adaptive Path @chrisrisdon

×