Design Is The Body Language Of The Web

A few weeks ago I watched a video from WordCamp Phoenix in which Heather Billings compared web design to body language. I thought it was a great metaphor for design and I’ve been thinking about the connection ever since.

What is Body Language?

Body language is a form of non-verbal communication. How we hold our posture or a facial expression we make, communicates a lot of information.
Many would suggest that the majority of communication between people meeting face-to-face is done non-verbally through body language. Aware of it or not we do react to body language even in robots.
This communication is usually sent and received subconsciously. Most people aren’t leaning one way or another or crossing and uncrossing their arms as a way to consciously communicate. In many ways body language is a window into what you’re thinking.
The non-verbal communication of body language sets the context for verbal communication. It builds the frame within which we interpret the verbal.
For example say an old friend you meet on the street says she’ll give you a call. If she gives you a hug while saying it, you probably believe she’ll call. If she says it as she’s quickly hurrying away, the likely interpretation is that you aren’t going to hear from her.


Body language isn’t always obvious to interpet.

• Crossing arms—Could be indicating a self defensive posture by putting up a barrier. It could also be a sign someone is cold.
• Maintaining eye contact—Could mean a person is attentive. It could also mean the person mistrusts you and is carefully watching

Body language supports the tone of what’s being said. This is especially true when conveying feeling and emotion.
We communicate better when all forms of communication support each other as opposed to working against each other. When speech and body language lack harmony we send mixed signals and confuse the message.
Much of non-verbal communication ultimately happens through a combination of signals. Those who understand body language can use it to their advantage including improving how much they sell.

Additional Resources

Below are a few articles I found while seaching. The first two offer some examples of body language gestures and the potential meanings of those gestures. The latter two are more in-depth articles on body language.
There’s plenty of information about body language to be found, though beware much of it will revolve around picking up members of the opposite sex.

• Examples Of Body Language
• Reading Body Language: Examples of Body Language
• How to Read Body Language Signs and Gestures
• How to Read Body Language

Kinesics

The study of body movements, gestures, and facial expressions as a means of communication is called kinesics. More generally it’s the interpretation of non-verbal behavior related to movement as it pertains to communication.
There are 5 different types of kinesics.

• Emblems—Non-verbal cues with a verbal counterpart. For example an ok sign or thumb’s up. Emblems serve as substitutes for words and phrases.
• Regulators—Non-verbal signs that regulate, modulate, and maintain the flow and pace of verbal communication. Nodding your head to indicate interest in a conversation for example.
• Illustrators—Accompany and reinforce what is being said as in pointing to an object you’re talking about.
• Affective display—Body and facial movements indicating emotion. Smiles and frowns for an easy example. A lack of affective display may be incorrectly interpreted as a lack of emotion.
• Adaptors —Typically movements at a low level of awareness made to release physical or emotional tension or perform specific task. An example might be leaning away from someone who’s just said something creepy or frightenting..

Because adaptors occur at such a low level of awareness some see them as key to understanding what someone is thinking.
However because they also occur to perform specific tasks or relieve physical tension they may not carry any more significant meaning than the other types of kinesics.

Design as Body Language

Now that we’ve briefly looked at body language let’s think about design and see how the metaphor fits.
Like body language design sets the context or frame for your content. Like body language communication through design often occurs subconsciously.
For example if your content is set on a grid it will communicate organization. Your audience will find it easier to read and find what they want and they’ll take those things away with them.
Nowhere though, do you need to explicitly say your content is easy to read and find. A visitor simply finds the design easy to use.
We can look at content as the verbal communication that happens and look at design as the non-verbal communication that happens.
Much the same way people don’t consciously notice body language we don’t always notice design. We’re probably more apt to notice either when unnatural or done poorly.
Both body language and visual design stand out more when they conflict with what’s being communicated verbally. When design displays unity with the verbal it communicates effectively by supporting and enhancing the verbal message.
When design lacks harmony it sends a mixed message, confusing the communication.

Kinesics and Design

Let’s revisit the 5 types of kinesics and see if we can connect them to design.

• Emblems—Icons are an obvious example. Using commonly understood conventions might also fit here.
• Regulators—Space, flow, alignment, proximity, and visual hierarchy all seem to fit here. Most design principles can likely be seen as regulators.
• Illustrators—The use of arrows, pointing cues, eye gaze in facial images are typically reinforcing non-verbal and verbal. Lines connecting different elements reinforce their connection.
• Affective display—Design style, textures, color are all ways we try to convey emotion through design. The use of anthropomorphic forms would be another. Any part of a design that sets a mood or frames the context of the content likely falls under affective display.
• Adaptors—Usability, accessibility, and affordance would likely fit as adaptors. So would the use of a grid to organize information. Anything that makes a design easier to use or interact with is a good candidate.

The above is just a quick interpretation on my part and shouldn’t be seen as set in stone. For example something like flow might be considered regulator, illustrator, or adaptor, depending on how it’s being used. If you have better examples please do share.
The main thing to take away is that it’s not too hard to see different aspects of design in similar ways as we see body language. The metaphor works and because it works so well a study of body language might benefit visual designers.
If we can better understand how we all communicate non-verbally through body language, it stands to reason we’ll be better able to communicate non-verbally through design.

Summary

There are certainly a number of parallels between body language and visual design and again I think the metaphor holds well.
Both are non-verbal forms of communication where meaning is often conveyed subconsciously. Both should support and enhance the verbal communication that happens consciously.
When talking to someone face-to-face we typically don’t consciously interpret their body language. The same is true when visiting a website. We take in the design and it communicates to us, but we aren’t consciously interpreting the meaning of that communication.
Both clearly influence communication though. If as some suggest up to 70% of face-to-face communication happens non-verbally then doesn’t it stand to reason a similar amount of communication happens non-verbally when visiting a website?
It’s a good argument for why visual design is so important.
It’s also a good reason for designers to better understand how body language works and to think about the 5 types of kinesics, particularly how they might relate to design.