Rapid Paper Prototypingsketch, test, repeat

What is Paper Prototyping?A quick form of mocking up ideas, also called

"throwaway prototyping"Usually paper and pencil, though it can be done

digitallyAllows you to test concepts in a low-fidelity, low-

budget way

What is the process?Define the project requirementsSketch sketch sketch sketchFinalize paper prototypes and interaction flowsPresent to usersRefine & repeat as needed

What are the benefits?CheapQuickWhole team process that fosters brainstorming,

creativity, and discussionEasier to critiqueSimulates interaction with low-tech involvementIdentifies issues before building

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.

Throwaway Prototyping vs. Evolutionary Prototyping: A cage matchEvolutionary Prototyping builds quick and constantly refines

Evolutionary Prototyping works best with tech-heavy teams that have the resources to iterate a live project

Throwaway Prototyping vs. Evolutionary Prototyping: A cage matchThrowaway 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

Crazy Excuses Against Paper Prototyping

“I’m already doing wireframes, isn’t this twice the work?”

Crazy Excuses Against Paper Prototyping

“I don’t ever use a pencil, let alone paper.”

Crazy Excuses Against Paper Prototyping

“This looks like a kid made it.”

Crazy Excuses Against Paper Prototyping

“I would rather just start building.”

Crazy Excuses Against Paper Prototyping

“Users won’t take this seriously.”

What should I do before starting?Audience discovery: define your user groupsNeeds 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!

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.”

What makes it rapid?

image courtesy Flickr user ‘Lil: http://www.flickr.com/photos/86653584@N00/2272093183/in/photolist-4sM59p-5vVE5R

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.

“You can't do sketches enough. Sketch everything and keep your curiosity fresh.”

- John Singer Sargent

Sketch A LOT.Aim for quantity over qualitySpend no more than 2 minutes on a sketchTry out as many ideas as possibleDon’t focus on “bad” ideas; all ideas are good ideasKeep swimming forward

Now what?Embrace ideation and creativitySort through your ideas and find the interesting

onesGet as many sets of eyeballs on them as possibleFind common, recurring patternsIterate and refine a few choice ideasThink about the flow of interaction

Can I start building stuff now?

NO.

“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

Paper for interactionIt’s time to raid the junk drawer. You may need

scissorspost-it’s (various sizes and flags)glue sticksindex cardshighlighterstape

Paper for interactionTake your sketch, and refine global elementsIf you would like, cut out global elements for reuse

in the testing processSketch additional interaction pathsCreate “special” affordances: dropdown menus

from accordion folded paper, modal windows, error messages with highlighters, sliding features, infinite scrolls, and on and on

ExamplesAccount Creation Flow http://vimeo.com/6085753#App Testing http://www.youtube.com/watch?v=3fk0uWer6IQMobile Game http://www.youtube.com/watch?v=IPr6MgF93jQColoring App for Kids http://www.youtube.com/watch?v=9wQkLthhHKA

image courtesy Flickr user Samuel Mann: http://www.flickr.com/photos/21218849@N03/7984581635

image courtesy Flickr user Squidsoup: http://www.flickr.com/photos/squidsoup/4074959111

image courtesy Flickr user Samuel Mann: http://www.flickr.com/photos/21218849@N03/8019065947

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/

Assemble your testing teamYou will needSomeone to plan/facilitate the testingSomeone to execute the testing (in place of

technology)Someone to observe and document the testing5-ish users

Flip the ScriptOnce you are done testing, give your user paper and pencil and let them sketch their own ideas and solutions.

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.

Additional ResourcesExcerpts from Carolyn Snyder’s Book “Paper

Prototyping” http://www.paperprototyping.com/download.htmlUXPin Notepads http://uxpin.com/products.htmlUI Stencils http://www.uistencils.com/products/website-stencil-kit

Iterate as neededContinue 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.