Graphic Design for Human Interfaces

Do me a favor and pay a visit to the web site for the <a href=”http://www.dk-designskole.dk/”>Design School in Copenhagen, Denmark. You probably won’t understand the words, but you’ll still get my point. It looks great, but it doesn’t help you get your job done.

A few examples: You have to click through a splash screen to get to the meat. The navigation is visual only: You have to either decipher or remember what those little icons mean. You can’t use your browser to change the text size. I could keep going, but I think I’ve made my point.

Aesthetics

Most graphic designers, including, apparently, the ones at the Copenhagen Design School, are schooled primarily in visual appearance, the aesthetics. They create designs that look fantastic, but don’t have much to offer beyond that. Would it surprise you to learn that people call it the Dessert School?

Communications

Graphic design that doesn’t communicate misses the point. This is where information design comes in, the field in which Edward Tufte reigns king. The design still has to look good, but it also has to effectively communicate what needs to be communicated. Think design of traffic signs.

Good information design can communicate complex concepts and relationships much more effectively than words alone could ever do. The combination of well-crafted words and equally well-crafted graphics is so much more powerful than words, as Scott McCloud’s Understanding Comics is a living (yet printed on dead trees) testament to.

But good information design is hard. Not only do you have to be skilled in aesthetics, you also have to understand the subject matter in depth, and have the ability to visualize your understanding in a way that others will understand.

Interaction

But with software, we’re not only trying to communicate, we want to interact. Users of software, including web sites, are trying to get something done. There is an on-going dialogue between the user and the software, facilitated by the truly enlightened graphic designer. In this area, the only advocate I know is Donald Norman, even though he’s a psychologist, not a designer.

In order for graphic design for human interfaces to work, it must not only look good and communicate effectively, it must also help the user achieve her goals. So the graphic designer must understand not only aesthetics and the subject matter, but also the interactions that are going to take place.

With interactive media, the things that the graphic designer is designing don’t just sit there: They behave. They are actors, with whom we engage in conversation.

There is a reason that the bell boy in a hotel isn’t dressed like the room maid: His appearance tells you how to interact with him: It sets your expectations. In the same way, the visual appearance of an object that appears in the human interface of software, must also set the user’s expectations for how he can interact with this object, and what the consequences of his actions will be.

Physical Cues

One way of doing this is through references to the physical world. An example of this is the way that we make it look like buttons actually pop out of the screen, making us want to press them. It’s the same thing that makes us want to drag the slider:

Physical cues work well, because we’re conditioned through millions of years to trust that anything that looks like the real thing probably is the real thing (explained in excruciating detail in The Media Equation).

Look at these two images of the Windows task bar:

When you’re looking at the lower version, the one that’s turned around 180 degrees, it becomes clear just how strong our inclination to perceive in physical terms is. (Try turning your monitor upside down, and you’ll achieve the same effect — it’s actually quite fun.) This is also the reason that the drag-and-drop form of interaction is so powerful: Humans are so used to grabbing and moving and operating things with their hands, that this naturally extends to software interfaces.

Consistency

When all else fails, turn to your good old friend, consistency. If things that look the same always behave the same, people will eventually learn what to expect. If something that looks like a check box just once behaves like a radio button, people will forever be in doubt. This is why it’s so crucially important that things that look the same always behave the same.

Users of software have nothing to base their expectations on, except what they can see, until they actually try and interact with the thing. Thus, if an object behaves differently than another object, it must also look differently.

But not just look differently in some subtle way. The difference should be so noticeable that no-one can miss it. When people are using the software, they’re concentrating on their goal, on the reason they’re using the software, not on interpreting subtle visual cues in the interface. And we actually want them to stay in this state of mind.

This is where Shannon’s information theory kicks in: We must strive to simultaneously communicate the same information along as many dimensions as possible. In other words: Our communication must be redundant. In case one cue is missed, there must be other to back it up. The different cues should reinforce each other.

And now we’re already deep into the field of human interface design.

Show Us What You’ve Got

I hope this has shown you that there is so much more to graphic design than meets the eye. Creating great, usable software truly requires interdisciplinary skills. The world is ripe for graphic designers who understands human interface design. Just as the world is ripe for human interface designers who understands software design.

After all, and with all due respect to <a href=”http://www.kare.com”>Susan Kare, whom I admire greatly, isn’t it remarkable that one single person has taken care of the graphic design for both <a href=”http://www.kare.com/MakePortfolioPage.cgi?page=2”>the Macintosh, <a href=”http://www.kare.com/MakePortfolioPage.cgi?page=6”>Windows and <a href=”http://www.kare.com/MakePortfolioPage.cgi?page=9”>OS/2? There’s gotta be room for more people like her.