Boxes And Arrows : The Design Behind the Design

The Lazy IA's Guide to Making Sitemaps

by Stephen Turbek on 2006/01/30 | [64 Comments]

This article further develops the excellent Automating Diagrams with Visio by Michael Angeles.

Sitemaps are common deliverables, desired by clients who want a visual representation of a site. Since they are rarely used to make decisions, information architects may not consider them the valuable tools they are. The effort required to make and maintain them requires time that might be better used elsewhere. In fact, I would suggest that making sure the little boxes line up is a waste of an IA’s mental abilities.

Especially when your sitemap looks like this.

So what is an IA to do? Turn to Excel, of course. Storing sitemap data in a structured data format such as Microsoft Excel makes the data easy to edit, easy to share with the team, and easy to elaborate on (e.g., adding example notes and URLs that may not be appropriate for the map itself). Unfortunately, this approach requires maintaining a spreadsheet in addition to maintaining the visual sitemap.

Or does it?

This article includes step-by-step instructions on how to make sitemaps with:
1. Excel and Visio 2000 or Visio 2003 (Windows only)
2. Word and Inspiration (Mac OS and Windows)

Use these lazy techniques and spend your time on better and more interesting problems than lining up little boxes!

Techniques

You can use this zip file to access all the templates referenced in this article. I suggest doing the exercise once with the sample file to get the hang of it, then editing that file to your needs. The Excel spreadsheet has been written to do some semi-fancy calculations to let you store your data on the import sheet in a nice format and to output Visio-readable data on the output sheet.

Technique 1: Excel and Visio 2000 / 2003

Step 1: Enter your sitemap data in the “Input” sheet in the file “template_for_visio_2000_and_2003.xls.”

For Visio 2003, proceed to the variation below.

Step 2: Go to the “Output for Visio 2000” sheet (and pay it no mind).

Save as Type “Text (tab delimited).”

You will see two alerts. Click OK and Yes.

Close the file. You may get the alerts again, hit “OK” and “Yes.” Closing the file is actually important!

Step 3: Open Visio 2000. Click “Open.” Choose Files of Type “Text (.txt, .csv).” Choose the file you just saved.

Step 4: When the dialog box pops up, set Field separator to [Tab] Text Delimiter to “Comment Character to ;. Click “OK.”

Step 5: A sitemap! Edit your sitemap to suit your fancy.

Variation for Visio 2003

Step 2: Click on the Sheet tab “Output Visio 2003” (and pay it no mind). Save the Excel file and close it.

Open Visio 2003. Select the "Organization Chart Wizard."

Step 3: Select “Information that is stored in a file or database.” Click “Next.”

Step 4: Select “A text, Org Plus (*.txt), or Microsoft Excel file. Click “Next.”

Step 5: Find the demo file included with this presentation “example_visio_2003.XLS.” Click “Next.”

Step 6: Leave these defaults. Click “Next.”

Step 7: Remove “Title” as a displayed field. Click “Next.”

Step 8: Ignore the Custom Property fields (though you might be able to think of some use for the other fields in some interesting way). Click “Next.”

Step 9: You can make sitemaps that span multiple pages. Choose “specify.” Click “Next.”

Step 10: This allows you to define the top Sitemap box on the page. If you follow the Excel template, you can leave this alone. Click “Finish.”

Step 11: A sitemap!

Step 12 Right click on the sitemap to edit properities.

“Arrange subordinates” changes the sitemap layout.

“Change Position” changes the look of the boxes

Technique 2: Microsoft Word and Inspiration

Step 1: Outline your sitemap using Microsoft Word’s Outline format. Save it as a RTF file. (Step 1 is optional: you can make the outline in Inspiration, but some users may wish a more accessible format, like Microsoft Word.)

Step 2: Open Inspiration. Create a new file. Open the RTF file.

Step 3: Inspiration converts the RTF file to its own format. You may have to do some minor editing to remove blank rows, as shown above. (See image 26)

Step 4: Click the “diagram” button at the upper left. What a mess! But click the “arrange ” button…

Step 5: Select diagram type “Top down Tree” and Lower level stacking option “Right.”

Better arranged, but visually lacking.

Step 6: Select all then click the rectangle in the menu bar. Now you can do things like take off the drop shadow, change the fill color to white, change the line color, etc.

A sitemap!

Working hard, hardly working
Sitemaps can be useful tools and are a whole lot easier when you separate the data from the visualization. After you have done these steps a few times, you will be able to update a sitemap in under a minute.

All these techniques can be expanded and improved upon. Let me know what you have done and what works for you. Have fun, but don’t work too hard!