Empty states are messages that appear whenever a page or element has no content to display to the user. An empty state is an opportunity to engage and delight users. The empty state should tell users what it’s for and why they’re seeing it. Effective empty states also tell users what they can do next.
Overview
Looks like Reports haven't been set up yet
Set it up today to start improving your business through our integrated system.
Make users aware that a feature is not configured for use.
Communicate that there is no data to display.
Act as a placeholder for regions in the app left blank intentionally.
Convey an error state, like a server response error, i.e., 404 or 500.
Display empty search results.
Help users onboard and encourage them to interact with the application
Prevent users from having to “back up” and go in a different direction
Headlines
Empty states headlines should be proactive and helpful. Focus on the task ahead that will help them fill the empty state, rather than calling out what’s missing from the screen. Calling out what’s missing can work in description text, but it’s always better to give information about the filled state of the screen.
Good Empty State - Headline Gives Proactive Direction
Bookmark Your Reports
Bookmarked reports will appear here for quick access.
Empty states differ from introduction screens in the headline wording. They should give the user an instruction. Additionally, introduction screens will often be the first screen after launching a wizard, whereas an empty state would not likely be used in that scenario.
Set Up Your Reports
You can now create reports with rules based on your business needs. No more complex spreadsheets just to keep track of your business health.
<BodyTextsubdued>You can now create reports with rules based on your business needs. No more complex spreadsheets just to keep track of your business health.</BodyText>
<Headline>Welcome to Your Reports Walkthrough</Headline>
<BodyTextsubdued>We will now teach you how to create reports with rules base don your business needs. This walkthrough will take 5-10 minutes.</BodyText>
Bad Empty State - It's Worded Like an Introduction Screen
Types of Empty States
First Time Setup
During the initial onboarding process, the user will encounter a lot of empty states. We should try to make these empty states fun and encouraging with an approachable tone and helpful content so the user feels supported and confident through the set up process. Since these empty states will only be seen once or twice, they can be celebratory and decorative without being overkill.
Educate the User
Sometimes the purpose of the empty state is to teach the user how to fill it by explaining what to do next or using a CTA to link them to a walk-through. Once the user learns how to fill the screen, there’s a good chance it may not be empty again. If it is likely to be empty again, an additional Recurring Empty State may be needed.
Keep explanations concise. Any longer than 200 characters and/or 4 lines of text should be made into a help article or walk-through.
If linking to a help article or walk-through, be sure to prime the user on what each will entail.
Illustrations are encouraged. See Illustrations for more information on how to employ them.
Keep the tone friendly and encouraging.
Illustration + Headline + Explanation
Build a Custom Report
Click "Add Filter" in the left column to include or exclude specific characteristics of your audience. You can nest segment logic and have as many segments as you need.
<BodyTextsubdued>Click "Add Filter"in the left column to include or exclude specific characteristics of your audience. You can nest segment logic and have as many segments as you need.</BodyText>
</div>
Illustration + Headline + Explanation + CTA
Build a Custom Report
Not sure how to get started? Let us take you through a quick walk-through.
