Paper Prototyping

by Shawn Medero

43 Reader Comments

Back to the Article
  1. Okay that’s a very cool idea - my paper prototypes are no where near that good! They usually just involve sketches, not multiple sheets for the same bit, wow. Very cool.
    Copy & paste the code below to embed this comment.
  2. While paper may be suitable to discuss static layout, up to date websites (Web 2.0) do have a great part of behaviour in them. It’s really hard to simulate this using paper. On the other hand if you already code the pages for an HTML (or even Ajax) prototype you’re half way done and you may waste time doing the coding again and again. So what I do is neither more sophisticated than paper, nor as time consuming as coding - I just provide some Powerpoint slides.
    Copy & paste the code below to embed this comment.
  3. Nice article, I completly agree that the hand drawn and paper based prototyping is a very valuable stage in a user-centred design process. The agency I work for actually uses PowerPoint to create these initial concept designs. They have a PowerPoint library containing the standard elements of a user interface that appear as though they are hand drawn. We use this as a starting point for concept designs. We print out the designs on A3 and then present them to users in morning sessions and then we make modifications to the designs in the afternoon and repeat the process until we are happy with the concept. We have pen and paper on hand if the users feel then want to add to the designs. Although I hate PP it suits the purposes of quickly mocking up a concept and means we have electronic versions of the iterations for our records. Just some more food for thought. :)
    Copy & paste the code below to embed this comment.
  4. @Andreas: Thanks for your comments and raising this point. I know this method isn’t for everyone and I respect that. My approach to any site that uses Ajax (plugins, advanced client-side widgets, etc.) is to remember that it has to work without Ajax to begin with. There is a lot of prototyping to be done before one even gets to the implementing any client-side behaviors. Remember one of the benefits here is to capture this feedback earlier in your process so that by the time you sit down with your toolkit you’ve already got a serious chunk of user feedback. I’ve been involved in paper prototyping sessions that highlighted areas where Ajax (or even DHTML+XMLHttpRequest if you’d like me to date myself) ended up improving the experience.
    Copy & paste the code below to embed this comment.
  5. Hi Shawn. Thanks for the well written article. Unfortunately, I couldn’t disagree more with the idea that paper prototypes are an effective means of communicating the content, structure and functionality of a website prior to design and coding. George Bernard Shaw said “The biggest problem in communication is the illusion that it has taken place.” While paper does help draw out a group and does help to a degree, it does not go far enough to avoid the critical miscommunications that can cripple a web project in the end. And because paper can create the illusion that communication has taken place, invisible problems can find their way into the project. We used to use detailed paper prototypes but found consistently that clients just didn’t get what we were talking about—until the site was in beta mode and they could see it in a browser. Of course by then it was too late to easily change the site. We found that a browser-based, visually generic, easily modifiable, HTML prototype was the solution and the difference was dramatic. We even wrote a book about it called Client vs. Developer Wars (it’s available as a PDF on our site - http://www.newfangled.com/client_vs_developer_wars). While I disagree with using paper I seriously respect and commend all web developers, like you, that go to great lengths to effectively communicate about the web with their clients. Thanks!
    Copy & paste the code below to embed this comment.
  6. Ever since I first started being worried about usability in the mid-1990’s, I’ve used paper prototypes in a very similar fashion. As the “usability expert,” I would usually create the paper prototype in Word (since my handwriting stinks) and then build interactive paper prototypes. However, the reaction (and subsequently the success) has always been mixed. First I used to think my GUI designs were no good (convincing managers of mainframe AS400 systems to make the jump to Windows and then to the Web), but eventually I figured out that some people just can’t deal with computer GUIs on paper. Sure, they may tell you that they have the best imagination in the world and that they want to see “what you got.” In the end, I find that there is a very limited audience for paper prototypes among my varied clients: It’s usually the more tech-savvy people who can really make a contribution and get something out of paper prototyping. Unfortunately, eight out of 10 managers and bosses I deal with just don’t get paper prototypes. However, I still use paper prototyping with peers and development teams to convey a concept or a new idea before the actual building begins. Thank you for your thoughtful article and the example illustrations.
    Copy & paste the code below to embed this comment.
  7. @Eric I’ve used both approaches and it generally comes down to a judgement call on what method will work best with a client and the product in question. One thing to consider is that paper may not be the solution for the entire process but smaller parts that you’d like immediate feedback on. That’s what “Microsoft’s Jensen Harris did during the development of the Office 12 user interface”:http://blogs.msdn.com/jensenh/archive/2006/01/06/510069.aspx .
    Copy & paste the code below to embed this comment.
  8. I’d very much be interested in a open template set using SVG (maybe inkscape). If anyone else is down I’d love to collaborate.
    Copy & paste the code below to embed this comment.
  9. @Dan Yeah, I was sorta surprised that nothing was out there. I thought for sure the GNOME folks would have something in SVG since Novell was so big on funding this type of work for a while. Also, I agree that “Inkscape”:http://www.inkscape.org/ is more than up to this task. For those who think code generation might have a place here: having the SVG form should make it easier to programmatically work through a prototype. The “Univ. of Washington/DENIM”:http://dub.washington.edu/ folks might have some knowledge of past or current attempts using SVG. There’s a link to my website in the article and ways to contact me there. Anyone who is interested should stop by. I’d love to get that discussion going on a mailing list, Google Group, or whatever works for the ‘crowd’.
    Copy & paste the code below to embed this comment.
  10. Thanks for this excllent work. I especially appreciate all of the spot-on links and detailed discussion. I am sure that I can apply these techniques to many things, as your article suggests. At a minimum, this will speed up and simplfy my prototyping. Keep up the great work!
    Copy & paste the code below to embed this comment.
  11. When I print the article, the links have their URLs right after them. Very excellent! Thanks. Perfect if the link to the article gets lost or the saved HTML version of the article is not available. Most things that you print (or save as PDFs) from the Web do not have any URLs to go with the links. Thanks for paying attention to this importnat detail that most sites and authors miss!

    It is, after all, A List Apart, and this is a very good thing :)
    Copy & paste the code below to embed this comment.
  12. Great Article! I’ve been using this technique for a while, some of my client’s are not what you would call web or tech savvy. This way of marking up a documents and working on the layout of a site defiantly suits certain types of jobs (particularly massive portal type sites), not to mention the sheer joy I get of putting my Mac to sleep and getting busy with the scissors, pens and paper, somehow reminding me of primary school art class!
    I also tend to do this at the office where I have a blank wall and a couple of different colours of post-it notes, blu-tack and sheets of A4 plastered all over the place.  Although I’m still yet to implement the ‘felt tip’ address and scroll bars. Very cool. So who’s going to turn that into a skin for Firefox?
    Copy & paste the code below to embed this comment.
  13. Remember those great pop-up books of our youth? We could bring those back to further enhance this idea, but glue would have to be added to the materials list. :-) Nice article. Not sure if I agree what with the power to show more on the web while still getting simplistic non-technical ideas across, but the end-user contribution aspect of it may be just the ticket.
    Copy & paste the code below to embed this comment.
  14. I love the idea of this hands-on ‘paper’ approach. The fact that it can’t be used to symbolize “Ajax”:http://www.ajax.nl/ behaviours and other dynamic content seems quite trivial, about as trivial as the fact that you can’t solve screws when armed with a hammer. Consider this as another one of your tools in the process of interaction design and I’m sure you’ll be using it soon.
    Copy & paste the code below to embed this comment.
  15. Even DENIM has nothing (or too little) to do with paper prototyping I like the software. I miss the ability to import components using a scanned picture (to reuse the paper prototype) *Is there any app similar to DENIM out there*? I’m interested in any tool that can help in a screen-driven design process but as specific as possible for the task (no powerpoint, visio, inkscape, etc. that I already know) thanks,
    Copy & paste the code below to embed this comment.
  16. I have been doing design mock-ups for years in Photoshop and only a few weeks ago went back to the drawing board (literally). I found doing the thumbnail sketching far more effective, I feel silly for mentioning as it the foundation of concept development, but somehow over the years I drifted away and got stuck in the digital world. What a release to go back to the fast and easy pencil and paper tools! I came up with more good layouts then usual and once I diagrammed the general structural mark-up, I had the easiest time coding ever. So I do think it can be valuable for a one man shop. The draw back is that I really can not take advantage of group dynamic as I never meet most of my clients face to face. But it does suggest that using simpler mock ups with them might be more effective in that it cuts out the clutter and the client can focus on the flow of the content. Side Note #1: I stumbled onto Inkscape a few weeks ago and it has knocked my socks off. I have really only played with it so far, but it seems to run rather faster under OS X then XP (running on a MacBook with Boot Camp). Side Note #2: scrybe (iscrybe.com) reportedly has a function to print your schedule in a special, easy to fold format so you can ‘sync’ with your pocket and ditch your PDA.
    Copy & paste the code below to embed this comment.
  17. I use a blank black & white screenshot of firefox at whatever min resolution the site is going to be. After I get a mock-up done on paper I scan it to photoshop then decided what colors to use. Then its time for the xhtml and CSS. A tip for the photoshop stage is to use layer comps to mock up different pages. ie. Newspage, homepage, about, gallery or whatever else. This way if you need to send it to someone else all the mock-ups can be in one .psd file. This is when layer groups become important. I like to group each div item into its own layer group. i.e. nav, header, footer, entry box, etc.
    Copy & paste the code below to embed this comment.
  18. While reading the article I initially thought it was tongue-in-cheek, but then realized that it wasn’t and made some great points. I think a main problem it identified is prototyping options that really don’t allow for meaningful customer/stakeholder involvement so can waste time. I recently took part in a web application project that used a new prototyping tool called Simunicator that allowed meaningful customer participation from early on (via web no less). The customer got the site they wanted and quickly as their requirements were clear early on. So prototyping technology is getting much better to allow early and meaningful customer participation.
    Copy & paste the code below to embed this comment.
  19. 37signals has an excellent “article on patterns in web design”:http://www.37signals.com/papers/introtopatterns/ . They make design bits on paper, but they do not use pieces of paper to relocate the design bits. I was reading that article three weeks ago and was using the method to do the design of a user interface with a team. However, we went one step further, by using the scissors and cutting the individual chunks (in Step 4 of the article). However, in my case, the design chunks were separate pieces of paper and I had no glue. Therefore, to preserve what we have designed, I used my digital camera to take pictures of the prototypes. So, a digital camera is very handy for this kind of prototyping.
    Copy & paste the code below to embed this comment.
  20. At last - ‘back to basics’ :). Some of us - well, myself at any rate - never left paper behind. Every single website I’ve developed has first been planned out on paper, both the site structure and page designs. Not only is this quick and easy and can be done anywhere (such as, say, in the pub :*)) without needing a computer to hand, it also means that I don’t have to wrestle with software to create page designs or site hierarchies - something I can draw in a few minutes can take me an hour or more in unfamiliar, or even familiar, software, and this just gets in the way of the ‘creative process’. Paper is also, as the article points out, less intimidating for the site commissioner(s), and allows developer and users to sit down together without any blasted computer and just concentrate on the task. It’s just amusing to me that this is now being put forward as cutting-edge practice (well, if it’s in ALA it must be cutting-edge ;-)), when a lot of us old grunts have been using this technique since the WWW began. The only nuisance with using paper at the specification stage is that, when you come to document the site in detail, you either have to scan in your scrawled sketches, or be more ‘professional’ and try to draw them in software which can be quite a PITA - ever tried using a billion-feature vector graphics package to draw a simple page design? You have to spend ages just learning how to turn all the features off :(
    Copy & paste the code below to embed this comment.
  21. Being something of a luddite (read traditionally trained print designer) I’ve only recently learnt html and css and have always be wary of commiting designs of any kind to a machine until they make perfect sense on paper. When used too early in site designing photoshop and vector programs give an illusion of perfection which steer me away from being as inventive as I should be. They stop me thinking like a human and I start making technical fixes. For me designing the layout is done with post its, elements of functions and navigation written up onto a post-it each, stuck ‘em on a wall and moved about ‘til they make sense. I then sketch out what’s in front of me and viola! But, and it’s a big but, the client gets to see the sketches but never the post-its. I’ve had a few ‘and we’re paying for this’ looks over the years. A friend did the pretty much the same thing but sketched rough colourful site elements, printed them out big (so they looked cute) and stuck them on the wall like post-it notes. The client loved it. Back to basics it may be but it’s more like a re-assertion of what designers should always know, people are better at ideas than computers and drawing on paper is fun.
    Copy & paste the code below to embed this comment.
  22. There is one part of this that works on a visceral level—if it’s hand drawn it looks provisional.  A few years ago I thought this was valuable, so I wrote a pluggable Java look & feel that makes the UI look hand-drawn.  It’s all computer generated (mostly on the fly), and written on a crumpled napkin background.  I call it the “Napkin Look & Feel”, and you can see it here: http://napkinlaf.sourceforge.net The people who actually use it (that have written me) actually use it in the shipped product, which I find ironic, but in any case, I thought it might be of interest here.
    Copy & paste the code below to embed this comment.
  23. Just to add my tuppence worth… We find paper prototypes very useful for communicating the design within the team, and for conducting usability reviews/tests. Next we create vanilla HTML pages to explain the concept to the client, and to conduct further usability reviews/testing. I agree with other comments that clients usually don’t like to see paper prototypes, but it depends on the client. Sometimes you have to make a judgment call about the kind of client you’ve got (it helps if you’re good at reading personalities).
    Copy & paste the code below to embed this comment.
  24. we recently found this wireframing software that has help us lots you can find it at www.axure.com Hope this is useful :-)
    Copy & paste the code below to embed this comment.
  25. Axure looks like nice software which fits a useful niche, but it’s a bit pricey at near 600 bucks. Say what you like about pen and paper, but it cost next to nothing, isn’t encoded into proprietary formats, and doesn’t require hours or days to get to know how to use it ;-)
    Copy & paste the code below to embed this comment.
  26. I didn’t mention in my earlier post, but Simunication offers free accounts to use their Simunicator software online. It offers much more than wireframing, as you can build high fidelity prototypes, so can’t be learned in an hour. But it can do so much, especially easy client viewing and feedback over the web, that its worth the effort to learn to use.
    Copy & paste the code below to embed this comment.
  27. This is interesting stuff. I have an idea to make for a slightly more robust version using flat Lego. Scrollers, radio buttons etc can be with black flatliners and easily positioned, while more transient items can be made using whiteboard markers. I think this could be a real goer… (any excuse to re-purpose the detritous of years of creative play :)
    Copy & paste the code below to embed this comment.
  28. Just do easy thing!
    This is a good guideline when we do design.
    Copy & paste the code below to embed this comment.
  29. I have to admit, I was chuckling as I looked over the digital photos of paper (and especially the accompanying news story), but I really love the idea.  I’ve always found that de-tech-ifying things can help the less-technically minded (clients, colleagues, even bosses) see what it is we’re thinking, and at least give an initial go ahead to some idea that would take way too long to digitally mock up just to be lost on them. Of course, now I want to go somewhere and buy a book of these in cut-out form (or, even better, dry-erase decals!), complete with a variety of plastic boards replicating Dell, Apple, and other monitors.  It could be the Mr. Potato Head of web design.
    Copy & paste the code below to embed this comment.
  30. Excellent article!  I’ve done web-based design now for 7 years on a pretty low budget.  I started with paper prototyping and loved the simplicity and rapidity you could generate ideas.  The problem? Management and client perceptions!  There is some inherent feeling out there that because it’s on paper, it must still be in a VERY early phase of design.  I would go to clients with my very sophisticated paper prototypes and you could read the look of fear on their faces… “Is that all the further you are, my god this project is never going to get done…” So I came up with another very cheap method.  I use MS Paint (yes, good ol’ FREE Paint! under Accessories in Windows) to do client presentation mockups.  I have developed a library of graphical widgets (droplists, scrollbars, info icons etc..) over the years and using “Copy/Paste” and “Save As” I can generate pages in literally minutes that look like real web pages. Sure, you could use Photoshop but who has the time to learn it (too complex) and money to burn??
    Advantages: Clients “feel” a page that is very close to reality.  They can interact with it and sense it’s closeness.  Managers sense that a project is “beyond the napkin phase.”
    Disadvantages: Clients, and especially salespeople, think the project is a lot closer to completion than it truly is.  Must… manage… expectations…. Disclaimer: I use a HipsterPDA too…but that’s another topic
    Copy & paste the code below to embed this comment.
  31. Thanks for posting the axure website. I found it a few days ago and didnt bookmark it and tried to find it again yesterday and couldnt. Its kind of wierd that you post it here and I find it again. :)
    Copy & paste the code below to embed this comment.
  32. “The irony of digital photos of paper is not lost on me”. It goes one level deeper actually: you’ve got digital photos of paper tabs, intended to mock up digital tabs, which are modeled after real-world paper tabs. Nice! Paper is great for brainstorming within a mixed team (business analysts, developers, usability people, etc.), but I would not recommend it for your first stated purpose, i.e. presentation. People outside the team just don’t get it. Like an earlier commenter, I have also been using Axure RP, and I think it’s brilliant. While not as fast as paper, is still amazingly fast and easy to learn. It’s like working in Visio or Powerpoint, except the output is a working html prototype, with widgets, links, graphics, etc. You can make it as generic or as realistic as you like.
    Copy & paste the code below to embed this comment.
  33. Very interesting post. With rapid iterations in UI and features, it is really important to have a quick and simple process for updating the user interface. I think paper prototypes are great. However, at BetterLabs, we have been using Microsoft Excel for the last two years and it actually works a lot better than paper, as it is quicker (once you get the hang of tweaking columns and widths and what not) and re-usable. Most of all, you can just email it to the rest of the team members and discuss it and make changes real time. Once UI prototyping is made simple and easy for anyone to use, it unleashes a lot of trapped up creativity .. trapped due to the complexity of the GUI softwares. And it becomes addictive :-) Let me know if you’d like to see a sample and I can send one to you.
    Copy & paste the code below to embed this comment.
  34. Very funny, but userful post. Great ideas on using paper as a medium for creatively and quickly laying out an interface. I couldn’t agree more that many times people of our generation needlessly seek technology to supplant more physical mediums, if only for the “wow” or “cool” factor, sometimes the best (and cheapest) tools are sitting right in front of you. Next time I design I website or create and interface I’ll be sure to try paper.
    Copy & paste the code below to embed this comment.
  35. Seems to me prototyping can be done on any surface that affords scribbling. . . power point deck, Keynote, whiteboard for agile users, kraft paper. So long as you can shuffle things around on the surface and get things done, doesn’t really seem to matter. Seems like this is just the other side of wireframing without notes and Steve Krug’s bargain basement usability testing…
    Copy & paste the code below to embed this comment.
  36. Great article with some nice examples of paper prototyping. In a workshop we did on paper prototyping and evaluation we found that using these techniques for software (as well as hardware and product design) promotes some interesting creative consultations. We also found there is no reason to stop at the design stage - jump right in to user testing. Even just having one or two outside users go through this outside of the design team can reveal large scale design problems and restart the brainstorming.
    Copy & paste the code below to embed this comment.
  37. I find that rough hand-drawn prototypes are great for quickly recording ideas. On my most recent project, I used Visio to “sketch” the layout I created on paper to produce a clean wireframe for review. Electronic copies work particularly well when one must collaborate remotely—just send an attachment for others to view and print. They are also easy to manipulate and version; so, you can very quickly modify your designs based on feedback and have several alternatives to compare.
    Copy & paste the code below to embed this comment.
  38. Another advantage of paper prototyping in the early stages of a design is that it avoids the psychological trap of “premature closure” which can limit creativity. The problem is that if a prototype looks too much like a “finished product” people are going to be thinking only in terms of small variations on it. It strongly pulls their expectations in a particular direction. That’s fine in the later stages of prototyping but it’s the last thing you want early on because if your first prototype turns out to be suboptimal, all the feedback can do is turn it into something slightly less suboptimal. On the other hand, the “low fidelity” nature of a paper prototype enables people to think about radically different alternatives because it doesn’t “seed” them with as many assumptions. They’re going to perceive (mostly unconsciously) it as much more malleable. Paper prototypes are like modelling clay; you can try out lots of different shapes, something you couldn’t do with a more solid medium. Things that are truly unfinished should _look_ unfinished if you want people to contemplate different ways they could be finished.
    Copy & paste the code below to embed this comment.
  39. It’s really a great Article! I’ve been using this technique for a while, some of my client’s are not what you would call web or tech savvy. It’s really better conceptual than I have ever seen.
    Copy & paste the code below to embed this comment.
  40. qwe
    http://www.alistapart.com/pix/submit.gif</img>
    Copy & paste the code below to embed this comment.
  41. Hi there. I just launched Balsamiq Mockups, a very simple tool that tries to bring that sketching-on-paper feeling to the digital world. I’d love to hear your thoughts on it: http://www.balsamiq.com/products/mockups Peldi
    Copy & paste the code below to embed this comment.
  42. We have just launched iplotz.com which allows for fast and easy creation of mockups and wireframes for prototyping websites and software applications. If you’d like more details of what we have planned for the future please shoot me an email
    Copy & paste the code below to embed this comment.
  43. Great post, very helpful! As shown in comments though, many people (bosses ;-) find paper not attractive in terms of presentation. That’s why many people are stepping into Magnetic Prototyping instead (www.guimags.com, www.magneticprototyping.com). It’s essentially the same as Paper Prototyping, accept you don’t have to use scissors and glue ;-)
    Copy & paste the code below to embed this comment.