<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Usability - Documenting Interaction Design/Wire Frames with Visio and Word</title> <META http-equiv="Content-Type" content="text/html"> <META HTTP-EQUIV="Content-Language" Content="en"> <meta name="Description" content="A method to document an interaction design for a user interface in Visio and then export it to Word. Perfect for usability professionals and interaction designers."> <meta name="Keywords" content="usability, interaction design, word, visio, custom properties, prototype, prototyping, wire frame, tools, usability testing, usage test, wire framing, Information Architecture, RUP, USDM, Agile, Methodology"> </head> <body> <script language="javascript" type="text/javascript" src="../src/antmailrob.js"></script> <div align="center"> <table width="640"> <tr> <td><font face="verdana,arial,sans-serif" size="2"> <strong>Documenting Interaction Design/Wire Frames with Visio and Word</strong><br> 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. <br /> <br /> <script type="text/javascript"><!-- google_ad_client = "pub-1366113791582550"; google_ad_width = 336; google_ad_height = 280; google_ad_format = "336x280_as"; google_ad_type = "text"; google_ad_channel =""; google_color_border = "336699"; google_color_bg = "FFFFFF"; google_color_link = "0000FF"; google_color_url = "008000"; google_color_text = "000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <br> <br> 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& <br /><br /> <strong>Custom Properties</strong><br /> 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. <br /><br /> <img src="1.gif" alt="Selecting a yellow dot and viewing its custom properties"/><br /><br /> 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"). <br /><br /> <img src="2.gif" alt="Select view and then custom properties to view the custom properties window in Visio" /> <br /><br /> <br /> <strong>Exporting to Word</strong><br /> 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.<br /><br /> <img src="3.gif" alt="Click the custom menu Export ID to access the export to Word function (macro security must be set to medium)." /><br /><br /> 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.<br /><br /> <img src="4.gif" alt="The result is a Word document, complete with screen shot and everything." /><br /><br /> 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.<br /><br /> Feel free to download this example and modify it so that it suits your needs. But please make sure to <script language="javascript" type="text/javascript">antMailRob('anders', 'interakt.nu')</script>e-mail me a copy</a> 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! :-)<br /><br /> <br /> <strong>Download:</strong><br /> <a href="Export_ID_to_Word_Example.vsd" target="_blank">Download Export_ID_to_Word_Example.vsd (274 KB)</a> <br> (You must have macro security set to medium in Visio in order to run the export to Word function.) <br> <br> This article has also been published in Swedish on <a href="http://www.interakt.nu" target="_blank">interakt.nu</a> and <a href="http://www.inuseful.se" target="_blank">inuseful.se</a>. <br> <br> <a href="http://db.tt/T8gUdv2x" target="_blank">Automatically backup your files online with Dropbox (2gb free)</a> </td> </tr> </table> </div> </body> </html>