An empty state screen can seem like it’s of secondary importance. It is not always empty for very long, and many users won’t even end up interacting with one. In this post, I’ll focus on Empty State Screens a how-to, and best practice.
First of all, why do we need an Empty State? When an empty state is designed with intention, it becomes a positive experience for the user. It engraves a great impression and can become the beginning of a beautiful friendship! The effort of building such a screen can often translate into future engagement and referrals. And when designing one, you get the opportunity to genuinely show off all your skills.
An empty state is an opportunity to delight the user at a critical moment. I consider this screen one of my favorites because I love to relate to the user through personality. This is where I get to pretend that the user is my BFF in distress. Let’s imagine the following: my BFF is lost, terrible with directions, and does not know what to do. This is my moment to shine! I get to swing on my superhero cape and save the day for my friend! Time to do some problem-solving!
You might ask, “Where do I start?” I personally like to follow a two-step process. First, I need to know the purpose of the empty state screen and then emphasize with the user (aka, my BFF). To keep things fun and visual, I like to put my brainstormed solutions on post-it notes and then populate my surrounding workspace or wall. It’s a great way to keep my thoughts and findings ready for analysis!
My process is simple.
STEP 1 - ESTABLISH THE PURPOSE
Have you decided on the purpose of your screen? In my process, I typically start with a few questions before I get to sketching. For example: What does the empty state need to do? To help you spark some ideas, try to answer the questions below.
Scenario A - Is the user entering an app for the first time?
It is best practice to always guide the user the first time opening your app. Try to offer some starter content, perhaps provide content they might appreciate, to facilitate the app’s use with ease from the very first few seconds.
Scenario B - Does the user know how to use the app yet?
Opt to show the user how to master certain features. Offer some brief educational content to help speed up usability. Do not forget to make the content optional and allow the user to exit or skip this content. They might already be familiar with your product, or perhaps they are just courageous enough to adventure on their own.
Scenario C - Has the user stumbled to an error page?
Oops! That would be embarrassing, right? First of all, always inform the user why they have arrived on this page. Assure them that everything is ok, they did not make a mistake, and offer a solution to the issue. Provide them with an option to get them back to where they were last, or redirect them to their intended location.
Scenario D - Has the user searched a query with no exact match?
Imagine if a user was searching for a specific fitness class, but there were no matching results. Could you help the user find a similar course by providing a related match query? (In this case, I highly suggest utilizing an autofill option in your search bar, because it allows for similar results to auto-populate.) Don’t forget! You have the opportunity to draw their attention by placing featured search results or any related content to their query request.
STEP 2 - EMPATHIZE WITH THE USER
The first step lays out the foundations of the page. This second step connects you – the designer, to the thoughts, feelings, and problems of the user.
I live by the principle, “content dictates form.” The content guides my sequential process, starting as usual with the research findings. I like revisiting user personas, read the user stories again and again, and then review the user flows. At the same time I ask myself, when would the user interact with this empty state screen? How can I help them once they’ve arrived on this screen? What solution can I provide for them? What call to action would they be grateful to see? Then I make a few simple notes of what the user might be looking for in the app and on this particular screen.
TIP - ROLEPLAY TO PROBLEM SOLVE
Your BFF needs help! This is where you get to put on your cape, play the superhero, and fix all the problems, no problem! Here is where you, too, can shine! Show the world you know how to empathize with the user!
- Try to act like the user. Speak as your user would talk. If there are branding guidelines available, make sure you get super familiar with the appropriate tone of voice your product has established or will plan to use at launch.
- Practice writing a short script, or enact a conversation aloud. Pretend like you are having a conversation with your BFF about the issue. Your BFF is stuck. How would your BFF feel about it? Ease the frustration by speaking their language.
- Offer a way out of the page. Make it easy and enjoyable, and they will be forever grateful for it.
BONUS TIP - CONTENT OR VISUAL FIRST?
There is really no right or wrong answer here as long as it makes sense to you and/or your team. Consider how the results of either process would be helpful to your specific audience.
Some designers prefer setting the tone with the illustrations first because they might build characters based on the user’s emotions, or features, or situations. Some designers prefer focusing first on the message. Other designers (me included) choose to set up the story first and then build the content specifically on needed contexts.
Attention to detail matters because when you show that you care about the small details, people trust you, to care about the big ones!!!
IMPRESS AND CONVERT
Remember, this is a crucial moment for the user, and it matters. The empty state allows you to turn a negative situation into a positive moment by offering education and understanding. Here you have an opportunity to build trust and make a conversion. After all, the conversion rate for the business translates to a positive satisfaction rating for the customer.
Join the conversation, and feel free to share other tips and even your own version of Empty States Screens.
Note: The images shown above are sample screens from a concept app called Next One designed by Giorgia Cifani.
Looking for more UX Tips? Discover more articles under Learn UX
No Comments