Emotional design in UI design

Psychology believes that emotion is a person’s attitude and experience about whether objective things meet their own needs; only when the product touches the user’s heart and makes him produce emotional changes, then the product will no longer be cold; What I see is that the designer carefully considers the details of each devil for his use experience, and people will have joy, love and happiness.

Emotional design is not vigorous. Sometimes just a sentence, an illustration, and an animation can move people’s hearts and give users a pleasant experience; making the design advanced is not just a visual aspect, these simple and beautiful design details Full of positive emotions, it is to pursue a higher level goal after satisfying the functionality and ease of use of the product.

1. Reminder text

Language is the most direct weapon for emotional design. Compared with cold words, anthropomorphic dialogue can gain users’ favor and give new vitality to the product; for example, the push notifications of App, because users receive too much PUSH every day. Too much, I have already felt like water!

At this time, you need a low-cost and high-efficiency PUSH copy to stir up the hearts of the user masters; turn the original interruption to the user into a kind of funny, which makes people smile when they see it.

Emotional design in UI design

2. Pull down to refresh

Pull-down refresh is an operation frequently performed by users in App use. The common pull-down refresh design is an icon plus text. This design is simple and intuitive, but it has no sense of design and cannot arouse any emotions from the user.

Emotional design in UI design

The pull-down refresh is a temporary state. Enriching its design details will not cause it to be incompatible with the product interface. On the contrary, a design-rich pull-down refresh design can make the product gain the favor of users; for example, the uc headline will pop out when the pull-down refresh occurs. A running deer hints that new content is being loaded quickly, and the deer image continues the brand logo.

As an information product, the speed of content update is very important, and the running deer is a metaphor for this; users also have a good impression of the product in this happy mood, and the pull-down refresh becomes lively and interesting in an instant.

Emotional design in UI design

3. Avatar design

The personal center page is closely related to user information. The user’s avatar is displayed here. The common design is a user avatar plus login text. This default avatar design cannot be recognized by users.

Emotional design in UI design

Many products have now abandoned the rigid default avatar, giving users more choices.

Give the product some personality charm, can make the product full of vitality, eliminate the cold interaction of the man-machine interface, and help users establish a friendly connection with the product; for example, Meituan Takeaway and Lying Ping, their respective identities represent the temperament of the product and the user’s Attributes give users a sense of identity.

Emotional design in UI design

4. The default page resolves negative emotions

Usually the state is the page that appears when the current page has no content or no network.

The common design is the form of icons and prompt text. This simple design will cause a big gap in the user’s psychology and fall into negative emotions; emotional design can play a huge role at this time, and it can be reduced by design means The frustration that users experience when they see a contentless interface.

Designers can play a lot of space, according to product attributes and brand extension graphics, combined with emotional design such as dynamic effects or illustrations, can well enrich the page content; for example, a flat, blank page presents a cute scene. Let users smile and make the product full of fun.

Emotional design in UI design

5. The tab bar micro-motion effect

Emotional design has become more and more abundant, and icon design has risen to display animation effects; through the use of motion effects, tab bar switching has become no longer rigid.

When users frequently switch pages, they no longer feel monotonous; well-designed dynamic effects can relieve users’ anxiety while waiting, psychologically shorten the waiting time of users, and make the brand more deeply rooted in the hearts of the people.

Emotional design in UI design

6. Simulate user behavior

If a product can simulate the user’s behavior and substitute the user into a real situation, the user will have a deep sense of identity with the product; for example, “tide” will play different background music to create an atmosphere according to the time, scene and season changes; rain Sounds, thunder, wind, tide and water make people feel the immersive situation at all times.

Emotional design in UI design

Emotional design can shorten the distance between users and products, reflect the care for human nature at a deeper level, and bring emotional joy and touch to people.

Insight into the user’s behavior, empathy to meet the user’s needs, and emotional communication occurs; for example, when you take a screenshot of a picture, the picture will be automatically displayed when you open the WeChat dialog box, which predicts your need to send a screenshot in advance .

Emotional design in UI design

For another example, many viewers are accustomed to the habit of waiting for Easter eggs at the end of the movie, because many times sitting in the theater and waiting for Easter eggs but waiting for no Easter eggs can only waste time.

When buying a movie ticket on “Tao Piao Piao”, you will find that there will be an Easter egg reminder on the movie details page, telling you whether there are any Easter eggs in the movie and where the Easter eggs will appear in the movie; with this reminder, you don’t have to The definite easter egg looks forward to wasting time.

7. Interesting detailed design

As the saying goes: Interesting souls are one in a million. It can be seen that fun can trigger communication and make people have positive emotions.

In UI design, some interesting designs are invisible and need to be discovered by users themselves. When users find this easter egg, they will get a joy and fun, which will enhance the user’s desire to discover the product; for example, open B on the computer side In the ghost animal area of ​​the station, long press this return icon for about 10 seconds, and you will open the new world of the ghost animal area (⊙o⊙) (Friendly reminder: remember to wear headphones or turn down the volume) In fact, long press “return” for 10 seconds at the bottom of the page A black box will appear to prompt “Try to enter letters and discover the secrets of ghosts and beasts”; follow the prompts and enter the letters obediently and a ghost and beast star will appear across your screen!

Emotional design in UI design

Some interesting designs are also explicit, the purpose is to allow users to initiate communication with the product and generate positive emotions; for example, becoming a member of Youku Video not only can enjoy the rich film and television resources, but also let your ID be used when the bullet screen is sent. Use the avatars of the characters related to the drama; the barrage with the role-playing avatars makes the speech more immersive in the drama.

The setting of this egg on the one hand strengthens the sense of dignity and privilege of membership, on the other hand, it also enriches the diversification of the barrage area, which can be described as killing two birds with one stone.

Emotional design in UI design

In general: the “high-level sense” of UI design means that at the visual level, we must start from the subtleties to create exquisite and design-rich images; on the other hand, we must start from emotional design to make users and products feel emotional The resonance of the above, get a higher level of experience.

Leave a Reply