Home

 

Looking for the DxF Conference?

 

 

 

Current selection

 

Next article

Previous article

 

Design

Lifestyle

Photography

Politics

 

Links mentioned in
this article

 

Design Eye for the Usability Guy Ornament 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.

Jakob Nielsen

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!

Andrei

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.

Nielsen original

Andrei's 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

Didier

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.

Design Eye Illustrations Design Eye Illustrations Design Eye Illustrations Design Eye Illustrations

Design Eye Illustrations Design Eye Illustrations Design Eye Illustrations Design Eye Illustrations

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

Keith

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.

Useit Code Original

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.

Useit Code Cleanup

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.)

Useit Redesigned Screenshot

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

Cameron

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.”

Quickcard

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.

Quickcard

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

Didier

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.

Useit Flash Screenshot

Ok Greg… I’m really done now. Your turn!

Greg: That Designer POV

Greg

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:

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.

 

Bullet

Standards rant

Repeat after me Separator Standards do not block, impede or otherwise hinder innovation. Businessmen, engineers or product managers who only care about how they want to implement technology or only care about their own bottom line are the ones doing the real damage in the larger economic picture.

Design by Fire strives to be as standards compliant as humanly possible in spite of the fact that those in charge of developing the technology, the browsers and the operating systems can't seem to to code to the W3C specification with 100% compliance.

However, even though I'm a firm believer in standards, I'm beyond sick and tired of trying to figure out what works and what does not work according to the W3C specification. So while I make every attempt to do the right thing, occasionally I'll just do what I have to get the thing working. In other words, if you run any Design by Fire URI through a code validator and find invalid markup or css, please don't bother sending me an email.

With that little rant out of the way, here are some good articles about the benefits of web standards.

And of course, there's Zeldman's Designing with Web Standards, which is easily one of the best reads from both a practical and technical point of view on the subject.

All of these sources discuss simplification of code, rapid development, smaller file sizes, faster download times, better accessibility for a larger set of users, easier code maintenance and platform scalability - all benefits of standards at a technological level. There's also some ROI discussion on using standards.

Really Simple Syndication is still a pain in the ass

Here's the RSS feed.

RSS Feed
Design by Fire RSS Feed

You should know the drill by now.

Andrei Michael Herasimchuk
Designer

Updated 2010 Separator The quick and dirty summary is that I am largely considered one of the first official interface designers hired by Adobe Systems. That is, the first one hired to do nothing but interface design across the professional product line. I worked personally on the interfaces for Adobe Photoshop, Adobe Illustrator, and Adobe InDesign.

Andrei

One of these days, I'll convince Adobe's legal eagles to let me write a book about all that I have been through while working on those products. I just doubt they'll agree to it in my lifetime. Until, then you'll have to be satisfied with the History of Photoshop, an article written by a long-time friend of mine, Jeff Schewe.

Work

Director, Design Team bullet Twitter
March 2011 - Present

Sr. Director of Product Design
Applications bullet Yahoo!
September 2009 - March 2011

Chief Design Officer, Co-Founder bullet Involution Studios
July 2004 - September 2009

Project Lead, Adobe Lightroom bullet Adobe Systems
December 2002 - June 2004

Director, User Interface bullet ePeople
April 2001 - December 2002

Director, User Interface bullet Impresse
January 2000 - April 2001

Director, User Interface bullet Mambo.com
August 1999 - January 2000

Senior User Interface Designer bullet Adobe Systems
August 1995 - July 1999

Co-Founding Member, Director bullet Specular Int'l
June 1990 - August 1995

Play

Having the opportunity to work on Adobe Photoshop and Adobe Lightroom has given me a chance to explore photography in way I would not have had access to otherwise. You can find samples of all my personal work on this web site, and unless otherwise noted, everything here is photographed by me.

For a short period of time, I was exploring a screenwriting career. I had a script optioned by Hyde Park Entertainment (a division of MGM), a studio that has since gone under. I even had an agent in Beverly Hills for a short period of time.

I enjoy playing poker on the side and find the game infinitely fascinating. I have made the final table in a few bigger tournaments. One at The Hall of Fame Poker Classic and the other at the Bay 101 Open, but no World Series of Poker bracelet for me yet. I have had the opportunity to play against some world-class poker professionals and have gotten crushed by them.

In my off time I play bass guitar and far too many video games.

Publications and Awards

Industry Awards bullet 1995-2000
Adobe Photoshop, Illustrator and InDesign have won far too many awards than is possible to list here.

