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:

Image gone

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:

Image gone

Image gone

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.