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

About these ads

12 Responses to Body Language and Web Site Design

  1. I completely agree with you about the GoDaddy site. Every element on that site seems to be competing with every other element, and many of them seem to be either misleading ads (buy this domain for $5.99, although it’s really going to cost you $39.99 when all is said and done) or sleaze. There are features in there that I occasionally want to use, but I have a hard time finding them.

    Comcast.net is another site I hate. It seems to want to be a web portal, a place to manage your Comcast account, a place to read your email and listen to your voice mail and to learn about Comcast products. Fair enough, but the implementation is terrible. First, the ads (both Comcast’s and third party ads) are cheesy and distracting in that they rotate. The fact that they sell ad space at all tells me that this is not a serious company. The other major problem is that when you click on a click to use a service, it launches a brand new web page with a different user interface. You end up with a ton of web pages (or tabs) open, with no spatial relationships between them.

    I think what both sites have in common is a lack of top-down design. They both feel like they were cobbled together over a long period of time by different groups with different agendas.

    In contrast, Apple’s site is calming. There are no rotating ads, the use of color is kept to a minimum, there’s never a moment of disjointedness, and I appreciate that I can browse or search.

    The local pizzeria and Chinese restaurants both have nice sites that just display their menus (although I could do without the animated intros). Of course, the problem these sites are solving is pretty simple: people want to order food but they don’t have menus and/or the phone number handy.

    But for a really innovative design, check out dontclick.it. I’m not sure this really works for many applications (say, reserving an airline ticket), but I appreciate how they use animation to focus you rather than to distract.

  2. [...] are certainly a number of parallels between body language and visual design and again I think the metaphor holds [...]

  3. Web design Greek…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  4. ecomerce developers, mobile app developers…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  5. Cheap website design…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  6. bodybuilding food…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  7. homes for sale in austin…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  8. tvorba webstranok…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  9. web design packages…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  10. DJm mixers says:

    DJm mixers…

    [...]Body Language and Web Site Design « Virtual Body Language[...]…

  11. Hubert says:

    I have read so many posts regarding the blogger lovers except this article is truly a nice piece of
    writing, keep it up.

  12. Cameron says:

    There is obviously a bundle to know about this.
    I suppose you made various good points in features also.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: