Keywords: Visio, document stencil, prototype

Visio is a great tool for creating web site wireframes which are static depictions of approximate page layout, content and functionality. It is also relatively easy to use Visio to create web site prototypes that facilitate usability testing and more clearly demonstrate navigation to stakeholders.

In Visio the document stencil contains shapes that you can place on one or all the pages in your Visio file. If you make a change to a shape in the document stencil the change will cascade to all pages containing the shape. This same concept holds true for background pages. However, if you use hyperlinks in the background page, they will not work when exported to HTML. Hyperlinks in document stencils do work when exported to HMTL. The basic concept then is to create the wireframes as you normally would but take the navigational shapes and place them in the document stencil. With the navigation shapes in the document stencil you can create and maintain hyperlinks to pages within the Visio file.

What this post will not demonstrate is how to create highly dynamic HTML prototypes with effects such as drag and drop. There is really no way to do that with the current version of Visio which is too bad because that type of functionality is becoming increasingly common in today’s web sites. That doesn’t mean, of course, that you shouldn’t design with those behaviors in mind. They just have to be accompanied with more explanation in the wireframes and usability testers and stakeholders may have to use their imagination. Another way to look at is that you can create the Visio wireframes with the objective of testing the navigation labels and concept (assuming the navigation isn’t too dynamic). Some other tools such as HTML and JavaScript could be used to test the more interactive aspects of the site.

With that background let’s look at the tasks involved in creating a Visio based prototype.

Task 1: Create the navigational structure and turn it into a document stencil shape

This task assumes you have an idea of how the site navigation is going to work, where it will be on the page, whether or not you will use tabs, whether or not you will use drop down navigation, whether it will be horizontal or vertical or hexagonal, etc. This task also assumes you have one or more foreground pages and possibly a background page. You can create the navigational structure on either a foreground or a background page but if you choose the latter you won’t want to keep it there.

1. Create the navigational structure (in my example I use 4 tabs)
    
2. Select the elements in your navigational structure and then group them together (once they are all selected you can click shift+ctrl+g)
3. Open the document stencil by clicking on File > Shapes > Show Document Stencil
4. Drag the shape from the page to the document stencil and name it whatever you want

You now have a shape in the document stencil. To get it working as your navigational shape you need to have a few other pages developed. In my example I have a page called Tab 1 which is the home page, Tab 2, Tab 3, etc. In the next task you will drag the shape to your wireframe pages so none of your pages should have the navigational component to begin with (including the background page) because we are going to use the document stencil shape created in Task 1.

Task 2: Link the pages to the document stencil shape then place them on the pages

1. Now that you have the document stencil shape, double click it to edit it
2. Link the shapes or text in your navigation to their corresponding wireframe pages by clicking on the shape or text you want to link then click on ctrl+k
3. In the Hyperlinks dialogue box click on the second Browse button which is next to the Sub-address field
4. From the Page drop down select the page to link to then click OK
   
5. Click OK again then repeat steps 2-4 until all your links are configured
6. Save the document stencil shape

You should now be back at the page you left when you went to edit the document stencil shape.

Task 3: Drag the shape to your pages then export to HTML

1. To get the navigation on your pages simply drag it to each page successively, ideally in the same place on each page
2. To test the hyperlinks click the grouped navigation shape then click the distinct shape or text you want to test then right click it and select the link (in my example tab x)
3. To export your file to HTML click File > Save as Web Page
4. Once you save the files to a location on your hard drive, navigate there and double click the HTML file (the other files in the folder are mostly image maps of the wireframes you created)
5. The tabs or whatever you hyperlinked should work as they were configured in Visio