Empty state · UX essentials

Essential guidance on effectively using empty windows.

When to disable controls or hide them altogether
Blue plus sign icon indicating that clicking on this will expand this content

Overview

Timeline displayed with idle selection on the left and the empty state of timeline on day zero.
"Idle" (waiting for interaction) and "Day 0" (first visit) states in Timeline

Empty state usage examples found in the editor;

Empty states are placeholder states when there is nothing to display in a window.  They are used to inform the user about the cause of an error or provide helpful links and actions to generate content or perform a function to continue.

  • Empty states at a bare minimum contain a message, which uses --unity-font-size (Default) variable.
  • Depending on the case, action buttons or help boxes can be included to help the user navigate, see content best practices.
  • If the use case requires multiple actions or onboarding steps, you may have to consider a custom onboarding flow. Empty states are meant to be brief starting points.
  • Day zero states are used to welcome the user who is new to a feature or section of the Editor, to help them understand the context of the first steps needed to continue.

Usage guides

Do recommendation illustrated by a green checkbox icon

Do: Use empty states to inform user when there is no content to show in a window (eg. no network connection, or no search results),

Do recommendation illustrated by a green checkbox icon

Do: Empty states should be designed to prevent confusion and inform user of what to do next when expected content is not displayed,

Do recommendation illustrated by a green checkbox icon

Do: Empty states can convey first steps needed to start using a new feature or section,

Don't recommendation illustrated by a red X icon

Don’t: Use empty states to communicate errors, warnings or general feedback.
See more on errors & feedback ->

Don't recommendation illustrated by a red X icon

Don't: Avoid using error or warning icons, as empty states do not always suggest something went wrong. See more on displaying help boxes below.

Usage examples

Blank state

An example of a package manager search that resulted in a blank state accompanied by the text "No results for package name."
This shows a blank state where a package manager search returned no results

Blank states are shown when there is nothing to display in a window, for example, when a search returns no results or a broken network connection causes nothing to display.

  1. Blank states give concise and relevant information about the cause of the blank state.
  2. Consider all scenarios that could cause the blank state to occur, and provide actions or help boxes to resolve.
  3. Blank states can contain simple action buttons, such as Retry Connection button when there is no network connection, or an error help box if a connection attempt fails. For more information see content best practices.
Don't recommendation illustrated by a red X icon

Don’t: Use blank states where the user needs to take multiple actions to continue.

Don't recommendation illustrated by a red X icon

Don’t: Use blank states for rare situations or edge cases. Check other feedback types to effectively communicate to the user when something goes wrong.

Idle state

The idle state of a debugger window that advises the user to select an instruction from the left column to begin to see details.
Debugger window informing the user to select an Instruction to begin a see the details

Windows are in an idle state when there is nothing selected to populate it with content. For example Timeline needs the user to select a GameObject in the Hierarchy to display its properties.

  1. Idle states inform the user about what needs to be selected, often with the phrase structure;
    “Select ___ to ____”.
  2. Idle states are usually non-interactive and do not contain actions. They often only contain a message advising what needs to be selected.
  3. Idle states are not first-time use cases. To help onboard the user new to a feature, use day zero states and custom onboarding flows instead.

Day zero state

On the left a Timeline window and on the right a Collaborate window informing the user about day zero actions that can be taken.
Timeline and Collaborate windows informing the user about actions required to begin

Day zero states are used to welcome the user who is new to a feature or section of the Editor, to help them understand the context of the first steps needed to continue.

  1. Day zero states are populated with starter content and actions to enable the user to take the first steps
  2. Day zero states are used for brief, simple actions (eg. load an asset, open a setting, login)
  3. Be mindful to avoid including too many action controls in a single empty state
  4. If the user needs to be onboarded in multiple steps, with a variety of actions to start, use sequences of onboarding or launch flows in a full window. Day zero states are meant to be brief

Content best practices

Message

Empty state messages should use the plainest possible language that can clearly convey the message.

  1. Always use --unity-font-size (Default) and sentence case for the message text
  2. Make text easily scannable to highlight key information
  3. Keep the message concise. Only include the information the user needs to understand and resolve the immediate event
  4. Avoid obscure abbreviations and technical jargon. Use a console log or a help box message to communicate errors or technical information

Displaying actions

Consider including an action or link to help the user decide what to do next.

  1. Always use .minibutton base style for action buttons
  2. Be mindful to avoid including too many action controls in a single empty state
  3. Keep button labels concise when describing what action the user can take (eg, "Login" , "Remove" or "Create")

Displaying help boxes

In some cases, an empty state with a message and an action might need to be supported with a help box.

The text “No Network Connection. Retry Connection” displayed on the left in an initial empty state and on the right accompanied by an error message after a failed connection attempt.
“No network connection” blank state on initial display, and after a connection attempt failed

Consider including help boxes if the state persists longer than usual, or the attempt to recover from the empty state has encountered an error.

Empty state formatting

Alignment and spacing

Empty state contents shown center aligned in a Timeline window on the left and in a Collaborate window on the right.
Empty state contents are center aligned in the viewport
  1. Empty state contents are center aligned in the content viewport
  2. Leave vertical spacing between empty state message and action controls
  3. Empty state content container is responsive to the viewport size; message width scales up or down vertically as the window resizes
  4. Consider setting a maxwidth for the empty state content container to avoid long lines of text
  5. Don’t align empty state content to the left or right of its content window

Text style

Empty state messages are styled as default text.

1
Default Text
--unity-colors-default-text
The default text color
#090909
#D2D2D2
--unity-font-size (Default)
Use the standard font size (12px) for most empty states.
12 px

Resources

Kits, tools, libraries, and documentation to guide users through creating for the Editor.