Never a Dull Moment; Empty States
Have you ever seen empty states on a site, app or platform? They are the most attractive part of the experience and they are an opportunity to delight, offer guidance, and teach users how to get started. As an avid Disney-goer with a general love for digital illustration, it’s no mystery as to why Empty states are a hit with me. Here are some pretty impressive flicks I have ventured across.
Many of you may be wondering what are these empty states? And what makes them so important?
Empty states are instances that return no results or fail to present the expected data. The ambition is to relieve the user of potentially bad experiences, celebrate successes, and promote engagement. These instances in a users journey commonly present themselves:
- Upon arrival of a new area
- On completion of a journey
- Failure to load the desired data/page
In these instances, you will want to supplement them with a message that will do one of three things:
- Offer guidance & prompt next action
- Educate users
- Delight and encourage engagement
When you can offer the user an effective message that encourages them or guides them to where they need to go, you reduce the likelihood of them hitting a dead end and abandoning your site. The bonus of a good error/empty message is that you have the potential to increase user engagement; neat eh?
-
How to: Prompt, educate, delight & engage
Here are a few examples from the Thinqi e-learning platform where we have utilised these 3 techniques.
1: Prompt
The simplest form of prompt and the most direct and effective way to instruct the user within an instance is to offer a button directly to the screen/pop-up where they can do that exact thing!
2: Educate
A user who is new to an app or site may discover areas where no activity has occurred and it is possible that the system or another user is responsible for adding content. In this instance, a prompt isn’t suitable, so as designers, we must do our best not to leave them in the dark.
Try educating them by giving them an expectation of what they can expect to happen as the site begins to populate. Give them a reason to want to come back at a later date and engage!
3: Delight and Engage
When a user encounters a dead end or when a page is unresponsive, this can be potentially frustrating! To help alleviate the frustration, finding time to carve out a well crafted empty state could be your answer. Your state could be a joyful, humorous or impressive illustration to lighten the tone (like the InVision car example at the start). The important thing to remember is to be clear with your message and if possible give direct information about the problem they are experiencing. In an instance where you have 404 error message and the page simply does not exist, just be clear that we cannot find that page and do well to soften this blip in the experience.
-
Well, I hope this post has been able to help you create some slick empty state messages and designs. It would be great if you could comment and share some of your favourite empty states, or maybe ones you have created? Let me see how you have tried to make your user’s experience delightful; I personally like those ones that crack a couple smiles! 😁
Cheers, and until next time!
-
Before you blast-off! 🚀
Here are a few resources that helped me develop empty states:
A handy gallery of Empty states:
http://emptystat.es
Shopify UX team:
https://ux.shopify.com/empty-states-more-like-you-have-no-idea-how-much-work-goes-into-those-states-amirite-e0102f58b64e
Inside Design by InVision // Dina Chaiffretz:
https://www.invisionapp.com/inside-design/why-empty-states-deserve-more-design-time
Material Design Guide
https://material.io/design/communication/empty-states.html#content
