Documenting Interaction Design/Wire Frames with Visio and Word
There are many ways to document an interaction design and the level of details needed is dependent on what your documenting and for what purpose. There has also been a lot of discussions on what the best tool for creating interaction designs and/or prototypes is (Visio, HTML, Axure, Dreamweaver, FrontPage, Photoshop, Powerpoint etc.). The tool you choose is of course also dependent on what you are documenting and for what purpose. It is also much of a personal taste what tool one prefers to work with.



I have come to work mostly with Visio together with Word to document my interaction design. Even though the combination has its shortcomings, both Visio and Word are standard tools that I can use in any project and that people can easily access. But one big shortcoming that always has bothered me is the lack of having one single source for all information I want to document. With the Visio-Word combination I have to maintain two documents – Visio to illustrate the UI itself and Word to write things that cannot be expressed with dropdowns and checkboxes. I asked myself if there where any thing that could be done to keep Visio as the main source of information. After some heavy Googling I found out that using Visios custom properties together with some funky VBA macros could be a way to go…

Custom Properties
The result is presented here, yellow dots! Each yellow dot contains the information I want to document such as if a text field is mandatory and what happens when the user clicks a certain button.

Selecting a yellow dot and viewing its custom properties

All this information can be written and read in the Visio document itself by selecting a yellow dot and viewing its custom properties (display the custom properties window by clicking "View" > "Custom Properties Window").

Select view and then custom properties to view the custom properties window in Visio


Exporting to Word
But since it is difficult to get an overview of all these yellow dots (and there can be quite a few dots on one screen…) I realized that there must be a way to export this information to Word. So clicking "Export ID" in the menu gives you the option to export the current screen to Word.

Click the custom menu Export ID to access the export to Word function (macro security must be set to medium).

When you start the export to Word, a new Word document is created on your screen and it is magically filled with information from your Visio file.

The result is a Word document, complete with screen shot and everything.

And that’s it! You have everything from your Visio document now in Word. I have used this method for a while and I must say that it works pretty well. There are downsides of course, there is for instance no spell checking in the custom properties so once you have exported it to Word you might find out that you have misspelled a few words. The whole format of how it is presented in Word can also be discussed and as I mentioned earlier, it is very much dependent on what you're documenting and for what purpose.

Feel free to download this example and modify it so that it suits your needs. But please make sure to e-mail me a copy if you make any nifty improvements! I will not go into details on how VBA macros work and so on, there are tons of information out there that tells that much better then I do. Enjoy! :-)


Download:
Download Export_ID_to_Word_Example.vsd (274 KB)
(You must have macro security set to medium in Visio in order to run the export to Word function.)

This article has also been published in Swedish on interakt.nu and inuseful.se.

Automatically backup your files online with Dropbox (2gb free)