The History of Photoshop bullet February 2000
An article written by Jeff Schewe for Photo Electronic Imaging Magazine. This covers the history and development of Photoshop. A copy of this article can be found here in PDF format. You can also find another copy on Jeff's web site, Schewe Photography.

Design Graphics, Cover Story bullet June 1999, Issue 46
This article covered the work I did on the redesign of the professional product line while at Adobe.

Collage with Photoshop bullet 1994
This book features 14 digital artists using Photoshop and Specular Collage. I'm only mentioned in the prologue, but the book was created to promote Collage and what digital artists were doing with it at the time. I'm still fairly proud about the book and the work produced inside of it.

Education

Amherst College bullet 1989 to 1990
Left Amherst College to start Specular Int'l

The Hill School bullet 1984 to 1988
College preperatory school.

Contact

andrei@designbyfire.com bullet To avoid getting tagged by my spam filter, be sure to create a meaningful subject line.

Colophon and other details

Design by Fire v4.0 Separator A quick overview of the design and implementation of DxF for those who care about such details.

Browser Support

If you are viewing Design by Fire in either Firefox or Safari, congratulations! You are experiencing Design by Fire in the manner it was intended. If you are using Internet Explorer 6.0 or less, you have my sympathies as you are getting a version slightly less dynamic. The reason for that is due to Microsoft's lack of support for the CSS property "position: fixed;" plus a few other things.

Get Firefox

Bottom line, Internet Explorer promises to fix these things in version 7, so in the meantime you can either download the beta for IE7 or switch to Firefox.

Typography

If you have purchased the Adobe Creative Suite, you should have Helvetica Neue installed in your font library. If so, then you are reading Design by Fire as it was intended to be read. For everyone else, you are either seeing Lucida Grande or Arial.

Fonts

Clearly, Helvetica Neue is far superior.

As for the logotype of Design by Fire, it's set using the classic Bodoni typeface, complete with ligature for that extra flourish.

Content Management System

This version of Design by Fire is managed using WordPress. So long MovableType.

Copyright Information

Design by Fire is ©copyright by Andrei Michael Herasimchuk. All rights reserved.

You may not use any material, articles, logos, essays, technical illustrations, photos or any content from this site without expressed written permission.

Design articles

This page intentionally left blank Bullet Oct 31st, 2008

Keeping up with the Joneses Bullet Aug 16th, 2007

Introducing Spivot Bullet Mar 5th, 2007

The unfortunate death of Helvetica Bullet Oct 23rd, 2006

An Open letter to John Warnock Bullet Aug 28th, 2006

Convenient Lessons from An Inconvenient Truth Bullet Aug 2nd, 2006

The kids aren’t alright Bullet Jul 17th, 2006

The Culture of Fugly Bullet Jun 25th, 2006

Please make me think! Are high-tech usability priorities backwards? Bullet Oct 10th, 2004

Rebranding the World Wide Web Consortium Bullet Sep 30th, 2004

You say toe – may – toe, I say [expletive] that Bullet Aug 17th, 2004

Gurus v. Bloggers, Round 2 Bullet Jun 20th, 2004

Design Eye for the Usability Guy Bullet May 18th, 2004

Et tu, Brute? Bullet May 6th, 2004

I would RTFM if there was an FM to FR Bullet Apr 30th, 2004

The Art Center Design Conference, Part III Bullet Apr 27th, 2004

Gurus v. Bloggers, Round 1 Bullet Apr 9th, 2004

The Art Center Design Conference, Part II Bullet Mar 31st, 2004

The Art Center Design Conference, Part I Bullet Mar 29th, 2004

Redesigning Google’s search results page Bullet Jan 25th, 2004

Lifestyle articles

Welcome to the new school, same as the old school. Bullet Jun 19th, 2006

Bubble Boy at the Bay 101 Shooting Star Bullet Mar 1st, 2004

Beginner’s Tips for Poker Bullet Jan 31st, 2004

Crucial mistakes against Scotty Nguyen Bullet Dec 10th, 2003

Photography articles

Santorini in black and white Bullet Jun 17th, 2004

Santorini in red Bullet Jun 9th, 2004

Santorini in blue Bullet Jun 8th, 2004

The Art Center Design Conference, Part III Bullet Apr 27th, 2004

The Art Center Design Conference, Part II Bullet Mar 31st, 2004

The Art Center Design Conference, Part I Bullet Mar 29th, 2004

Party like it’s 1999 Bullet Jan 10th, 2004

An Oakland Rave Bullet Jan 10th, 2004

Random favorites from the shoebox Bullet Jan 10th, 2004

Portraits of Donna and Alexa Bullet Jan 10th, 2004

Politics archive

How terrorism works Bullet Sep 10th, 2004