Overview
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: 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: Empty states should be designed to prevent confusion and inform user of what to do next when expected content is not displayed,
Do: Empty states can convey first steps needed to start using a new feature or section,
Don’t: Use empty states to communicate errors, warnings or general feedback.
See more on errors & feedback ->
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
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.
- Blank states give concise and relevant information about the cause of the blank state.
- Consider all scenarios that could cause the blank state to occur, and provide actions or help boxes to resolve.
- 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: Use blank states where the user needs to take multiple actions to continue.
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
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.
- Idle states inform the user about what needs to be selected, often with the phrase structure;
“Select ___ to ____”. - Idle states are usually non-interactive and do not contain actions. They often only contain a message advising what needs to be selected.
- 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
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.
- Day zero states are populated with starter content and actions to enable the user to take the first steps
- Day zero states are used for brief, simple actions (eg. load an asset, open a setting, login)
- Be mindful to avoid including too many action controls in a single empty state
- 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.
- Always use --unity-font-size (Default) and sentence case for the message text
- Make text easily scannable to highlight key information
- Keep the message concise. Only include the information the user needs to understand and resolve the immediate event
- 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.
- Always use .minibutton base style for action buttons
- Be mindful to avoid including too many action controls in a single empty state
- 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.
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 are center aligned in the content viewport
- Leave vertical spacing between empty state message and action controls
- Empty state content container is responsive to the viewport size; message width scales up or down vertically as the window resizes
- Consider setting a maxwidth for the empty state content container to avoid long lines of text
- 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.
