|Prototyping Using Visio|
by Robin Kavanagh and John Soety
Reprinted from Usability Interface, Vol 7, No. 1, July 2000
As we were developing user interfaces for our company's browser-based healthcare information applications, we decided that paper prototyping was both awkward and inadequate for the frequent navigation necessary in the UI. Our users needed to access multiple screens from many areas, and paper mockups would not easily support such rapid movement or test it efficiently. Instead, we needed an on-line prototype without the overhead involved in coding one. Eventually, we found a way to convert our Visio drawings into an on-line prototype and soon had a quick, easy, and effective way for creating more dynamic prototypes from original Visio drawings.
Visio allows you to create an on-line prototype without coding behavior into the screens. With some planning, your Visio drawings can easily be converted into an HTML, read-only prototype (viewable through any web browser) that supports hyperlinks and tool tips. When the HTML files are ready, you simply launch them through a web browser.
Visio does not transform your buttons and other controls into functional HTML. Instead, it creates an HTML image map of your entire screen and inserts hyperlinks where you specify them. Therefore, what the user sees is really just a mock-up of the application simulated with screen flips. When a tester clicks a help button and a dialog box appears (see figure 1), what really happens is that a screen flip occurs and a new image replaces the screen. The system appears to launch a dialog box, but in reality it is simply linked to an image of a dialog overlaying the screen.
Figure 1. The appearance of a help dialog box (which displays when the help button is clicked) was created by pasting the dialog over the screen and performing a screen flip.
The limitations become obvious very quickly: the user cannot drag the dialog.
Similarly, this low-overhead prototype does not support data entry or dynamic controls,
such as drop-down boxes or hierarchical trees. Nevertheless, our testers did not seem to
mind that they were using a read-only prototype; in fact, most of them tended to interact
with the screen as if it were fully operational. We simulated dynamic controls via
hand-written sticky notes placed on the screen during a usability test. (Users were also
comfortable with this method, as evidenced by their repeated attempts to mouse-click
choices on sticky note drop-downs!) Despite the limitations, we had the best of both
worlds: a cheap, quick, flexible, yet polished-looking prototype without the commitment of
a programming resource!
Any standard web browser (we personally recommend MS Internet Explorer, since it supports the vector-based graphics format VML) and Visio are the only applications needed to create and view your prototype. No HTML or programming experience is necessary. The following Visio releases support the hyperlink feature:
Other versions of Visio: If you own an earlier version of Visio, you can download the Visio Internet Assistant add-on, which enables the hyperlink feature. From the Visio topic of Microsoft's web site (http://www.microsoft.com/office/visio/), select Software Updates and Downloads.
Building the Prototype
Although the following instructions are tailored for Visio 2000, they can be used with earlier versions. Previous versions of Visio may contain different titles for several field names described in the instructions.
Collecting and Printing Files
Creating a screen flow
In the following example, we tested the telephone book entry screens of an electronic organizer. We collected all four screens necessary to test this scenario, and marked the appropriate path for this scenario on the printout. For example, if the user clicks the Telephone Book hyperlink, the system launches the Telephone Book form.
Figure 2. Hyperlinks are identified on the printout.
Adding hyperlinks to your drawings
Using your printouts as a guide, add behavior to shapes in your Visio file. This is accomplished via Visios hyperlink feature.
Generating the prototype
When you have completed adding hyperlinks to your drawings, you are ready to generate your prototype.
Note: Other graphic file formats, such as JPG and GIF, can be used. The VML format produces less distortion and more accurate color representations of drawings than other graphic formats because the images are produced in a vector graphic format (a format similar to your original Visio drawings).
The only drawback to using the VML format is that the generated prototype is currently viewable only by using Internet Explorer 5.0. Netscape does not support the VML format at this time.
Launching your prototype
When Visio has completed generating the pages, a dialog box displays.
If necessary, use the links at the bottom of the screen to switch to different drawings.
This Visio-created prototype is read-only and does not support data entry. We work around this problem by asking the tester what they would like to enter.
Visio may misinterpret items that were not originally designed within Visio. For example, a spreadsheet created in Excel and imported into Visio might not be viewable in the exported HTML file (or may appear distorted or discolored). The limitations can be solved in a couple of ways:
Note: Image maps are not affected if you change the appearance of an image. If you do not change the size and shape of the entire image, you will not alter the hyperlinks.
How it Works
The prototype now contains hyperlinked HTML files that look and act much like simple Web sites. However, HTML Export from Visio does not convert the elements of Visio pages into HTML.
Visio creates a client-side image map of each screen that mimics the functionality of an HTML coded screen. For testing purposes this is sufficient.
During the HTML export process, each Visio drawing is transformed to one image; then, coordinates on the image identify the hyperlinks that you added. The export created has no knowledge of what buttons and objects are on the form, it only knows where the links are.
The Web browser does not interpret the image, buttons on the image, or any other details. Instead, it only interprets the location of the hyperlinks you added. Image maps are insensitive to alterations of the appearance of an image; they only consider the shape and size of the image. By mapping the XY coordinates of the image from the top left corner of the image the image maps determine where the browser places the hyperlinks. As a result, any picture could be substituted in place of an existing screen image and the browser still displays the same hyperlinks. As long as no change is made to the size and shape of the entire image, the links should work appropriately.
What Does That Mean To You?
This means that you are not creating a true HTML prototype. Instead you are creating something that mimics a prototype but does not contain all of the HTML controls you normally encounter on a page (e.g., drop-down boxes, data entry, etc.). So, there are limitations to what you can easily do in this Visio export. However, you can create a reasonable prototype much quicker than if you coded the entire screens in HTML.·
Robin Kavanagh (User Interface Analyst) and John Soety (User Assistance Analyst) work for SMS (Shared Medical Systems) in Malvern, PA. Robin and John develop interfaces and user assistance for browser-based healthcare information.