Overview
How are empty states used?
Use empty states when a table, chart, or list does not have any content yet or data returned in a request. This is a good place to bring some of the Iterable levity in our voice and tone, as well as provide an instructional sentence that directs the marketer how to proceed.
These empty state examples and types are for when an entire page/area is empty, not when individual components (such as a form field) are empty.
Where does do empty states appear?
Empty states appear throughout Iterable!
Here are some areas of the product that include this type of copy:
- Reports
- Project Members
- Campaigns
- Lists
- Templates
- Snippets
- Data feeds
- Journeys
- Experiments
- Webhooks
Copy guidelines
Remember the persona of "resourceful coach" when creating UX copy for empty states in Iterable.
- Use light humor to encourage the user
- If you add links, point to the relevant docs page
- Provide simple instructions for the next step
- Briefly explain the reason for the empty state
- Use an image that relates to the content type
- Make the user feel bad or guilty
- Link to the main docs portal
- Include unnecessary language that doesn’t help the user
- Provide info that doesn't add value, like “there are no campaigns yet”
- Use images that are unrelated to the message
Examples
Invalid URL or wrong project
Users can arrive at an empty loading screen if they try to access a campaign from the wrong project (e.g., if a colleague shares a link to a campaign, and the user is not logged in to the project where the campaign is stored) or the URL they're attempting to reach contains errors. When this happens, show an error state indicating that the user is in the wrong project or the URL is invalid.
Format this type of error state like this:
- [Icon]
- We can't seem to find this [resource name]
- Check the [resource name] URL for errors, or try switching to a different project.
Example 1
Example 2
We can't seem to find this campaign
Check the campaign URL for errors, or try switching to a different project.
No resources yet
When a user arrives at a blank page because they haven't added a certain resource type yet (for example, they haven't created any reports), include an empty state indicating that this is expected.
Format this type of empty state like this:
- [Icon]
- You'll find your [resource name] here
- Encourage the user to create a resource, and mention a value proposition.
Example 1
Example 2
You'll find your saved reports here
Don't get lost in the details! Create a report to see the big picture.
No search results
When a user runs a search that doesn't return any results, show an error state indicating that the search was unsuccessful.
Format this type of empty state like this:
- [Icon]
- No matching [resource name]
- Tell the user what steps to take next.
Example 1
Quick References
|
✅ Do this . . . |
🚫 Don't do this . . . |
|
We feel awkward! No [resources] matched your filter Try some new criteria, and see if you get some campaigns.
Deep breaths... there were no matching [resources] Switch up your filters and see what you get.
Ack! We couldn't find those [resources]. Try a new set of filters and let's find you some results. |
|
|
Hmm, no [resources]? Let’s fix that together Create new [resources] using the button above.
Don’t panic, but you don’t have any [resources] yet Create new [resources] using the button above.
Looks like you need some [resources] to get started Create new [resources] using the button above. |
We don't see any campaigns Create a campaign and try again
|
|
Psst…you should try adding some widgets. It’s fun!
Dashboards look better with content. Add some widgets to get the party started.
Gray is nice, but dashboard widgets are nicer. Add a widget or ten to get the most out of your dashboard. |
|