Empty states

What is Empty State for us?

An empty state is an experience when there is no content to display or when a user hasn’t yet taken any action to generate content. It typically occurs when a user’s search yields no results, their data hasn’t been loaded yet, or they haven’t engaged with the app enough to populate the space. Empty states serve to guide our users on what to do next, offering a sense of direction and purpose. They should feel inviting and offer reassurance.

1. Take it as an opportunity for interaction

Think of the empty state as a moment to engage with your user. It’s a chance to encourage them to take action, explore, or try something new. Use this space wisely to motivate further interaction.

2. Focus on what users can do, not what’s missing

Instead of simply stating that the space is empty, tell users what they can do to fill it. Guide them through the steps they can take to achieve the desired result.

3. Use an active voice

Direct, active language makes the message more engaging and actionable. Instead of saying, “This space can be filled by adding items,” say, “Add items to fill this space.”

4. Be clear and straightforward

Maintain a tone that aligns with your brand’s voice, avoiding excessive humor. The message should be easy to understand and friendly, but not overly casual. It’s okay to add a little warmth, but don’t let it overshadow the clarity.

5. Avoid confusion by using simple, familiar terms

Stick to language that your users will immediately recognize. Avoid using synonyms or complex phrasing that might make the message harder to understand. The goal is to be as straightforward as possible.

6. Align headings and buttons

If there is a button or a call to action, make sure it matches the heading and supports the next step the user should take. The messaging should be cohesive, guiding the user smoothly through the process.

7. Minimize use of punctuation

Keep punctuation to a minimum, particularly in headings. This helps maintain a clean, minimalistic look and keeps the focus on the message.

Types of Empty States

1. No data to show

This type of empty state occurs when there’s simply no data to display, and there isn’t an opportunity to provide a call to action. It often appears in situations where the user’s selected criteria don’t match any available options.

1.1 Pop-up

No Data, Redirect to Another Option

In this scenario, a pop-up appears to inform the user that the requested data isn’t available and offers an alternative route. The message needs to be informative but clear and direct.

2. Pages requiring user action

These empty states are used when a page or feature is accessible only after the user takes an action, such as creating a wallet or completing a profile. This category can be divided into two:

2.1 Direct action with a button

In these cases, the empty state offers a direct call to action, leading users to take the necessary step with a button.

2.2 Tutorial or guidance for first-time users

When users are accessing certain features for the first time, the empty state can act as a mini-tutorial. It should guide them through what they need to do, without being overwhelming.

3. Input placeholder

These empty states appear when users are required to input text. Since space is limited, the messaging should be short, clear, and respectful of character limitations. Universal abbreviations can be used where necessary.

4. 404 pages

A 404 page occurs when a user tries to access a page that doesn’t exist. While you want to maintain a professional tone, it’s also acceptable to lightly reference aviation metaphors, without overdoing humor since the audience is international.

5. Restricted access pages

These empty states appear when users try to access content they don’t have permission to view. It’s important to explain why the access is restricted and offer an alternative where possible.

How to write a new empty state?

Step 1: Understand the context of the empty state


Before writing an empty state, consider why this particular state appears. Does the user have no data yet because they haven’t taken an action? Is there an unavailable service? Identifying the root cause will help you frame the message appropriately.

Step 2: Guide users toward action


An empty state isn’t just a dead-end. It’s an opportunity to engage the user and guide them toward the next step. Avoid simply stating what’s missing. Focus on what the user can do next to fill that empty space.

Step 3: Use active voice and friendly, clear language


Always write in the active voice to make the message more direct and user-centered. The tone should remain friendly but not overly casual. It should match the professional yet warm hospitality Turkish Airlines is known for.

Step 4: Don’t just explain the absence – empower the user


Focus on what the user can do next, not what’s missing. Highlight solutions or alternative options instead of pointing out the lack of data or actions.

Step 5: Ensure consistency across components


The heading, body text, and any call-to-action buttons must align. The message in the empty state should set expectations, and the button should deliver on that promise. There shouldn’t be a disconnect between what the message says and where the button leads.

Step 7: Adapt to different platforms


Consider the format in which the empty state will appear. For example, on mobile devices, screen space is limited, so messages need to be concise and informative without being overwhelming. Ensure the empty state fits naturally on different screens.

Step 8: Review and collaborate


After writing the empty state, collaborate with designers and developers to ensure the message fits the interface. Check whether the message displays properly on different devices and whether the button leads to the correct destination.