When Is the Best Moment to Use an Illustration in Your Design?
Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.
— Edward Tufte
Illustration plays an essential role in UI/UX design. As a designer, you don’t have to draw. However, it is crucial to know when to use illustrations for the user flow.
So when is the best moment to use an illustration in my design?
Let’s check it out.
1. When your user achieves something, enhance the hero moment with illustrations
Everyone wants to be encouraged — so do your users. When your user completes a step, even just a small one, congratulate them on the achievement. To celebrate these moments, a graphic with a positive vibe will bring joy to them.
Here is an example from the OmaPosti app. The graphic with confetti celebrates the moment of the item’s arrival with the users.
A customer shared: “Every time my parcel arrives, seeing the confetti makes me so happy.”
2. When something goes wrong, make a personal apology to your users
Ideally, the system shouldn’t make mistakes, so you don’t need to apologize to your users. But, it is not always the case. So, when an unhappy scenario happens, show in the graphic that you feel sorry.
If you can, use a character in that graphic. People feel more forgiving when knowing there is a human behind the scene. An example is that people rate Airbnb generally higher than Booking. According to my experience, hotel services are also pretty good. The difference is that during the Airbnb journey, you interact with the host all the time. At the end of your trip, when you try to give a score, it is difficult to give a bad score if you already built a connection with the host. For the same reason, a character in your graphic can gain some empathy from your users. They will understand a company could also make mistakes because there is a human behind the scenes.
3. When you need to communicate critical information to your users, combine it with an illustration to make it clear
As it is known, a picture is worth a thousand words. Sometimes words can’t explain some information exhaustively, but graphics can.
Also, understand the user’s need help you to choose the best graphic for the design. Here is an example — what would a user want to know about the parcel before picking it up? Before, the OmaPosti app showed a 3D box reflecting the actual shape of the item. However, users don’t care about the box shape; they care about whether they can carry it home after grocery shopping. Therefore, a graphic of a human holding a box works better than the box alone.
4. When you want to set the mood for your service, use a hero graphic
The landing page or a welcoming page are good places to show a hero graphic. The hero graphic makes sure we communicate the correct brand image. For example, the landing page sets a happy, joyful mood with the scene. It implies the upcoming journey will be welcoming and enjoyable.
Summary
There are four best moments to use graphics:
- Celebrate with your users when they complete a task.
- Apologize to your users when things go wrong.
- Communicate critical information with your user.
- Set the mood for your service.
Use illustrations at the right moment to effectively communicate emotions and information. I hope this article is helpful. Let me know if you have any feedback :-)
Useful links
- Unsung Heroes of UI: Look at Hero Images in Web Design: the article explains why hero image is important and shares some best practices.
- Functional Art: 10 Big Reasons to Apply Illustrations in UI Design.
- UX Design Practices: How to Make Web Interface Scannable.
