Boxes And Arrows : The Design Behind the Design

Wireframe Annotations in Visio : Special Deliverable #11

by Dan Brown on 2004/10/28 | [18 Comments]

Few information architects tap the full power of Visio. For the IA, Visio is a means to an end—a mechanism for capturing some ideas on paper before they are transformed into graphics, HTML, and code. Even so, the information architecture community can take advantage of some of Visio’s advanced features to make developing documentation more efficient.

This article introduces several techniques in the context of wireframe annotations. At the conclusion, you will have learned to create an annotation widget, and you will also have learned several facets of Visio you may not have been aware of.

The widget consists of two parts: the annotation shape, which points out the feature of the wireframe; and the footnote shape, which contains the reference for the annotation.

Creating the annotation widget requires three steps:

1. Creating the annotation shape and the footnote shape
2. Establishing a relationship between the annotation and the footnote
3. Changing the behavior of the annotation

Step 1: Creating the annotation shape and the footnote shape
In this step, you create two shapes, one a basic circle for the footnote and one a circle with a pointer for the annotation. Although we use basic shapes, we use some advanced shape operations techniques.

1. Draw a circle that’s .25” in diameter and make a copy. One circle will be the annotation shape and one will be the footnote shape.
   

   

2. Draw a square that’s .25” on a side and rotate it 45 degrees. (You can do this by opening the Size & Position Window from the View menu. Select the square and type 45 into the Angle field.)
   

   

3. Position the square directly over the circle that will be the footnote shape. Make sure both the circle and the square are selected. Choose Fragment from the Shape > Operations menu. This operation breaks up the two shapes into component pieces.
   

   

   

4. Delete three of the square’s corners. Select the circle and the fourth corner and choose Combine from the Shape > Operations menu.
   

   

   
   

You’re done with step 1. Now you should have two shapes on the page: a plain circle and a circle with a pointer on it.

Step 2: Establishing a relationship between the annotation and the footnote

In this step, you’ll teach your footnote shape to mimic whatever text you type in the annotation shape. This way, if you renumber your annotations, the footnotes will automatically renumber. This step introduces a few techniques: naming shapes, inserting fields, using Visio formulas, and using Visio shape references in formulas.

1. To establish a relationship between these two shapes, you need to name them. Naming shapes is easy enough. Select the shape and then choose Special&#8230 from the Format menu. (How the name of a shape relates to Format Special is beyond me, but the nuances of Visio are for another discussion.) The Special dialog box includes a field for a name. Type a name for each of your shapes. Name the footnote shape “footnote” and the annotation shape “annotation.” This way, there can be no confusion.
   
   
2. Now, select the footnote shape and choose Field… from the Insert menu. The Field Chooser appears.
3. Click Custom Formula in the left-hand column. The Custom Formula field at the bottom of the dialog will become active. The field already has an equal sign, which lets Visio know that a formula is coming up.
4. AFTER the equal sign, enter the following formula:
   

   SHAPETEXT

   
   

5. Click OK.

The SHAPETEXT function returns the text of the referenced shape. In the function’s arguments, we have specified the name of the shape (“annotation”) and the reference to the shape’s text property (“!TheText”). This seems redundant, but the SHAPETEXT function requires it.

You’re done with Step 2. Now you can type a number into the annotation shape and it will appear in the footnote shape as well. For example, select the annotation shape and type “4”. The “4” will appear in both shapes. Be sure you type the number into the annotation shape (the one with the pointer). If you type it into the footnote shape, you will lose the Custom Formula reference and will have to re-enter it.

What is a ShapeSheet? Remember in the first Matrix movie, at the very end when Neo started knowing he was The One? He looked around saw streams of numbers, the building blocks of the Matrix – at once a terrifying and awe-inspiring view of the world. A ShapeSheet is to a Visio drawing as Neo’s view is to the Matrix: the numbers behind the façade. (Coincidently, I’m terrified and awestruck by Visio.) Any given shape in Visio is described by a collection of formulas. These formulas are captured on the ShapeSheet. When you adjust a shape – change its height or format the text, for example – you are actually changing the formulas behind the scenes. In some cases, it makes more sense to adjust the formulas themselves, and tapping the full extent of Visio’s power means becoming familiar with ShapeSheets.

Step 3: Changing the behavior of the annotation

The shapes as they stand right now are pretty useful, and will make the internal bookkeeping of wireframe annotations a little easier. This last step will make the annotation shape more elegant. This step introduces several techniques related to ShapeSheets, the backbone of any Visio drawing.

There are three adjustments you need to make to the annotation shape: the text block, the shape rotation, and the orientation of the text.

To adjust the text box, select the shape and then choose the Text Block Tool. You may have to click the arrow next to the text tool to find the Text Block Tool. The Text Block Tool allows you to change where text appears relative to the shape. By default, the text block occupies the entire rectangle of the shape.

With the shape selected with the Text Block Tool, change the shape of the text box to occupy only the circle, dragging the right-hand handle of the rectangle to form a square over the circle. Now when you type text in the annotation shape, it will appear centered on the circle.

To adjust the rotation, select the shape and then choose the Rotation Tool. Notice that the center point is not centered on the circle. This is because the default formula for the rotation point is the geometric center of the entire shape. Move the pointer over the center rotation point. The pointer will change to a small circle.

Click and drag the rotation point to the center of the circle.

Now test the rotation by grabbing one of the rotation handles (the green circles at the corners). The shape will rotate around the center of the circle.

Notice that the text rotates with the shape. By default, the rotation of the text block matches the rotation of the shape. To correct the orientation of the text, we need to adjust the angle of the text block, forcing it to stay absolutely zero regardless of the shape’s rotation.

To adjust the text orientation, you need to make a change in the ShapeSheet. First, select the annotation shape and then choose Show ShapeSheet from the Window menu. The screen will split, with one part showing the original drawing and the other part displaying the ShapeSheet of the annotation shape. A ShapeSheet is made up of sections. Each section addresses a different aspect of the shape and appears as a table made up of cells.

The cell that controls the rotation of the text is in the Text Transform section. Scroll through the ShapeSheet until you find this section. If you cannot find the section, you may need to add it to the ShapeSheet: right-click in the ShapeSheet and select Insert Sections… from the context menu. Be sure to right-click in the dark gray area. Put a check next to Text Transform and click OK. (If Text Transform is grayed, that means it’s already in the ShapeSheet and you just need to have your eyes checked. This happens to me frequently. Very frequently.)

In the Text Transform section is a cell called TxtAngle. At this point it is set to 0 degrees. This may seem right, but that number is not an absolute measurement. Instead, it is measured relative to the angle of the overall shape. Therefore, the appropriate formula for this cell is:

-Angle

(Don’t forget the minus sign!) Angle is the name of another cell, the cell that defines the angle of the overall shape. Because the TxtAngle cell acts relatively to the angle of the shape, putting a negative value equal to the angle will permanently render it absolutely zero.

You can now close the ShapeSheet and rotate the annotation till the cows come home. The text will remain upright and readable. The cows, I’m afraid, may not.

Exercise for the reader You may want to lock the text of the footnote shape so you don’t accidentally overwrite the field that automatically matches the annotation text. Although Visio has a dialog box for protecting different aspects of a shape (under Format > Protection…), the shape text is not one of those aspects. There is a way to do this using ShapeSheets.

This little exercise gives you a handy tool that allows you to place annotations without losing track of your numbering scheme. The tool also allows you to rotate the annotation pointer without having to adjust the text every time you turn it. Having built this tool, you now have some experience with Visio shape operations, formulas, and ShapeSheets.