Even when you are saying nothing, you are saying something.
In The Communication Book, authors Mikael Krogerus & Roman Tschäppeler put it this way,
A man comes home, sits down, stares into space and is silent. His wife looks at him and asks him how he is. He says nothing — and yet he communicates something. It is immediately clear that something must have happened.
Empty states are your product’s way of saying nothing. They are screens in your UX that are yet to be filled with information (only if the user completes a certain task) or have nothing to show, nothing to display.
With apps running our lives, there is every possibility that all of us have encountered an empty state,
- an empty shopping cart
- resultant screen from completing a to-do list
- error screen from trying a feature that only is premium-accessible
- no results displayed from a particular search
- no connections to display in a newly-created social network account
Why are Empty States Important?
“An empty state, or zero-data state, is an afterthought for many designers. The thing you design last—if at all—because it’s a temporary or minor part of the user experience.” Dina Chaiffetz, Director of Product Strategy at Prolific Interactive.
While product teams chase the devil in the details, being extremely deliberate with parts of the product that engage and convert users, empty states are those that are often overlooked or get the ugly duckling treatment.
But let’s take a close look at where empty states feature in the product funnel,
- during on-boarding, setting the first impression
- celebrating a moment of success when the user has completed a task
- breaking the news during the moment of failure
Dina Chaiffetz believes these are tipping points in the product’s UX, which can lead to either temporary or permanent abandonment of the application or a higher level of engagement, and furthermore user loyalty.
Why is it important for PMs to focus on what their empty states are saying?
According to Andrew Chen, an average app loses 77% of its daily active users (DAUs) within the first three days of install and use. What’s worse? Within a month, 90% of DAUs have quit using the app or uninstalled it (similar numbers seen on mobile and web apps)
The reasons range from ineffective on-boarding, nagging upgrade prompts, or just loss of interest after activation. While most of their attention is paid to these leaky funnels, PMs should also be vigilant of bad impressions or unpleasant UX of their empty states.
Does it make sense for product teams to take a hard-look at blank states and empty screens - possible dead-ends that could come in the way of retaining users and re-engaging them?
We certainly believe so. In fact, as the world’s first user drop-off management solution, Hansel is helping product managers identify such bottlenecks and nudge users to take the next best action. In this blog, we look at some of the use cases of empty states in popular apps and suggest nudges that could push users towards engagement and conversion.
Here’s a Quick Education!
An empty state is an opportunity to teach your users how to use a feature or direct them towards an action you’d like them to take. Modspot is a great example here, directing the user to add an image from their camera roll to access more likes, be loved and hence nudging towards social validation!
Through such quick lessons, you are not only encouraging your users to re-engage with your product, but also making them more aware of how to use it. On the flip side, an empty state with no nudge may look like the screen on the left,
While the app does a fine job of telling me, a new, fresh-off-the-boat user, why I have a blank profile, it doesn’t point me towards what I should be doing in order to build a more colorful profile. Our advice?
Hotspots! Rather than having your app crawling with CTA buttons and tutorial pop-ups, you could use Hansel to nudge your user towards an action or an app feature with Hotspots. In the above example, we edited in a little beacon to guide users to the section of the app where they can “recommend items”.
*** Why is it important to educate your users on your empty states? We have the Zeigarnik Effect to thank. Psychologist Bluma Zeigarnik noticed that waiters could remember details of the orders for tables they were serving, but only until the customers had paid. Once the task was considered completed, the details were forgotten. ***
Your app might have a phenomenal, step-by-step onboarding process. Any interruption or waiting period between its completion and your first-time user experience can lead to forgetful users with little to no idea how to use your product. Here is where that quick reminder lesson helps.
Trail of Breadcrumbs
Like the tale of Hansel and Gretel, we love apps that drop tiny little breadcrumbs for its users to pick up as a guide or reference. Some apps bring this level of hand-holding in the form of first-use empty states - by providing users with borrowed content or starter content.
Pocket is a great example of how “starter content” (coined by Material Design) can help new users explore the app. (note the CTA button if and when you delete the post)
A home screen that otherwise would be empty can be populated with a few starters that the users can help themselves to. Apps that store content like books, music or create notes and documents go this route, creating a great first impression.
Our advice for first-use empty states is to keep user variability in mind - use content that has a larger appeal, covers essential app features and gives the opportunity to explore personalization. Above are examples by Material Design of a book recommendation for a spread out audience, and Evernote’s self-explanatory starter content.
Hemingway App, an online text editor, gives us another great example of ‘initial borrowed content’ in place of an empty state. New users coming to the app are educated about how the editor works, its nuances just from the starter content.
Even though product teams must look at empty states as avenues to educate the users, that should not discourage them to bring in some personality to screen. If appropriate, this is an opportunity for designers to bring some flavor to the UX, through visuals and quirky copy.
The laws of UX validates this. According to the aesthetics usability test, users often perceive aesthetically pleasing design as a design that’s more usable. And that’s why illustrations, scribbly text, and cute gifs work so well on empty states. Though your product has nothing much to say to the user, it is still creating a pleasant impression.
However, this will remain an aesthetic facelift if it does not bring any value to the user’s context and objective.
“While remaining minimal or full of life in design, a successful screen will explain a specific feature, reiterate the value proposition of that feature and then compel your user to take the next step”
UX designers have always bettered product experiences by bringing in emotions - that of joy, surprise, and delight, thereby adding a personality to the user interaction. With empty screens, empathetic messaging makes it personal, engaging and adds variety.
Meg Robichaud, an illustrator and designer at Shopify found that only 2% of their users were seeing empty states - which at the time needed a fresh look and was inconsistent with the rest of the UX. Would all the man-hours and resources be worth the effort, given the small percentage of users seeing empty screens?
This is the major reason why empty states aren’t as scrutinized as other parts of the product funnel. It is this kind of mindset that brings about a leaky funnel with negative user experiences - hurried and undone empty states being one of the suspects.
The team at Shopify went ahead with their face-lift. They wanted to bring an excellent and consistent experience to the 2%. Their reason was simple - the impact.
Empty states are great to prompt users to action
Through contextual hotspots and the right CTA buttons, empty states can nudge users towards actioning what they came to the app in the first place.
Photo-editing app Snapseed has an empty state as its landing page. This is what every new and returning user sees. The instruction is straightforward and the design is minimal. It is the simplicity that works here. Google Tasks follows suit as well.
We highly recommend the KISS approach - keeping your empty states simple, usually with crisp well-written copy, accompanied by good/pleasing visuals works great and reduces distractions.
The biggest and most common use-case of empty states is at the unavailability of service or some kind of error message. Most product teams get straight to the point, while some take the tricky path of putting a positive twist to a negative emotion.
With an illustration that summarizes how users would feel at an error 404, Airbnb promptly redirects them to its more popular pages, nudging them to start afresh with their search for adventures.
Google Chrome delivers a great example of turning a negative experience into a positive engaging activity. In the absence of an internet connection, users can delight themselves with a game of T-Rex Run!
Yes, we are talking about that adorable lil’ dinosaur that jumps over cacti and dodges every obstacle in its path. We are all guilty of spending countless hours besting our high scores, oblivious to the minor internet disconnection.
As of 2018, the game was played 270 million times each month, across both desktop and mobile. Humans are known to have visceral reactions - making split-second judgments about how they feel about a particular design as soon as they see it. And this is where engaging content like the T-Rex game champions the case of well-thought empty states.
Dina Chaiffetz likes to think of the empty state as a miniature landing page.
“Whatever the purpose of your empty state, you should give your user a next step — something to do or stuff to interact with. Encourage users to engage with the feature or, if they don’t have access to this one, with another area of the app.”
Your product is always communicating. So are your empty states.
And in tiny details - a quick lesson, an Easter egg game or a beacon light, use these empty states to create meaningful conversations with your users, curate engaging experiences and nudge them towards aha moments!
Book a demo with us to understand how Hansel can improve engagement and conversions on your product’s empty states.