SlideShare a Scribd company logo

Paper Prototyping

•Download as PPT, PDF•
•
D
Devesh Jagatram

Paper prototyping involves creating rough sketches of user interfaces on paper to test design ideas early in the development process. It allows representing screens and flows without coding to get quick feedback. Paper prototypes are effective for brainstorming, usability testing, and design exploration before committing to an implementation. While rough, paper prototypes provide a low-fidelity, low-cost way to evaluate designs and iterate before full development.

1 of 18
Paper Prototyping -- Devesh Jagatram CONFIDENTIAL
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.
Paper Prototyping (by Devesh Jagatram) Software Prototypes Lo Fidelity Prototypes Wireframes / Storyboards Paper Prototypes Powerpoint / Visio Screen Designs Hi Fidelity Prototypes Visual Compositions HTML Screens
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 "playing computer," who doesn't explain how the interface is intended to work.
Paper Prototyping (by Devesh Jagatram) Evolution of Paper Prototyping Prototyping (Traditional Methods) > Paper prototypes >
Paper Prototyping (by Devesh Jagatram) Evolution of Paper Prototyping It is a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation It is Platform independent It is a team exercise (Joint Application Development)
Paper Prototyping (by Devesh Jagatram) Applications of Paper Prototypes Brainstorming amongst Design team Brainstorming with Development/Implementation team Brainstorming with Users Usability Testing (formative) Design Testing (formative) Information Architecture Testing (formative)
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. Conceptualization Phase (mainly static screens to explore different concepts) Testing Phase (with separate widgets and detailed screen flows to narrate certain task and all its alternatives)
Paper Prototyping (by Devesh Jagatram) Common Concerns I’m proficient with HTML. I can create a working prototype fairly quickly. Why would I want to use paper prototyping? 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? Our product has been up and running for a while. Why go back and create mockups to test an existing product? 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. Validity ("Does it find real problems?") Professionalism ("What will others think of it ... and us?") Development resources ("Do we really have time to do this? Is it just extra work?")
Paper Prototyping (by Devesh Jagatram) How good should Paper Prototypes be? The prototype only needs to be good enough for you to get answers to the questions you're most concerned about. 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. Paper prototypes don't need: Straight lines or typed text Images or icons (Use words instead) Color Consistent sizing of components
Techniques of Paper prototyping Traditional Paper Prototyping Paper Prototyping (by Devesh Jagatram) Paper based hand-sketched prototypes Electronic Paper Prototyping Powerpoint (Using Widgets) Visio (Stencils) Denim Other electronic prototyping tools
Checklist of Things needed for Paper Prototyping Paper Prototyping (by Devesh Jagatram) Paper Pencils / Pens Eraser Paper Cutter Gluestick Additional Materials for Formative Testing Transparencies Mount board Post It Notes Transparency Markers Cardboards for Screen / Device mockup
Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
Sample Paper prototypes (Formative Testing) Paper Prototyping (by Devesh Jagatram)
Sample Paper prototypes (Formative Testing) Paper Prototyping (by Devesh Jagatram)
THANK YOU! Paper Prototyping (by Devesh Jagatram)

More Related Content

Paper Prototyping

  • 1. Paper Prototyping -- Devesh Jagatram CONFIDENTIAL
  • 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. Paper Prototyping (by Devesh Jagatram) Software Prototypes Lo Fidelity Prototypes Wireframes / Storyboards Paper Prototypes Powerpoint / Visio Screen Designs Hi Fidelity Prototypes Visual Compositions HTML Screens
  • 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 "playing computer," who doesn't explain how the interface is intended to work.
  • 5. Paper Prototyping (by Devesh Jagatram) Evolution of Paper Prototyping Prototyping (Traditional Methods) > Paper prototypes >
  • 6. Paper Prototyping (by Devesh Jagatram) Evolution of Paper Prototyping It is a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation It is Platform independent It is a team exercise (Joint Application Development)
  • 7. Paper Prototyping (by Devesh Jagatram) Applications of Paper Prototypes Brainstorming amongst Design team Brainstorming with Development/Implementation team Brainstorming with Users Usability Testing (formative) Design Testing (formative) Information Architecture Testing (formative)
  • 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. Conceptualization Phase (mainly static screens to explore different concepts) Testing Phase (with separate widgets and detailed screen flows to narrate certain task and all its alternatives)
  • 9. Paper Prototyping (by Devesh Jagatram) Common Concerns I’m proficient with HTML. I can create a working prototype fairly quickly. Why would I want to use paper prototyping? 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? Our product has been up and running for a while. Why go back and create mockups to test an existing product? 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. Validity ("Does it find real problems?") Professionalism ("What will others think of it ... and us?") Development resources ("Do we really have time to do this? Is it just extra work?")
  • 10. Paper Prototyping (by Devesh Jagatram) How good should Paper Prototypes be? The prototype only needs to be good enough for you to get answers to the questions you're most concerned about. 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. Paper prototypes don't need: Straight lines or typed text Images or icons (Use words instead) Color Consistent sizing of components
  • 11. Techniques of Paper prototyping Traditional Paper Prototyping Paper Prototyping (by Devesh Jagatram) Paper based hand-sketched prototypes Electronic Paper Prototyping Powerpoint (Using Widgets) Visio (Stencils) Denim Other electronic prototyping tools
  • 12. Checklist of Things needed for Paper Prototyping Paper Prototyping (by Devesh Jagatram) Paper Pencils / Pens Eraser Paper Cutter Gluestick Additional Materials for Formative Testing Transparencies Mount board Post It Notes Transparency Markers Cardboards for Screen / Device mockup
  • 13. Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
  • 14. Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
  • 15. Sample Paper prototypes (Conceptualization) Paper Prototyping (by Devesh Jagatram)
  • 16. Sample Paper prototypes (Formative Testing) Paper Prototyping (by Devesh Jagatram)
  • 17. Sample Paper prototypes (Formative Testing) Paper Prototyping (by Devesh Jagatram)
  • 18. THANK YOU! Paper Prototyping (by Devesh Jagatram)