Awesome products are launched when business tasks face user problems. But there is a long way of development between point A ("idea") and point B ("final product").
Let’s have a look at the hierarchy of needs adapted to the design of products. In the early stages, the main task is to create a functional, reliable, and usable product.
Based on this model, an emotional, attractive design with beautiful elements and animation is the cherry on top. Weэre going to tell you why you shouldn't treat the "delightful" level as something secondary and what the value of a beautiful design is that makes you say "WOW".
How do people perceive information?
Every day we have to make different decisions: from choosing milk in the shop to moving to another country. We're used to thinking that there is a logical choice behind all these solutions. In fact, we just don’t notice the work our subconscious mind does.
Image from giphy.com
According to Nielsen Norman Group, there are two systems of information processing that help us make decisions.
System 1
Quick scanning and evaluation of information. It is an "automatic" system that is not controlled and requires little effort. However, it does an excellent job of dealing with simple relationships and recognising patterns.
System 2
On the contrary, it requires a lot of effort and our attention. Just what is needed for complex tasks or situations where our control is necessary. But even in such conditions the first system provides a flow of information so that the second system can work correctly.
Why should designers be aware of the first system? Here are several reasons:
1. System 1 defines how users judge the relevance of the information. Many people have heard that users do not read text on websites (only if necessary), but scan it, "clinging" to single words and phrases. This selective perception concerns not only the text but all the content on the screen. In the situation of a huge flow of information, the user pays attention to the elements with the highest information load. On that basis, they decide whether to spend more time.
2. System 1 affects how users perceive the visual component and the usability of the website. Research has shown that beautiful websites seem more convenient than similar unattractive ones. Usability is important, but emotional UX design has its own advantages. It’s been proven that users believe beautiful products work better, even if in reality they don’t.
3. System 1 helps to judge credibility. The most noticeable elements influence the assessment of the site's credibility. For example, the moving button in the side part of the page can be judged as another advertisement and irritate users (yeah, well-known banner blindness). On the other hand, the logo of a well-known company on the page will be credible.
Image from medium.muz.li
In the book «Emotional Design: Why We Love (Or Hate) Everyday Things» the author Don Norman also deals with this topic. He describes three levels of visual perception: visceral, behavioral and reflective. The visceral level is System 1, the way we perceive information subconsciously. At this level, the "wow"-effect works. The behavioral level gives us an understanding of how the product or interface works and how we can use it. This is the level of functionality and UX, design should be clear and convenient. The reflective level is our common sense based on experience, awareness, and learning. It dominates over the previous two and is responsible for the holistic view of the product. The author's fundamental thesis is that attractive products work better because they make people feel good and solve problems better.
How designers can benefit from System 1?
We already know that first of all people form their opinion about the interface and the product or service itself subconsciously. This means that a designer has very little time to "hook" and convince the user. Here are a few tips.
Specify the emotional tone
At the beginning of the project development, you should specify the emotional tone - what emotions you want to evoke. For example, humor and carelessness, trust, admiration, sympathy, etc. Learn more The Wheel of Emotions, by Robert Plutchik.
Image from psicopico.com
Specify the design persona and key interactions
Scattering beautiful elements on the page is not enough. It is important to know the "pressure points" and to place emphasis correctly. Empathy in UX/UI design should be added in the places where we want to draw attention: CTA, contacts, services, and other important information for a particular project.
Image from dribbble.com
Use visual effects wisely
Emotions are influenced by: color, sound, expressive typography and speech style, textures, navigation, readability and tone of a text, illustrations, graphic elements. The designer has to alternate these elements to create a beautiful interface evoking desired emotions. It is important to maintain a balance, avoid competing calls to action and do not use many colors (not more than 4) or fonts (not more than 2), as it can cause a "rainbow effect" and "overload" the System 1.
Image from ericandre.com
This is where the research comes to rescue: the "cleaner" the website, the lower the rate of refusals, and this applies to the vast majority of site directions. It turned out that if you take a scale from 0 (the most terrible and striking design) to 100 (shining purity and simplicity), the ideal option for the user is 85%.
Text
Use the active vocabulary of your clients so that you can sound like a human, not a robot. This is often used in error messages, dialog boxes, etc.
Image from metalinjection.net
Illustrations. They draw attention and help to get the user on your side. For example, you can use them to illustrate processes, pay attention to a message or cover up errors such as 404 not found.
Microinteraction. Animations help not only to achieve easy navigation, but also to add funny and memorable elements and even cause a "wow" effect. More information about microinteractions in our blog.
Spontaneity. One and the same call to action on every page causes boredom. Why not come up with different messages and change them on every page?
Surprise. When something unexpected happens, it has a strong emotional effect on the user. As an example, Zeplin's team added pictures of vegetables to the description of plans.
Image from app.zeplin.io
The key elements should be well-designed and confidence-building
The key elements should be clear and visually pleasing, because System 1 will judge the reliability of your product by the most noticeable elements on the page.
Analyst
Test and track analysts to assess how users respond to changes.
Real-life examples of how to convince a client and a team
Studies seem to show how important it is to pay attention to the visual component of the product. Then why are there still plenty of amazing concepts on Dribbble, but only few of them become "alive" projects? The fact is that the influence of UX emotional design is not so easy to estimate and consequently to convince the client to spend money on it. Don Norman says that there is no formula for creating a good UX emotional design and you have to rely on intuition.
Suppose we have a perfectly functioning product that helps users. So what happens next? What will distinguish your product from the same wonderful competitor's product? This is where the value of emotions becomes obvious. Emotional interaction design is what distinguishes companies.
Let's have a look at Dropbox, which has to compete with such a market giant as Google Drive and the importance the Dropbox team attaches to design in general and illustrations in particular. Dropbox’s emotional interaction design not only includes a nice interface but also conveys ideas and values about the product.
Image from illustrationui.com
Another example of the company that pays much attention to emotional UX design, which helps to outdo competitors, is Slack. The creators took into account that in their product people would spend a lot of time so it was important to make it more “human”. They did a great job! Everything in the application is arranged in such a way that the user understands that it is created by and for humans. We have already given an example of welcome messages during loading. This is a really simple but lovely idea that makes you smile every time you see it. That's worth something.
Summary
We, as a company specializing in mobile app development and providing mobile development services, can conclude that an emotional UX design is extremely important. Research proves that users prefer to work with visually pleasing products without paying attention to the drawbacks. Moreover, attractive products make people feel good and, in turn, solve problems better.
Anyway, emotional interaction design should not come into conflict with functionality, reliability and usability. At first it is necessary to provide the minimum value of the product and then to add emotions and improve the user’s impression, always checking how they react to changes.
