Empty states

Introduction

Sometimes a space that usually displays content won't have any to show. This can be confusing, discouraging, or disorienting.

Empty states help people understand why there's no content to show, and what they can do about it, in a way that's just as welcoming as any other part of the Justworks experience.

Types of empty states

People typically reach an empty state for one of these reasons:

• This person, or their company, has yet to do whatever would add content to this space—so this is a first-time experience for them.
• There's been an error—the content that's supposed to be here didn't load.
• An action has been taken that means there's no content to show here ...for now. It's temporary.

How we approach the elements of an empty state differs slightly in each case.

Anatomy

Image  

Optional

A visual shorthand for the type of content normally shown here, the reason for the empty state, or the steps that can be taken to fix it.

Primary text

• If this is a first-time experience, encourage the user to try out the relevant feature.
• If there’s been an error, summarize what went wrong as concisely as possible.
• If this is temporary, summarize why the space is currently empty.

If it isn’t paired with secondary text, primary text should be styled like secondary text.

Secondary text  

Optional

• If this is a first-time experience, you can further explain the benefits of using this feature for the first time.
• If there’s been an error, you can suggest what actions can be taken to fix it.
• If this is temporary, you can use this space to explain what can be done to populate this space with content.

Action  

Optional

If there’s an action that can be taken within Justworks to clear this empty state, include a button that can be used to take that action.

Dos and don'ts

Empty states are not loading states

Don’t use an empty state to show there’s not content here yet, but there will be in a few seconds. That’s what loading states are for!

Don't provide buttons for browser-default actions

If the browser already has a button for the action you're suggesting for clearing the empty state, don't include an extra one. Include it in the secondary text.

Don’t repeat empty states on a page

Even if for technical reasons they need to be loaded separately, if contiguous parts of a page have the same type of empty state, for the same reason, with the same resolution, summarize it in a single empty state.

Examples in Figma