Empty State

Empty State

What Problem Does This Solve?

Leaving something blank, empty or without cues on what to do next does not make a good first impression and leaves the user wondering of what to do next.

Why Use This Pattern?

Empty state is the screen that people see when they start working on a task but there is no data to show yet. In the context of a map app one can easily 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 good as not showing a map at all. Therefore, considering the empty state as an important (first) touch point between the user and the interface is crucial for building a stunning map app.

When to Use This Pattern

It is very common for map applications to default the map extent to the smallest scale (e.g. the whole country or state) possible, which is most likely 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. Users will need to figure out that further interaction are needed which is easy to misunderstand or overlook. As a direct result a user may feel intimidated or lost, in some cases even think that the app is broken.

Considering the visual state of the map before the user’s first interaction will improve and optimize the user experience and workflows.

What’s the Solution?

To make the empty state useful, consider the user’s task and anticipate their first step so that the empty space can be utilized with call-to-action (CTA) elements, or cartographic elements like Focal Point or Choropleth Map. The goal is to get the user to start interacting or encourage the user to add content and therefore fill the space in a way that makes sense.

Another approach is to implement a Landing Page that prompts users to provide certain inputs like typing or selecting a location which allows the application to start at an extend that is meaningful and avoids the Empty State fallacy.

Special Considerations

Consider removing any content element that isn’t populated because it might be needed later, resist the urge to “reserve space”. Put yourself in the shoes of the end user that has never seen the app before. What is their first impression? Would they understand what they see on the screen? Don’t overwhelm them with data that isn’t meaningful or requires a lot of thinking. Apply Task Oriented workflows that ease users into finding the answers they came looking for.

Examples

Empty State of a Store Locator before the re-design
Empty State of a Store Locator application before the re-design
Store Locator after re-design
Store Locator after re-design

2 thoughts on “Empty State

Leave a Reply