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 application one can easily get the impression that a map is not empty because it shows colorful content of the whole country when the opposite is true. Therefore, the empty state is an important (first) touch point between the user and the interface that requires special consideration when designing a map application.

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 with the need for initial interaction without the user knowing that this is required. As a direct result a user may feel intimidated or lost, in some cases even think that the application 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 first steps so that the empty space can be utilized with call-to-action (CTA) elements, cartographic elements like Focal Point or Choropleth Map that allow 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 application 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.

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