Chapter 8: Visio

(Open in Flickr)

Figure 8.1 (Open in Flickr)

Flickr Uploadr recreated using Visio 2007 Professional.

If you’ve ever worked in a windows environment, chances are you’ve used Visio. Don’t let its roots as a diagramming tool fool you, because Visio can be a useful prototyping tool.

Visio has a fairly low learning curve. If you can drag-and-drop objects onto a page, you can create interfaces for Web-based or desktop systems using Visio. Visio ships with a number of standard shapes, stencils, and templates, which makes creating interfaces faster and easier. If the built-in stencils and templates don’t meet your needs, a host of third-party stencils, templates, and prototyping toolkits are just an Internet search away.

In this chapter, we’ll explore prototyping with Visio’s built-in capabilities, as well as a number of popular third-party stencil and toolkit libraries. You can find a list of these third-party add-ons with links at the end of this chapter.

Strengths

While Visio might not immediately come to mind when you think of prototyping tools, here are a few things that make it worth considering:

• Learning curve. Visio uses an object-based drag-and-drop model to create drawings, which creates a relatively low learning curve.
• Familiarity and presence. Visio is a common tool for business and technology professionals working in a Windows environment. If your computer has Windows and you’re in a corporate environment, chances are you already have Visio.
• Backgrounds. Visio supports the use of backgrounds, which can be used to distribute common elements across multiple screens.
• Stencils, shapes, and templates galore. Visio ships with a number of stencils, shapes, and templates for creating everything from network diagrams to Windows application interfaces. If the built-in stencils and templates aren’t enough, there are a number of solutions created by Bill Scott, Jacco Nieuwland, Nick Finck, Garrett Dimon, and others, which you’ll find listed at the end of this chapter.
• Export to HTML or PDF. If your audience doesn’t have Visio, you can always export the file to HTML or PDF.
• Programmability. If you’re comfortable with Visual Basic, you can simulate some level of rich interactivity with Visio.

Weaknesses

While good for basic prototyping, Visio has a number of disadvantages that limit its effectiveness as a prototyping tool:

• Windows only. Visio doesn’t run natively on a Mac. If you’re on a Mac, it’s probably not an option for creating prototypes. You could run virtualization software to run Windows so you could use Visio, but what’s the point? There are a number of other great alternatives.
• Limited interactivity. Interactivity is essentially limited to hyper-links. Hyperlinks can only be used to link to other screens within the prototype or URLs.
• Limited rich interactivity. While it is possible to simulate some level of rich interactivity using Visual Basic with Visio, this is beyond the capability and comfort level of most Visio users.
• Links on backgrounds break when exported. Links placed on backgrounds are not supported when exporting your prototype as HTML or PDF. If you want that global navigation to work when you export your prototype to HTML or PDF, you’ll need to place it on every screen or create invisible elements and link them—which kind of defeats the purpose of a background. This is a major drag.
• Awkward menus and interface. Visio can be rather awkward and unintuitive to navigate at times. Several key actions, like the ability to add a hyperlink to an object, are not available via right-click, but only from the main application menu. If you want to access the Shapes menus, you’ll need to select File from the main application menu—actually, View or Tools would make more sense. Navigating a 20-plus-page document is downright clunky. Try doing that using the tabs as pages metaphor—it just feels wrong.
• Nonreusable source code. When Visio exports to HTML, it creates an image for the entire page and creates image maps for the hyperlinks. The resulting pages are essentially screen captures.

Prototyping with Visio

Visio ships with a number of useful default templates for creating everything from flow diagrams and UML documents to Windows XP user interfaces. For the example in this chapter, we’re going to re-create the Flickr Uploadr application—a photo upload utility for the popular Flickr photo site by Yahoo! You can download the sample Visio file used for this chapter at http://rosenfeldmedia.com/books/downloads/prototyping/Visio_Demo.vsd.

Step 1: Create a New File

1. Start by creating a new file by selecting File > New from the application menu. As you can see in the New File menu shown in Figure 8.2, there are a number of useful options that ship with Visio.

