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.

Yes. A love of words makes you a better IA.

Wordnik.com doesn’t jump to mind as an obvious resource for an interaction designer.  For a dedicated Sunday puzzle solver?  You bet. Or if you have a grandiloquent and sesquipedalian consulting style (pompous and prone to long words), then this is your place – btw, remind me not to hire you.  I read Wordnik fairly regularly  and am now a self-diagnosed cremnophobic (one who has a morbid fear of being near the edge of a cliff, precipice, or abyss)  and I also know the difference between an acronym, like ACORN, and an initialism, like NAACP (one spells out a word and one doesn’t).  But geeking out on words sharpens an important instinct for anybody who trades in the design of screens-  a fetish for precision in language.   Obsessing over language will keep you from repeatedly stumbling into what  is perhaps the most common antipattern of all – vagueness and ambiguity.   Here’s three main themes to keep in mind when choosing words for your wireframes or designs:

1. The best choice for a word is the one with the fewest competing meanings.

I used to phrase this point differently.  Avoid ambiguous words, I’d advise, which lays the ground for debate on which words are ambiguous and which are not.   Entirely subjective.   But flip the phrase around so that you are identifying words with competing meanings and you have a powerful tool for analyzing language.   Name all the competing meanings for a word or phrase and the winning selection will generally have the fewest.  Period.  I learned this strategy by hearing a Wordnik.com editor discuss how new words for the English language are evaluated and selected.  Geico uses the term “Claims Center” in their global nav, whereas competitors Farmers and Allstate use the term “Claims.”  Which is better?  I’d argue Geico made the wrong choice here.  By adding the word center, they’ve introduced a competing meaning – a “Claims Center” may or may not be a physical building.  Perhaps this link leads to a listing of where the Claims Centers are located, and is not a place to file or manage a claim online.

Geico adds competing meanings by using two words ("Claims Center") instead of one (Claims).

Bad writing is bad writing. This page menu is written in such bland corporate-speak that it is almost impossible to decide where to click.

2. Interfaces often divorce words from their context, especially in global navigation.

Interface design is all about managing transitions between various contexts.  Persistent elements, such as global navigation, ride between multiple contexts.  Typically they are stripped down to their essence for this very reason.  For instance, in a book’s Table of Contents, you can contextualize each and every chapter name with a sub-heading, but a global nav on a website does not have that luxury.  With most websites, you don’t know where a user will enter into the experience, and you can’t assume anything was contextualized on a previous screen.     Navigation words therefore need to be mostly self-explanatory, since they can rely only on the context provided by the other global elements on the site – such as the name and tagline in the header.  When you remove a word from its context, it introduces more competing meanings.  The use of branded words in navigation elements is a very common usability problem.  Sports Illustrated (SI.com) has a disastrous top nav, with links like “fannation,” “swimsuit,”  “extra mustard,” and “maxpreps” that assume a lot of context which is just not present on most of the site’s pages (such as the home page.) Lumber Liquidators is almost aided by the fact that they have a very non-obvious name for a specialist in flooring. They’re forced to add global context to their top nav (lest consumers mistake them for a discount lumberyard) but it’s one way to relieve pressure from the difficult game of finding the right words.

SI.com assumes a lot of prior knowledge about their internal content branding on the part of users. The result is a poor choice of nomenclature.

Notice how Lumber Liquidators takes an unusual step of adding context to a global nav with the label "Flooring:"

An oldie but a goodie: Starbucks global nav was once an ocean of competing meaning. Since Improved.

3. An interface inherits the context of its medium, not just its subject matter.

Sometimes, competing meanings are generated by the very medium in which a word is being used.  I am consistently thrown for a loop when using my company’s travel and expense (T&E) reporting system when given the choice of inquiry or maintenance of my reports.   These words have loads of competing meanings on a website.  Does inquiry mean just open and look at the reports, or does it imply that I am opening some sort of trouble-ticket with a customer service rep?  Maintenance implies seldom used utility features on a computer, like running a batch program to clean up a fragmented hard drive,  not a user making a routine change through a web form. Certainly view or edit would have been better choices. While not the lingo used in the world of corporate accounting circles, they are the words with the fewest competing meanings on a website.

