Empty States

Empty states are a pivotal point in the user journey. They are opportunities to build rapport, drive engagement, educate, or delight the user. Empty states should never actually feel empty.

Web Storybook
yarn add @workday/canvas-graphics-web
Sources
Web Storybook
Web Install
yarn add @workday/canvas-graphics-web

Usage Guidance

Use Empty States when there is no data to show, especially in applications that have not been configured by the user. They’re also commonly used during onboarding experiences and initial usage.

Ideally, they will orient the user by providing feedback based on the user's last interaction (for example, an Empty State for a cleared Inbox) or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action.

Empty States are commonly used to:

  • Communicate application or process status to the user
  • Increase the learnability of the application or help discover a new feature
  • Provide a path for getting up and running with a task

Primary Types of Empty States

First Use

Present this type of Empty State when the user interacts with an application or a particular feature for the first time.

Example of a "First Use" Empty State

Every app has to start its users somewhere, so think of an Empty State as a blank canvas and paint something useful on it. While the screen may have started blank, with the help of an empty state, it becomes a vehicle for completing a task or increasing engagement.

User Cleared

Present this type of Empty State when the user has just completed a task or workflow, or has cleared all data associated with a Workday feature.

Example of a "User Cleared" Empty State

While using Workday, a user might encounter a situation where there is no task available. We call this the “user-cleared” Empty State. It’s an ideal opportunity to encourage the user toward new or next steps, or simply congratulate them on the accomplishment of completing the previous interaction flow.

After task completion, feedback is essential:

  • Inform the user that their tasks are complete.
  • Reward the user for accomplishing the task.
  • Encourage optimal next steps.

Errors

Present this empty state when a user has encountered a roadblock during the interaction.

Example of a "Error" Empty State

Errors are inevitable and can be caused by the user or Workday. It’s critical to anticipate errors and to inform the user of what went wrong, and why there is an error. Communicate this in a manner that is both helpful and makes sense to the user.

Variants

There are two types of Empty State variants and their usage depends on the complexity of the product’s layout and the corresponding task or action involved.

Example of a "Low-Emphasis" Empty State

Primary

Use the primary Empty State to bring attention and focus to the users task at hand. This variation is typically used when the corresponding task is the user’s primary action or there are not a lot of competing actions on the page.

Low-Emphasis

The low-emphasis Empty State is best used in more dense, noisy interfaces or when there are competing actions in close proximity. They allow the Empty States to blend into congested layouts more subtlety. This variation is typically used when the corresponding task is not the primary focus of your user or when there is no action required.

Spacing & Positioning

All Empty States have a width of 360px to encourage consistent use across all of our products.

Empty States are scalable for use in smaller areas of your UI. Scaling is best reserved for more dense interfaces or when there are competing actions or Empty States in close proximity.

Although Empty States have some spacing included in their container, be sure to provide additional padding of at least 32px to avoid crowding the illustration. This white space is particularly important when using Empty States within a UI containing components such as a modal, card, or table.

Empty State Spacing Guidelines

Voice and Tone

Our Empty States should orient the user and encourage them to get back in the flow. They should never make users feel guilty because they haven’t completed a task or process. How we communicate this is an important part of making use of Empty States. Reference the Canvas Design System UI Text Style Guide page on Empty State text for help writing thoughtful, effective copy for your Empty States.

Web Examples

The graphics shipped in @workday/canvas-graphics-web are just SVGs with some additional metadata. If you'd like to easily use them in React, use the Graphic component from @workday/canvas-kit-react/icon:

import React from 'react';
import {Graphic} from '@workday/canvas-kit-react/icon';
import {emptyStateCloudGraphic} from '@workday/canvas-graphics-web';


export default () => <Graphic src={emptyStateCloudGraphic} />;

This can also be used with any arbitrary SVG.

Props

NameTypeDefaultDescription

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section