How to create an interactive PDF prototype in Visio
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:
- 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.
- 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.
- Repeat 1 and 2 as needed. Once the navigation area is done, group it (select all the items, then Shift-CTRL-G).
- Open the Document Stencil: File>Shapes>Show Document Stencil.
- Drag the grouped navigation elements onto the document stencil pane.
- Right-click the grouped elements (probably called “Master.16″ or something like that) and rename it (i.e. “NavBar”).
- On each of your wireframe pages, drag this element onto the foreground and position it accordingly.
- 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.
Pingback: Recent Links: April 09 to April 16 at Alex Jones
I Need to create popups automatic VISIO-PDF there is a way?
Thanks
Hello Gilmar,
I’m not aware of a way to create a popup automatically. However, you could create a page in the Visio that illustrates the popup, and set up hyperlinks to that page. To make it clear that the popup is a modal window on top of another web page, you could draw a small window for the popup and include a faded-out version of the previous page in the background.
As an example of the hyperlink behavior, clicking the OK button on a page called “Register” would point to a page called “Confirmation,” which displays the popup.
Good luck!
Have you had any trouble with the PDF zoom function not coming in to the PDF correctly.
we create A3 (paper size) wireframes, and when pdfing them with hyperlinks and selecting zoom to page width. The conversion process ignores the setting and just zooms out
is this anything you have come across?
Hello oli,
I haven’t experimented with setting the zoom level from Visio to PDF. I’ll give it a try, and if I find anything I’ll post it here.
Thanks for reading!
Thankyou for this post!
I was just looking for something like this to avoid sending documents and files to show improvemets on a specific project.
Pingback: Hyperlinks to PDF | keyongtech
Hi, I have Visio 2003 Professional – there is no ‘PDF’ menu – just the save as PDF in the print menu – do I need an add-on ?
Thanks
David
Hi David,
For some reason it doesn’t work if you print to the Adobe PDF printer. You would need to install Acrobat to get the PDF menu with the additional settings.
Good luck!
I have also found that converting to PDF drops off-page references. I have a multi-page visio that has links between the pages and would like them to work in PDF too. Anyone know if that is possible?
Thanks!
I would like to be able to click on a button on the right side of the page and to display different content on the right side.
Do you know how to do that?
Thanks,
Hi Veronique,
In a PDF, you can accomplish this with bookmarks, but this may have to be done manually in Acrobat rather than in the Visio source file.
These days I’m doing prototyping in Axure, which makes this all much easier — you can even generate a single Help file for the entire prototype, which shows all the pages in the left-side navigation.
best of luck!
Caitlin
Hi. I am working on organization charts. They have already been done in VISIO. My users want to be able to highlight a box and click on a job description link or a list of staff. I tried putting a box labeled JobDescr inside and configuring with a hyperlink to our job descriptions on SharePoint. Not working.
Can this be done in VISIO?
Mikec..
Your solution is great but it does not work when I am working on plans. It works nice on organiation charts or flow charts but not on plans. I do not know why the links are loss in the PDF file!
I am using Visio 2010. Any idea?
Thank you for your great explanation. I think that your link with the text “this explanation” is broken. This appears to be the current link http://forumone.com/blogs/post/clickable-prototypes-visio-use-doc-stencil-not-backgrounds.
Thanks for the note, Kaylen! (link fixed.)