The power of Illustrations and Humanization
Artem Udovichenko, Product Designer, Dyninno Latvia
Introduction: The essence of humanization in design
Humanization is a powerful tool in UI design that is not just about making things look good, but about making users feel like they’re interacting with something alive and genuinely helpful.
In this article, we’ll explore how the strategic use of illustrations can weave a strong bond between users and the digital world, simplifying their experience and evoking emotions along the way.
We’ll delve into reducing cognitive load through visual elements, where every illustration is like a friendly guide, lightening the mental burden and making the journey smoother. You’ll discover how storytelling through photos, animations, and illustrations breathes life into interfaces, turning mundane interactions into engaging narratives.
Humanization: Making the Connection
Designers have always competed for the user’s attention, as the ability to captivate an audience often signifies a brand’s success. However, in recent years, the battle for human attention among designers has intensified. Many designers fixate on aesthetics — beauty, pleasing color palettes, and sleek fonts. Yet, the fundamental content of products has largely remained unchanged, with websites primarily presenting vast amounts of information conveyed through text. People have come to view web products as mere colorful sheets of paper, scanning them in search of keywords. After extensive research, numerous designers have concluded that what’s missing are memorable or relatable images within products, bringing us closer to our topic.
So, what kind of images are people missing? People typically respond emotionally to familiar faces or objects. And then we got a brilliant idea from the designers: why not incorporate images or illustrations of people at the heart of design? Surprisingly, it worked. When users encountered human imagery, they performed tasks more efficiently, responded more positively to the design, and trusted the product more. This emotional connection led users to believe that there was not just beautiful text on the other side but also a person ready to assist with any issue.
Benefits of Merging Illustrations with Humanization
Illustrations themselves have the remarkable ability to captivate and hold the user’s attention for longer durations. But humanized illustrations take this a step even further, saturating digital interfaces with a relatable and approachable quality. Users perceive these elements not as some kind of machine-generated visuals but as friendly companions on their digital journey. They are also simplifying information and making intricate processes more accessible. By humanizing the content, users find it easier to comprehend and navigate through what might otherwise be overwhelming or confusing.
Well-crafted visuals have the capacity to evoke a wide range of emotions, leaving a lasting imprint on users. Humanized characters and scenarios, in particular, have the power to spark emotions — whether it’s a smile, empathy, or a sense of personal connection. This emotional resonance deepens the bond between users and the interface.
In fact, I myself encountered positive feedback from users when I was working on the asaptickets project. We needed to visually attract people to our new service, which included many interesting and convenient features for travelers. However, no matter how hard we worked on the product’s appearance, we realized that it was lacking something. When we noticed that people were not paying attention to it, we understood that we needed to add similar images.
Since the service promised that clients wouldn’t have to worry about problems during their trips, and our specialists would handle them, we decided to depict a person who would symbolize this service. It turned out that by adding an image of a real person in our uniform, the number of service purchases increased significantly. People find it more pleasant to interact with individuals who are like them. If we not only convey that we are prepared to take on their problems but also emphasize that a specific person is ready to assist them, it is more likely that users will find this relatable.
Character Illustrations and their impact
When users encounter a character within a UI, they often feel a sense of trust and familiarity. Whether it’s a smiling customer support representative, a helpful guide, or a playful mascot, these illustrations can evoke a wide range of emotions in users. It is important to mention that complex concepts and instructions can sometimes be challenging to convey through text alone. Character illustrations step in as visual communicators — users find it easier to understand and remember information when it’s presented with the aid of characters, helping them navigate the interface effortlessly.
Also, at the beginning of this article, I mentioned that in the past, most websites resembled simple paper forms with text. I faced the challenge of transforming this aspect in my own product. Some pages were not yielding any results, so I took on the challenge to inject life into them.
It’s a mistake to assume that a website where 70% of the main screen is dominated by text, containing numerous messages and focal points, will be convenient for a user. Looking at an example we gathered a few years ago, we see an advertisement for discounted airplane seats. An almost obscured cabin can be faintly seen in the background. On top of these messages, there’s a prominent large red button with additional messages inside. I won’t even comment on how messy this design is or the clarity of its accents.
When examining this from the perspective of the emotions this page might elicit, I personally draw associations with stickers on lampposts: an obvious scam and tacky advertising. As part of addressing this issue, I’ve decided to re-evaluate the approach to the main screen. I introduced a person as the central focal point on the page to convey that our customers are everyday individuals who receive and appreciate our service. I’ve also incorporated a section for reviews on this portion of the screen. And, naturally, I’ve made a few cosmetic tweaks in line with standard design principles.
Storytelling Through Scenes and Animated Illustrations
Storytelling takes on a visual form through scenes and animated illustrations. Scenes and animated illustrations have the unique capacity to transform static interfaces into dynamic stories. Animations and scenes propel users from being passive observers to active participants, and this helps back with reduced bounce rates and increased time spent on the platform.
But an important note for the designers: you should always carefully consider the context and purpose of each animation, ensuring that they enhance, rather than detract from, the user experience. Usability and user needs should always be top priority in design decisions
Conclusion
The designer must skillfully manipulate all the elements in their work so that the final result has harmony and guides the user. However, designer must also have an understanding of how to use details and visual elements to evoke the most pleasant emotions in the user. After all, if the designer manages to gain the user’s trust, then this is already a success, and at this moment, the designer’s work will be done in the best possible way. People are usually drawn to familiar images, but there is no image more familiar than the person themselves.
This is Part 3 of a series on emotional design:
· PART 1 Beyond Functionality: Designing with Empathy;
· PART 2 Beyond Functionality: An ABC Guide to Designing with Empathy
Dyninno is a group of companies providing products and services in the travel, finance, entertainment, and technology sectors in 50+ countries.
It was founded in 2004 in San Francisco by Alex Weinstein. Today, 5,100 professionals work in the company around the world. Our offices are located in the USA, Canada, Brazil, Colombia, India, the UAE, the Philippines, Egypt, Uzbekistan, Italy, the Netherlands, the UK, Moldova, Romania, Latvia, Cyprus, Malta, and Turkey.
