Make Useful Annotations

wireframe_RE001-1
Example by JMparada

The Challenge

Wireframes. UX professionals are quite used to and comfortable creating these, however annotating meaningfully is still a major challenge for many.  This is extremely valuable when the development team is not a few feet away. In my context, they are thousand of miles away in other countries.

Learnings

Now, I love to tell stories about how everything connects in the world, but a developer who has a deadline has no time for this, maybe after work in a pub. Learning how to write useful annotations has been under the guidance of very helpful ‘bosses’ who would edit my work, and we would extract what was most valuable depending on the audience or context.

Things to be mindful of;

1. The Audience - Who am I communicating to? What do they need the wireframes for? are some questions to ask yourself. One good rule is to drop technical speech and describe things in the plainest way possible, in a language that most can understand.

2. The Use - Currently some of my wireframe documents double as a technical documentation for developers, so there’s a lot of revision being done constantly. These updates are necessary and very helpful especially when a new developer or designer takes over a task. You should be prepared to make any change and keep a note of it.

Going Further

I started to think about how to make annotations work harder after an issue that made me point the developers to a particular implementation solution which was done via email. I thought I would have saved everyone’s time if I had just put this in the wireframes.

So annotations go from just describing the interaction but also suggesting possible ways to implement the interactions. Even if they cannot build it that way due to one reason (technical constraints, time limit, low resource ) or the other, It creates an open and collaborative environment where everyone learns to help each other.

An example would be a scenario where you want replicate the Amazon flyout menu. You can describe it, but it would be useful if you can point them to an implementation method like Ben Kamens’s breakdown 

Stay Curious.

About these ads

8 thoughts on “Make Useful Annotations

  1. Hi,

    Beautiful site!

    I scan my wireframes, then open in PS and use the ‘Axure Handwriting’ font with arrows to annoate. The arrows I found are from the adobe exchange, that I install and select from brushes palette. This has a real authentic look when combined, and is quick to maintain.

    • That’s interesting, you say it’s quick but it looks like some work.
      The thing about using handwriting is, not everyone will understand your alphabets but an A in times new roman is largely universal.

      • As an example this is what I mean, when I use the Axure handwriting font in PS:

        Thinking about, it’s never going to be as quick as paper — so yes it’s not quick for everyone. I know a few shortcuts in PS so I’m comfortable using the software. Do you use this site for resources?

        http://designerstoolbox.com

      • It does look good, I’ll probably try it as well however it’s always best to go with the plainest of things to avoid confusion.

        I don’t use the site but I’m going to bookmark it now.

        Thanks.

  2. Thanks, seeing that it was posted on the day I wrote this is very nice. I really like the point about use of language in helping UX become part of the conversation. UI specifications instead of ‘wireframes’. Wireframe has a broad meaning, so it helps to be straight to the point about what you are actually delivering.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s