A couple of years ago we started producing html image map prototypes using tools like Visio and Omnigraffle. They are a quick and easy way to create prototypes for user testing, and they don’t require any markup or coding.

We found that clickable prototypes are great for testing information architecture, navigation, labeling, content and any other aspect of a static (x)html web page. But they are no good for testing forms.

Why forms are a different beast

Forms not only need to be found and read: they need to be filled and submitted. And you cannot fill or submit a form created as an image embedded in a (x)html file.

To get the best of both worlds, I’ve started to combine image map prototypes with (x)html forms. I like these prototypes because they are extremely efficient: you can throw them together in just a few hours. And they’ve been very useful for running multiple rounds of short, very focused tests.

How our prototypes work

We prepare the prototype the day before, and we run the tests not in the lab, but in our clients’ point of contact with customers. We recruit users as they come out of the establishment.

This video shows one of this “mestizo” prototypes in action:

I’ve recorded another video showing how to create them (with Omnigraffle). You can download the files and follow the instructions in the screencast to create your own.

I hope this is useful; it certainly has been for us.