Back to Newsletter Home PageSTC Usability SIG Newsletter: Usability Interface

Usability SIG Logo
Prototyping Using Visio

by Robin Kavanagh and John Soety
Reprinted from Usability Interface, Vol 7, No. 1, July 2000

Traditional paper prototyping is a useful method for testing designs, but it is rather limited. Rapid navigation between screens and pop-ups, for example, is not practical with paper prototyping. In addition, some elements, such as hotspots, are better viewed through an on-line prototype.

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 Hyperlinking

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.

0007-proto-fig1.gif (27338 bytes)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!

Requirements

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

  1. Gather all of the Visio drawings you want to use for your test.
  2. Compile the drawings so they are separate pages within one Visio document. You cannot link to individual Visio drawings that are in separate documents.
  3. Print your document.

Creating a screen flow

  1. Lay your printouts on a table and plot a course for your test scenario.
  2. On each printout, circle every place you want a hyperlink.
  3. Next to each hyperlink, identify the target for that link.

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.

0007-proto-fig2.gif (12354 bytes)
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 Visio’s hyperlink feature.

  1. Open the Visio drawing, and select a shape that you identified as needing a hyperlink. When you select a shape, a green border appears around the shape.
  2. (Optional) Resize the green border around your shape, as necessary. When you generate your prototype, the hyperlink's hot spot is the same size as the green border.
  3. Select Ctrl+K (or choose Hyperlinks from the Insert menu). The Hyperlink dialog box displays.
  4. Enter the name of the Visio drawing name you want to link to in the Sub-address box.
  5. (Optional) Enter the tool tip text in the Description box.
  6. Ensure that the Use relative path for hyperlink box is checked. This box ensures that links are not broken when moving files to a different location, such as a test server or laptop
  7. Click OK to create the hyperlink.

Important Notes:

Generating the prototype

When you have completed adding hyperlinks to your drawings, you are ready to generate your prototype.

  1. Select Save As from the File menu. The Save As dialog box displays.
  2. Select HTML Files in the Save as type drop-down menu.
  3. Click Save.
  4. If you are prompted with "Do you want to replace the existing file?" click Yes to overwrite the files.
  5. When prompted by the Save as HTML dialog box, select VML in the Graphics format box.
  6. 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.

  7. Click OK to generate the prototype.

Launching your prototype

When Visio has completed generating the pages, a dialog box displays.

  1. Click Yes to view the prototype.
  2. Press F11 to view the demo in full screen view.

If necessary, use the links at the bottom of the screen to switch to different drawings.

Limitations

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:

  1. Avoid imported tables and text. Instead, create your drawings entirely in Visio.
  2. View the items using Visio's Full Screen view; take a screen shot of the image, and save that image. When Visio files are exported as HTML, find the image map and alter it with an image editor. Cut and paste the altered image on top of the original image.

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.

 

Go to STC Society Web Site