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 17 - q1 2006

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

How to use Visio for rapid prototyping

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.

My web prototyping tool for Microsoft Visio is now about six years old and has been available for download here at GUUUI since 2002. Personally, the tool has served me well through the years, but since people have started complaining about installation problems in new versions of Visio, I thought it might be time for an update.

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.

In versions prior to Visio 2003 it's possible to install the prototyping tool so that you can start a new project from within Visio. For some reason, this is no longer possible. Instead, you have to save the files in the My Shapes folder and open the template file from here to start a new project.

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

To download and install the web prototyping tool:

  1. Download the zip file containing the template and stencil for Visio
  2. Extract the files to the My Shapes folder located in the My Documents folder

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

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.

To create a new prototyping project:

  1. Open the prototyping template Web Prototyping 2003.vst in the My Shapes folder
  2. Add a browser to the Browser background page (follow the instructions on the background page)

A new prototyping project 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.

To create a new background:

  1. Choose Insert > New Page
  2. Set Type to Background
  3. Set Name to "Global BG"
  4. Set Background to Browser BG
  5. Click OK

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.

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:

  1. Choose Insert > New Page
  2. Set Type to Foreground
  3. Set Name to "Home"
  4. Set Background to Global BG

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.

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.

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

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.

To create a link to the article page:

  1. Go to the front page by selecting Home on the page tabs located at 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.

Selecting a link in Visio.

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.

To make the 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 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.

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.

The About section background with its 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".

To create a scrolling page:

  1. Choose Insert > New Page
  2. Set Name to "Home 2" and Background to Browser BG (not our Global BG).
  3. Select the scrollbar widget and place it onto the page.
  4. Select the scrollbar
  5. Choose Insert > Hyperlink (or press Ctrl+k)
  6. Set Sub Address to Home
  7. Select Home from the page tabs
  8. Add a scrollbar that links to Home 2

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.

To save the prototype as web pages:

  1. Choose File > Save As Web Pages
  2. Press the button Publish
  3. Select your preferred Publishing options (I prefer to leave them all out)
  4. Select the Advanced tab and select your preferred Output formats (I prefer VML and not to save the prototype in an alternative format for older browser)
  5. Save

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

Comments

 

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

Make a donation via PayPal

RELATED POSTINGS

 
Posting added before you last visit at GUUUI The promised land of prototyping
Posting added before you last visit at GUUUI Tools for Information Architects
Posting added before you last visit at GUUUI Balancing fidelity in prototyping
Posting added before you last visit at GUUUI Creating interactive prototypes with Adobe Acrobat
Posting added before you last visit at GUUUI Prototyping for user testing
Posting added before you last visit at GUUUI Prototyping ends the war between clients and developers
Posting added before you last visit at GUUUI Wireframing tool for Dreamweaver
Posting added before you last visit at GUUUI Visio or HTML for Wireframes
Posting added before you last visit at GUUUI DENIM, a Sketch-based Web Site Prototyping Tool
Posting added before you last visit at GUUUI Rapid web prototyping
Posting added before you last visit at GUUUI The art of UI prototyping
Posting added before you last visit at GUUUI Advantages of paper prototyping
 
 
     
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI