Designing Emotional UI
Emotions play a massive role in our life. People are both rational and emotional. And when it comes to digital products, many people want to interact with digital devices the same way they interact with other people. It’s no longer enough to create products with good usability; it’s equally important to spark positive emotional reactions into the hearts of users.
Technology is best when it makes people happy
In this article, I want to focus on small details that designers can introduce in their product to make users feel good.
The pyramid of users needs
Crafting emotional responses might not be the first thing that designers think of when they create products.
Aarron Walter, the author of Designing for Emotion, used a Maslow’s hierarchy of needs to create the pyramid of user needs. At the bottom of this pyramid, you can see the baseline characteristic of any product — functionality (does this product work?). Next comes reliability (is this product reliable?), usability (is this product easy to use?), and, finally, pleasurability (does this product makes us feel good when we use it?). Pleasurable products connect with users on an emotional level, and this feature makes them want to use it more and more.
But the power of emotion in digital products goes beyond creating pleasurable experiences — it makes the experience more memorable, and this drives adoption and sometimes creates new user habits — that why the best products that we have in our world were designed for emotions.
How to bake emotions in digital products
Emotional reactions
Many products available on the market today bake subtle animated effects into interactions that mimic natural human reactions. One good example is Apple iOS, that uses shaking when the use enters an incorrect password. This simple animated effect is similar to the head-shaking that people use when they want to say “No.”
Mood tracker
“How do you do?” or “How do you feel today?” are typical questions that people ask when they meet. When we interact with digital devices, our current mood will influence many different aspects of interaction and the content we want to consume.
With the rise of AI and machine learning, it’s evident that in the nearest future, digital products will be able to detect the mood automatically (without users even know about that). Peter Smart shares his thoughts on how the app can track our mood automatically in his fantastic talk.
Taking the rise of voice-based interaction, we can expect that the next generation of user interfaces will look like this:
But until that happens, we can use much simple yet still very good approach:
Rating for experience
“Please rate your experience?” is probably one of the most common requests for the feedback from services. Most product designers use a quick survey for that purpose. But the problem with surveys — most of them are look dull and not motivate users to complete the task.
With a bit of creativity, it’s possible to turn a tedious exercise into a fun and engaging experience. And the great news is that you don’t need to use some cutting-edge technologies for that. All you need to do is to use existing UI components (such as sliders), popular emojis and subtle animated effects.
It’s possible to take one step further and use gesture-based interactivity to create unexpected behavior.
Animoji, AR masks and contextual AR hints
Camera is a new keyboard for mobile devices. Many designers utilize a camera to create a new way of expressing emotions for their users — such as AR masks or Animoji. These simple features have a significant impact on user experience — they allow users to express their personality.
But a camera can be used in many traditional experiences. For example, it’s possible to take a widespread example such as navigation in the city and make it more memorable for the user by injecting some emotions in the process of interaction. During Google I/0 2018, Google demonstrated an exciting experience of navigation experience using Google AR lens. The AR fox was used to help people navigate their city.
Immersive interactive experiences
Many designers believe that immersive experience is only possible in augmented or virtual reality. That’s not entirely true. In fact, immersive experience is about participation in a story and the empathy that users will feel about the character. Thus, immersive experience is less about technology per se and more about the storytelling. One good example is The Boat. It uses parallax scrolling together with sound to create a sense of immersion.
Anyone who wants to create a great user experience should always take user emotions into account. IDF will help you create a holistic view of the design.
