How Illustrations boost the UX
What is the difference between a clear layout design and the truly eye-catching one? The second one is based not only on great user experience but on design principles with strong aesthetics. Illustrations and interface layouts work together as a team to bring the user the proper message and visual joy. Together they create an emotional touch that imprints on the user’s memory.
Let’s jump into details and take a closer look at illustration as a universal communication tool between product and user.
What is so special about Illustration?
Illustrations are always about the message. No one likes to read, but everyone loves to watch, and even the craziest idea can be explained visually! Consider illustration as a visual trigger that attracts users’ attention with color and delivers information to them.
Therefore, the task of illustration is to tell the story that will be written next to it.
Where to use them?
Illustrations in UI can be used in different scenarios. I’ll focus on 5 where they fit perfectly:
Theme image and Hero Image
Here it goes, the first moment when users interact with your product design. How do you explain the product’s essence in the easiest way? Without a doubt, using illustrative language!
In my humble opinion, it’s the most important type among UI illustrations, because it builds the product’s visual style and overall impression. Hero image is the first step of user interaction with the product and it forms the desired emotional response.
Onboarding
After the first visual meeting with the product, we need to fill the user in on what is going on here. But, as I’ve mentioned above, users prefer to scan, rather than read, everyone wants to get down to business as soon as possible, and onboarding pics come on the scene. They visually explain to users how to interact with new functions in the easiest way.
Gamification graphics
Gamification graphics include various types of user rewards: trophies, medals, cups, borders, and so on. The purpose of such graphics is to encourage users to continue using the product to discover new items. That is why the designer’s creativity is allowed to burst into blossom while working on these elements.
Notifications
With the help of notification messages, designers aim to show users an important piece of information that must remain in their minds. UX research by Baymard Institute proves that information linked with a pic is perceived by 56%.
Mascots
My favorite type of illustrative branding item! Mascots are illustrative characters that become the visual face of the product. Users remember them perfectly because they are perceived as living beings working as communicators between users and the product.
Why use them?
- To create eye-catching visual messages
Our mind processes informative images better than just text. Designers must use this to explain to users where they are, what is going on in this web page and what to do next.
2. To make user interface produce deep emotions
We are all emotional beings, able to see beauty in even ugly things around us. I love this quote:
“Beauty comes from conscious reflection and experience. It is influenced by knowledge, learning, and culture. Objects that are unattractive on the surface can give pleasure. Discordant music, for example, can be beautiful. Ugly art can be beautiful.”
― Donald A. Norman, Emotional Design: Why We Love (or Hate) Everyday Things
As I have mentioned above, the illustration also evokes emotions from first sight. Its visual language consists of colors, lines, and style that users emotionally understand without words. Designers who “speak” illustrative language create outstanding products that touch users’ souls.
3. To increase brand awareness
A strong visual identity is a key to brand recognition. Designers actively use illustrations for marketing purposes, drawing the user’s attention to specific triggers in the interface. It is not a secret that companies maintain a solid style of illustrations on the website and in social media because users subconsciously associate the visual style with the brand.
Takeaways
To sum up the importance of custom thoughtful illustrations for great UX, pics in an interface are important to:
- Convey the idea better than the text alone
- Increase the aesthetic layout of the interface
- Create an emotional feel of the brand
What cool examples of illustrations in the interface have touched you? Share it in the comments below!
