FIRST IMPRESSION

Awesome products are launched when business tasks face user problems. But there is a long way of development between the point A ("idea") and the 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.

Basing on this model an emotional, attractive design with beautiful elements and animation is a cherry on top. I will not challenge this model. I’m just going to tell why you shouldn’t treat "delightful" level as something secondary and what is the value of a beautiful design that makes you say "WOW".

 

How 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 (we are homo sapiens, aren’t we?). 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, 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. I think 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 their basis he decides 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 a nice 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 the 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 behavioural level gives us 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. Don Norman also says that the emotional side can be more important for the success of a product than its functional elements. His 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

 

It's time to figure out how to make a good first impression on the user, so that he likes your site or mobile app. 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 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 design persona and key interactions

To scatter beautiful elements on the page is not enough. It is important to know the "pressure points" and to place emphasis correctly. Design persona and the map of user interaction will do that: this way we will know what the user's goals are and how he or she interacts with the content on the page, and we will be able to prioritize this content, create a hierarchy and guide the user through the screen. Emotions 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), so as it can cause "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 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 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. 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 design not only includes a nice interface, but also conveys ideas and values of the product.

Image from illustrationui.com

Another example of the company that pays much attention to emotions, 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 - that's worth something:)

 

Summary

 

We, mobile app development company, can conclude that an emotional 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, beautiful 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.

 


Articles on the topic

The most overlooked growth hack: designing for emotions

Preserving human touch – Designing with Emotion