Web Site Ergonomics

Ssshhhhhhhhhhh… I have to say this very quietly… one of the graphic designers in the office might hear me and accuse me of blasphemy…let’s close the door for a second so we can have some privacy. OK, here goes.

The best visual design for a Web site isn’t always the most aesthetically pleasing.

Oh great…the Creative Director heard me. But really Mr. Creative Director, sir, I know you’re an artist and everything you produce could proudly be displayed in a gallery. But a Web site isn’t a piece of art meant to be interpreted: it’s a functional tool that people interact with.

Ahhhh, the key word — interact. That’s the main difference between a design destined for a substrate (like paper) and one destined for a computer screen. People use Web sites and expect not to have a learning curve attached.

While designing for interaction is a discipline in itself, I’ll touch on a couple of key points. Take this short quiz. Which links are easier to identify?

Example A is a trick question. You can’t identify the links because there’s no difference between link and non-link text. Links in Example B certainly can be identified as a dark shade of blue. However, depending on how well a particular visitor’s monitor displays color, the deep blue may actually look quite a bit blacker. Example C links are very easy to see. They’re 100% blue and underlined.

The moral of this story isn’t to make all links blue and underlined, but to make links look, well, like links. Visual cues are important on the Web. Define a style for links (ex. Maroon font color with an underline that changes to no underline when the mouse is over it) on your site and be consistent.

Let’s try one more fun example. Which button is easier to click?

If you said “the big one”, you’re right!! Why? Because it’s big! Simple concept, but one that’s far too overlooked. Important action items, such as order buttons, should be easy to find and not tax the user’s ability to aim the mouse.

Again, the moral here isn’t to make all buttons on a site huge, but to keep in mind that the larger the object is, the easier it is to click. Now, I know a site with blue underlined links and big buttons may make some designers run for the hills, but the fact is an ergonomically-designed site is easier to use.

If you’ve ever driven a Porsche (which I highly recommend), the minute you sit in the driver’s seat you realize this is a car that’s meant to be driven. Attention to detail in cabin ergonomics - feel of the gear shift, placement of the pedals, size of the steering wheel, etc - makes you want to drive the car.

Small changes to the ergonomics of your Web site - bigger buttons, easily readable text, identifiable links - can transform your site from one that’s meant to be looked at to one that’s meant to be used.

NOTE: The Creative Director depicted in this article is fictional. Any resemblance to a living individual is purely coincidence - especially the one employed by Cummings Group.