Visio - the interaction designer's nail gun (3rd edition)

This is a third edition of my article on using Visio for rapid prototyping for the web. The new edition includes a minor update of the GUUUI Web Prototyping Tool that eliminates a major shortcoming: the inability to create scrolling pages. The update also includes brand new sketchy interface widgets.

The GUUUI Web Prototyping Tool is, as the name indicates, a tool for creating interactive prototypes of sites and web applications using Visio.

Visio is a popular tool among interaction designers and, according to my download statistics, the GUUUI prototyping tool also seems to be quite popular. With the two companions, we can rapidly create interactive prototypes by dragging and dropping interface widgets onto pages and linking the pages together. We can test our designs by saving projects as web pages and view them in a browser.

The GUUUI prototyping tool has served me well through the years. But there is one thing has always bothered me: that I haven't been able to figure out how to create pages that will scroll when viewed in a browser. Users love to scroll and it's a pain to create interactive designs with a tool that can't handle scrolling pages.

But thanks to my friend Pål Eirik Paulsen, the old dog has learned new tricks. In this article, we'll look at a new and improved version of the GUUUI Web Prototyping Tool and how to use it for designing interactive prototypes - now with scrolling pages.

In the article you'll find:

• Instructions on how to download and install the prototyping tool for Visio
• A "What's new?" section for those of you who know previous versions of the tool
• And a step-by-step tutorial for those new to the tool, where we'll build a prototype of the GUUUI website (see the final prototype)

Download and install the prototyping tool

Below, you can download the GUUUI Web Prototyping Tool. It contains a template and a so-called stencil with web interface widgets (forms, links, Greek text and so on) that can be dragged and dropped onto our prototype pages.

The Web Prototyping Tool contains a template and stencils with standard web widgets that can be dragged and dropped onto pages.

Actually, the tool contains two stencils. As a bonus, brand new interface shapes designed by Niklas Wolkert is included in the download. Niklas has made his own version of the web stencil because he needed prototypes with a sketchier look for his projects. As you can see below, the outcome is quite amazing.

The prototyping tool download includes new sketchy interface shapes designed by Niklas Wolkert. Here, Niklas' shapes are compared with my minimalistic ones.

To download and install the template and stencils, follow the steps below.

To make the template available through the Files > New... menu in Visio, follow the steps below.

Now, if you select File > New... in Visio, the prototyping template should be available to you. To start a new prototyping project, choose the template called GUUUI Web Prototyping Template 3.

What's new?

Let's take a look at what's changed since the last version of the prototyping tool.

New way of saving prototypes as web pages

Visio offers a lot of different ways to save projects as web pages. Most of them will try to fit our pages into the browser window to avoid scrolling. Generally, no matter how long pages we create, Visio will scale them to make everything fit into the browser.

This is not what we want. We want our pages to have scrollbars if they are too long to fit into the browser window. To make this happen, we have to choose a well-hidden option in Visio called Source image size.

When you save your projects, follow the steps below.

The trick is to save the prototype pages as images (here PNG, but you can choose whatever format you want) with the Source image size selected. This will make the web pages the same size as you see them in Visio.

Browser windows are deprecated

When you start a new project in previous versions of the prototyping tool, the first thing you'll see is a placeholder that is supposed to hold a browser window. In the new version, this is gone. Browser windows are depreciated, since pages no longer have fixed heights.

Background browser windows are deprecated in the new version of the GUUUI prototyping tool.

Instead of the browser background, there's a page outline placed on the Background tab.

On the Background tab you'll find a page outline.

By default, the page outline is set to fit web pages targeted at computer monitors with a width of 800 horizontal pixels. If you want to change this, right-click the page outline and select one of the other options in the context menu.

To change the width of the page outline, right-click it and select one of the other options.

Pages are loooong

Pages in the template are long. They don't adhere to any standard paper size as they will vary in height depending on the amount of content we cram in.

Pages in the template are quite long to give us enough space to create scrolling pages.

When the pages are viewed in a browser, they will have scrollbars if the content exceeds the height of the browser window.

If you run out of space, go to the Background tab and increase the height of the page outline.

You can add more page space by increasing the height of the page outline on the Background tab.

Step-by-step tutorial

In the following, I'll demonstrate how GUUUI could be prototyped using Visio and the prototyping tool. I won't explain every little detail of Visio and the prototyping tool, but it will be enough to get you started.

Create a new project

When you want to start a new prototyping project, select the Web Prototyping Template in Visio.

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

A new blank prototyping project in Visio. Notice the tabs in bottom of the screen. These are the pages and backgrounds that the prototype project contains.

In the bottom of the screen, you'll se four tabs called Page 1, Page 2, Page 3 and Background. If you want to follow this tutorial, delete the pages (not the tab called Background) by right-clicking the tabs and choosing Delete.

Add a global background

Backgrounds in Visio are very useful, 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'll 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 page called Background the background of our global background.

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, and the about section. We do this by placing image placeholders and links elements onto the page.

The global background with all the global elements.

Add pages

Now we have the foundation of the site in place and can start creating 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 issues in the left column and the area for posts in the right column.

The front page with the quarterly issues in the left column and posts in the right.

Next, we add an example of how an article page looks.

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 posts" area.

The article page.

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.

Links on backgrounds

Now it would be nice if we could link from the article page back 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 we save the prototype as web pages.

Using layered backgrounds for sections

To demonstrate the benefits of using layered backgrounds for sections of a web site, we'll add the GUUUI About section to the prototype. Since all the pages in the about section share a common sub menu, we will create a new background, holding this menu.

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.

Save 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.

By selecting the Source image size option, the size of the pages will be saved in the same size as you see them in Visio.

Here's is an example of how the prototype could look.

In conclusion

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 together pages and view them as web pages. Another useful feature is its layered backgrounds. Backgrounds and backgrounds placed on top of other backgrounds allow us to share common elements across pages and make changes that affect all those pages by altering just the backgrounds.

With Visio and the GUUUI Web Prototyping Tool it's quick and easy to create prototypes of sites and web application. One major shortcoming of the tool has been the inability to create scrolling pages. But this is all history now.

What do you think of Visio and the prototyping tool? Does it meet your needs? Do you have complaints, suggestions, or words of praise? Leave a comment below or send a mail to henrik.olsen@guuui.com.

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.