item
item

ILLUSTRATION IN UX

Designing for empty states


For this piece of work, I'm particularly interested in empty states as they present a great opportunity for the designer to boost user engagement.

As I learn more about digital illustration techniques, I hope to give myself some focus with the creation of a small collection of illustrations for empty states that I aim to grow overtime.  

TOOLS

Adobe Fresco
Figma

TIMELINE

June 2021
1 week



Context

User research from the Nielsen Norman Group found that 79 percent of test users always scan any new page against 16 percent who would read it word for word. 

As an efficient way to convey a concept or a piece of information quickly, illustration presents a good solution to this problem: it can drastically improve the user experience, maximising usability and accessibility, whilst reinforcing the brand identity.

Designing for empty states may not appear to be a priority as research shows they're only seen by 2-5% of users, but it should not be overlooked as every opportunity should be taken to try and enhance the user experience, no matter how small the improvement.

Instead of ignoring a blank state that could leave the user frustrated and may push them to abandon the journey, the designer should jump at the chance to delight the user with a playful illustration, thus making the experience more memorable and impactful.

With illustration put to good use when designing for empty states, the user is likely to be more forgiving when faced with pain points, loading times or technical glitches whilst using the product.

Challenge

As a starting point, I concentrated on common empty states:

⚑  Connection lost

⚑  Page not found

⚑  No results

⚑  Success

The illustrations must be designed with the following in mind:

Accessibility

Clean and simple to ensure clarity

Empathy

Convey surprise and emotion so the user can relate and engage with a more personalised experience

Adaptability

Easily editable to fit the given brand identity and project brief

Theme

In his book The Biophilia Effect: A Scientific and Spiritual Exploration of the Healing Bond Between Humans and Nature, Clemens Arvay explains contact with nature is essential for the human psyche. 

Drawing inspiration from this principle, I focused on nature as a calming theme often associated with reducing stress and improving concentration. Introducing nature scenes in the UI – particularly when the user encounters a pain point – should soothe the user journey and therefore result in a more enjoyable experience.

Method

Sketching directly on the iPad with Fresco allows for quick ideas to be easily jotted down, edited or even started again. The illustration can then take shape with the use of layers and colour applied with the paint bucket to fill the various vector shapes. This way of working is very intuitive and allows for quick changes to be applied when a change of direction is necessary.

I picked a pastel colour palette for the scenery elements, and applied a brighter colour combination for the star elements in the illustrations so they grab the attention and tell the story. These hero components are where branding colours could be applied if necessary as the simple design allows for primary, secondary and accent colours to be incorporated easily.

Results

In summary, here's how I achieved my main goals:

Accessibility

I built my illustrations with simple flat shapes to keep the UI clutter-free and guarantee the message is not lost.

Empathy

I based my illustrations on evocative metaphors to encourage an emotional connection and engagement from the user.

Adaptability

I used vector brushes to ensure easy manipulation when importing into a given UI.

Organised in layers, the illustrations can easily be converted into components in Figma for instance, allowing for effortless and endless adaptation. 

System colours and styles can be applied quickly so the illustrations can reflect the brand identity.





Implementation

I worked on a few examples and created some wireframes in Figma to incorporate the illustrations in potential scenarios.

To avoid frustrating or confusing the user, empty states work well when a short description of what is happening is included, along with a solution in the form of a call-to-action.

I applied this formula in the below examples, with concise text and a button so the user remains engaged.

Insights

This exercise was particularly beneficial to help me develop my visual thinking process. Being able to convey complex messages with imagery is a fantastic asset in UX that I hope to explore further.

The flexibility that softwares such as Figma offer to build such systems is a gift. With a fully editable collection of elements, I can adapt the items to fit different projects, applying branding styles for a particular brand and adding/removing elements to fit a particular brief.

Of course the use of illustration in UX must be applied and implemented with caution. Usability and necessity must be assessed thoroughly as it may not be suitable for every project.

But this small collection could be an interesting starting point for a fully customisable illustration system I could build upon as I progress in my career.

Thank you for reading

GET IN TOUCH!

hello@gaellemonin.com

© 2021 Gaelle Monin
Made with Pixpa