Using interactive prototypes to test design ideas

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

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

Prototypes can be created and used in many ways

There are many ways to create prototypes. They can all be used in usability studies.

Hand drawings Sketches of dialog boxes, windows and menus are the simplest form of prototype. All you need is a pad of paper, a pencil and rudimentary drawing skills. We designed one of the first e-commerce order forms that way.

Computer sketches Simple drawing tools give sketches more fidelity. Relationships among controls in the interface can be seen better because they are drawn to scale. Simple drawing tools such as Paint work, and complex ones like Photoshop work even better.

Interactive prototypes With tools like Visual Basic, HTML 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 lets people understand the feel as well as the look.

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

A sample paper prototype

Early prototypes done in Excel (left) and Visual Basic (right) -- the interactions are in place, but real layout and graphics come later

Carolyn Snyder has written a great book on paper prototyping, including the Pingtel and Dictaphone examples mentioned above.

Software prototype testing Create a working prototype with any tool and use it as the basis of a usability study. igher fidelity prototypes yield better results, but running a study with a rough prototype is also important because you can find information while there's still time to make changes easily.