There is a 3rd editon of this article available for users of Visio 2003+. If you have a version of Visio prior to 2003, please refer to the first edition of this article,

Visio - the interaction designer's nail gun (2nd edition)

This is a second edition of the article on using Visio for rapid prototyping for the web. The new edition includes a new and improved version of the GUUUI Prototyping Tool for Visio 2003.

This second edition of the article includes a brush-up of the text and illustrations and a new and improved prototyping tool for Visio 2003. Unfortunately, the new tool isn't compatible with older versions of Visio. If you have a version of Visio prior to 2003, please refer to the first edition of this article, where you can download the old version of the prototyping tool.

In this article I'll show you how to download, install and make the best use of the prototyping tool.

Why Visio is good for prototyping

The reason why Microsoft Visio is a popular prototyping tool is because of its interface widgets that you can drag and drop onto pages and its ability to link pages and view them as web pages. But what distinguishes Visio from other prototyping tools is its use of layered backgrounds.

Imagine that you've made a prototype with a lot of pages and realize that you need to add a new item to the global menu. Doing this normally means adding the menu item to each and every page in the prototype. In Visio, you can place the elements shared by multiple pages on a shared background. This allows 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 backgrounds with sub menus for the sub sections of a web site. More about that later on.

The prototyping stencil and template

Standard Windows interface widgets such as menus, dialogs, buttons, scrollbars, tabs, and cursors are available for Visio. This 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 prototyping tool for Visio, which I'm using in my daily work.

Download and install the prototyping tool

The prototyping tool for Visio contains a template and a repository of standard widgets for prototyping web sites, such as links, text, image placeholders, and form elements.

To download and install the prototyping tool in Visio, follow the steps below.

You can now start a new prototyping project by double-clicking the prototyping template GUUUI Web Prototyping Template.vst.

If you want be able to select the template through the Files > New menu in Visio, follow the steps below.

To demonstrate the benefits of using Visio with the web prototyping tool, I will show you how GUUUI would be prototyped. I won't be able to explain every little detail of Visio and the prototyping tools, but it will be enough to get you started.

Create a new project

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

A new prototyping project in Visio.

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 the pages. By 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 GUUUI.

Now a new background called Global BG is added to the page tabs at the bottom of the screen.

Notice how we used Visio's support for layered backgrounds here by making the browser background the background of our global background. Also, notice that we didn't use the browser background for the global elements, as we might need pages with just the browser later on.

Once we've created the global background, we'll populate it with placeholders for the logo and top illustration, with links to the front page, search, the about section and the sign in page. We do this by placing image placeholders and links elements onto the page.

The global background with all the global elements.

Adding pages

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

To create a new page for the front page:

If you need to alter the settings of the page, choose File > Page Setup... > Page Properties.

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.

The front page with the quarterly issue in the left column and postings in the right.

Next, we add a page for the quarterly articles on GUUUI.

On the page we'll place a heading, an image placeholder for the illustration, and some dummy body text. In the bottom of the page we'll put the "Related postings" area.

The article page.

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

Linking pages

Now we want to create a link from the front page to the article.

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

Selecting a link in Visio.

When the prototype is saved as web pages, we can single-click the links as we normally do on web pages.

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 are on the article page, it isn't possible to right-click the Home link to jump to the front page. This is because links in Visio only work on the pages holding the link. This makes it a bit cumbersome to navigate in Visio, but the links will work properly, when you save the prototype as web pages.

Using layered backgrounds for sections

To demonstrate the benefits 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 holding 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.

The About section background with its menu.

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

Scrolling

One disadvantage of many prototyping tools (besides HTML editors) is the inability to make scrollable pages. This is also the case for Visio. But with a bit of creativity it's possible 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 widget. 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 content that is "below the fold".

If you want just the arrows of the scrollbars to be clickable, you can use the hidden link widget.

Exporting the prototype as web pages

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

When the prototype opens in a browser window, hit F11 to view it in full screen.

Unless you tell Visio not to, it will save the project as both VML, a scaleable vector format supported by Internet Explorer, and HTML, for viewing in other browsers. While saving as VML is pretty fast, saving as HTML can take some time. If you can do with the VML format, you should exclude the HTML export.

In conclusion

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 lists and checkboxes.

For presentation purposes these shortcomings are hardly ever a problem. It might cause some minor problems if you want to use the prototype in a usability test, but it can be solved with a bit of creativity. Simulate interactions with paper or sticky notes or by adding extra pages to the prototype, as in the example with scrolling pages.

You are welcome to donate a small amount if you find that the GUUUI Prototyping Tool is worth it. Donations are handled through PayPal.

Text: Henrik Olsen

You are welcome to donate a small amount if you find that the GUUUI Prototyping Tool is worth it. Donations are handled through PayPal.