caitlin gannon

If you’ve ever tried to communicate a site design via paper, you know the value of also presenting an interactive version with live hyperlinks. Visio users know that it’s pretty easy to create an interactive HTML prototype from a set of wireframes (File>Save as Web Page), but for me, the major drawback to this approach is that the prototype isn’t portable. I need a way to communicate designs via email, and there’s no way I’m emailing a bunch of HTML and GIF files to people (or even a web link, since not everyone has network access).

PDF is ideal for emailing, but it takes a little work to create a clickable PDF prototype in Visio. Here’s what I discovered.

1. Create hyperlinks on the foreground, not background — and use the document stencil to manage revisions

It’s pretty standard practice when wireframing in Visio to put the standard page elements — header, footer, navigation — on a background page so that these elements automatically repeat on every page. However, when you publish a PDF, Visio doesn’t create hyperlinks from the background layer. For an interactive PDF prototype, the hyperlinks have to live on the foreground pages. This means that for a standard page layout, all the navigational elements have to reside on each page in the wireframe.

You could copy and paste the navigational elements onto every page, but that’s a beast to maintain. Instead, use the document stencil (credit to this explanation at User Experience & Design blog).

Here’s how it works:

1. Create a navigation panel, using a distinct shape for each link. For example, to create 5 tabs across the top of a page, make each tab a separate text block.
2. To add hyperlinks, press CTRL-K to open the hyperlink dialog. Next to Sub-address (not Address), click Browse and find the page within your wireframe that you want to link to. (Or enter a complete URL next to Address.) Click OK.
3. Repeat 1 and 2 as needed. Once the navigation area is done, group it (select all the items, then Shift-CTRL-G).
4. Open the Document Stencil: File>Shapes>Show Document Stencil.
5. Drag the grouped navigation elements onto the document stencil pane.
6. Right-click the grouped elements (probably called “Master.16″ or something like that) and rename it (i.e. “NavBar”).
7. On each of your wireframe pages, drag this element onto the foreground and position it accordingly.
8. If you ever need to make changes to this navigation group, right-click it in the document stencil and choose Edit Master>Edit Master Shape. Any changes you make will automatically be updated in the other pages.

2. Use PDF menu in Visio, not print to Adobe PDF in printer menu

For the hyperlinks in the PDF to work correctly, use the PDF menu in Visio (Adobe PDF>Convert to Adobe PDF). For some reason, if you use File>Print and choose Adobe PDF as the printer, the hyperlinks in the PDF don’t work.

(Don’t ask me why, I’m just happy to have found a workaround.)

The final result will have live links on every page. To change the over states of buttons or create additional interactive elements, you’ll need to edit the file in Acrobat (avoid this step until you are certain the file is finished, otherwise if you regenerate the PDF from Visio, the Acrobat changes are lost).

3. Take it to the next level

This article on Boxes & Arrows provides a fantastic review of how to create clickable PDF prototypes with layers, multimedia and more. It focuses on using Acrobat’s advanced editing tools.