Not Just Pretty: Balancing Emotion and Function
In web design, getting the usability right used to be major goal. Now that most designers seem to master this goal, usability has become like a commodity: As basic requirement for a functional website, we find its presence throughout the Web. This shift of attention has created space in the field of web design and visual design has regained its central position. However, visual design in its new definition embraces more than just looking pretty. Don Norman split it into three levels; visceral design, behavioral design, and reflective design. Together the three can reveal the full power of visual design and guide you to a successful website.
The power of visual design. What is that?
The appearance of a design only makes up for one level of visual design, the visceral design. The other two levels describe how something works (behavioral design), and what the long term impact of a design is (reflective design). Combining these three levels, you can do anything with your design that you want:
- Make your design visual – Grab your user’s attention and influence their perception.
- Make your design effective – Lead your user’s attention and make sure they find what they are looking for.
- Make your design pleasurable – Allow your users to appreciate your website and have fun
- Make your design memorable – Build a relationship with your user, allow them to identify with you, and make sure they keep you in good memory.
Laying the foundation of your design
A good visual design does not fall from the sky. Before getting started with the different levels of visual design, there is some groundwork to do. You should have a solid foundation of knowledge about your internal design goals, the context of use, and of course your prospective users.
Start with drawing a clear picture of your internal design goals. Which image would you like to communicate? What are your values? Your visions? You need to have a good grasp of how you want people to see you, and how you can convey this image most effectively. A certain amount of predictability makes it easier for you to build a relationship with your users.
Second, define the context use. It will help you to know about the situations and circumstances in which your users visit your website. Which emotions might be involved? Which role do you and your users play? Being aware of the context of use will make it easier for you to reach out to your users.
Final preparation: Get to know your users. They are the ones who will purchase and use your product. So make sure you know what they want, how they are going to use your product, what matters to them, and what doesn’t. Without knowing your users, it is quite tricky to design something that’s easy for them to use and pleasurable at the same time.
Find the right balance
After figuring out what you want and doing your research about your users and the context of use, it’s time to find the right balance within your visual design. You can try to find a designer who is really good on all three different levels, but those are rare as unicorns. Your best bet is to get a team together with multiple designers with different strengths. It also helps to include designers in the user research and product development. This way, they are involved in the whole process, and they can include requirements in their creative process from the very beginning.
Here are some examples of websites that I believe have found a perfect balance between emotion and function. First of all, there is Adidas, a popular sports brand. With a brand like this, you can easily focus on emotions and offer a colorful, dynamic, fun, and memorable design.
Now if you offer funeral services on your site, you would want to be a little more sympathetic and use a very clear and usable design. Of course it should also be aesthetic, but mourning website visitors will most likely have their priority on discreet support and quickly finding what they are looking for.
Another example is a luxurious car brand, such as Porsche. You would want a clear website that is very easy to use to reflect the quality of your product. At the same time you want to evoke a bunch of emotions, like beauty, elegance, security, and so on. You also want visitors to identify with the brand build up a lasting relationship with you.
Of course, there are also some negative examples, where the right balance between emotion and function has not exactly been found. Jakob Nielsen is one of the most popular figures in the field of usability. However, his website really only focuses on usability and leaves aside all emotional aspects. A little emotion, I believe, wouldn’t do any harm.
Then there is Amazon. Sure, there is no doubt that this website works like hell and every single element has been tested for conversion before being placed for good. However, pretty is different, don’t you think?
Last but not least, there are websites like the webdesignerdepot. For sure this website looks nice and it is memorable because of this unique appearance. But most of what you see and especially of what catches your attention is not meant to help you use the site. You actually need to scroll down the page to find any sort of navigation.
When you design your own website, make sure you find the right balance between the different levels of visual design. This balance will depend on the specific context of your website. You don’t need to counterbalance the three at all costs. But you do need to beware of your own self image, who your users are, and the context in which these users visit your website. Then balance visceral, behavioral, and reflective design against each other to make them work for you.