Heading
- Create a short, scannable heading that summarizes the empty state or next step.
- Use sentence case.
- Do not use punctuation unless it's a question.
- Where possible, write the heading as a positive statement.
Body
- Include the reason for the empty state.
- Clearly explain what data will populate the space and the user action needed to get the data.
- Focus on the user benefit and encourage progress toward a user goal.
- Offer a next step or a way to find more information.
- Use a maximum of 2 sentences.
- Use punctuation.
- Avoid jargon.
- Do not repeat information from the title.
- If there is nothing for the user to do, celebrate!
Alignment
Full screen
Left align the heading, body text, and any CTA buttons.
Horizontally align the text and buttons with the illustration.
Small screen or container
Centre align the heading, body text, and any CTA buttons.
Vertically center the block of elements.
- Use specific labels that clearly explain what happens when the user selects the button.
- Use 1 to 3 words on a label.
- Make sure button labels relate to the empty state heading.
- Use buttons to encourage users to explore the product.
- Do not use too many buttons in an empty state as it overwhelm users.
Content examples
| Use case | Example messages |
|---|
| The user interacts with the product for the first time. | Your security matters The administration database is now protected with an authentication code. Get code |
| Plan with confidenceTrack money going in and out of your bank accounts so you can plan your budget.Connect your bank |
| Activate this dashboardOnce you've made some sales, you can track your performance here.Create a sales invoice |
| The user needs to add data. | Update your teamYou can manage the work schedule of all team members who report to you.Add team members |
| Add transactions to get startedAdd a transaction or connect to your bank to import transactions.Connect a bank account |
| The user needs help to start a process. | Create your inventoryYou can view the price and location of a selected stock item or add it to the work site.Select a stock item |
| The user searches for data but no results are found. | No results foundThe item you're searching for is not in our database.Try using different search criteria.Make sure all words are spelled correctly. |
| All tasks completed. | Time for a breakYou've completed your current tasks. Check back soon.View completed tasks |
| Draft transactions savedYou can review and edit them in Draft transactions. |
