Paper prototyping
During a workshop last year I completely fell in love with paper prototyping. Making a rough paper interface is such a fast and easy way to build software or a website, test it with users, get feedback from stakeholders and improve it extremely fast early on. All you need is pen and paper so you can easily build the interfaces sitting in the sun enjoying a Duvelke, without getting sidetracked with a zillion PhotoShop possibilities and only focusing on the basics: the structure, content and interaction.
Here's a nice (Dutch) video giving an overview of the process.
I've been around in a few web design and interactive agencies and I was surprised to see that this technique isn't used more often. It can help get an interactive project on track from the beginning and function as a clear guideline for the design and development teams. Why isn't it used more often? Maybe clients like to see pretty screens of the interface instead of rough amateurish looking sketches?
2 Comments
Modelling tools that build wireframes, like iRise and Axure, have drawing and behaviour interfaces that capture enough of the look and feel of the website or application, without getting into any actual coding, that the client signs off and the model gets sent to dev, with some idea of the final product.
More robust prototyping products like Simunication let you build prototypes that function like real web apps by using drawing and behaviour interfaces but including the ability to add real code. The simulations are fully functional so clients know exactly what they're getting, and they can be incubated into final apps.
Finally we get to actual coding with software like PHP, HTML, Ruby On Rails etc. that lets developers spin out prototypes for feedback while building the actual website or app.
Given this spectrum of approaches paper prototyping seems too simple to be useful in a Web 2.0 world.
For small web interfaces or parts of interfaces however it has proven very valuable to me. Working with pen, paper, scissors and glue is an ideal way to create an interface together very fast. People don't feel restricted to suggest changes because you can easily erase it, throw parts away and begin again. Just last week I was sitting around the table with a product designer, someone who isn't very web savvy, building an interface for a google maps mash-up. After only five minutes of going through the interface he was suggesting and creating paper screens and dialogs himself. After about half an hour of cutting, drawing and moving pieces of paper together we had drastically improved the flow and had a tangible interface to refer to. We knew how it would behave and what it generally would look like. I kept the prototype and sent him pictures of every screen and dialog. Now he is of making the design and I started coding. In such a case paper prototyping works marvelous and there's no need to go through the extra work of creating higher fidelity digital models. Try it out for something small, it's very fun. You'll feel like you're in the 2nd grade again :)
Your suggestions for other tools are very interesting nonetheless. I've been looking for prototype tools to use on the mac besides Omnigraffle and didn't know about Simunication.
I'm checking it out. Thanks for your response.
Leave a Comment