Make annotations your friend
Whether you love them, hate writing them or haven’t written one yet, annotations are here to stay. But before I dive into how to make writing them less tedious, I’m going to take a step back and explain what annotations are for anyone that is new to them. Annotations are detailed notes that explain how an asset functions. Think of them as footnotes for your wireframes. They help the development team build the site correctly as well as help others looking at the wireframes have an idea of what the site out come will be.
From that definition, annotations sound simple. For the most part, they are. What makes them difficult is that they can be written in a way that isn’t very clear and where the target reader has been forgotten. Usually, when we are writing annotations, we are writing them from the perspective of someone that is also in tech. This makes sense because most of the time, the development team have been a part of the project since it kicked off. However, there may be times where they weren’t a part of the kickoff meeting, someone new joins their team or a stakeholder will want to be involve in the process. When this happens, your annotations will need to be very clear and written in a way that someone entirely new to the project and non technical can understand them. While writing them this way can be tedious, it doesn’t have to be.
Here’s how to write them in a simple way:
Make sure you keep your annotations numbered in the way the asset appears in the layout. Whether it’s from top to bottom or left to right. You want to make it easy for someone to scan over an asset and then look to the right and find the annotation for it without second guessing it.
Explain the function in a clear and precise way. Ex. On click/ On tap CTA button opens [insert page title & number it is on the site map] .
For assets that have more than one functionality, keep the numbering consistent. Ex. A video component with a modal that expands when it is clicked and has a transcript link that will expand when it clicked. Your annotations may be read as :
1.0 Video Component :
On click/ On tap video modal will expand.
1.1 Video Component Transcript Link:
On click/ On tap video transcript will expand.
When expanded, On click/ On tap video will collapse.
Writing them in is this format helps to alleviate confusion and overload for the readers while also giving them enough detail to understand what is meant to be happening.
I hope this helps. Until next time, happy wireframing.
-Nita