| OVERVIEW People are visual creatures. They look at | | | | document, the well-labeled picture becomes a Visual |
| your product, and see, for example, a button or | | | | Index. The link should be to a section of your |
| display. They want to find out about that control or | | | | document that you believe your reader would most |
| indicator. A Visual Index is a simple but powerful | | | | want to reach to get the information about that |
| document access tool that enables your Readers to | | | | U-PIP. (This is a fundamental question whenever you |
| find the information that they want. This article | | | | create an index: "does my reader want to come to |
| describes the Visual Index concept and tells how to | | | | this place in my document for this item?") Your |
| create one for your document. A VISUAL INDEX A | | | | method of adding links to the picture depends upon |
| Visual Index is a picture of your product or process | | | | the publishing mechanism for the document. If the |
| with links to the relevant information in the related | | | | document is published as: * A Printed document, then |
| document. Using a Visual Index, your Readers can | | | | use page numbers for the links; * An Electronic |
| look at the picture, and quickly jump to the place in | | | | Document, then use hyperlinks that a Reader can |
| your document that describes the item of interest. | | | | click on to follow. If the document is published as |
| Your document may include several Visual Indexes | | | | HTML, then the visual index can be an image map. |
| (the plural of "index' is "indexes" not "indices"). | | | | EXAMPLE 1: A PAIN IN MY FOOT I have a pain in my |
| STARTS WITH A PICTURE The Visual Index starts | | | | foot when I walk. If I go to a website about feet, it |
| with a picture of your product or process. There are | | | | would be very efficient for finding out about my pain, |
| various kinds of pictures to use, based on the | | | | if I could see a picture of a foot with various areas |
| product type: * Physical Product (for example, a | | | | where the pain could be. Links from the foot areas |
| barbecue or video disk recorder) Pictures of the | | | | to specific web pages would enable me to find the |
| product (all relevant views). * A Procedure or | | | | information about my specific foot pain quickly. |
| Process: A flowchart of the steps and decisions in | | | | EXAMPLE 2: PHOTO CORRECTING SOFTWARE |
| the procedure or process. * Software Product 1: | | | | Show a picture with the errors that your software |
| Screenshots of the software. * Software Product 2: | | | | can handle, before and after correction. Here the |
| Before and after images of the work that the | | | | U-PIP's are each of the photo errors. EXAMPLE 3: A |
| product does. * Organization: An organization chart. | | | | COURSE ON WRITING USER DOCUMENTATION The |
| LABEL THE PICTURE Label all the User-Product | | | | Visual Index is a flowchart for creating the User |
| Interaction Points (U-PIP) on the picture. A U-PIP is | | | | Document. Since the Course is presented in HTML, |
| anywhere that your User and the product may | | | | the Visual Index is made from an image map, with |
| interact. U-PIP's include controls, displays, and relevant | | | | hyperlinks into the sections of the Course relevant to |
| physical features of the product (such as handles, | | | | each item in the flowchart. BOTTOM LINE A Visual |
| latches, etc.). Provide a meaningful (to your Reader) | | | | Index is a simple concept. But like many simple |
| label (name) for the U-PIP. (Use that same exact | | | | concepts it is very powerful. Try to include one in |
| label everywhere you refer to that U-PIP.) Aside: If | | | | your next document. You'll be doing your Reader a |
| your product uses sounds to inform the User, then | | | | great service. |
| include a table of those sounds, what they mean, | | | | Barry Millman, Ph.D., has a Bachelor of Science in |
| and a link into the relevant area of your document | | | | Electrical Engineering and an M.Sc. and Ph.D. in |
| (describing the sound). LINK THE U-PIP's TO YOUR | | | | Psychology (Human Information Processing). Visit: for |
| DOCUMENT Up to this point, the Visual Index is just | | | | resources to help you create the User Documents |
| like any well-labeled picture of your product or | | | | that your Product needs and your Users deserve. |
| process. However, when you add links into your | | | | Visit for more articles like this one. |