Body Language and Web Site Design

“Body language” and “web site design” are two phrases we don’t often see in the same sentence. But I believe body language literacy is desperately needed in the world of web design. Let me explain.

But first, I need to get something off my chest….

I am cosmically frustrated, annoyed and cynical about the current state of web design. Sending a message to my doctor REALLY COULD be easy and intuitive. Booking an airline ticket REALLY DOESN’T have to involve sighing and grumbling and scrolling through absolute nonsense in search of the right button to click – if there is one.

Here, Tommy Oddo points out How a Bad User Experience Hurts a Healthy Brand.

Too many companies are skimping on genuine customer service and putting up web sites as if to say, “talk to the hand”.

The “hand” is not doing its job. A generation of socially-illiterate, visually-illiterate, and literally illiterate geeks are determining the way we interact with each other, how we shop, how we manage our finances….just about everything we do these days. The situation is dire, and I believe that far too many people don’t care or don’t notice. They are like the proverbial frogs in the pot of water, slowly being brought to boil: they don’t realize the negative effect it is having on the quality of their lives – that is, until their insides explode.

If you don’t think that the following web site (the main page for GoDaddy) is a miserable mess…

…then you should take a little stroll. Breathe deep. Feel, listen, and watch the natural world for a spell. Nature speaks to us in a language simple and pure, yet amazingly complex and expressive. Nature can be our best teacher in gaining clarity in these situations. I trust that you agree with me at least a little bit. If you don’t agree with me, then you are a frog.

Thank God we don’t see much of this kind of thing anymore…

Getting to my Point

So, what does body language have to do with making better web pages? Lots. Not only are web sites graphical compositions that rely on nonverbal communication (like all forms of graphic design), they are also interactive. Web sites are conversational agents. They are clicked-through, scrolled-through, talked to, and read-from. Body language is the Music that carries human communication through time. Good interaction design relies on this soundtrack.

Affordance

“Affordance” – another one of those great idea-words that is sometimes diluted from over-use, causing people to think it is something less than it really is. Donald Norman reminds us to remember the original meaning:

The word “affordance” was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). To Gibson, affordances are a relationship. They are a part of nature: they do not have to be visible, known, or desirable. Some affordances are yet to be discovered. Some are dangerous. I suspect that none of us know all the affordances of even everyday objects.

This is a subtle and important concept. And when Donald Norman says that we may not know all the affordances of everyday objects, I think he would agree that web sites are everyday objects.

What Joe Sez

Joe Gillespie addresses this question of body language in web site design:

Many pages I see communicate ineptness, even from large companies who should know better. The pages may be technically perfect, but they have been produced by people without any visual communications skills. They are like the karaoke artist who can’t sing. They are like the person talking to you with their head bowed down, they don’t know that they are sending the wrong signals, they are not in control of their communication.

Then there are the sites like the glitzy wine label, trying to fool people that they are something that they are not. They are trying too hard, shouting every trick in the book at the top of their voices – animation, sound, flashing, blinking waving their hands in the air. They are making noise, not communicating, and wasting a lot of bandwidth for all their efforts.

Okay, do you think this web page is nicely designed? …. Well, that’s what I thought when I saw the screenshot…until I visited the site. Just go there, and you’ll see what I mean. http://www.ohioairquality.org/ Roll around on the blue buttons and watch your retinas curdle.

.

.

Communicating with a Body and Getting Good At It

Some people are really good at body language. They know how to make themselves clear. They know how to use their voice, eye contact, and gesture to get the message across, or to show you that they understand with you are saying. What happens when we are remote and have to rely on computers for communication? Online communication is in a crisis. Without our real bodies involved, we have to use other means to generate meaning, understanding, and context. Web sites – increasingly the medium through which we do so many things – are terribly poor – on average – at delivering the all-important nonverbal channel of natural language.

I will conclude with FOUR rules of thumb for designing good web site body language:

1. Make Eye Contact

Did you know that a web page can look at you? Have you ever wondered where you are supposed to “go” in a web site in order to do what you want to do? A real body has a head and eyes – and we use this focal-point to direct attention and to quickly make a connection. (Hands are also used). Too many web sites are cluttered with a mangle of widgets without focus. At any given time, there are usually only a few things the user needs to do.  A smartly-designed web site knows how to make a good guess as to what the user may be looking for – and to pull the eye and clicking-cursor to a natural focus of attention. Cross-acknowledgement – and maintaining focus – are important in natural body language… as well as in interaction design.

2. Only Animate What Needs Attention

All I have to say is that animated ads make me crazy – like, when I land on a web site that has Las Vegas pixel-guns shooting at my eyeballs from several directions, I start making tunnels with my hands and looking through the hole. I’m not kidding.

3.  Keep Interactive Context

If you are a web designer who codes, look for ways to hold in the web site’s short-term memory the recent activities between the user and the web site. Even if you can’t code, there are still ways to find flow with the user’s actions (as extended through time). Imagine that you are simulating a natural conversation between two humans. You don’t want the user to be lost in an eternally cluttered, unchanging, undifferentiated wall of choices. This is subtle, hard to define, and best explored on a case-by-case basis. But I think it’s important and I suspect we’ll be hearing more about this over time.

4. Stop Geeking out!

If you are a web designer, go for a walk! Listen to the birds. Build a tower of blocks with a child. Hang out with a dog and exchange some canine body language. Feel the interactive energy that flows effortlessly in the natural world. The secret to good interaction design is not found in cutting-edge technology. It’s found in the bodies of creatures that have been interacting on Earth for several billions of years, and building lifestyles around each other’s affordances. The human body is the original user-interface. We have much to learn from watching how it works.

Do you Have any Fave Good Body-Language Web Sites?

I want to write a blog post that lists bad body language web sites and good body language web sites…and critique them using these four rules-of-thumb. I have a few in mind. Give me some of your own examples!

/nods /waves

-jeffrey