When annotating a wireframe, which side do you put the picture on? And, more importantly, are you doing it right?

Information architects devote much time and care producing annotated wireframes. In large part, this boils down to positioning pictures (i.e., a wireframe) adjacent to words (i.e., the annotations) to tell a story that neither could tell completely without the other. Annotations commonly describe behaviors, states, content, and other properties of a wireframe page or component, and generally the two are mapped together via call outs (lines connecting the pictures and words) or markers (number or letter references placed on top of the picture).

Over the last two years as a part of over 15 documentation system engagements, I’ve reviewed over 1,000 deliverable documents produced by over 100 user experience professionals. Over 70% of the documents were produced by information architects or interaction designers, and over 50% of their documents were some form of annotated wireframes. To be clear, I’ve seen A LOT of annotated wireframes from many different people.

So, how does everyone layout a combination of wireframes and annotations? There were a few samples that positioned wireframes above the annotations, and the layout seemed fresh and inventive only because it was so rare and broke a predictable pattern. What pattern? The overwhelming majority positioned wireframes and annotations side by side.

Why side by side?

Generally, due to the variable height of both wireframes (generally, in some sort of rectangular shape) AND annotations (generally one or more vertical columns of flowed text).

Put one on top of the other, and you can’t predict page-to-page where to find the one on the bottom.  If there’s even room on the page given the height of the other.

Plus, imagine viewing the page in Acrobat (most deliverables are published as PDFs). Depending on how the document opens and other factors, the piece on the bottom may be below the visible portion of the page.

I also suspect, although I reference no scientific basis, that humans are more adept at shifting their vision from left to right and back again than bouncing up and down. That is, they can map and compare wireframes and annotations better when side by side rather than stacked. Survival instinct to scan the horizon, perhaps? I digress.

Which appears on the left more often?

Overwhelmingly, the wireframe picture is placed on the left, and then annotated on the right.
Despite the best efforts of one team — who otherwise used highly structured templates and had mature wireframing technique — to persist a template with annotations on the left, there were even rogue examples within documents that shifted annotations on the right. It was as if someone started from scratch 50% of the way through, and the remaining pages flip flopped the display.

Beyond that unexpectedly erratic layout, every other team that submitted more than 3 to 4 annotated wireframe documents put the annotations on the left, in every sample.

Why put the wireframe on the left?

Priority: It doesn’t matter how tight, scannable, and usable our annotations are. Consumers look at the wireframe before the annotation, always, no matter what. So put the picture on the left so they can read — as they’ve always be trained to — from left to right across the page.

Timing: I can’t think of an instance where I started writing annotations without having at least an initial version of the wireframe to annotate. Often, I’ll create and publish a document with only the wireframe, without annotation. Wouldn’t it look odd to put the wireframe on the right, have no content on the left, but most likely retain the page title (and potentially other document information) in the customary upper left? What if you started with the wireframe on the left, but once you start adding annotation, moved the wireframe to the right? Hogwash.

Appearance: By placing a nearly always rectangular wireframe shape (usually enclosed in some type of overall frame) to the left of left justified annotations, you achieve a sharper, more structured, and connected layout. That’s in contrast with a ragged right display of left-justified annotation text to the left of a wireframe’s frame, resulting in a unpredictable negative whitespace that is visually unattractive.

“Dude, why are you asking this question? You need to get out more.”

Earlier today, I finished facilitating a grueling but rewarding 1.5 day training session by presenting the best deliverable I’d ever produced. It was glorious, highlighting layers of modular wireframe reuse, detailed but usable specs, and rich stories of workflow and creativity. It was inspiring, leaving attendees encouraged to research, “usability test,” and ultimately deliver documents designed best for those who will consume them. It was as if I concluded with a rousing “go get ‘em!”

But the document was ~3 years old, and barely preceded my creating a more formal system of templates & techniques for UX deliverables that, among other things, assumes wireframes go on the left. So many good principles were evident in my sample I shared, and the document was nearly visually indistinguishable from the system. But I noticed 2/3 the way through, in a “Huh?” moment, that all my wireframes were on the right. It stopped me cold.

Did the document fail? No way. But I knew right then, even the best deliverable ever made — by the pontificating “expert,” no less — could have been better. And that was the best lesson I taught that entire session.