<

Voyager
Voyager

Empty State

Empty states occur when there is no content/data to show users. In general, we want to make empty states informative and actionable.

Something's wrong

We were unable to connect to the server. Click Refresh to try again or come back later.

HTML Copy 

<div class="qw-box">
    <div class="qw-box_body">
        <div class="text-center p-4">
            <div class="mb-3 d-flex align-items-center justify-content-center">
                <img src="..." />
            </div>
            <h2>Empty state title</h2>
            <p>Empty state message.</p>
            <a href="#" class="btn btn-primary">CTA</a>
        </div>
    </div>
</div>

Content Guidelines

An image or illustration is the initial component that indicates the context for the empty state.

The heading should state to the user what's wrong or why there's no content.

The message description should contain relevant information on how to move forward from the empty state.

The Call-to-action is either a button, button group, or inline link (within the message) that indicates a clear and predictable action(s). The user should be able to understand what will happen when they click the button.

Types of Empty States

There isn't one empty state for every instance one is needed. There are numerous reasons a user might be seeing an empty state, but we have categorized them into 4 main types.

Type Illustration Description
Success Empty State Illustration of an astronaut standing on the moon, planting an orange flag This empty state is seen when a user has accomplished whatever they were tasked with. Whether this be submitting their survey or cleaning our their inbox, this empty state will be there to congratulate them.
Relax Empty State Illustrated astronaut relaxing on the moon, reclining in a lounge chair, with their hands clasped behind their head. Sometimes is can be startling or unnerving to encounter an empty state suddenly. If the user has not necessarily done anything, but have run into an empty state that might seem barren, this empty state will be there to reassure them that they haven't done something wrong.
Searching Empty State An astronaut, standing on the moon, looking into deep space through a large, orage telescope. In our site a user is often filtering or searching on a page. When a user led search or filtering action results in nothing found, they will be shown this empty state. This empty state is also used when a user or company has not done anything yet in a feature, such as given recognition or created a goal.
Lost Empty State An illustrated astronaut, resting their helmet on their hand, in a perplexed fashion. Sometimes a user can get themselves into a situation where our site can not supply with anything to see. Whether this be because the page no longer exists or there is insufficient data to show, a user will encounter this empty state to notify them what they should do next.
Nothing to see Empty State A grassy knoll at night abcked by the vast emptiness of space When accessing a portion of the product for the first time, where they've yet to create any content, show this state.

Heading (Optional)

The heading should convey quickly the tone of the empty state. Headings, when used, should not exceed more than one line of text, and should always be used in a heading element with the class .qw-text-display-3. There is no need to change the line height or font weight for the header, unless in extreme one-off circumstances.

Include .mt-2 .mb-3 utility classes on your header to give it space from your image above it and message below it.

Do

No goals matched your filter.

  • Keep the header brief
  • Express the tone and purpose of the empty state, such as success or error
  • Include punctuation
  • Use title case if header is under three words. Use sentance case otherwise.

Don't

Insufficient Data

  • Avoid ambiguous headers
  • Use other elements and class combinations other than h* and .qw-text-display-3
  • Capitalize all letters of a long header
  • Leave headers as phrases and not sentences

Message

The message is the most important component of the empty state. Here is where the full reason a user is seeing an empty state, and leads them to what potential action to take next. Try not to exceed more than two lines of text for the message.

Craft the message using a p tage and include the .lead class on it to give it the right amount of emphasis on the page.

Do

Please expand your filter and try again.

  • Remember the design principle Make it feel personal when crafting messages
  • Make sure the message is specific enough for the purpose of the empty state
  • Include the purpose of the empty state and possibly what to do next

Don't

You will need to try that again.

  • Use non-descriptive or generalized message copy

  • Leave out the purpose of the empty state

  • Use header tags instead of a p with the .lead class

Call to Action (Optional)

Depending on the empty state type, an action might be necessary to give the user an option of what to do next after seeing the empty state. This can be in the form of a button, group of buttons, or an inline link.

The main difference when choosing when to use an inline link or a button is: a link is to take the user to a new page and a button is for doing another action.

No goals matched your filter.

Please expand your filter and we'll try again.

Show All Open Goals Create Goal

Loading States

There are times in product when the loading of something is long enough that there needs to be something more than our small loading animation to reassure the user that progress is being made towards loading their screen. These are structured the same way as an empty state, but there is not an action included.

There are two main animations used for loading states. Floating is the more generic and the fetching spaceman is when a specific thing like users or analytics are being loaded.
LostSpaceman LostSpaceman