Figure 8.2 (Open in Flickr)

New File menu in Visio.

1. Selecting New Drawing will create a new blank drawing with access to the default shapes and stencils. Choose New Drawing from Template to use one of your own custom templates. Or select one of the useful templates that ships with Visio from the list of folders displayed in the menu.
2. Selecting one of the templates will load the appropriate shapes and stencils for that drawing automatically.

In this case, we’ll choose the Windows XP User Interface from the Software and Database option, as shown in Figure 8.3.

Figure 8.3 (Open in Flickr)

Windows XP User Interface option from the New Drawing menu.

By selecting Windows XP User Interface, we automatically have access to a number of Windows UI shapes and stencils. By default, these will be displayed in the Shapes panel at the left, as shown in Figure 8.4.

Figure 8.4 (Open in Flickr)

Shapes panel for displaying Windows and Dialogs shapes in Visio.

Step 2: Create a Basic Application Window

1. Drag a blank window shape from the Windows and Dialogs panel onto the canvas.
2. Add a number of common elements and controls, such as the Status Bar, Menu Bar, and window controls like Minimize, Maximize, and Close. The result should look similar to Figure 8.5.

Figure 8.5 (Open in Flickr)

Drawing of a basic application window in Visio.

At this point, you have a couple of productivity options. You can create a page background or a stencil from your application window drawing.

• Page Backgrounds. Can be applied to new pages and are useful for global elements like a container window or navigation menus. Page backgrounds cannot be modified at the page level. Instead, you must modify the original page background drawing.
• Stencils. Can be used to define common elements you want to reuse in your document. Stencils can be modified on the page level. Modifications to stencils placed on a page do not affect the original stencil.

For this demonstration, we’ll create a stencil first and then apply it to a page background. This gives us the capability to actually create a number of alternate state page backgrounds from the same stencil.

Tip Should I Stencil or Use Page Background?

To create stencils for common elements, you may need to resize or edit on a page-by-page basis. Create page backgrounds for common elements that you do want to apply to multiple pages, but don’t need to modify on a page-by-page basis.

Step 3: Create a Stencil

1. Start by grouping your drawing. Select all the elements in the drawing and right-click. Select Shape > Group from the menu, as shown in Figure 8.6.

Figure 8.6 (Open in Flickr)

Group Shape menu option in Visio.

1. After you have your shape grouped, you’ll want to save it as a stencil by selecting File > Shapes > New Stencil from the main application menu (see Figure 8.7). Your new stencil will show up in the Shapes menu at the left of your application window.
2. Drag your shape to the newly created stencil. You’ll now be able to drag this shape from your stencil anytime you need it.
3. Drag any additional shapes you want to reuse to your stencil.

Figure 8.7 (Open in Flickr)

New Stencil menu option in Visio.

Step 4: Create a Page Background

1. Select one of the current page tabs and right-click it. Select Insert Page from the menu.
2. The Page Properties tab will be selected automatically. The first option is Type. You’ll need to select the Background radio button option (see Figure 8.8).
3. Give the page a meaningful name. Meaningful names will help when you’re applying backgrounds to future pages, or when you’re trying to select the page to link to when you’re creating interactivity between pages. In this case, we’ll type Main Application Window.
4. Apply your application window stencil to the page by dragging it from the Stencil menu onto the canvas area of your drawing.

Figure 8.8 (Open in Flickr)

Set the Page Property to Background in Visio.

Step 5: Apply a Page Background

1. Select one of the current page tabs and right-click it. Select Insert Page from the menu.
2. The Page Properties tab will be selected automatically. This time, choose Foreground for page type.
3. Give the page a meaningful name. In this case, we’ll type Browse for File.
4. Click the menu next to Background and select the Main Application Window option, as shown in Figure 8.9. This will apply our main Application Window Background to the new page.

Repeat step five to create all the keyframes for your prototype. If you need to create unique page backgrounds, then repeat steps three through five for each.

