Not Just Pretty: Building Emotion Into Your Websites
This article was originally and in full length published on Smashing Magazine. Please visit the original source for the entire text, including many visual examples.
Emotional design has become a powerful tool in creating exceptional user experiences for websites. However, emotions did not use to play such an important role on the Web. Actually, they did not use to play any role at all; rather, they were drowned by a flood of rational functionality and efficiency.
We were so busy trying to adapt to the World Wide Web as a new medium that we lost sight of its full potential. Instead of using the Internet on our terms, we adapted to its technical and, at first, impersonal nature. If it wasn’t for visionary contemporaries such as Don Norman or Aarron Walter, we might still be focusing on improving processes, neglecting the potential of emotional design.
In his book Emotional Design, Norman describes why “attractive things work better.” He explains how attractive products trigger our creativity and ultimately expand our mental processes, making us more tolerant of minor difficulties. What he is saying is that attractive products make problem-solving easier, which makes them absolutely essential.
Emotional Design is Norman’s reaction to critics who said that if they followed his rules, their designs would be only functional but ugly. So, he conducted the necessary research and came up with three levels of visual design that all need to be considered in order for a design to be both usable and pretty.
Norman’s Three Levels Of Visual Design
Norman has identified three levels of visual design that designers can apply to build emotions into their products. These three levels are based on the way our brains function and can be seen as guide to a more appealing, effective, pleasurable and memorable design.
In a study on emotion that Norman conducted together with two colleagues from Northwestern University, they were able to show that different levels in our brain result in very specific and advanced human attributes. Those levels are the reason why we are able to accomplish and create things; why we can be artists, musicians and writers; why we have culture with language, art, humor and music; why we are conscious of our role in the world, a consciousness that enables us to reflect on our experiences.
The three cognitive levels Norman has defined and applied to visual design are the visceral, behavioral and reflective levels. Let’s look at them one by one.
The first and also lowest level is visceral. This is the level of preconsciousness, where emotional signals from our environment get interpreted automatically. The visceral level works instinctively, and both our personality and cultural values can influence how we perceive something. Impressions at this level have an immediate emotional impact on us. Norman calls activities that are initiated from the visceral level “bottom-up behavior.”
For a visual design, this means that the visceral level has to do with the initial impact of the appearance, touch and feel. The visceral quality of a design can be studied by observing people’s first impression. A good visceral design makes us feel at least something, hopefully making us happy and ideally getting us excited.
Vimeo has an appealing footer. The design has no other function than to catch people’s attention. (Image source)
The behavioral level is all about how things work and how we use and experience them. What matters on this level is function, performance and the physical feel of something.
A visual design would need to feature relevant functions that fulfill actual needs. Behavioral design needs to be understandable and usable. While confusion and frustration lead to negative emotions, fun, ease of use and effectiveness trigger positive emotions. To ensure a good behavioral design, you have to really know your user’s needs — for example, by observing how they interact with the design in the field.
The iPad’s split keyboard has phantom buttons. This way, if you are used to typing the letter Y with your left hand, you can still do it. (Image source)
The reflective level represents the highest level of our cognitive thought processes. Norman calls activities that come from this level “top-down behavior.” This level is conscious and capable of a high level of feelings, emotions and cognition. On the reflective level, we interpret and understand things, we reason about the world, and we reflect on ourselves. The reflective level sets in after having been exercised, and it dominates the other two levels, which means that through extensive reasoning, we can overrule both automated behavior and emotional impact.
In visual design, expertise enables us to respond differently to a design than if we had no idea what we are looking at. The reflective design defines our overall impression of a product, since we reflect on all aspects of it: messages sent, cultural aspects, the meaning of the product and whether it’s worth remembering.
US highways mapped like a subway system. This infographic has a great reflective design. (Image source)
In every good design, all three levels work together. The need not be equally weighted, but because we perceive a visual design on all three cognitive levels, they should all at least be addressed. These different levels of visual design might conflict, though. For example, our opinion of a design after having thought about it might diverge from our initial impression of it. Also, people interpret designs differently and have different preferences for the visceral, behavioral and reflective qualities of a design.
So, the appearance of a design makes up only one level of visual design — the visceral design. The behavioral level relates to how the product works, and the reflective level relates to the long-term impact of the design. Combining these three levels in the right way, you can make a design:
1. Appealing. Grab the user’s attention and influence their perception.
2. Effective. Guide the user’s attention and make sure they find what they are looking for.
3. Pleasurable. Allow the user to appreciate your website and have fun.
4. Memorable. Build a relationship with the user and ensure a positive memory of you.
Implement Emotion In Your Visual Design
How can Web designers apply this knowledge? And how can we build emotions into our designs? A website usually includes several elements that can make a design more personal and that can be regarded as “emotion carriers.” Some of these are obvious, such as colors, images and shapes. Others are not so obvious, such as humor, recognition, dissonance, tone of voice and engagement.
Read more on how you can implement emotion in your visual design in the full version of the article on Smashing Magazine.