Day 18: Annotating Wireframes
The test of a good wireframe is how concise and detailed are the annotations.
What it is.
Annotations describe the content, state(s) and function of each element in a wireframe.
How it’s used.
Engineers read our annotations to understand what the application should do, as well as what content each component will hold.
The best test of an annotation is to hand it to an engineer and ask them to build what you’ve described. I promise, no matter how detailed your description, the engineer will have questions. If you’ve never worked with an engineer, today is the day to find one and make her your friend.
To be fair, they’re asking detailed questions because they have to program this complex idea that you’ve come up with. So they want to know everything about it, such as
- How many states will the buttons have?
- What happens if the user inputs the wrong password?
- How many character can a headline have?
- What if the headline has too many characters to fit in the headline container?
Your job is to answer all these questions before they’ve been asked. You answer them in the annotations.
It’s hard to be both detailed and concise when you write annotations. I always to to remove as many words as possible while leaving the important information. You don’t need to write complete sentences, phrases are fine.
- Start with what the thing is.
- Write what it does.
- Substitute digits for words (e.g “3” instead of “three”)
- Use basic programming terminology (onclick, onhover, input box, toggle on/off, load page, etc.)
This is the place where the main headline of the lead article will go. The author can write up to eight words before they run out of space. After that, there should be the dot dot dot to show there’s more to the headline.
Article Headline. 36 char limit. Ellipse if truncated.
A shortened part of the article should show just underneath each headline so the user can see what the story is about. If the user clicks on the headline, he goes to the article page, where he can read the whole article.
Article snippet. 136 char until ellipse. Upon click, load Article Page.
Tips & tricks.
- Use a colored number on the wireframe for each element you’re annotating.
- The corresponding number is in the margin, with the annotation.
- The only color on a wireframe should be the numbers for the annotations.
- Write short, detailed phrases with as few words as possible
Use the low-fi wires you sketched yesterday, and refine your annotations.
Practice rewriting the annotations from you wireframes. Identify as much functionality as you can. Focus on
- Separating the object’s name from the object’s function
- Write short phrases and as few words as possible
- Use basic programming terms (onclick, onhover, input box)
- Number icons to identify the annotations and the objects you’re describing in the wires
Originally published at 100days.design on July 29, 2017.