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

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)

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.

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 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 make the stencil available in the Files > New menu:

  1. Select Tools > Options > Advanced > File Paths…
  2. Set Templates to your My Shapes directory
    (and now you are here, set Stencils to your My Shapes directory also)

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 GUUUI Web Prototyping Template.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

 

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

 

COMMENTS

Hej Henrik

Tak for en velformuleret beskrivelse af Visio som prototypev

Lars Christensen | January 16, 2006

 

Hello Mr. Olsen,

thank you very much for sharing this. I've immediately started using it, and it's really really handy.
Now, it does lack a few html widgets, like a "file input" item, fieldsets, rollover menus, etc... so i was wondering if you would have interest in coordinating an "opensource" project which objective would be to create "the most comprehensive toolset for website prototyping within MS visio".

Personally, i would be very ready to invest time to help complete it, which means as a first step, learning how to actually add items in the visio template files, and in a second step, do it in a way that improves your collection, not ruin it :). I guess for the second step, some conventions into how panels should be organised, how to avoid cross development, etc. all related to team coordination would need to be discussed together.

I look forward to reading your thoughts on this proposition.

thank you !!

alex

Alexandre Plennevaux | March 26, 2006

 

Everybody is very welcome to experiment with the template and stencil. If you got something that I should consider adding to the GUUUI prototyping tool, please send it to me.

Henrik Olsen | April 05, 2006

 

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

You can achieve this in Visio 2003 by creating folders for your stencils/templates in your My Shapes folder or anywhere you choose. Then go to Tools > Options > Advanced > File Paths... and set the Templates and Stencils to your My Shapes directory - or whatever directory you chose - and then restart Visio.

Is there an easy way to change the language settings for your stencils/template from Danish to something else?

Thank you for this great resource.

Jeff | June 04, 2006

 

This is a fantastic resource...thanks so much for putting it out there. I've recreated the wheel in visio so many times it's sad...but no more with your set up!

Thanks
Josh

Josh Katinger | June 06, 2006

 

Some more cool trix on how to document your interaction design can be found here:

www.interakt.nu/home/visio/

Anders | December 21, 2006

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