Rapid paper prototyping allows teams to quickly sketch and test design concepts using low-fidelity paper prototypes before investing in development. The process involves defining requirements, sketching ideas, finalizing prototypes, testing with users, and refining designs through iterative testing and sketching. Paper prototyping is a cheap, fast way for teams to brainstorm, collaborate, identify issues early, and refine designs before building full digital prototypes or final products.
2. What is Paper Prototyping?
A quick form of mocking up ideas, also called "throwaway
prototyping"
Usually paper and pencil, though it can be done digitally
Allows you to test concepts in a low-fidelity, low-budget
way
3. What is the process?
Define the project requirements
Sketch sketch sketch sketch
Finalize paper prototypes and interaction flows
Present to users
Refine & repeat as needed
4. What are the benefits?
Cheap
Quick
Whole team process that fosters brainstorming, creativity,
and discussion
Easier to critique
Simulates interaction with low-tech involvement
Identifies issues before building
5. What are the alternatives?
Evolutionary Prototyping, which many development teams
use. In this process, a robust, functional prototype is built
and then tested on users. The concept is then refined,
features are added, and a new version is tested.
Or, you know, not testing at all.
6. Throwaway Prototyping vs. Evolutionary
Prototyping: A cage match
Evolutionary Prototyping builds quick and constantly
refines
Evolutionary Prototyping works best with tech-heavy teams
that have the resources to iterate a live project
7. Throwaway Prototyping vs. Evolutionary
Prototyping: A cage match
Throwaway Prototyping refines before building
Throwaway Prototyping works best for small teams, teams
with multiple parties interested in the development
process, and teams that need to be able to test multiple
design theories and options
8. Crazy Excuses Against Paper Prototyping
“I’m already doing wireframes, isn’t this twice the work?”
9. Crazy Excuses Against Paper Prototyping
“I don’t ever use a pencil, let alone paper.”
13. What should I do before starting?
Audience discovery: define your user groups
Needs analysis: what do users need? what does the client
need? what is the goal?
Content analysis: who, what, when, where, why, how.
Information architecture: organize that data!
14. What makes it rapid?
Start sketching using the concepts of gesture drawing:
“A gesture drawing is work of art defined by rapid execution. Typical
situations involve an artist drawing a series of poses taken by a model in a
short amount of time, often as little as 30 seconds, or as long as 2
minutes. Gesture drawing is often performed as a warm-up for a life
drawing session.”
15. What makes it rapid?
image courtesy Flickr user ‘Lil: http://www.flickr.com/photos/86653584@N00/2272093183/in/photolist-4sM59p-5vVE5R
16. But sketching takes time we don’t have!
The multi-billion dollar movie, animation, and gaming
industries all sketch prototypes, except they call them
storyboards.
They have realized the value in conceptualizing and testing
ideas before committing resources to actually build them.
17. “You can't do sketches enough. Sketch everything and keep your curiosity
fresh.”
- John Singer Sargent
18. Sketch A LOT.
Aim for quantity over quality
Spend no more than 2 minutes on a sketch
Try out as many ideas as possible
Don’t focus on “bad” ideas; all ideas are good ideas
Keep swimming forward
19. Now what?
Embrace ideation and creativity
Sort through your ideas and find the interesting ones
Get as many sets of eyeballs on them as possible
Find common, recurring patterns
Iterate and refine a few choice ideas
Think about the flow of interaction
21. “The thing about models, about using them, is that a model doesn’t have to
be a total theory of a field. It doesn’t have to be a golden thread that sort of
leads you through a labyrinth. A model, a true model, in the experimental
and feeling-your-way sense, can just be a kind of tentative walk through the
experience by which you can retreat, consolidate yourself, regroup, and
take a try again.”
- Charles Eames
22. Paper for interaction
It’s time to raid the junk drawer. You may need
scissors
post-it’s (various sizes and flags)
glue sticks
index cards
highlighters
tape
23. Paper for interaction
Take your sketch, and refine global elements
If you would like, cut out global elements for reuse in the
testing process
Sketch additional interaction paths
Create “special” affordances: dropdown menus from
accordion folded paper, modal windows, error
messages with highlighters, sliding features, infinite
scrolls, and on and on
24. Examples
Account Creation Flow http://vimeo.com/6085753#
App Testing http://www.youtube.com/watch?v=3fk0uWer6IQ
Mobile Game http://www.youtube.com/watch?v=IPr6MgF93jQ
Coloring App for Kids http://www.youtube.com/watch?v=9wQkLthhHKA
25. image courtesy Flickr user Samuel Mann: http://www.flickr.com/photos/21218849@N03/7984581635
26. image courtesy Flickr user Squidsoup: http://www.flickr.com/photos/squidsoup/4074959111
27. image courtesy Flickr user Samuel Mann: http://www.flickr.com/photos/21218849@N03/8019065947
28. Test early and often
Jakob Nielsen says that 5
users is the ideal testing pool
“Elaborate usability tests are a waste of resources. The
best results come from testing no more than 5 users and
running as many small tests as you can afford.”
Why You Only Need to Test with 5 Users by Jakob Nielsen: http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
29. Assemble your testing team
You will need
Someone to plan/facilitate the testing
Someone to execute the testing (in place of technology)
Someone to observe and document the testing
5-ish users
30. Flip the Script
Once you are done testing, give your user paper and pencil
and let them sketch their own ideas and solutions.
31. Let’s Get Digital
+ Prototyping on Paper (POP) app http://popapp.in
+ InVision http://www.invisionapp.com | sample1 | sample2
Both allow you to take your sketches and turn them into
deployable, interactive prototypes for testing.
POP can be downloaded on iOS or Android, InVision runs
through the browser. Both are free.
32. Additional Resources
Excerpts from Carolyn Snyder’s Book “Paper Prototyping”
http://www.paperprototyping.com/download.html
UXPin Notepads http://uxpin.com/products.html
UI Stencils http://www.uistencils.com/products/website-stencil-kit
33. Iterate as needed
Continue to refine your sketches and expand upon the
interaction until you feel confident that the idea is ready to
build.
Yes, then you can start building.
Editor's Notes
Undesigned is not the same as unprofessional. Execs, clients, and users all find value in being involved early on
Just false. Usability.gov says so: http://www.usability.gov/get-involved/blog/2005/06/paper-prototypes-and-software-prototypes.html
