To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  
   
 

ISSUE 03 - Q3 2002

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:

To download and install the web prototyping tools:
  1. Download the prototyping tools for Visio.
  2. Choose Extract in you file compression software (e.g. WinZip).
  3. Locate the Program Files folder on your local disk.
  4. Locate the Visio folder in the Program Files folder.
  5. Locate the folder "Solutions" in the Visio folder.
  6. Extract the files to the Solutions folder.
  7. Restart Visio.

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.

To create a new prototyping project:
  1. Choose Files > New.
  2. Select the "Web Prototyping" template in the folder Web Prototyping.

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.

To add guides to the Browser BG:
  1. Select Browser BG from the Visio page tabs located in the bottom of the screen.
  2. To place a guide, drag a guide from the horizontal or vertical ruler onto the page, and then release the mouse button.

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.

To create a new background:
  1. Choose Insert > Page
  2. Set Type to Background
  3. Set Name to Global BG
  4. Set Background to Browser BG

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.

To create a new page for the front page:
  1. Choose Insert > Page.
  2. Set Type to Foreground.
  3. Set Name to Home.
  4. Set Background to Global BG.

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.

To add the article page:
  1. Choose Insert > Page
  2. Set Type to Foreground
  3. Set Name to "Article"
  4. Set Background to Global BG

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.

To create a link to the article page:
  1. Select Home from the page tabs located in the bottom of the screen
  2. Select the link to the article page
  3. Choose Insert > Hyperlinks (or press Ctrl+k)
  4. Set Sub Address to 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.

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.

To make Home link active:
  1. Select Global BG from the page tabs.
  2. Select the Home link.
  3. Choose Insert > Hyperlinks (or press Ctrl+k).
  4. Set sub address to Home.

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.

To create the about section background:
  1. Choose Insert > Page
  2. Set Type to Background
  3. Set Name to About BG
  4. Set Background to Global BG

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 create a scrolling page:
  1. Create a new page called Home 2
  2. Select the scrollbar object from the stencil and place it onto the page.
  3. Select the down arrow of the scroll bar (you have to click twice, since the whole scrollbar will be selected the first time you click).
  4. Choose Insert > Hyperlink (or press Ctrl+k).
  5. Set Sub Address to Home 2


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.

To export the prototype as web pages:
  1. Choose File > Save As and set Save as type to HTML files (In Visio 2002 Choose File > Save As Web Pages).
  2. Set Graphics Format to VML (a scaleable format that can be viewed in Internet Explorer 4.x browsers).

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

  A new prototyping project in Visio. Notice the tabs in bottom of the screen. These are the pages and backgrounds that the prototype project contains. To begin with, there are three empty pages and a browser background.


RELATED POSTINGS

 
Posting added before you last visit at GUUUI Advantages of paper prototyping
Posting added before you last visit at GUUUI Automating diagrams with Visio
Posting added before you last visit at GUUUI Diagramming tool for information architects and interaction designers
Posting added before you last visit at GUUUI Visio or HTML for Wireframes
Posting added before you last visit at GUUUI New Version of DENIM Available
Posting added before you last visit at GUUUI DENIM, a Sketch-based Web Site Prototyping Tool
Posting added before you last visit at GUUUI Prototyping for Tiny Fingers by Marc Rettig (1994)
Posting added before you last visit at GUUUI The art of UI prototyping
Posting added before you last visit at GUUUI Extraordinary prototyping tool
 
 
     
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI