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 (3rd edition)

How to use Visio for rapid prototyping - now with scrolling pages and sketchy interface widgets

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 a stencil with standard web widgets that can be dragged and dropped onto 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.

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 download and install the web prototyping tool:

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

To make the template available 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)

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.

To save a prototype as web pages with scroll:

  1. Choose File > Save As Web Page...
  2. Press the button Publish...
  3. Select your preferred Publishing options (I prefer to leave them all out)
  4. Select the Advanced tab
  5. Select the Output format PNG
  6. Select Source image size in the Target monitor drop down
  7. Press the button OK

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 depreciated in the new version of the GUUUI prototyping tool

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.

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.

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.

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.

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.

To create a new prototyping project:

  1. Select Files > New...
  2. Select the template called Web Prototyping Template 3

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

A new prototyping project in Visio

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.

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

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:

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

To add the article page:

  • Choose Insert > Page
  • Set Type to Foreground
  • Set Name to "Article"
  • 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 posts" area.

The article page.

The article page.

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.

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.

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

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.

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.

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
  5. Select the Output format to PNG
  6. Select Source image size in the Target monitor drop down
  7. Press the button OK

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.

Make a donation via PayPal

 

COMMENTS

Is there any chance the sketchy interface shapes could be made available for older Visio versions? I'd love to use them.

Zephyr | April 11, 2007

 

Hi Zephyr!

Niklas Wolkert has made this stencil (ZIP download) for older versions of Visio.

Henrik Olsen | April 11, 2007

 

Henrik,

Absolutely wonderful stuff, you've created a really fantastic tool. I love the new scrolling capability, and the sketch widgets will be incredibly useful.

Keep up all the good work.

Chris Khalil - Melbourne, Australia

Christopher Khalil | April 11, 2007

 

Hi Henrik,

Thanks, but I still get a "file created with a newer or unrecognized version" error :-(
I've tried it both on Visio 2002 and Visio for Enterprise Architects, but no luck...

Zephyr | April 11, 2007

 

Hi Henrik,

Working on large projects I miss the ability in Visio to connect and assemble various Visio files (VSD) into a joint HTML prototype. It should be possible to create links between VSD files and not only between tabs in the same file.

Has anyone found a good way for a team of several interaction designers to work on various project defined products (e.g. Global navigation, Latest news widget) and then creating a common prototype?

P

P | April 24, 2007

 

Hi All,

Thnx very much for the great template, i can realy use it alot in my interaction designs...one cuestion remains, how do you deal with adjusting your navigation throughout all the pages in a vsd file.. i know you kan make it a model in the stencil, but then when i use "active" or "inactive" the model loses it's link to the master.... any suggestions here?

Jorman | May 02, 2007

 

Great template Henrik

I'm having difficulty in linking to particular shapes on a page. I want to be able to click a link at the top of the page to display content below the fold.

Even when I use the shape name field in the sub address dialog box for the appropriate page it doesn't make any difference to the way the page is loaded.

What am I doing wrong?

Cheers
Richard

Richard | June 14, 2007

 

Hi Richard

As far as I can see, links to objects on a page doesn't work in HTML exports.

Henrik Olsen | June 18, 2007

 

Henrik - you rock. I have been using Visio for years and everything I've read from MS on how to do things like this always seemed so complicated that I put off learning how to use the application better. With your toolkit and simple instructions it's like I have Visio superpowers now. :)

Elizabeth | July 20, 2007

 

Hi Henrik,

What a great prototyping and desing tool... a friend raves about it! I've been looking for an option like this for a while.

I'm sort of new to Visio and all, and was wondering if I need Visio 2003 or 2007? Also, is Visio standard fine or will I need the professional version?

Thanks!

Jaz | July 21, 2007

 

Hi Jaz

You need the 2007 version to use the prototyping tool. The standard version is just fine.

Henrik Olsen | July 29, 2007

 

Henrik,

I've been using your templates in combination with other widgets i found on the web in projects during my graduation project. The prototypes i made with your widgets were so much more consistent, and they really looked lovely!

I think i won't use Niklas' widgets in work for my employer, but they're great for private use! Both a big thank you!

Visio is a great tool for jobs like prototyping, the only problem i'm experiencing is that when i make normal (foreground) pages and background pages, i can't order them in the way i want. It looks like that the background pages can't be reordered and need to be next to each other. Is there a magic trick i don't know about to do this?

Greets,

Ron

Ron Kok | August 01, 2007

 

Hi Ron

Pleased to hear that you like the prototyping tool.

To answer you your question regarding the order of background pages: No, they place themselves as the last ones of the page tabs. To my knowledge there is no magic trick to change this. In my opinion it makes perfectly sense, as the backgrounds are subordinate to pages.

Henrik Olsen | August 02, 2007

 

Hi,

I especially like the sketchy widgets because then the customer understands better that it's just a prototype.

Is there a way to make sketches of a table? It would be neat to have a table widget where you can add/drop columns and rows, edit some basic properties in each cell, etc...

Greets

Jan | August 28, 2007

 

Henrik, I have just gone through your tutorial, and your tool indeed seems really useful. I am considering purchasing Axure, for which I also read the review on GUUUI, but it seems that Visio with your tool will cover my need for the moment, at least. In some regards, Visio superceeds Axure, in terms of the more advanced options to manipulate pictures (cropping etc.)

Q: Is there any way to make the rulers in Visio show pixels?

Q: When you fill in Greek text in links, do you just copy it from the "Dummy Text" widget, or is there some smart way of doing this?

/Peter.

Peter Malling | September 17, 2007

 

It's me, peter, again.
I've noticed that the widgets don't stick to the same places, according to the zoom-level I am using. Hence, if I move an object when viewing in full page mode, it is like the grid is different from, when moving something when viewing in zoom in, say 50% mode. This makes it difficult to align the objects across zoom levels. Is there any good advice on how to keep the objects aligned? Also, the grid doesn't seem to show up when using the prototyping stencil. Is there anything to do about this?

Peter Malling | September 17, 2007

 

Hi Peter

Here are some quick answers to your two comments.

- No, there is no way to make Visio work with pixels
- Yes, when I need Greek text in a link, I copy it from the text widget.
- I haven't experienced the problem with alignment in different zoom levels. Maybe I just don't pay attention to such details ;)
- The grid is hidden behind a layer placed on the background tab. You can it visible by making the background fill of this layer transparent. But as Visio works with standard paper formats, it won't extend the grid on pages that goes beyond the chosen page format. I recommend you leave it as it is.

Henrik Olsen | September 27, 2007

 

Hello,

these stencils are great for prototyping. They show the right level of detail to discuss about content and functionality, not details.

It would be great if there were some widgets for menus, tables and trees, which are often used in modern applications.

There is a set of such things on looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.html

Regards,
Manuel Schaffner

manuel | October 10, 2007

 

Hi

I have been using Visio 2003, and I found that all of a sudden, the background pages do NOT appear at the end but keep adding somewhere in the middle. I do have several foreground and background pages in my process flow (its long and complex...several modules..)

Is there some kind of limit? How do I fix this short of copying and pasting to previous pages and changing all the damn links

Prasad Viswanathan | November 06, 2007

 

I have managed to coerce Visio into displaying pixel-equivalent rulers and measurements. Here is the simple fix:
complexdiagrams.com/2008/06/01/pixel-rulers-in-visio/

Cheers, Noah

Martin Polley | June 01, 2008

 

Hi, what a wonderful piece of work. Extremely useful. I\'ve encountered a problem though. Initially, when I was using the widgets from the template, the scrolling function would work just fine. However, after adding some widgets from another stencil (Windows GUI), or inserting PNG pictures, the scrolling does not work anymore. Instead, my browser (both IE and Firefox) scales the pages to fit my monitor. Is this normal?

Carlos A. Lastrilla | July 25, 2008

 

Hi,
Nice post.I have used the visio 2003 version.It is good tool.I use the visio to make the software engineering assignment.QuranReading educational site.But i think visio is little bit heavy tool.

jimmy adans | January 12, 2009

 

I don\'t agree with the statement about browser windows being \'deprecated\'. Every web design needs to fit a certain proportion of it\'s design - or some call to action - above the fold. Any web designer worth his or her salt will always consider the impact of browser size on the design, be it small or large. And wireframing for mobile devices is near on impossible without knowing exactly what the screen limits are.

Even if you don\'t use the classic background of a real browser window, there will always be a need to define the boundary of the design\'s width if not height.

Missy | July 10, 2009

 

Great post! It helped me a lot when I started my wireframing career. :)

Here\'s a plug-in for Visio that I made - it makes wireframing waaaay faster & more fun, and it allows you to generate clickable prototypes of your work:

www.visioworkflow.com/

Cheers,
j.

jperrier | October 18, 2009

 

I\'d first like to say thanks for this template it\'s great.

Secondly I\'d like t ask your advice on increasing the resolution / screen size.

I\'d like to use the template to design for 1440 * 900 resolution, and like your advice on how best to do this:

Should change the page setup to A3 and increase the page outline?

Or should I select a different target monitor size when publishing as a web page?

Thanks for your help again.
Karl.

Karl | November 17, 2009

 

I like the template, it is great and it helps to increase productivity a lot. However, just wondering do you plan to include more UI controls into the template such as datagrid (table) , list, calendar, datetime picker, time picker and etc. Currently, i am drawing those control manually with rectangles, text and lines. Thinking if there would have some reusable component so just drag and drop with little customization, like this template got to offer.

anthony | January 12, 2010

 

Thanks for this, it looks very useful.

I\'m new to using Visio, so forgive me if this is a dumb question: once these pages have been saved and Visio is exited, how can I reopen them for re-editing in Visio?

Phil Parry | February 17, 2010

 

Thank You very much for the template it\'s great.

I\'ve a problem when I save my drawing as website the picture is shown much greater then the actual size i\'ve draw it.

Does someone know how I can publish it by the actual pixel size.

Thanks!

stephanie | April 21, 2010

 

Excellent template, many thanks.

Rik Hemsley | June 30, 2010

 

Many thanks for the template. Although it is not my area of expertise I know a number of studentss who will find this helpful.
Anyone interested in other aspects of Visio may find my website a useful resource for free tutorials and articles on Visio:

www.visio-tutorial.com/

David

David Millard | July 14, 2010

 

background template not playing very well with visio 2010, anybody knows a fix for it?

Bo | August 29, 2010

 

I am using Visio 2007 and can\'t edit the text on the Sketchy stencils like I can the normal ones. Has anyone else experienced this?

Spence Hackney | August 31, 2010

 

I found myself in the role of the Business Analyst or BA for one of our important clients. Finally, a chance to extract requirements. After a kickoff meeting and a few work sessions, I had enough information to document the scenarios (use cases) and begin mocking up the interface. Searching around for a nice Visio stencil, I found a site that rang true and discovered the term \"interaction designer.

Certified mcse Expert from Microsoft.

shawn | November 11, 2010

 

I really like the sketchy style. How was it done?

Peter Newhook | March 02, 2011

 

Great tool - thanks!

Christophe Fieschi | March 13, 2011

RELATED POSTINGS

 
Posting added before you last visit at GUUUI Prototyping beyond the sunshine scenario
Posting added before you last visit at GUUUI Hand-crafting prototypes in Visio
Posting added before you last visit at GUUUI Review of Axure RP Pro
Posting added before you last visit at GUUUI How to use PowerPoint for prototyping
Posting added before you last visit at GUUUI Visio - the interaction designer's nail gun (2nd edition)
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