Empty states, also known as zero states, are moments in the user experience when we don’t have specific info or data to show.
Empty states are a bit like this: Imagine you’re driving. You see a “Road closed” sign in the near distance. You pull over wondering what to do next. Looking around, you don’t see a detour sign anywhere, and your GPS isn’t suggesting alternative routes. In this situation, guidance telling you where to go would help you reach your destination.
Similarly, we use empty states to orient people in both familiar and unfamiliar spaces and build trust and confidence. When the moment is right, we can even use them to celebrate our users and their accomplishments or add a dash of delight.
Usage
An empty state can happen in these situations:
First-time use
Someone hasn’t tried out a feature or product yet, either because they’re new or still exploring.
Examples
Invoice like a pro
Send professional invoices, and track when they’re viewed, paid, and overdue.
[Create invoice]
Reach your audience in minutes
Once you create an email campaign, it’ll show up here.
[Create a campaign]
No info or data
Info was deleted, or a search in a database doesn’t return any matches.
Examples
We couldn’t find any items that match your filters. Try a different filter, or search by item name or SKU. [Clear filters]
This project was deleted. But you can restore it from the audit log. [Restore project]
Task completion
There are no new updates to share. This could happen when someone has completed a task, like reviewing all the emails in their inbox or categorizing all their transactions.
Examples
You’re all set!
Categorizing these transactions now will save you time come tax season.
You’re all caught up
New expense claims needing review will show up here.
Principles
Be clear
Clear writing can make even an unfamiliar space feel familiar. Empty states should explain in plain language what’s happened and what, if anything, someone can do to move forward. As always, try to avoid technical language.
In first-time use scenarios, try to be specific about what info or data will appear after the first use so the benefits and functionality of the product or feature are clear.
No bills to review
When you have bills ready to review and save to your books, you’ll find them here.
[No message]
On the starting blocks
When they’re ready, your ongoing and scheduled campaigns will appear here.
Oops! There’s nothing here yet.
We couldn’t find any records for this date range. Select a different date range and try again.
No results found.
Be helpful
Empty states should help people achieve their goals rather than making them feel lost. Helpful content also goes a long way in building and maintaining trust with our audience.
When you can, use a positive tone in empty state messages. Encouraging content might be all it takes to motivate someone to keep trying. Someone who feels supported in an experience will feel more comfortable exploring as they’ll be more confident in their skills.
Avoid shaming or blaming if someone reaches a dead end or hasn’t tried something out yet.
We didn’t find an app that matches your search
Try again with a different search term. Some popular searches include: Stripe, Square, PayPal, Time, and Amazon. You can also browse categories to find the app you’re looking for.
We didn’t find any apps
There aren’t any apps that match your search criteria.
Start your first project
Select Start project to create something new.
[Start project]
Hmm…
It looks empty here.
Track who you pay
Add the folks who sell you goods and services, and see how much you pay them.
[Add vendor]
Uh oh
No vendors yet.
Keep it brief
Get to the point quickly and cut out irrelevant details and extraneous words so people can get on with their day. Empower people to act quickly by providing just enough info to explain what’s happening and how to move forward. For more, see our guidelines on writing small.
Grow your audience
This is where you’ll store and manage your contacts. Add contacts to send your first campaign.
[Add contacts]
Grow your audience
Your audience is where you’ll store and manage your contacts. Once you add your contacts, you’ll be able to send your first campaign. We’ll walk you through the process.
[Add your contacts]
Welcome to your design library
Start creating designs to use in your marketing campaigns.
[Create design]
Welcome to your design library!
Here you can easily find and edit your existing designs to use in new marketing campaigns.
[Create Designs]
Add contractors to the team
Request info, make payments, and send 1099s right from QuickBooks.
[Add contractor]
Round out your team by adding contractors
Once you add contractors to your team, you can request their information, pay them directly, and send 1099s—all in QuickBooks.
[Add your first contractor]
Inspire action
Empty state content should encourage people to act, whether that means trying out a new feature or doing something differently with an existing one. In the end, we want to help people achieve what they came here to do.
All caught up!
You reviewed all your transactions. Check out your profit and loss to see how your business is doing.
You have no transactions to review.
Everything in one place
Securely link your banks and credit cards to track all the money going in and out.
[Link account]
No financial accounts linked.
Your payroll account isn’t set up yet
Once you’re set up, you can view your taxes.
[Set up payroll]
Your payroll account isn’t set up
You can’t view your taxes until you’ve set up payroll.
Know when to delight
Empty states can be an excellent opportunity to celebrate our users when they achieve their goals, establish a stronger connection with the brand persona, or turn an otherwise disappointing moment into an encouraging and lighthearted one.
Use your best judgment in deciding when to delight. For example, with frequently recurring empty states, it might make sense to lean on brevity and clarity over delight. Repeated exposure to the same message may result in “delightful” content becoming irritating over time. However, when someone has achieved a goal and the message is primarily celebratory, it might make sense to lean on delight.
For more info on when to delight, check out our celebrations guidance.
Nice work! You’re all caught up.
Whoops, there’s nothing here
Looks like there’s nothing for you to do in this area right now.
Nice job! You’ve reviewed your team’s work.
Check back later for updates.
Hooray!!! You’re up to date with your team’s work.
You crushed it!
Congrats on paying down your $6,420 credit card debt.
No new bills to display.
What to include
Headline
Make sure your headline is clear, brief, and includes the most important info. This way, the user can get the gist of the entire message, even if they don’t read anything else.
If you can do this in one line, even better.
Examples
- Upload your first report
- Organize your money
- Let’s create your first invoice
- We couldn’t find anything matching that search criteria
- There’s not enough data to run that request
- You’re all caught up!
- You’re all done with invoice tasks
More info
If you need more room to explain in addition to the headline or CTA, write a brief body message. Elaborate on the headline and tell someone how to move forward. If the headline tells the user everything they need to know, there’s no need for a body message.
- Expand on—but don’t repeat—the headline message.
- Describe the benefits of the product or feature.
Examples
- Here’s your custom list of categories for organizing expenses, income, and more.
- Reports you customize and save will be listed here.
- Check your spelling, then try again.
- You’re new here! We’ll need another month of data before we can show you this chart.
- You don’t have any tasks right now. Check back soon to stay on top of things.
Call to action (CTA)
Tell the user what they can do next. Advise them on how they can populate a data table in the future, or suggest another task they could be catching up on. There can be up to two CTAs: primary and secondary. CTAs are usually buttons, but they can also be links—use your best judgment when deciding which fits better in your experience. For more on CTAs, check out our actions guidance.
The primary CTA is the most important action you want the person to take.
Examples
- Upload invoice
- Connect bank account
- Start new search
- Add customer
Secondary CTAs are less important actions.
Examples
- Find out more
- Save
- Close
Putting it all together
Let’s see what a completed empty state message could look like.
Examples
Organize your money
Here’s a custom list of categories for organizing expenses, income, and more.
[Start organizing]
Upload your first report
Reports you customize and save will be listed here.
[Upload report] [Find out more]
We couldn’t find anything matching that search criteria
Check your spelling, then try again.
[Start new search] [Close]
There’s not enough data to run that request
You’re new here so we’ll need another month of data before we can show you this chart.
You’re all caught up!
You don’t have any tasks left. Check back soon to stay on top of things.
You’re all done with invoice tasks
Keep up the hard work!
