<TFM> 1.06 The Non-Verbal Web

<TFM> Number 1.6
About TFM | Archives | Number 1.6 (originally published June 2001)

The Non-Verbal Web

In preparation for a class I’m teaching this quarter on Interface Design, I re-read Norman’s The Psychology of Everyday Things (aka POET), which I am using as one of three pillars of the class.

I was struck (again) by the concept of perceived affordance. My communications background causes me to think of this as “the non-verbal language of objects” — it’s how I perceive the object’s mode of interaction. Whether my perception matches the design reality will determine my satisfaction.

Power of the Non-Verbal

From communications theory, we know that more than 90 percent of the “meaning” of a spoken message in face-to-face interaction is attributed to the speaker’s non-verbal cues (which include voice, gestures, appearance and the like). Less than 10 percent of “what is heard” is the actual words spoken.

For example, I have high school students in my summer non-verbal communications class demonstrate this by “speaking” the following words — but changing the word emphasized each time:

I never said he took the money.

By emphasizing the word “I” — the speaker implies that someone else made such a suggestion. By emphasizing the word “money” — the speaker suggests that “he” took something else. Emphasizing “never” yields a flat denial.

In this example, it is voice that conveys nuances. But an even greater part of the average spoken message is communicated visually (estimate is 55 percent), further reinforcing the importance of visual clues in transmitting information. (This is one reason e-mail communication can be fraught with hurt feelings … and why emoticons are judiciously used by the experienced e-mail communicator.)

Thus, when faced with conflicting messages between “the words” and the non-verbal message, most of us believe the non-verbal communication and discard the literal words. This is the power of visual communication.


Objects, as a general rule, can’t speak. Thus it is not surprising that we glean information about an object’s functionality visually. We make those deductions based on an object’s affordances.

J.J. Gibson, a perception theorist, suggested we interpret the world by perceiving opportunities for action; he called these possibilities for action affordances. Norman introduced the concept in The Design of Everyday Things; Cooper makes another contribution — about affordances in computer interfaces — in About Face.

A common example of a conflict between perception and reality is evident when you see the word “push” or “pull” attached to a door. This is a clear signal that the door (nonverbally) communicates an action (an affordance) that is contrary to how it must be manipulated to work.

Many times, I find myself struggling with a door momentarily as my brain first tries the non-verbal instruction — it ignores (or tests?) the written instruction.

This is all well and good, you might be thinking. But what in the world does it have to do with the Web? After all, the information displayed on a computer monitor does not have properties like the physical world. A button only looks like a button; a dial only looks like a dial. We don’t really push or turn as we do in the physical world.

The Click

The most frequent physical interaction between people and the Web is “The Click.” It is my contention that certain Web objects send a non-verbal signal of clickability; the visitor perceives that the action of clicking will reveal more (hopefully useful) information.

My first example is the underlined, colored hyperlink, which evolved from non-Web hypermedia such as HyperCard, online help and CD-ROM interfaces.

When I see colored and underlined text on a Web page, I know it is clickable. Or it should be! (I have seen examples of underlining as text formatting, which makes me want to personally strangle whomever added the <u> formatting option.)

Even for the Web novice, this perception is absorbed within the first few minutes of the first Web session. It meets Cooper’s maxim:

All idioms must be learned.
Good idioms only need to be learned once.

So why do copywriters insist on using Click Here! text on a Web page? Not only is it an unnecessarily redundant instruction, assuming appropriate design has been used, but it also wastes valuable screen real estate.

My second example is the image mouseover. Although HTML provides a corollary to the text underline for image links, most designers neuter this option. However, navigation image mouseovers have become ubiquitous. Thus, when a site visitor sees an image “flip” when her cursor passes over it, the perception is that the image is clickable.

Clickability of an image mouseover link is not as immediate (sometimes called intuitive) as a text link, because the visitor must do something to trigger the recognition. Nevertheless, “mouseover equals click” has become a user expectation. A cultural convention.

A more subtle signal that an image is clickable is that the mouse pointer turns to a hand.

Violate With Caution

Recently on the ACM Chi-Web discussion list, the group discussed the (de)merits of a Flash-driven Web site that violated The Click in three ways.

screen shot of Philips home page

drag entry graphic First, although there appeared to be two clickable images on the home page (based on mouse pointer turning to hand), in order to “enter” the site, the site visitor had to “click-and-drag” one object onto another one. Instructions required to function (think “push” and “pull” with the door). And we’ll ignore the additional fine motor control necessary to execute click-and-drag.

home navigation Second, once “inside” (and no diatribe about splash pages today), internal navigation options were revealed by mousing over an image. However, clicking on any one of the content headings did nothing.

Based upon a single instance from the home page, the site visitor was supposed to discard hundreds of hours of expectation (perceived affordance) about how mouseovers work.


home navigation This mouseover was meant to work with click-and-drag. Even after playing around on the site for a few minutes, if I did not concentrate, I would “click” and wait for a moment … then remember I was to drag instead. This, I believe, is a function of becoming “expert” at using a system; actions move from conscious thought to unconscious execution. This interface pulled me from “flow” and thrust me back into the category of “non-expert” — it made me think. And not in a good way.


Additional confusion ensued because the mouse pointer did turn to a hand when placed over the navigation image. However, the click could not be executed until after the drag onto a central bulls eye.

internal navigation Third, in a classic case of mixing models, once in a sub-section, the visitor is supposed to understand that now the center bulls eye has the expected, single-click interface. Thus there are two different interaction models on this site — one conventional and one novel — with no clear way to differentiate the two.

To quibble, there were also two different pages which could be considered “home” — ambiguious terminology at work. More possible confusion.


Bottom Line

Consistency is not the hobgoblin of little minds when it comes to visitor expectations and perceptions. Sites like this one make me grateful that designers have nothing to do with traffic signals and stop signs — can you imagine the mayhem if every city designed its own?

Creativity for the sake of creativity (and design awards) too often pleases only the designer. How difficult can it be to put the user first? All too often, pretty darn hard.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.