Harnessing the Power of Annotations -- An Interview with Dan Brown

As designers, we rely on communicating detail to our teammates and collaborators. Sometimes a picture is a thousand words, but often, we need more words and explanation to make those diagrams effective.

We had a chance to sit down with Dan Brown, the co-Founder and co-Principal of EightShapes, to talk about his experience with creating successful annotations. Here's what he shared.

UIE: You've mentioned that annotation is a powerful way to add value to a deliverable. What sort of things do you annotate?

Dan: To define our terms, annotations usually refer to the words adjacent to a picture that provide further description of the design or concepts. The words should complement the picture, supplying an appropriate balance between show and tell.

Annotations come in all shapes and sizes depending on the artifact and the intent of the document. People are probably most familiar with wireframe annotations, where the author calls out areas of the screen to describe functionality not immediately discernible from the picture alone.

Words alone may provide good detail but may lack the singular clear message that a picture has. On the flip side, a picture alone may gloss over details and nuance in our design concepts. Working together, words and pictures can provide a comprehensive view.

I annotate other artifacts beside wireframes: flows and concept models, for example, can benefit from the additional detail. Like with wireframes, these annotations might capture specifics around functionality, or they might provide context absent from the picture itself. For example, I created an experience model recently that spells out the various kinds of screens available within a client's product. The model showed how users navigate between these screens, but the annotations adjacent to the model explained why these screens were important and how they fit into the product's overall strategy.

UIE: Do you have a method for it? Or is it just a brain dump? Do you try to make the annotations tell a story, with some kind of narrative? Does it depend on the goals of the document?

Knowing the document's objectives and target audience at the outset can set the tone for the annotations. If you're just trying to get the experience across to product owners, broad descriptions may be sufficient. For example:

3. Takes users to the article page.

This refers to area 3 of the wireframe, and indicates that clicking the link in area three takes users to a different page — not a huge mental leap. The annotation does add value because it clarifies the destination for the link, which may not be self-evident. Creating a document for developers, where greater detail is warranted, the annotation might include information about the number of characters or what field in the database the link text is drawn from.

One thing to keep in mind is that annotations, like the pictures themselves, will evolve over time. Your initial set of annotations may be as broad as the example, but as the product takes shape and as you learn more about the requirements, you can refine those annotations with increasing detail.

Our method is pretty straightforward. EightShapes uses Adobe InDesign to prepare documentation. One advantage to InDesign is that it allows us to separate artwork (say, a wireframe) from the document itself, so the artwork lives in its own file. We place the artwork into the document. It remains linked, so any updates to the artwork itself are reflected in the document.

Once we place artwork into a document, we then add markers — small circles with numbers or letters. Placing markers is an art in and of itself: they need to appear adjacent to the interactive element in question without obscuring it and they need to clearly indicate which element they refer to. Additionally, you need to decide the scale of your markers. You can use just a few markers to refer to broad areas of the page or you can use lots of markers to account for every element. These decisions should be driven by the overall purpose of your document, your audience, and where you are in your process.

comments

Useful article?

 Email It      

Follow @cmswire

Related Articles:

• Umbraco 5 Web CMS Dumps XSLT Support, Takes on Razor
• Do SharePoint & Silverlight Have a Future Together?
• Open Source Web Server nginx Passes IIS in Popularity

Tags: annotations, dan brown, information architecture, jared m spool, user experience, web design, web development

As designers, we rely on communicating detail to our teammates and collaborators. Sometimes a picture is a thousand words, but often, we need more words and explanation to make those diagrams effective.

We had a chance to sit down with Dan Brown, the co-Founder and co-Principal of EightShapes, to talk about his experience with creating successful annotations. Here's what he shared.