Monday, November 1, 2010

How to Make Useful Paper Prototypes

I have a confession to make. While I am a BIG supporter of Design Thinking and user centered product development, I was not a big fan of the practice of paper prototyping. Paper prototyping, the act of creating complex graphical user interfaces by handwritten means, was not something I thought to be real world and particularly useful. Take a look at the example below:

commented-bad-dog-01.jpg


I made this. It's supposed to represent a web page that contains a scrollable grid of data points and allows you to filter data by checking off range parameters in the left side check boxes.


It took me about 5 minutes to make, which is the purpose of paper prototyping. You make a mock up of the GUI fast, present it to the user, get some feed back and go back to the drawing board.




It's not very good. Putting it in front of a user would give you results with marginal significance. Thus, my original aversion to paper prototypes. I figured that for the amount of time that it takes me to create a useful graphical user interface (GUI) emulation by hand, I could just as well write out a reasonable GUI in HTML.


Right?


Wrong! I was being a Mr. Know-It-All.


Take a look at this:

commented-good-dog-01.jpg


The photo above is a paper prototype that our Visual Designers made. It's a paper prototype that is useful and relevant!


OK, it's not made by a hand putting ink to paper. But, so what? It suits the purpose of paper prototyping. The work represents a reasonable GUI that can be shown to a user for feedback and subsequent revision. The fact that the Visual Designers could make it quickly on paper, without having to utilize the services of an HTML-geek makes it very cost effective. I particularly like the way that the prototype emulates horizontal scrolling. Having the paper data grid move back and forth behind another paper overlay that contains the anchored GUI elements is very inventive.


Just goes to show you what a little thought and creativity can do. The designers analyzed the need at hand, assessed the skill sets and resources available and did what had to be done, efficiently and competently. Who could ask for more? When done correctly, paper prototypes rock!


BTW: here is one of the Visual Designers. Her name is Carolyn. Her work made me rethink my attitude toward paper prototypes. She rocks!



carolyn-01.png

3 comments: