Empty state

WHAT

The empty state, sometimes also called blank slate, is one of the most overlooked aspects in UX design. It refers to moments during the experience when screens, panels, or containers are empty. Leaving something blank or empty does not make a good first impression and leaves the user wondering what to do next.

WHY

The most common reasons for empty states are first use (user hasn’t started the task to generate data yet), no results or no data (search or filter returned zero results), or the user has finished their task or wants to reset the app to its original state, such as clicking the home button.

In the context of a map app, it’s easy to get the impression that a map is not empty because it shows colorful content when the opposite is true. The starting extent of the whole country or continent is rarely relevant to a user. It often shows too little (empty) or too much (overload) information and is as meaningful as not showing a map at all. Therefore, considering what the empty state should be is crucial for building an effective map app because it serves as an important (first) touch point between the user and the interface.

WHEN

A common mistake in map apps is to default to an extent that is at the smallest possible scale, such as showing the whole country or state. In many cases, this magnitude turns out to be meaningless to the user whose need is to discover or research details about their area of interest. Additionally, the map will most likely display unfamiliar data or even be empty, with little guidance on the next step. As a direct result, the user may feel intimidated or lost and, in some cases, even think that the app is broken.

Builders need to consider the empty state for any type of app but it’s especially important during initial use. Other common use cases include potentially empty data displays such as lists or search results.

HOW

The main goal of dealing with an empty state is either to fill it with useful, helpful, and informative content or avoid empty spaces in the first place. Filling empty space is an opportunity to communicate. It provides you with the space to teach users how to use a new feature, guide them in getting started with a task, or tell them why something is empty. The latter is an opportunity to show the character of your app by adding creative placeholders or a funny image that delights the user. Resist the urge to “reserve space” just because it might be needed later.

A map can feel intimidating and overwhelming, so it’s important to show empathy with your users, understand the purpose of their visit, and think about what can be done to encourage them to interact with the map. Simplify the map as much as possible, provide clear labels, add markers or a focal point, and consider other solution strategies as outlined in chapter 4, “Dealing with Complex Data.”

One component that does not have a case of empty state is the info pop-up. If the user clicks in the map without touching a feature, there is no reason to report the absence of data. This type of result is annoying, requires unnecessary work to close again, and should be avoided. In cases in which the app can determine the user’s intent for clicking in the map or if any inaccuracies may have led to the empty result set, the info pop-up could instead provide a solution to help the user move on from the potential input error.

Finally, another approach to avoid the empty state fallacy is to implement a landing page that prompts users to specify a location up front, which allows the app to start at an extent that is meaningful and less intimidating.

EXAMPLE

Figure below shows an example of a store locator with all the interface elements you might expect: search input, filters, search results, and a map. Even though the designer thought about the empty state and tried to accommodate by using the blank space of the search results and adding an informational message, “Enter your search above to see results,” it still feels like wasted space. The filter isn’t useful because nothing has been searched for yet, and the map doesn’t invite the user to use it as an alternative input. All in all, the app looks and feels bare.

For the redesign (also below), all the elements that haven’t been used yet are removed, which helped provide space to add a tag line, “Find a store near you!” and potentially links to featured stores or special offers. The redesigned map now highlights states that have stores and invites users to click in the state of interest as an alternative means for input. In summary, thinking through the empty state helps optimize the UI and improve the UX.