Previous Table of Contents Next


5.2.3. Visual Prototyping

Sketches cannot be used to adequately evaluate the dynamics of an interface, nor can they be used to determine the exact sizes and placement of windows, views, controls, and information. For this, the designer must abandon paper and pencil and turn to the computer. While it is standard practice for designers to use drawing and illustration programs to create screen images of the visual elements, it is less common for a designer to create an interactive visual prototype though it takes only a little more time and effort. A visual prototype mimics the intended appearance, interaction, and feedback of the proposed application. The author finds it to be a far more effective design aid than a plain graphics program, often revealing missing details and rough areas in the interaction. It may be the only way to accurately evaluate alternatives. Visual prototyping is also the most effective way to validate the actual feel of the interaction, obtain pre-development, high-quality comments from users, and communicate the design to developers, marketing, and potential end-users.

Too much time and effort are needed to prototype an entire user interface so it is best to do only the primary user scenarios and those interactions that the designer has little personal experience with such as those developed specifically for this application. If a platform-specific GUI builder will be used to develop the application, it might provide a good prototyping environment though it will be difficult to prototype invented interactions and views and to fake the data needed to run the prototype. A GUI builder also enables a designer to contribute directly to the implementation, insuring that the finished application matches the design. When the design contains significant invention or when a GUI builder will not be used in the implementation, a number of commercial tools can be used for visual prototyping such as Macromedia’s Director or Allegiant’s SuperCard. Ideally the prototyping application should run on the same platform as the project application, but this is not necessary if the prototyping platform has adequate performance and the same user input and output devices, e.g., mouse, tablet, display resolution, etc., as the target platform.

Prototypes range from slide shows, which are quick to build but of limited use, to tightly scripted, which can mimic task interaction quite realistically, to fully interactive, which can support many arbitrary interaction sequences. The tightly scripted prototypes generally provide the best information for the least time investment while fully interactive prototypes are used to gain deeper experience with more radical designs.

Since the purpose of the prototype is to gain information about sizes, layouts, and interactions, the initial graphics used in the prototypes should be first approximations created from screen dumps of the target platform to save time, and revised later as the design solidifies. The next step is to create a slide show sequence that shows the screen appearance before and after the completion of each subtask. User actions, such as clicks and drags, are then added to initiate the transitions from one slide to the next. Finally, interaction feedback is inserted at the proper points to provide a fully realistic experience. A tightly scripted prototype of a high-level task or two can usually be built in a couple of days.

When the designer is satisfied with the prototype, it can be used to run low-cost user studies, with revisions as needed between sessions. The prototypes are also the best way to convey the design to the developers as they fully demonstrate the designer’s intentions with little chance of misinterpretation. If the prototype will not run on the developer’s platform or if the prototype is to be used as a specification, a screen capture facility can be used to create a narrated, platform-independent QuickTime movie that the developers can replay on their own computer as many times as needed.


Previous Table of Contents Next