matt mcclendon

Hello!  This is the online home of Matt McClendon;
user experience leader, innovator and entrepreneur.


Why Annotations Are so Important

User experience design is as much about core interactions as it is about subconscious ambience.  Annotations are critical in defining what these behaviors are, and how they work.  It is also important to remember the audience that will be consuming the wires; many times it is project or product managers.  Not to generalize, but many times this first audience isn’t accustomed to wireframes or needs more literal explanation about what’s happening.  User experience is still in its infancy.  Others do not understand the bulk of our principles and practices.  It is our responsibility to clearly communicate the thought processes that informs our design decisions.

Annotations give us a platform to provide clear and concise explanation around our designs.  If a client doesn’t understand the design, it is easy to move down a path of biased judgment.  This can lead to a toxic situation based around subjectivity and opinion.  Annotations are a powerful tool to help keep understanding and expectations in check.  Effective annotations include:

Short, well-written explanations
Annotations need to be kept short and to the point.  A page potentially has a large number of annotations, so it is important to keep them short and easy to scan.  If a deeper level of information is needed, a more formalized design spec can be written.

Focus on the benefit to the customer
Clearly articulate how consistent interactions and behaviors benefit the customer.

Consistent use of numeric markers
Order annotations from left to right; moving down the page.  Always hang numeric markers off the top left corner of the item being annotated.

Consistent placement of annotations
Keeping annotations to the right provides a psychological forward momentum through the design spec.  It also follows the natural left to right progression people use when reading.

Annotations are generally written after final approval of wireframes is complete.  The depth of annotation should be gauged on a per project basis.  When I know offshore teams will consume wireframes, I encourage a deeper level of explanation.

A well-annotated design allows for a wide variety of people to consume the designs without having to be subjective.  It also allows our designs to self narrate in our absence.  When planning design schedules, build in around 10% to allow adequate time to annotate designs.  These additional hours will provide the time to fully explain the innovation we are creating.

Without taking the time to provide explanation of design rationale, the client can come to any number of conclusions as to what they’re seeing.  With all the time and energy dedicated to a project, misinformed conclusions are the last thing we want!

sample annotated wireframe

sample annotated wireframe

Aug 1st, 2011

1 Comment
  1. Hello are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding expertise to make your own blog? Any help would be greatly appreciated!

    Posted by: Tracie Semenick on Jul 22nd, 2012 at 4:33 am

Add a comment




This discussion is moderated according to my Comment Policy.


back to top