When done properly, color, images, typography, and layout can generate a lot of emotion. That’s something to think about when you’re doing your next sales presentation. Or re-designing your website.
Don’t be boring
The impact of using emotion in web design is significant and far-reaching. Emotion-based design (also known as affective design) is a design approach that focuses on creating an emotional connection between the user and the website.
By considering the emotional impact of design elements such as color, typography, and imagery, designers can evoke specific emotions in the user. The goal of emotion-based design is to improve the user experience (UX) by making the website more engaging, memorable, and easy to use.
Emotion impacts the purchase decision process
Research conducted by Harvard professor Gerald Zaltman, a renowned researcher in the field of consumer psychology, has shown that emotions play a crucial role in the purchase decision process.
According to Zaltman, emotions can influence consumer attitudes and behavior in a number of ways. His research indicates that up to 95% of purchase decisions are made subconsciously, with emotions playing a key role in these subconscious decisions.
Why is this important?
Subconscious buying decisions are based on a deeply empirical mental processing system that follows a logic of its own. These decisions are communicated to the conscious mind via an emotion. The conscious mind then searches for rational reasons to buy.
In other words, we justify our emotional signals to buy with logical reasons.
However, when most of us seek to persuade, we sell almost exclusively to the rational, conscious mind. But when done properly, images, typography, and layout can generate a lot of emotion. That’s something to think about when you’re doing your next sales presentation. Or re-designing your website.
“Don’t mistake legibility for communication. Just because something’s legible doesn’t mean it communicates. More importantly, it doesn’t mean it communicates the right thing. So, what is the message sent before somebody actually gets into the material? I think that’s sometimes an overlooked area.”
— David Carson
Benefits of using emotion in web design
Below are a few of the key benefits of using emotion in web design.
Improved user experience
When a website evokes positive emotions in a visitor — such as happiness or excitement — it’s more likely to lead to a higher level of engagement and a more positive perception of the brand.
Note: A website that’s easy to use and provides a sense of control to the user is also more likely to lead to a higher level of engagement.
Increased customer loyalty
When potential customers are emotionally engaged with a website, they’re more likely to share their experiences with others, which can lead to increased brand visibility and credibility. This can be particularly beneficial for ecommerce websites, since emotionally engaged customers are more likely to make repeat purchases.
Brand differentiation
By creating a website that evokes positive emotions in the visitor, a brand can create a deeper, more meaningful relationship with its customers. This emotional connection can make customers more likely to remain loyal to the brand — Even in the face of stiff competition.
Drawbacks of using emotion in web design
It’s important to note that using emotion in web design can also have negative consequences if not done correctly. For example, if a website generates negative emotions in the user — such as fear, anxiety, or frustration — it’s more likely to lead to a poor user experience and a negative perception of the brand.
Who is David Carson?
David Carson is an American graphic designer, art director, and surfer. He is best known for his innovative and experimental approach to typography in the 1990s.
He first gained recognition as the art director for Ray Gun magazine, where he used typography in unexpected and unconventional ways.
Carson’s success as a magazine designer led to him being recognized as one of the most prominent graphic designers of the era, and his work continues to be studied and admired today. He has also been influential as a teacher, and has held various teaching positions in graphic design programs across the country.
His first book, with Lewis Blackwell and a foreword by David Byrne, is The End of Print. He’s also written or collaborated on several others, including The Book of Probes, an exploration of the thinking of Marshall McLuhan. His latest book is Trek, a collection of his recent work.
How to use emotion in web design
It’s important for designers to research their target audience and test the design before deploying a website. Here are 10 best practices for using emotion in web design:
01. Understand your target audience
You need to understand the emotions that users experience when using your website, and design the site in a way that caters to those emotions. This can include things like:
- Creating a sense of trust
- Making it easy to find what users are looking for
- Providing a sense of community
02. Use color and typography effectively
Different colors and typography can evoke different emotions. For example, blue often suggests a sense of calm, while red can evoke a sense of urgency or excitement. Similarly, serif fonts often bring to mind a sense of tradition, while sans-serif fonts can elicit a sense of modernity.
03. Create connections with images and video
The use of images and videos can create an emotional connection with your visitors. For example, using suitable images of people can make the website feel more relatable and personal, while using videos can create a sense of immersion.
Note: When we say “suitable images,” we don’t mean overused generic photos of two smiling people shaking hands. Try to make your images at least a little bit interesting and thought provoking.
04. Use whitespace to create a sense of calm
Whitespace (the space between elements on a page) can be used to create a sense of calm and tranquility. This can be achieved by using a minimalistic design with ample space between elements.
05. Provide microinteractions
Microinteractions, such as animations and sound effects, can add an emotional touch to common user interactions on your website. For example, using a subtle animation when a button is clicked can create a sense of satisfaction.
What are microinteractions?
Microinteractions are small focused motions or changes that tie together elements of an interface or design. They act as visual feedback for the user, making the user experience (UX) more accurate, and making sure that interactions within the interface are visually represented.
A microinteraction is usually a single, simple interaction that helps users complete a task or achieve a goal. They can be found everywhere, including websites, mobile apps, games, and other digital products. The goal of a microinteraction is to make the experience more engaging, useful, and delightful for the user.
Most microinteractions involve visual, auditory, or haptic feedback. Some examples include “Like” buttons, shifting content cards, the pull-to-refresh gesture on a mobile app, the hover state on a button, and the “bounce” effect when you reach the end of a scrollable list.
06. Try storytelling
We think the whole “storytelling” concept has run its course, but we admit that it can be used to create an emotional narrative that your users might relate to. This can be achieved by using images, videos, and text to tell a story about your brand or product.
07. Use sound and music
Sound and music can be used to create an emotional atmosphere on a website. For example, using background music can create a sense of atmosphere, while sound effects can add a sense of interactivity.
Note: Go real easy here. It’s generally considered bad practice to play sounds and music on your website without first getting permission from the user.
08. Careful use of animations
Animation — when used with a lot of restraint — can often create emotional engagement and delight. For example, using animation to reveal content can create a sense of surprise and delight. Also, using animation to guide users through interactions can create a sense of engagement. Just don’t overdo it. Animations can be real annoying if done poorly or too often.
09. Show empathy
It’s crucial to put yourself in a potential customer’s shoes and consider their emotional needs when designing your website. Designing with empathy often includes:
- Research: Understand your target audience, their motivations, needs, and goals.
- Clarity: Present information in a clear, concise, and easily digestible manner. Try to avoid clutter and confusion.
10. Always test your design
Always try to test the design with your customers to gauge its emotional impact. This can be done by conducting user testing or surveys to gather feedback on the emotional impact of your website.
Postscript
The use of emotion in web design can have a significant impact on user experience, customer loyalty, and brand differentiation. By evoking positive emotions in the website visitor, designers can create sites that are more engaging, memorable, and easy to use.
Research by Gerald Zaltman also highlights the importance of considering the emotional impact of design elements in the purchase decision process. However, it’s important to conduct thorough research and testing to ensure that your design evokes the desired emotions in the target audience. Whatever you do, just don’t be boring.
Related
Sources
Revised: Friday January 27, 2023 at 4:19:00 PM PST
