Information Architecture, Interaction Design

3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 1/7
Paper Prototyping
by SHAWN MEDERO ∙ January 23, 2007
Published in Layout & Grids, Information Architecture, Interaction Design ∙
43 Comments
As interfaces become ever more complex and development schedules seem to get shorter
and shorter, you may find it useful to give up your user­interface modeling software for
awhile in favor of something simpler. All you need is paper, pens, scissors, and your
imagination.
Everyone loves paper
Just as a political party aims to be a “big tent,” product development teams should seek
input from as many people as possible during the early part of a project’s design phase.
Though HTML prototypes can be useful, they can also discourage those who are unsure
what the medium is capable of. Paper prototypes, on the other hand, invite people with
little­to­no technical background into the design process.
I cannot emphasize enough how important the inclusive quality of paper can be. Though
some people shy away from paper prototypes because they feel they will not be taken
seriously, I argue that many people are intimidated by a formal, highly technical design
231
Issue №
3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 2/7
process and that the less “professional” nature of paper prototyping is a great way to
lighten the mood and engage a more diverse group. Just offer plenty of paper, pens,
scissors, and other materials for anyone to grab and use. If anyone feels nervous, let them
eat the paste.
Easy iterations
Paper prototyping can also help improve the final product: the prototyping stage is the
right time to catch design flaws and change directions, and the flexibility and disposability
of paper encourages experimentation and speedy iteration. Instead of “deleting” hours
worth of layout code you’ve used to position a column in the right place, you can draw a
prototype, throw away the ideas that don’t work, and move on.
Built for your budget
If you are on a shoestring budget, paper is a great low­cost alternative to many software
packages—and if you have a larger budget, you can use products like Post­it notes or
tabbed index card dividers to make your paper prototypes more sophisticated. If it helps
your team, you can print full­color objects to use in your prototyping sessions. You might
want a low­quality printer in the meeting room connected to someone’s laptop for
printing out new ideas. If someone recommends a website they’ve seen online, just print
out a screenshot, tack it to the wall, and start doodling on it.
On the flip side, you can also use paper prototypes to run a technology­free design
meeting: turn off your laptops, stop checking your e­mail, and focus on the task at hand.
Easy documentation
Another benefit of using paper is that you can write notes right on the prototype or on the
back of each sheet or index card. While an advanced group might feel comfortable using a
wiki for information capture, other teams may find these attached notes a godsend weeks
later when they actually start writing code for that pesky dialog box.
Show me the paper
Traditional user interface widgets can be modeled easily with paper. Here is a set “tabs”
showing a couple of buttons and what happens when you “click” on a drop­down menu:
3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 3/7
You can always save a buck or two by using regular index cards and cutting out the tab
labels yourself.
Dynamic boxes, common in websites with contextual or personalized information, are
possible too. To “refresh” the page, simply swap out the index cards. Here a username not
found in the database triggers an error and on a successful login the box displays the “my
account”widget:
3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 4/7
3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 5/7
It is possible to demonstrate problems such as a pop­up windows that block key elements
of your interface and potential alternatives to the pop­up:
For every link and button on your mock­ups, be prepared to have a matching sketch ready
to display—or have someone take suggestions from your group and sketch a new dialog,
page, or window in real time.
Besides the materials mentioned, I recommend a removable glue stick that can be found
cheap at an office supply store. Glue sticks are the “magic” that lets you easily put together
and take apart a paper interface.
Where does paper prototyping fit into the design process?
There are two dominant uses:
1. The design team uses paper for their presentation to a larger group of people who
have a vested interest in the product.
2. Users run through a set of existing paper mock­ups or are given blank paper and
asked to represent a concept by sketching it.
Option two is a great way to “unplug” and go directly to people willing to test your
interface. As an example, let’s look at the ways in which paper can fit into the usability
testing process.
USABILITY TESTING WITH PAPER PROTOTYPES
3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 6/7
A paper usability­testing session works much like any other usability­testing session.
Begin by selecting a range of testers who represent your expected audience. Have
scenarios ready for the user to perform. Document the testing sessions with video to
review the users’ emotional state when using your mocked­up interface. Debrief users
afterward to measure interface recall. With paper, you can also:
Allow users to mock up ideas they think would solve a problem.
Mark on the prototype where a user attempted to “click” or otherwise interact with the
interface.
Ask users to draw what they expect to happen next.
Keep going even if you don’t have access to a testing lab or if computers, networks, or
high­tech prototypes don’t work as expected.
While it’s valuable to measure the success of your interface via time­based benchmarks,
the emphasis should be on getting your focus group to be creative.
If you’d like to read about a real­world experience check out Carolyn Snyder’s article
(http://www.uie.com/articles/prototyping_risk/) on a six­day session using paper
prototypes with clients and end­users.
When paper isn’t ideal
A major benefit of paper is the user­generated content that comes out of the feedback
sessions. Chances are, a one­person shop will have a hard time reaping the benefits of
paper without the collaborative process that occurs in “using” the prototype with others.
There are also certain concepts that remain difficult to demonstrate with paper: how long
a screen takes to load or refresh, for instance. Horizontal and vertical scrolling is a
common website interface problem that is almost impossible to discover with a paper
prototype. Specific colors, images, and fonts aren’t easily represented on the simplest
paper prototypes. Still, I have used computer print­outs in combination with paper to
tackle at least some of these issues.
Earlier in this article, you saw an example with Arabic text that uses material I printed
out. Because Arabic text is written right to left, I wanted to keep this in mind when
positioning the main body of text on the interface. The Arabic font also requires the text
be large enough to read diacritical marks. Be sure to include people in your paper sessions
who can explain how advanced interface widgets, graphics, fonts, and embedded
multimedia elements might affect the design.
Where do we go from here?
3/21/2014 Paper Prototyping · An A List Apart Article
http://alistapart.com/article/paperprototyping 7/7
ISSN 1534-0295 · Copyright © 1998-2014 A List Apart & Our Authors
Also in Issue № 231
Quick CSS Mockups with Photoshop
by Casper Voogt
If you want to dig deeper, Carolyn Snyder’s Paper Prototyping
(http://www.paperprototyping.com/) is the most recognized work on this subject and is
highly recommended.
Paper has seen a resurgence with knowledge workers who aim to organize every aspect of
their lives. The Hipster PDA (http://en.wikipedia.org/wiki/Hipster_PDA) breathed life
into its community and spawned projects such as the DIY Planner
(http://www.diyplanner.com/templates/official), which is based on a set of printable
templates for calendars, to­do lists, and more.
Note: The paper prototyping field might
benefit from an open­source library of
similar printable widgets, which could be
modeled using SVG or provided in a
standard format such as PDF. Online
resources such as the GUIdebook
(http://www.guidebookgallery.org/) and wireframing templates for Visio and
OmniGraffle may provide a good start point for generating ideas. If anyone is interested in
creating an open­source printable widget library, I will provide free hosting space for
project tools such as a wiki and SVN repository for checking out the latest and greatest
templates.
Finally, there are some efforts to merge paper concepts with technology using tablet
computing. Professor James Landay at the University of Washington has been working on
a tool called DENIM (http://dub.washington.edu/denim/) since the mid­90s that is
aimed at creating websites. DENIM allows you to sketch your ideas, annotate them, and
even export a working HTML site suitable for use in demonstrations.
About the Author
Shawn Medero
Shawn Medero is an interface designer for the Linguistic Data Consortium at the University of
Pennsylvania. While not born and raised there, West Philadelphia is where he spends most of his days
with his wife and son.

The post Information Architecture, Interaction Design appeared first on My Assignment Online.