Validating Ideas Through Prototyping
23 likes3,840 views
This document discusses validating design ideas through prototyping. It covers why prototyping is important to fail early and cheaply before investing significant time and money. It discusses different types of prototypes including interactive prototypes to test usability and narrative prototypes to convey stories. The document provides guidance on what to prototype including risky functionality, core interactions, content organization, and application patterns. It also discusses evaluating prototypes against design principles and criteria. The key messages are that prototyping allows testing concepts and ideas early, making multiple prototypes to test different concepts, and using prototypes to gather user feedback before refining designs.
Validating Ideas Through Prototyping
- 1. Validating Ideas Through Prototyping Chris Risdon Lead Experience Designer, Adaptive Path @chrisrisdon
- 2. Prototypes
- 3. Design Principles Testing Ideas Ideation (theory) (Prototyping) Design Principles Prototype Refined Design (refined) (Usability)
- 4. Design Principles Testing Ideas Ideation (theory) (Prototyping) Design Principles Prototype Refined Design (refined) (Usability)
- 5. Design Principles Testing Ideas Ideation (theory) (Prototyping) Design Principles Prototype Refined Design (refined) (Usability)
- 6. Why do this? Fail early, fail cheaply
- 7. Before you invest time and money Prototype for areas you don’t know Test risky functionality Validate: • Core interactions • Application patterns • How content is organized
- 9. Concepts
- 10. Concepts?
- 13. Ready to prototype? Not so fast.
- 14. What makes a prototype a prototype?
- 15. Prototypes vs. Stories Or Interactive Prototypes vs. Narative Prototypes
- 16. The experience prototype allows designers to show and test the solution through an active participation of the users. (2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposium on Designing Interactive Systems.
- 17. The experience prototype allows designers to show and test the solution through an active participation of the users. (2000) Marion Buchenau, Jane Fulton Suri, Experience Prototyping, paper presented at the Symposium on Designing Interactive Systems.
- 18. We all use stories to communicate...and inspire. Basing stories on fact will help you communicate your own ideas effectively. Tell your story well: you'll get buy-in for the design and you'll have everyone on the same page. Whitney Quesenbery, Storytelling for User Experience
- 19. We all use stories to communicate...and inspire. Basing stories on fact will help you communicate your own ideas effectively. Tell your story well: you'll get buy-in for the design and you'll have everyone on the same page. Whitney Quesenbery, Storytelling for User Experience
- 20. Narrative Prototype Interactive Prototype (Story or Scenario) Storytelling stands Prototypes often requires on it’s own, doesn’t moderation, facilitation, or need context context explained 3rd person 1st person Storytelling describes a Prototypes tests parts of the complete experience experience Explanation Exploration
- 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. 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. It’s not about requirements. (at least not yet)
- 25. Broad Not deep
- 26. What to prototype • What you don’t know • The product's story • Everything you need to convey the product experience (but no more)
- 27. Fast. Cheep. Portable. Easy.
- 28. $20 in the app store. No cheaper software for prototyping.
- 29. But more on Keynote later. Really, I don’t care what you use.
- 30. Testing concepts? Who and what.
- 31. We use prototypes to answer design questions? So what are those questions?
- 32. What do you need to know about your designs?
- 33. Does it support the value proposition?
- 34. Does it support the vision?
- 35. Does it make sense to users?
- 36. Is this framework work best for users? (Do the collection of features support the users mental model?)
- 37. Are users making sense of the content?
- 38. Not usability testing. Stay out of the weeds. (again, broad not deep)
- 39. Not (small scale) usability testing. You’ll uncover large scale usability issues.
- 40. • Prototype for areas you don’t know • Core interactions • Application patterns • Content • Risky functionality
- 41. “The better it looks, the more narrow the feedback.” —Kathy Sierra
- 43. Charmr Design Principles Adaptive Path’s User Intensive, 2011
- 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. Palm Pilot Design Principles ■ Fits in a shirt pocket ■ Syncs seamlessly with PC ■ Fast and easy sync ■ No more than $299 Adaptive Path’s User Intensive, 2011
- 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. Just one prototype? Um, no.
- 49. Different concepts • Develop multiple ideas • Test against design principles • Extremes in concepts for contrast and comparison
- 50. 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)
- 51. Make them different • Making each unique • Design extremes between concepts • Welcome gaps
- 52. 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)
- 53. When not Keynote? When custom interactions are the ‘thing’ you need to validate
- 54. Real content! Your design idea is too abstract to the user without real content.
- 55. Evaluating Ideas Determine criteria you use to evaluate the design. Keeps it from being “I like this” or “I don’t like that”
- 56. Evaluating Criteria • Discoverable • Trustworthy • Appropriate • Responsive • Smart • Clever • Meaningful For more, read • Pleasurable Designing for Interaction by Dan Saffer
- 57. Hitting many is great, but usually you are going to just hit a few key criteria depending on goals. • Discoverable • Trustworthy • Appropriate • Responsive • Smart • Clever • Meaningful • Pleasurable
- 58. Hitting many is great, but usually you are going to just hit a few key criteria depending on goals. • Discoverable • Trustworthy • Appropriate • Responsive • Smart • Clever • Meaningful • Pleasurable
- 60. “The One Pager” “The Policy Explorer” “The Worksheet”
- 61. Concept: The One-pager Successes: • easy to understand the steps • very narrative • good mix of visual and textual information • everything in one place/page
- 62. 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
- 63. 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
- 64. 64 Since last time: Concepts and Testing Themes What follows are the major themes we saw during concept testing with customers. We’ve called out specific aspects, features, etc. of the concepts that represent these themes.
- 65. 65 Themes: 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 grid Quick access to estimate Realtime estimate update
- 66. 66 Themes: 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
- 67. 67 Themes: 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
- 68. 68 Themes: 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
- 69. Interactive Prototype (landing page)
- 70. Interactive Prototype (worksheet: quick estimate ) 70
- 71. 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
- 72. 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
- 73. Interview based tasks In interview-based tasks, the participants interests are discovered, not assigned. Unlike scavenger-hunt tasks, the test's facilitator and participant negotiate the tasks during the tests, instead of proceeding down a list of predefined tasks. Because each task is drawn from the experience and interest of each participant, no two participants perform exactly the same tasks. As we're looking for the usability problems that pop up, we're also looking for how the user approaches their problem and the level of detail they require. Surprisingly, we often see multiple participants run into the same problems. Even though their tasks are radically different, they have very similar experiences. As each participant designs their own tasks, they are telling us how they think about the content on the site, giving us insight into the words we choose for links and how we organize the material. Jared Spool (http://www.uie.com/articles/interview_based_tasks/)
- 74. Keynote: An Introduction (the very basics)
- 79. Inspectors (AKA Palettes) Linking Document Text Shape effects
- 80. Links Blue arrow indicates an object is linked about us about us Doesn’t show when you ‘play’ prototype Nulla dui purus presentation
- 81. Master Slides: Time Saver Create your templates here Create master slide templates for elements you know will be the same from Can be applied page to page (or state to to multiple pages state)
- 82. 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)
- 83. Home about us blog contact Blog 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 >
- 84. Home about us blog contact Blog 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. Home about us blog contact Blog 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 >
- 86. Home about us blog contact Blog 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 >
- 87. Home about us blog contact Blog 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 >
- 88. 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 features Nulla dui purus, eleifend vel, Nulla dui purus, eleifend vel, consequat non, dictum porta dui purus, eleifend vel, consequat consequat 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
- 89. Home about us blog contact Blog 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 >
- 90. 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.
- 91. 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
- 92. Thank you! Chris Risdon Lead Experience Designer, Adaptive Path @chrisrisdon