There is a 2nd edition and a 3rd editon of this article available for users of Visio 2003+.

Visio - the interaction designer's
nail gun
How to use Visio for rapid prototyping

The reason why Visio is the favourite prototyping tool of many interaction designers is because of its ready-made interface objects, you can drag-and-drop onto pages and its ability to link pages together and export them as web pages. But what distinguishes Visio from other prototyping tools is its use of layered backgrounds.

Imagine you've made a prototype containing multiple pages and realize that you have to add a new item to a global menu. Doing this normally means altering each and every page manually. In Visio, you can place the elements shared by multiple pages on one shared background, allowing you to make changes that affect all the pages by altering just the background. And Visio takes this even further by supporting layering of backgrounds on backgrounds. This enables you to have a background with a global menu and special backgrounds with sub menus for the sub sections of a web site. More about that later on.

The prototyping template and stencil

Visio ships with a stencil with standard Windows interface elements such as menus, dialogs, buttons, scrollbars, tabs, and cursors. This stencil is perfectly usable for web prototyping, but a lot of elements, such as a browser window, links and text objects, are missing.

For these reasons, I decided to make my own template and stencil for Visio, which I'm using in my daily work. I'v made a new and improved version, which is free for download and free for you to use in you own work. In this article I'll show you how to download, install and make the best use of the tools.

Download and Install the prototyping tools

The prototyping stencil and template contains a browser window and a repository of standard object used frequently in web prototyping, such as links, text, image, and form objects.

The template and stencil are compressed in a zip file, which has to be extracted to the Visio Solution folder in order to make it available to Visio. Follow the steps below:

Now the prototyping template and stencil should be available to you in Visio.

To demonstrate the benefits of using Visio with the web prototyping template and stencil, I'll show you how the GUUUI web site would be prototyped. I won't be able to explain every detail of Visio by this example, but it will be enough to get you started. In the example I'll be using Visio 2000 since I haven't got the English version of Visio 2002. The difference between the two is mostly cosmetic.

Create a new project

In order to create a new prototyping project you have to choose the web prototyping template in Visio.

Now you'll see a working area with a browser and - to the left of it - a stencil with the web interface widgets.

Defining a layout grid

Before you start to layout pages, it's often a good idea to establish a layout grid to use throughout the site. When prototyping, a perfectly aligned layout isn't mission-critical, but it's nice to have a few rough guiding lines.

The standard browser background is a good place to establish your layout grid. We do this using guides, which objects will snap to, when they are placed onto a page. Since we'll need a two column layout on the GUUUI front page, we'll place four guides onto the browser background page to define the left and right column and the white space between them.

Adding a global background

Backgrounds in Visio are very useful in web prototyping, since we mostly have some elements, such as a global menu, which has to be applied to most of a site's pages. Using backgrounds, it's easy to make site-wide changes later on.

We start by adding a background page containing all the global elements of the GUUUI site.

Notice how we'll make use of Visio's support for layered backgrounds. The global background that we've just made has the browser background from the template as its background. Also notice that we didn't use Browser BG for the global elements, as we might need a page with just the browser later on.

Once we've created the global background, we'll populate it with placeholders for the logo and illustration, and with links to the front page, the search page and the about section. We do this by drag-and-dropping link objects and image placeholders from the stencil onto the page.

Adding pages

Now we have the foundation of the site in place and can start adding the actual pages. We'll start with the front page, to which we'll apply the global background we've just made.

On the front page we'll put the area for the quarterly issue in the left column and the area for postings in the right column.

Next, we'll make a page for the GUUUI quarterly articles.

On the page we'll place a header, an image object for the illustration, and some dummy text. In the bottom of the page we'll put the "Further reading" area.

Notice how I use the Page Split object from the stencil to illustrate that the text of the article will continue until the "Further reading" area. Use the page split object sparingly, as it isn't obvious to everyone.

Linking pages together

Another useful thing in Visio is the ability to link pages together. Using links, you can build a highly interactive prototype. We'll make a link from the front page to the article page.

Now, when you right-click the link, you'll be able to jump to the article page by selecting it from the context menu.

When the prototype is saved as web pages, you will be able to single-click the links as you normally do on web pages.

Links on backgrounds
Now it would be nice if we could link from the article page to the front page. To do this, we have to go back to the global background and make the Home link active.

Notice, that when you go back to the article page, it isn't possible to right-click the home link to jump to the home page. This is because linked objects only work on the page holding the object. This makes it a bit cumbersome to navigate in Visio, but the links will work properly, when you export the prototype as web pages.

Using layered backgrounds for sections

To demonstrate the benefit of using layered backgrounds for prototyping sections of a web site, we'll add the GUUUI about section to the prototype.

All the pages in the about section contain a common sub menu linking to the individual pages of the section. We'll start by making a new background in Visio with the sub menu, which all the section pages will share.

On the background page we'll place the links, which make up the about section menu.

Now we can add the pages for the about section and apply the About BG to these pages. Once we've made the pages, we can go back to the background and make the links refer to the individual pages.

Scrolling

One drawback to many prototyping tools is the inability to make scrollable pages. But with the web prototyping tools for Visio it's possible to simulate scrolling. To demonstrate this, we'll go back to the front page and add scrolling to this page.

The trick is to place content below the fold on a new page and link to this page via a scrollbar object. In the web page export, this will appear as if scrolling is possible.

First we'll add a new page and populate it with the elements that are "below the fold."

To scroll back to the top, you have to add a scrollbar to the Home 2 page and link it back to Home.

Exporting the prototype as web pages

In real life we would continue adding all the critical parts of the site to the prototype. But as we've looked at all the major features of Visio and the web prototyping tools by now, we'll move on exporting the prototype as web pages.

Unless you tell Visio not to, it will export the project to both VML, for viewing in Internet Explorer, and HTML for viewing in other browsers. While exporting to VML is pretty fast, exporting to HTML can take quite a long time. If you can do with just the VML format, you can choose to exclude the HTML export in the Filter Settings in the Save dialog.

The limitations of Visio prototypes

Obviously, the web page export has its limitations compared to real web pages. It isn't possible to enter data into text entry fields and interact with dynamic controls, such as drop-down boxes and list boxes.

For presentation purposes these shortcomings are hardly ever a problem. But they might cause some minor problems if you want to run a usability test on the prototype. But these problems can be solved with a bit of creativity using paper or sticky notes or by adding pages to the prototype, that simulate the functionality, as I showed with the example of scrolling pages.

Text: Henrik Olsen