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.
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.
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.
Fred Riley
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.
Mike Greenwahlt
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.
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.
Rich Duncan
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.
Charles Westergard
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
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.
Michelangelo Iaffaldano
“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.
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.
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.
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…
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.
Marcus Fedoruk
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.
Eric Bohlman
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.
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.
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 ;)
43 Reader Comments
Back to the ArticlePaul Hamilton
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.
Ken Arnold
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.
Michael Heraghty
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).
david lewendon
we recently found this wireframing software that has help us lots you can find it at www.axure.com
Hope this is useful :-)
Fred Riley
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 ;-)
Mike Greenwahlt
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.
Huw Gwilliam
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 :)
Wayne Koo
Just do easy thing!
This is a good guideline when we do design.
Rich Duncan
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.
Charles Westergard
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
Aaron Nimocks
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. :)
Michelangelo Iaffaldano
“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.
Vaibhav Domkundwar Domkundwar
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.
Zach Katkin
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.
Gene Moy
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…
Matthew Hockenberry
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.
Marcus Fedoruk
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.
Eric Bohlman
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.
design development web
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.
Vlad Kirilovich
qwe
http://www.alistapart.com/pix/submit.gif</img>
Peldi Guilizzoni
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
mark vernon
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
Efraim Meulenberg
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 ;)