Why do some designs evoke an emotional response where others don’t? Why is it that some designs make a connection with us and deliver meaning on a more personal level? Why do some sites wow us and quickly grab our attention and hold our interest? And perhaps most important, how do they do it?
The last few weeks we’ve been looking at visual perception and the design principles that arise from it. Last week I talked about how we can make visually complex information clearer and easier to process. Today I want to talk about the last topic in this series and that’s how we can wow an audience and build an emotional connection with them through design.
Design is more than aesthetics. It’s more than how something looks, but it’s hard to deny that how something looks greatly influences how we feel about it, whether we buy it, how useful we find it, and the general experience we get from it.
Designs that use emotion to convey a message resonate with more viewers
Research consistently supports the idea that aesthetics can evoke emotion. When people look at pleasant or unpleasant images they have an emotional reaction, which is seen through increased activity in certain regions of the brain. When shown neutral images the same increased activity isn’t present.
A design that conveys emotion can communicate immediately and on a visceral level. It’ll likely be seen as more interesting and it can capture the attention of the viewer before the content can be processed. Emotion drives a lot more of our decisions than many would care to admit.
The emotional content affects us before our rational and cognitive processes kick in. Before we’re even aware it’s happening, the emotion conveyed is setting a context and influencing how our message is perceived and interpreted.
Emotion, Cognition, and Attention
Emotion and cognition work together to influence how we think and feel and act. Together they influence what attracts our attention, how we perceive and interpret what we see, and how it all ends up in long-term memory.
Emotional imagery can influence perception by pairing something likely to be felt strongly (either positive or negative) with something that would typically be seen as neutral. The strong associations of one are connected to the other.
- Advertisers use emotionally positive and pleasant imagery in order to transfer those feelings to the product they’re selling
- Political candidates prey on the strong desire we have to avoid harmful and dangerous consequences by connecting feelings of fear with the opposition.
Associations like the two above can be very effective when trying to persuade. Positive information tends to be processed more efficiently and accurately, is held longer in memory, and is easier to recall. Remember though, that the avoidance of negative consequences can be very strong in persuading people to take action.
Imagery that’s meaningful and emotional captures attention and generates a state of cognitive arousal. Most people find boredom unpleasant and find stimulation and activation to be pleasant.
One theory holds that people prefer an optimal state of activation and seek to maintain it by looking for change and the new. Emotional experiences help maintain this state and emotional graphics hold our attention until we can process the information they contain. When the emotional content isn’t present people leave to look for it elsewhere.
How to Visually Communicate Emotion
Hopefully the above has convinced you that emotion as a powerful and effective way to communicate your message. The question now is how do you do that? How do you effectively communicate emotion and set a context before cognitive processing can begin?
There are a handful of strategies we can try.
Make Emotional Features More Prominent
As we saw earlier in this series, primary features like color, size, and shape can be made to pop out against a background. You can similarly make emotional content stand out against emotionally neutral content.
Of all the primitive features, color has the most potential to evoke emotion. Think about how many ways we use color to describe how we’re feeling. We feel blue when sad and can become green with envy. We’re yellow when we lack courage and red when filled with anger.
The values of different aspects of color can communicate different emotion.
- Cool colors are calming
- Warm colors are energetic
- Highly saturated colors are felt more intensely
- Lighter colors are typically associated with positive feelings
- Darker colors are typically associated with negative feelings
Between hue, saturation, and value the latter two probably convey a greater emotional impact than the hue. Color schemes that vary saturation and value tend to be more effective at communicating emotion.
Tension is another way to communicate emotion. For example shapes that are difficult to identify create tension. A viewer will feel the need to resolve the tension, or be left with an unsettling experience.
Tension can be created through the exaggeration of forms, colors, and textures. Broken expectations create tension. Anything that makes closure more difficult can also lead to tension.
Strong imagery is another way to make emotion stand out, especially in photographs or drawings of the human face. We’re attuned to facial expressions and we follow the gaze of an eye. Expressive faces capture our attention and are more memorable later.
We can use symbolism to communicate emotional content and represent abstract ideas. We learn to associate many symbols with social value and as a result many acquire emotional meaning. Concepts like religion, justice, and social status can be communicated through symbols and icons alone.
Create a Visual Narrative
Human beings are story tellers. We’re familiar with narrative from an early age and we naturally communicate with each other through story. We have vicarious experiences reading, listening, or watching a story unfold.
It’s the emotional impact of a story that carries us through it more than the plot. People will watch a movie with little plot and poor acting if the emotional impact is strong enough or resonates with them personally.
Studies show than when consuming a story people imagine their involvement in different scenes. This triggers areas of the brain to prepare for physical action. Our brains react to stories as through they were physically occurring.
A visual narrative shows a sequence of events or actions connected emotionally and with conceptual continuity. Think panels in a comic book, but also think about unity in design and keeping everything consistent with an emotional theme.
Narratives often follow a formal structure of beginning, middle, end, which I’m sure is familiar to you.
Make Use of Visual Metaphor
When something is difficult to get across, we often use metaphor to communicate it. Metaphor helps transfer what we know and feel about one concept to another.
If you think about it, our entire cognitive system relies on metaphor. We build schemas and mental models that serve as metaphors for any new information we encounter. The metaphor helps us process and interpret the new.
As with any metaphor, what’s known about one thing gets transferred to another. You can make a visual metaphor more powerful by combining and juxtaposing multiple images and concepts.
Consider the car company Jaguar. The name of the company is a metaphor and the company logo (above right) expresses the metaphor visually. It depicts a jaguar (the animal) leaping in a display of power and speed, both of which are meant to be transferred to the car.
Create Novelty and Humor with the Unexpected
When we come across something unfamiliar or out of context it creates an emotional response that captures our attention and increases our interest. The greater the intensity of the emotion, the greater the attention and interest.
Novelty is new and unusual and it holds our attention because it conflicts with the schemas we hold. The inconsistency is interesting because it requires processing to understand. We need to resolve the inconsistency.
Unusual juxtapositions, perspectives, and themes create novelty. When the inconsistencies they generate are moderate we tend to have a positive reaction to them. When the inconsistencies are extreme we’re more likely to be confused.
Humor is a form of novelty that evokes feelings of amusement and enjoyment. Messages with humor are usually thought to be more interesting than those without. Humor can shock, entertain or amuse and is usually created by:
- Deviating from the expected
- Creating inconsistencies that can be resolved
- Showing contrast between the typical and the unanticipated
Humor does need to be handled with care and taste. Not every message can be communicated with humor (or novelty) and not everyone appreciates serious topics being treated in a light-hearted way. Depending on the combination of subject matter and audience, humor may or may not be appropriate.
Humor can also be hard to get across. Different people find different things funny and it’s possible that humor can be interpreted in unintended ways that reduce the effectiveness of communication.
Emotional design can be a powerful and effective way to communicate. It’s conveyed before cognitive processing begins and can be communicated immediately and viscerally. It can wow and it can delight.
Emotion attracts us and holds our attention. It sets a context for everything that comes after and it influences our decision-making. Strong emotional responses, both positive and negative, are often associated with and transferred to a more neutral product when imagery of both is paired.
We can increase the impact of emotional visuals by making them prominent, connecting them in a consistent narrative, making use of visual metaphor, and incorporating novelty and humor where appropriate.
Designs that use emotion to communicate will usually resonate with more viewers on a personal level and create stronger and more lasting connections with them.
That wraps up the last of the topics in this discussion of visual perception. Next week I have one more post to add based on some thoughts and observations I’ve had throughout writing this series. Consider it something of summary for the series that highlights most of the key points.
Download a free sample from my book, Design Fundamentals.