Solid State UX

IA's Should Make Aggressive Use of the Red Pen on Wireframes & Designs

Two weeks ago, I wrote about precision in language and presented a strategy to identify competing meanings for words used in UI nomenclature.  Today, I’d like to focus on storytelling and the crucial art of editing.  If you are an Interaction Designer or a client or teammate of one who has a case of periphrasis,  you should order a big, fat red felt marker immediately so you can attack the wireframes you are reviewing with the zeal of a stingy New Yorker editor.

The first thing the ESI designer and NYU instructor, Frank Migliorelli, teaches his introductory interaction design students is the craft of 50-Word fiction.  This is a brilliant move for a couple of reasons.  One, it doesn’t appear to have anything to do with interaction design at first – and therefore it is provocative and gets the class’ attention.   Two, it emphasizes brevity and precision in written communication and therein unlocks the magic of negative space between words.   Boiling things down to their essence is what separates design thinking from other types of problem solving, and 50-Word fiction instills a sense of confidence that a whole lot can usually be removed while still getting the main points across.   And trust me when I say a whole lot…  here’s a recent winner of a 50 word Crime Noir fiction contest called Untitled, by mstrust:

“It’s done?” she asked.
He had a photo as proof. She looked closely. Held out a bag.
“Killing his girlfriend was cheaper.”
“You hired someone else?” He sounded hurt.
“Simple job,” she smiled.
He shook his head.
“Scorned women keep me in business.”
“Hits?”
“Arrests,” he said, pulling his badge.

The antonym of periphrasis – meaning circumlocution, or indirectness in speech but expanded in our definition to include other kinds of web design vernacular – is concision.  It is not simplicity.   Simplicity, as Don Norman has written, is highly overrated.  But no critique of a design has ever bemoaned the presence of concision.   In what ways can an IA get all noodly on you?  Well, it’s more than just with the words they use.  If you’re not careful, you might fall for one of these tricks:

1)  Proustian screen instructions

In my latest piece of 50 word fiction I just told a story with character development, a plot twist, climax, and ironic denouement in less words than it took you to tell me where to find my credit card security code.   Bokardo has written a nice post about website “microcopy,” although I’d argue that some of this copy in the examples used  isn’t so micro.    A good rule of thumb is that people basically read nothing when they are interacting with a form or navigation element.  But a  few words of something useful just might stand a chance.

Good Example of micro-copy on a form element. Short and to the point. Source: Bokardo

Microcopy that's now macrocopy. It doesn't matter if the message is important if users tune it out. Source: Bokardo

2)  Work share agreements between labels, buttons, and breadcrumbs

Not even the Broadway stagehands in Local 1 have such a cushy gig.   Five labels standing around doing the job of one.

It wouldn't be fair if I didn't pick on my own company's website every now and then. We're redesigning this page as we speak.

3) Downdare text

As in ‘please click on one a ‘dem links down ‘dare.    (Note: disturbingly, over a thousand pages in the google index have the exact text string “Please click on the links alongside.”)

In the year 2009, it is not necessary to tell a user to click on a link in words.

Asking people to click to get started is a common landing page pitfall. Some even repeat the left nav options in the middle of the page as a space-filler.

4) Close-packing Feature Boxes

Retailers call it closepacking when shoving a bunch of product together on a retail shop floor – part of their tradecraft no doubt.  Why does this so seldom work on a website?

Circuit City close-packs feature boxes on the home page like they used to pack products onto a shelf in their (now gone) stores.

All sorts of feature boxes that all sort of sound the same. What does this page communicate as a result? Not much.

5)  Images Speak Louder than Words , so Why Didn’t that Stop You from Writing it Out Too?

Good God, man.  You’ve gone caption crazy.  You’re so used to slapping your lorem ipsums in there that the wireframes are starting to look unbalanced without them.  But keep in mind that when the site goes live, someone is actually going to write some (probably banal) copy to go in there.

Some captions from Epicurious.com that are virtually information free.

6)  Errr…. Duh!

Yeah, you know I figured that’s what you meant in the link name itself.  But thanks for the flabby, overlapping description anyways…

AA adds clutter to the page in order to state the obvious.

7) Martinetism

Is someone going to sue you for ecommerce malpractice if you don’t put every last little warning in the UI?    This sort of addition to a design comes from team-members who specialize in risk aversion, not user experience.

8) Color-commentary Annotations

IA deliverables themselves, such as wireframes and other specifications, also benefit from the editor’s pen.   Annotate the following – If it’s a link or button, what happens when someone clicks it?  If it’s an element that might need to scale (e.g. far fewer or more items than represented in the wireframe), what happens to the screen?  That’s probably enough (until the programmers start asking questions, at least.)   Here’s a good example:

Good example of concise and consistent annotation. Source: The "Droplets" annotion style was showcased in Linowski's Wireframes Magazine.