Prototypes in design and testing

Just as architects build models to check relationships and flow in a building, we build prototypes to check the flow of a UI. They help in usability studies, too. Prototypes may be interactive (using HTML) or static (paper, or even wooden blocks).

A client said, "The interactive prototype was invaluable in extracting feedback from our customers."


A pencil sketch used in testing an one of the first order forms modeled on the familiar mail-order catalog. (Click to enlarge.)		An old example created in Visual Basic to show look and feel to the client team.


This was used in a paper usability study that turned up great information about how people wanted to use an online phonebook.

There are many ways to create and test prototypes:

Hand drawings Sketches of an application or device are the simplest form of prototype. They're easy to change, even while showing them to someone in a study. We designed one of the first e-commerce order forms that way.

Computer sketches Computer drawing tools provide more fidelity. Relationships among interface components are clearer when drawn to scale. Simple drawing tools such as Microsoft Paint work, and programs like Photoshop work even better.

Interactive prototypes With tools like HTML editors and even Excel, you can create simple interactive prototypes. The code doesn't have to be very good, and it doesn't have to be complete, but it's very important to let people understand the feel as well as the look.

Paper prototypes Use any tool to create a quick mockup of the UI. Then print enough pages to represent the whole interface or entire segments of it for a usability test or demo. We've made plastic and wood prototypes of physical devices as well.

Carolyn Snyder wrote a great book on paper prototyping, including examples from our portfolio.

Software prototype testing Create a working prototype or a beta version of your product and use it as the basis of a usability study. Higher fidelity prototypes yield better results, but running a study with a rough prototype is also important because you can find problems while there's still time to make changes easily.