I've used this homegrown system a dozen times, yet always have to guess where to click here.

What are Anti-Patterns?

(Definition taken from Looks Good Works Well) Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four’s book Design Patterns, which displayed examples of high-quality programming methods. - Wikipedia Anti-pattern

The Independent Film Channel's home page used to be one big "Dead Zone" before they redesigned it.

Ad placements are, by definition, dead zones.   These are specific, predictable sections of a website’s screen real-estate that are subconsciously tuned out by the user as unrelated to the page’s main content and functionality.  But designers unintentionally create dead zones of their own all the time.    A classic and well understood example of a dead zone is “right-rail” blindness.  Content and features below an ad – such as in the right-hand column of a typical two or three column layout – are tuned out as ads on the assumption that everything from an ad down is also an ad.   According to Nick Gould, CEO of the design and research firm Catalyst Group, the evidence of this phenomenon goes well beyond the anecdotal.   “There is no question that right-rail blindness is a phenomenon we’ve observed in both eye-tracking and usability testing.  This is of course mainly due to the ingrained expectation that ads live there.”   And it’s not just a matter of positioning elements in a layout.  The manner in which a page element itself  is designed can greatly amplify or lessen the dead zone effect, in the worse case scenario unintentionally deactivating important content areas and features from the user’s attention.   Often this comes from trying so hard to make an element “pop” visually, that the reverse effect occurs.   “The dead zone effect is obviously exacerbated if elements below ads are ad-like in their design,” Gould says.  ”Furthermore, promotional elements that have standard ad dimensions and contain images are frequently mistaken for ads.”

Eye-tracking data shows that the "right rail" has little visual salience with users.

There is strong evidence now that users have specific expectations about where to find the most relevant information on a web page before having seen the page.  In a recently published eye-tracking study observing  usage of a broad range of web sites for both page recognition and information foraging tasks, the right-rail blindness phenomenon was dramatically confirmed.  (see Bushcer, Cutrell, & Morris 2009) “It is striking that the entire right side above the fold is neglected for both information foraging and page recognition tasks.”    The eye tracking data reveals that users are looking at the right rail, but the “fixation impact value” (a computation that correlates fixation length with the amount of visual information processed) approaches zero.  According to Gould, “This all relates to visual salience – which is more about an unconscious assessment of what’s relevant and what’s not that occurs pre-cognition.  A variety of design, placement, and relative size/shape issues can contribute to items on the page not being deemed salient.”

Netflix consistently avoids "Dead Zones" with careful use of white space and "Functional" looking design cues.

As a predominantly qualitative researcher, these eye-tracking findings do not surprise me.  I’ve frequently observed that small differences in visual design and placement can have a dramatic effect on a user’s perception of whether they should pay attention- not to mention interact- with a page element.  Most of us who work on commercial websites have to balance a colorful, branded look while simultaneously creating a usable interface.   I’ve observed a few tricks over the years.  For instance, promotional elements that have an interactive “call to action”, such as a blank zip-code field in a registration opt-in promo, will outperform a straight image & copy version of the same message.  Netflix.com are masters of working with a heavily branded design full of bold, contrasty elements, yet systematically avoiding the creation of dead zones with careful use of white space and  “functional looking” design cues.

Original page layout (with CramCast ad) on cliffsnotes.com

I find myself conflicted (not to mention confronted by other stakeholders) with a desire to make something “pop” and the counter-intuitive, opposite notion that an integrated look is the key to discoverability.   We recently ran a multi-variate test on www.cliffsnotes.com to test the hypothesis that elements with a more “integrated” versus “ad-like” design perform better in right rail placements.  It was my first dabbling with the free tool Google Website Optimizer (GWO) – which turned out to be one of those “Where have you been all my life?” moments.   In the Cliff’s Notes test, we took an existing internal promo on the site for a podcasting series called “CramCast,” which was designed as a standard 300 by 250 ad, and redesigned it in a style more consistent with the existing functional right-rail modules on the site.   We made no changes to the copy or the photo between variants.  The positioning on the page was exactly the same.  The only difference was the look and feel.  Then we ran both versions in a split-traffic test on the live site.

