Design Eye for the Usability Guy 
May 18th, 2004
Last Monday, to much fanfare, Nielsen published the second part to his guidelines on the display of links. I was as shocked as anyone by it. He actually made sense!
Well, color me paranoid. I’m at loss. Beyond the awkward language, beyond the retina-burning presentation, and beyond a few misused design terms, I actually got from the King of Usability what I have been asking for all this time.
Life is good sometimes.
So, as you can see, I’ve implemented a few of the suggestions found in Nielsen’s Alertbox. I have added dotted underlines to my links, even though they look like shoddy, gnarly dashes in Internet Explorer, and I’ve changed the color of visited links to be a darker shade of red to distinguish them. I’m getting religion.
Further, in the spirit of sharing, I decided I’d gather up some knowledgeable designers and help Nielsen in return with a little bit of design advice. The Design Fab Five, right here, right now.
You know you’re going to love this.
Real Player, QuickTime Player, or Windows Media Player.
Cue the music please!
Andrei: Talk designer to me!
I’m going to start this little makeover excursion.
Let’s all agree on a simple premise for the sake of discussion: Content is king. No argument from this guy. With that in mind, it’s safe to say that great design with shoddy content is effectively shoddy design. As a curmudgeonly elder statesman once told me, “You can’t make [expletive] taste like chocolate cake no matter how hard you try, so you’d best not start with [expletive].”
Now, let’s not jump to conclusions. The content of Nielsen’s latest Alertbox is not [expletive.] It’s actually very reasonable. (Who knew!) Given how Nielsen has discussed issues in the past, one could even say his latest Alertbox is down right diplomatic.
However, the language could use some tightening. Nielsen needs to take his own advice and cut his own contribution to information pollution. While he’s at it, he should drop all the psudeo-scientific mumbo-jumbo. Talk to me, man. Straight up. Whip that content into shape and make your audience take notice by the sheer, razor-sharp clarity of it all.
For example:
Don’t underline any text that’s not a link, even if your links aren’t underlined. Reserve underlining for links. Because underlines provide a strong perceived affordance of clickability, users will be confused and disappointed if underlined text doesn’t have an actual affordance to match this perception.
Uh… Yeah. Got it. I think.
Beyond the tongue-twisted, mind-numbing awkwardness of the phrase, also note that Nielsen tells us what designers can’t do. Bad move. Telling any creative professional what not to do just invites them to do it. Creative professionals are often creative because they like to challenge the rules. Buck the system. Try new things. If you’re a usability person looking to get things done with these anarchist, right-brained types, don’t play a game of chicken with them.
Look at the difference when this guideline is stated in a more straight-forward manner, using a positive approach:
Use bold or italics for emphasis with text that’s not a link. If you are going to use underlines, reserve the technique for links. Underlines on the web have a general expectation to act like links, and users will be confused or disappointed if underlined text doesn’t match this expectation.
Compare the two write-ups, and see how effective you can be with nothing but language. Here’s Nielsen’s original language, and here’s the rewrite.
The world is a better place when people speak in plain, positive terms. Keep it sharp, keep it to the point and keep it real.
Didier, take it over my friend!
Didier: People read it for the articles
Ah yes, my turn now.
First of all it’s 2004, not 1996 — so let’s keep it real while adding some flavour and style to that otherwise wonderful and intelligent content.
Ahem.
Last time I checked it wasn’t illegal to use illustrations to spice up your web site. Now, before we go wild let us remember that Nielsen’s not exactly the nothing-but-prada-shoes type of guy. So, I settled with a clean, icon-like style that will reinforce each guideline visually. The colours used are basic: red for links, blue for hover and shades of gray and black for other text. Again, let’s try to stick with a style that somehow matches his current branding.
To translate the general concept of links into something simple I’ve chosen to use an underlined letter “a,” applied to an assortment of situations that exemplify each guideline. The font used is Georgia, which happens to work nicely and is very much ubiquitous.
Aie, aie, aie! This is already becoming too hot to handle! Focus…
What’s the point of adding illustrations? Oh my, I’m glad you asked. First of all adding illustrations creates a natural seperation between the individual guidelines, therefore improving scanability. (Yup, that’s an awful word, but it sounds expensive, so let’s keep it.) Second, illustrations and graphics are quicker to comprehend at a glance than reading text. Although images do not replace well-written copy, they can significantly add to the overall style and experience.
‘Nuff said! Respect.
Ok, over to you D. Keith. Take us online…
Keith: Straight up web design
Yes, my friends… It is me. D. Keith Robinson. Keith to you.
First things first. We need bring Nielsen’s code into this decade. What we’ve got now is soooo 1998. Jakob should start by taking the doctype from shabby old HTML 4.0 Transitional to a shiny new XHTML 1.0 Strict. That’ll set the stage for a supreme makeover.
Useit.com and the articles need a better underlying structure. They’re all a little bloated. So let’s strip it down and make it svelte! Andrei has already reworked the document verbally. Didier has created illustrations. Now we just need to add a little semantic markup and remove unnecessary legacy tags.
There’s a small tag in there! Come on, Jakob, what the hell is that? Out with inline styles, the table and useless span tags and in with some meaningful markup.
Beautiful.
Meaningful markup will constitute a few headings, a few paragraph tags and a definition list for the bulk of the document. After all, Jakob is defining a number of guidelines. Now the document makes perfect sense regardless of display or style. A document for all seasons!
To those definition titles I’d add a simple ID element so that if someone wanted to refer to (link to) a specific guideline they could do that. While I’m at it I’d add a variation of David Dorward’s JavaScript highlight code to highlight those titles when someone hits the page via an anchor link.
Then we’ll need to make sure the heading, title and breadcrumbs also reflect the same information, in this case the title of the document. I’m not sure why Jakob wouldn’t have done that, but we’ll fix that for him. A good document begins with a fabulous title, does it not?
While we’re at it we need to do something about the readability of the page. It’s not horrible, just a bit sprawling and a bit awkward. (Ok… it’s horrible.) Andrei’s rewrite took care of some of that clunkiness. I’m going to take care of the rest. I don’t want to go overboard, considering Nielsen’s audience, but let’s liven it up a tad, shall we? Go with a centered, flexible layout constructed with ems. Set the outer wrap to 35ems and then set the width of the content area itself to 31ems. This should allow for an almost ideal line-length for readability at any font size. Of course all text will be set to percentages so the user can override if needed.
Now for some other design details. Let’s rework the fonts and margins. For fonts I’m thinking Verdana, a nice readable sans-serif for body copy — after all were talking Nielsen here, don’t want to get too crazy — and perhaps Georgia for the headings. We can add some line-height to make them easier to read, call out the summary with a style to give it a light shaded background and add a little border between the navigation and the content area. Tweak the padding and margins a bit and we’re home.
That should do it. Check out the result. (Don’t forge to compare the source code for Nielsen’s original page versus this redesigned version.)
A cleaned up, more structured, more readable — and if you ask me — more usable, Web document.
Cameron, over to you.
Cameron: Bring on the ink
Yes, ’tis me. When Andrei emailed me, I had to ask “Alertboxes in print?” I guess if you’re going to make proclamations that designers can keep handy, posted somewhere in their cubicles, then a printed version would be perfect. I’m game for a stellar makeover. Let’s dive right in and name this creative creature.
“Alertbox Sheet?”
“Alertbizzox?”
Hmm. Perhaps not.
How about “Quickcard?” Simple… Understandable… Right on.
We’ve already got content, so let’s talk page size. A4 and 8.5″ x 11″ just don’t say “quick.” 4″ x 6″ is sexy but will make for small type. So let’s roll with a 5.5″ x 8.5″ postcard size, front/back, four-color process. Uber conventional. Not too large to be cumbersome, and small enough to fit nicely inside every designer’s copy of “Designing Web Usability.”
Beauty.
(Note: That’s Andrei’s desk, not mine. But what the?… Wine? The designer’s secret is out.)
Type is next up on the chopping block. Type, type, type. Arguments are bound to fly at the mere mention of the word. Jakob is all about convention, so let’s play it safe for headings: Helvetica Neue, Linotype’s rework of the classic Helvetica typeface. And since you’ll never go wrong with a sans-serif for headlines and a serif for body copy, let’s toss in ITC New Baskerville — dates back to 1752, also reworked by Linotype — for content.
Hold on there for a sec before we fire up the doc. A few warnings. Don’t fall prey to Helvetica Neue Condensed. Superb typeface, but a little too trendy. And watch out for large body type. I know small type takes heat for good reason on a computer screen, but nothing screams “children’s reading” in printed form faster than large type. 9pt should size up fine. Oh, and use justification with caution. Exhilarating to use in print, but give the eye a chance to breath with some staggered line breaks.
This piece is shaping up to be hotter than George Clooney in Giorgio Armani garb. To die for. But I digress.
Color palette? Piece of cake. Hues of yellow and red similar to Useit.com (let’s lose the aqua, Jakob), with a dash of grey to distinguish back from front.
Only thing left now is content structure. We could endlessly debate scanning versus reading, but let’s assume screen captures and illustrations will run large for various quickcards, and itemize each guideline in plain copy on front. Artwork goes on back. Besides, no one will break a sweat flipping the card over.
Perfect. I couldn’t have planned it better. But then of course, isn’t that why I was hired? Check out the PDF file yourself.
Didier? You got something more?
Didier: The “F” Word
We’re not stopping here. I’m just warming up. Make some noise!
Gimme an F, gimme an L, gimme an A, gimme an S, gimme an H.
F-L-A-S-H.
Oh yeah baby… We’re ghetto now.
You know it’s true — Flash is sexy. It’s like a Philippe Starck gizmo, you gotta have one. But let’s be clear, I’m not talking about a forever-loading-technomusic-[expletive]-intro here. It’s not 1996 in that respect either. I’m talking about sensible use of Flash.
How about an educational approach? An interactive presentation that will nicely illustrate each guideline, while at the same time keeping usability and file size in mind.
Ok Greg… I’m really done now. Your turn!
Greg: That Designer POV
Useit? Good gravy, Marie.
Let’s start with the topic — Make links blue. Holy [explicative], who knew?! It’s not like we haven’t beaten this like a dead horse or anything. Jakob, I got it the first and second time — before the new millennium. The science of blue links isn’t new, so why not label this “Alertbox” with a more appropriate title like “Classic Alertbox”. It even sounds better.
Moving on to much more important matters, let’s address the obvious, glaring problem with Useit — the lack of presentation and style.
They say that clothes make the man and in my experience it’s true. When I walk into a store with a nice Joseph Abboud suit and a pair of Alan Edmonds, I’m given prompt attention and addressed as “sir.” If I go back in the same store with flip flops, shorts and a t-shirt, I have to ask for help twenty times and “sir” is completely dropped from the conversation. It’s a matter of style and sophistication. If I look like a million bucks I get million dollar treatment. Otherwise I get the welfare-free-bowl-of-soup attitude.
This same principal can be applied to Useit.
Take a look at what the boys were able to do with Jakob’s content and tell me you wouldn’t prefer their Joseph Addoud over Useit’s shorts and t-shirt.
I mean why is it that so much usability material is presented more like the Boeing Flight Planning Performance Manual than an airline safety card? Seriously, what’s with all the damn text? How can anyone possibly write about design and not provide a visual aid or two?
As a designer, I would take Jakob’s guidelines more seriously if I saw any indication that he took design seriously. As it is, anytime I read Useit I feel like I’m being talked down to by an overworked and underpaid engineer with a chronic smoking habit from circa 1950 IBM.
I won’t even go into the sideburns thing.
Wrap up
So there you have it folks, the very first ever Design Eye for the Usability Guy. Some solid tips on how to take your content and design from drab to fab. To review the deliverables:
- The original Nielsen Alertbox
- Andrei’s rewrite of the text
- Didier’s illustrations and Keith’s redesign of the Alertbox web page
- Cameron’s print version of the Quickcard
- Didier’s bonus Flash version
- Greg’s inspiration from “A Better Tightey Whitey”
And yes, that’s them and they wrote their pieces. I’m not Shirley McClaine you know. Also be sure to check out the original Useit redesign contest at Built for the Future.
Remember all you usability folk in the audience, if you’re not a designer or don’t play one on t.v., there’s still hope! Just hit the design blogs of the world and take notes. A large part of good design is simply about effective communication, which is one part what you say, one part how you say it, and one part how good you look while saying it.
Seriously though, if you really do have something important to say, why not take just the smallest amount of time using fundamental design principles as exemplified here to make sure your content is clear, effectively communicated, and engaging?
Your co-workers and design peeps will love you for it.
