Paper Prototyping


Published on

Paper Prototyping technique explained.

Published in: Design, Technology, Business

Paper Prototyping

  1. 1. Paper Prototyping -- Devesh Jagatram CONFIDENTIAL
  2. 2. Paper Prototyping (by Devesh Jagatram) What is a Prototype? A working model created to demonstrate crucial aspects of a system without creating a fully detailed system. Adding details and content incrementally to advancing stages of prototypes is one process for creating successful systems. In Software Industry these refer to application systems and interfaces.
  3. 3. Paper Prototyping (by Devesh Jagatram) Software Prototypes Lo Fidelity Prototypes <ul><li>Wireframes / Storyboards </li></ul><ul><li>Paper Prototypes </li></ul><ul><li>Powerpoint / Visio Screen Designs </li></ul>Hi Fidelity Prototypes <ul><li>Visual Compositions </li></ul><ul><li>HTML Screens </li></ul>
  4. 4. Paper Prototyping (by Devesh Jagatram) Paper Prototype In its broadest sense, paper prototyping can be considered a method of brainstorming, designing, creating, testing, and communicating user interfaces. Paper prototyping is a widely used method in the User Centered Design process, a process that helps developers to create a software that meets the user's expectations and needs—here especially for designing and testing user interfaces. It is a Throwaway Prototyping and involves creating rough, even hand sketched, drawings of an interface to use as prototypes, or models, of a design. -- wikipedia It is mostly used for Testing design ideas with users in early stages of design and is typically defined as: Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person &quot;playing computer,&quot; who doesn't explain how the interface is intended to work.
  5. 5. Paper Prototyping (by Devesh Jagatram) Evolution of Paper Prototyping Prototyping (Traditional Methods) > Paper prototypes >
  6. 6. Paper Prototyping (by Devesh Jagatram) Evolution of Paper Prototyping <ul><li>It is a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation </li></ul><ul><li>It is Platform independent </li></ul><ul><li>It is a team exercise (Joint Application Development) </li></ul>
  7. 7. Paper Prototyping (by Devesh Jagatram) Applications of Paper Prototypes <ul><li>Brainstorming amongst Design team </li></ul><ul><li>Brainstorming with Development/Implementation team </li></ul><ul><li>Brainstorming with Users </li></ul><ul><li>Usability Testing (formative) </li></ul><ul><li>Design Testing (formative) </li></ul><ul><li>Information Architecture Testing (formative) </li></ul>
  8. 8. Paper Prototyping (by Devesh Jagatram) Stages of paper prototypes There are 2 stages at which paper prototypes are used and the kind of prototype made depends on these stages. <ul><li>Conceptualization Phase (mainly static screens to explore different concepts) </li></ul><ul><li>Testing Phase (with separate widgets and detailed screen flows to narrate certain task and all its alternatives) </li></ul>
  9. 9. Paper Prototyping (by Devesh Jagatram) Common Concerns <ul><li>I’m proficient with HTML. I can create a working prototype fairly quickly. Why would I want to use paper prototyping? </li></ul><ul><li>How can I use paper mockups to test new technology? Trying to mimic Macromedia Flash using paper mockups sounds like a nightmare—and how would we create rollovers? </li></ul><ul><li>Our product has been up and running for a while. Why go back and create mockups to test an existing product? </li></ul><ul><li>I have several elements getting repeated over many screens. If I use paper prototypes, I will need to draw them again & again for all screens. In HTMLs I can use same templates. </li></ul><ul><li>Validity (&quot;Does it find real problems?&quot;) </li></ul><ul><li>Professionalism (&quot;What will others think of it ... and us?&quot;) </li></ul><ul><li>Development resources (&quot;Do we really have time to do this? Is it just extra work?&quot;) </li></ul>
  10. 10. Paper Prototyping (by Devesh Jagatram) How good should Paper Prototypes be? <ul><li>The prototype only needs to be good enough for you to get answers to the questions you're most concerned about. </li></ul><ul><li>It's fine if the prototype looks a bit messy. Don't spend time making the prototype look neat before you test it -- if it's legible, it's good enough. </li></ul><ul><li>Paper prototypes don't need: </li></ul><ul><ul><li>Straight lines or typed text </li></ul></ul><ul><ul><li>Images or icons (Use words instead) </li></ul></ul><ul><ul><li>Color </li></ul></ul><ul><ul><li>Consistent sizing of components </li></ul></ul>
  11. 11. Techniques of Paper prototyping <ul><li>Traditional Paper Prototyping </li></ul>Paper Prototyping (by Devesh Jagatram) <ul><li>Paper based hand-sketched prototypes </li></ul>Electronic Paper Prototyping <ul><li>Powerpoint (Using Widgets) </li></ul><ul><li>Visio (Stencils) </li></ul><ul><li>Denim </li></ul><ul><li>Other electronic prototyping tools </li></ul>
  12. 12. Checklist of Things needed for Paper Prototyping Paper Prototyping (by Devesh Jagatram) <ul><li>Paper </li></ul><ul><li>Pencils / Pens </li></ul><ul><li>Eraser </li></ul><ul><li>Paper Cutter </li></ul><ul><li>Gluestick </li></ul>Additional Materials for Formative Testing <ul><li>Transparencies </li></ul><ul><li>Mount board </li></ul><ul><li>Post It Notes </li></ul><ul><li>Transparency Markers </li></ul><ul><li>Cardboards for Screen / Device mockup </li></ul>
  13. 13. Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
  14. 14. Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
  15. 15. Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
  16. 16. Sample Paper prototypes (Formative Testing) Paper Prototyping (by Devesh Jagatram)
  17. 17. Sample Paper prototypes (Formative Testing) Paper Prototyping (by Devesh Jagatram)
  18. 18. <ul><li>THANK YOU! </li></ul>Paper Prototyping (by Devesh Jagatram)