The integrated look outperformed the original "Ad-Like" look by a narrow margin of 6%.

The integrated version did outperform the ad-like version, but not by a huge margin – only a 6% improvement.  (We got about 30 more clicks per 200,000 visitors with the Integrated look.)  It was not worth our time to redesign the creative material for that campaign, but certainly good counter-evidence the next time someone says something doesn’t pop enough.   What we couldn’t get at with GWO was whether the integrated look, since it replaced the traditional ad placement and cast less of a shadow on the user’s salient zone,  helped to activate the entire right rail.  This is the more interesting question.  After all, the worst dead zone problems are when multiple ad-like elements conspire to deactivate entire regions of a page – such as the old homepage design on IFC.com (pictured above.) In this design,  multiple ad-like features are interpreted sub-consciously by the user as one big ad area, and important content features (such as the programming schedule) are overlooked.  In our  next A/B test here, we’ll have to monitor the clicks outside our variants as well, perhaps with the advice of someone who is an expert with these tools – like Avinash Kaushik or Marko Hurst.    If anyone has done any research on this issue, or can point me towards soemthing else to share here – please comment on this post!

What are Anti-Patterns?

(Definition taken from Looks Good Works Well) Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four’s book Design Patterns, which displayed examples of high-quality programming methods. - Wikipedia Anti-pattern

Me: Hi Anna

Anna: That’s me! How can I help you?

Me: We’re thinking about getting some outdoor furniture.

Anna: Sorry, but that’s an object that I don’t really know enough about to be able to comment on. Let’s talk about something else…

Me: Well, ok.  What would you like to talk about?

Anna: As an IKEA Online Assistant, I am committed to customer care and dedicated to on-line customer support; that is why I chat with customers like you.

Me: Ok Anna, sounds good.

Anna: That’s me! How can I help you?

Me: I’m also having trouble assembling my coffee table.  I lost the allen wrench that came with it.

Anna (abruptly ends the conversation and automatically connects me to the coffee tables category landing page at ikea.com)

Firefox 3.5's "Well This is Embarrassing" Error Message

Anna has a Facebook page with real friends, despite her questionable listening skills.  In fact, the artlessness of her AI has led to a cult following and snakes-on-a-plane style fame for the perky automaton.  This must explain the feature’s continued appearance on the Ikea site for almost 6 years despite being nearly useless.  But far more subtle uses of anthropomorphism appear elsewhere, raising the question of whether this sort of thing is ever a good idea for an interaction designer.   Firefox 3.5 expresses real emotions, such as regret and embarrassment when it crashes or otherwise must display an error message.  Gmail goes “grr…” when it’s upset.  Users already have a tendency to ascribe human properties to machines that frustrate them (as in “maybe this printer won’t work because it’s tired. I’ll give it a rest and try later”) – should we really be encouraging this behavior by designing machines that express human frailty, weakness, and emotion?

Twitter Uses Imagery in Error Messages to Be Human without Playing Human

There’s a difference between designing things on a human scale and pretending to be human.  Error messages should certainly be clear, transparent, and not filled with off-putting programmer nonsense – but they should communicate the real problem and help bridge the gap between a user’s mental model and the actual system image that’s running behind the scenes.  Twitter writes clear concise error messages and even goes the extra mile of adding visualizations to help users understand what the issues are. When the Twitter servers are overloaded and the “too many tweets” image is served (and this happens a lot, in my experience),  I find that I’m quite forgiving of an issue that would normally serve to forge a lasting image of unreliability.

What are Anti-Patterns?

(Definition taken from Looks Good Works Well) Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four’s book Design Patterns, which displayed examples of high-quality programming methods. - Wikipedia Anti-pattern