Empty State Guidelines

When to use emptystate?

Use an emptystate in large empty containers the user is supposed to fill up with content. An emptystate helps users understand what a feature is about, and what they should do to get started with it. An emptystate should be recognizable and different from the normal state of the feature.

Guidelines

• When adding the icon, choose a specific, recognizable one that stands for the feature or its elements. This also helps the user understand that they don't see the real content.
• Add a title to describe the action to perform to get started with the feature - 1 sentence.
• Add body text to provide further instructions on what to do (onboarding) with link to the documentation - 1-2 sentences.
• Preferably, add a primary button (action or link) that gets the users started with the feature.
• Emptystate is not a placeholder for real content. Unlike placeholder texts and images, the content and appearance of the emptystate is entirely detached from the real content of the container.
• Preferably, use double-width margins around the emptystate so the contents of the emptystate feel properly grouped.
• When the entire empty container is visible without scrolling, the emptystate should be both horizontally and vertically centered in the container. This strengthens the affordance of the emptystate (e.g. it belongs to the container, it's not a placeholder for real content).
• When parts of the empty container is not visible without scrolling (i.e. it's "too long"), the emptystate should be vertically aligned to the top.
• Preferably, use emptystate over a white background. Don't use the emptystate over colored backgrounds, or over grey backgrounds darker than #F3F3F3. It would significantly hurt its contrast.