Empty states
Empty states appear when there's nothing to display to our users. They can happen in a variety of situations:
- First use: When someone first uses a product or a feature. For example, when someone creates a new Database activity.
- User-emptied: When users have completed all tasks or actions, or have cleared the interface themselves. For example, when a student has completed all upcoming actions in the Timeline block, or when someone deletes all their messages.
- No results: When users search for something or use filters that return no results.
Empty states are a good opportunity to make a human connection with users, showing them we are here to help them move forward. You can also use empty states to educate users about a new feature, or to onboard new users and show them the key tasks they can do to get started.
Depending on the part of the experience where they appear, empty states may include an image, a title, a description and one or more calls-to-action.
Basic guidelines
- Avoid completely empty states.
- Help users understand why there is nothing to show them.
- Guide them to take an action.
- Be clear and concise, and use friendly language.
- You can use visuals to make empty states more engaging, but don't rely on the image alone to convey your message.
Content
Title
The title is a short explanation of why the user is seeing an empty screen.
Your search didn't match any courses
Nothing to show
You're not enrolled in any courses
No courses found
Don't use punctuation in the title, unless it's a question or an exclamation.
On first use or user-emptied states, writing an encouraging title not only informs users, but it's an opportunity to create a positive user experience.
You're all caught up! There are no upcoming activities in your timeline.
No upcoming activities There are no upcoming activities in your timeline.
Description
The description guides users on how to move forward with the experience.
Explain briefly what users can do to fill the empty state.
Your search didn't match any courses Try adjusting your filters or browse all courses.
No results There are no results for your search.
If users can't do anything themselves to fill in the empty state, explain what they will see in the screen once it has content.
You're not enrolled in any course Once you enrol in a course, it will appear here.
No courses You're not enrolled in any course yet.
Calls to action
The call to action (CTA) in an empty state is a button or link that tells the user what to do next to 'fill' the empty state.
Keep calls to action concise and actionable, and tell the user exactly what they will get if they follow them.
You're not enrolled in any course Once you enrol in a course, it will appear here. CTA: Browse courses
No courses You're not enrolled in any course yet. CTA: Search
This database is empty Add entries to start building your activity. CTA: Add entry
Add the first entry This database has no entries yet. CTA: Continue
One some occasions, you might want to use two calls to action: one to 'fill' the empty state, and one to give users more context or information.
You can include the secondary call to action as a link in the description:
Create your first course Need help getting started? Check out our Quick start guide. CTA: Add course
Or include it as a secondary call to action:
No entries yet CTAs: Import entries | Add entry
Illustration
Using an illustration can help users understand the context of the empty state and make the experience more engaging and delightful. However, it's important to use illustrations only when they add value to the user experience. Never rely on the image alone to convey your message, and remember to add alt text to the image if it's essential to understanding the empty state.