Now that you have the keyframes, you’ll want to make them interactive.

Figure 8.9 (Open in Flickr)

Apply the Main Application Window Background to a new page in Visio.

Step 6: Creating Interactivity

1. Select the object you want to link. In this case, we’ll choose the Add button.
2. From the main application menu, select Insert > Hyperlink.
3. Choose Address from the dialog window to link to a local file or URL (see Figure 8.10). Choose Sub-address to link to a page within your current drawing. In this case, we’ll choose Sub-address.

Figure 8.10 (Open in Flickr)

Hyperlink dialog window in Visio.

1. Choose the page you want to link to from the Page menu, as shown in Figure 8.11.

Figure 8.11 (Open in Flickr)

Hyperlink Sub-address dialog window in Visio.

Now you’re ready to present your prototype. Presenting your Visio is as easy as selecting View > Full Screen from the main application menu. Alternatively, you can export your Visio file to HTML or PDF for viewing.

Additional Resources

While Visio does ship with a number of very useful shapes, stencils, and templates, they might not suit your prototyping needs. Thankfully, a number of people have created additional libraries and made them freely available on the Internet.

Swipr

Swipr is an interactive toolkit for Visio developed by Jacco Nieuwland. More information is available at the Swipr Web site at http://www.swipr.com.

Bill Scott’s Prototyping Toolkit for Visio

Bill Scott, the director of UI engineering at Netflix, has created a wireframe prototyping toolkit for Visio and made it freely available. The toolkit includes a number of great features, including the following:

• Complete Web component stencil library (including standard components, table, menus, tabs, and tree)
• Fast, intelligent snap-to layout using preprogrammed Visio connectors
• A way to visualize rich interactions (animating a wireframe)
• Intelligent components that have built-in behaviors
• Generate requirements documents from wireframe artifacts
• Generate code from wireframe artifacts
• Automated annotations and callouts

Bill’s prototyping toolkit is available free of charge from his Web site at http://looksgoodworkswell.blogspot.com/2005/11/visio-wireframe-toolkit-for-download.html.

GUUUI Prototyping Toolkit for Visio

Another good prototyping toolkit for Visio was created by Henrik Olsen. This toolkit includes both a traditional Visio line art template and one that resembles hand-drawn sketches.

Henrick also has a number of articles on using Visio for prototyping. You can find the most recent version of his Visio prototyping toolkit and the related article on his Web site at http://www.guuui.com/issues/02_07.php.

Nick Finck’s Stencil Library

Here is a stencil library for common interface elements like navigation bars, tabs, and links. Nick’s stencil library is available free of charge from his Web site at http://nickfinck.com/stencils.html.

Garrett Dimon’s Templates & Stencils for Visio

Garrett offers a number of templates and stencils for Visio. Need to change the state of a check box or radio button from selected to unselected? Garret’s got you covered. Just right-click a check box or radio button, and you can specify whether to show it as selected, checked, enabled, or disabled.See the Web site http://v1.garrettdimon.com/resources/templates-stencils-for-visio-omnigraffle.

Articles

“Creating an Interactive PDF Prototyping with Visio”

Caitlin Gannon has written an article on using Visio to create an interactive PDF prototype. The article is available from her Web site at http://caitlingannon.com/2008/03/16/how-to-create-an-interactive-pdf-prototype-in-visio/.

“Prototyping and Usability Testing with Visio”

This is a presentation that was given at the annual STC conference by Karen Bachmann and Whitney Quesenbery. The slides are available in PDF format from the STC Web site at http://www.stc.org/edu/48thConf/files/VisioPrototyping.pdf.

Summary

Okay, quick recap on reasons you might want to consider using Visio next time you’re prototyping:

• If you’re on a company computer with Windows chances are you probably already have it installed.
• The learning curve is pretty low.
• Backgrounds, stencils, and templates are great for consistency and efficiency.
• You can export to a clickable PDF or HTML prototype.
• When the inner Visual Basic geek strikes, you can use it to create some rich interactivity.