Website Usability and Paper Prototyping

Cardboard, Glue, and Masking Tape

Diamond Trust of London is a turn-based strategy video game by Jason Rohrer that was prototyped on paper before being coded.

When I was a kid, some of my favorite toys were the ones I made — often with little more than cardboard, glue, and masking tape. Little did I know I was foreshadowing my involvement in usabililty testing and paper prototyping.

Avoid “Code, Test, Fix”, (Time, Money, Frustration)

So often, a website goes through the design process without someone outside of the project using or testing the site. The main stakeholders in the site — the owners or future owners — think they know what the site needs and they make the calls regarding what they think will work best. There is a more objective way to go about designing a website. It is possible (and cheap) to test the site based on personas — target users of the site — and the key tasks those users will need to perform. All this can be done before any of the look-and-feel design or coding of the site gets under way. It’s done with paper prototyping.

If you are not familiar with paper prototypeing, check out the links in this article. They will help you understand what paper prototyping is and how it fits into usability testing — a key ingredient to making a successful site.

Interaction Design

Cairn at Garvera Surselva Graubuenden Switzerland

Cairns as early interaction design: “Aboriginal peoples made cairns to mark trails that is, to communicate through time via a product.” —Dan Saffer

It all starts with interaction design: a design discipline with old intentions but a new urgency. Interaction design practices are evolving as quickly as devices with chips in them are growing in number and variety.

“Interaction design is the art of facilitating interactions between humans through products and services. It is also, to a lesser extent, about the interactions between humans and those products that have some sort of “awareness” — that is, products with a microprocessor that are able to sense and respond to humans.” —Dan Saffer

Steve Krug wrote a classic on web design called Don’t Make Me Think. He is a big proponent of usability testing, and his follow up book Rocket Surgery Made Easy focuses on usability testing. Although not paper prototyping, his YouTube video of a usability test is a great example of how simple the task can be when applied to an existing site.

“After all, usability really just means that making sure that something works well: that a person of average (or even below average) ability and experience can use the thing – whether it’s a Web site, a fighter jet, or a revolving door – for its intended purpose without getting hopelessly frustrated.”  —Steve Krug

But there’s nothing like seeing paper prototyping in action. This eight-minute YouTube video is unexpectedly fun. You don’t have to find subjects who fit your personas exactly, but in this case, it brings out the best of usability testing with a simple paper prototype: Example Usability Test with a Paper Prototype.

Now grab a pad of paper and go test your interface ideas!

deDanaan Design

Website design & development. Publication design & production. WordPress, Joomla!, Drupal, print and ePUB.