Designing the Empty State

The pages nobody designs

A site is designed with content in it, because that is what the design is for.

The states where there is no content get whatever the platform produces by default.

Which is usually a blank area, sometimes with a terse line of system text, and occasionally nothing at all.

Somebody landing there cannot tell whether they made a mistake, whether the site is broken, or whether there is genuinely nothing.

Where they occur

• Search with no results.
• A filtered list that excludes everything.
• An empty basket.
• A category with nothing in it yet.
• A blog with no posts in that tag.
• A product with no reviews yet.

The second is the most damaging on a shop, because somebody who has actively narrowed a list to nothing has demonstrated exactly what they wanted and been shown a blank page.

What an empty state has to say

Three things, in order.

What happened, in plain words: no results for that search, nothing in your basket, no reviews yet.

Why, where there is a reason worth giving: the filters exclude everything, that category is being restocked, we have only just started collecting these.

And what to do next, which is the part that recovers the visitor.

Most default empty states manage the first and none of the rest, which is why they read as failures rather than as information.

The next step is where the value is

Since somebody in an empty state is still present and still interested.

For a search with no results, offer the two or three closest things you do have, and a way to ask a person.

For an over-filtered list, offer to remove the most restrictive filter rather than making them start again.

For an empty basket, link to the categories rather than the home page, since they came to buy something.

For a missing category, offer the notification you would offer on a sold-out product.

Each of those converts a dead end into a route, and each is a line of text and a link.

A worked example

A shop's search returned a blank area with the words no products found when nothing matched.

Checking the search logs showed a substantial number of no-result searches, most of them for things the shop actually sold under a different name.

They rewrote the empty state to say what had been searched for, offer four popular categories, and invite a message with a direct link.

They also added the alternative names to the relevant products so the searches started matching.

The no-result rate fell, and the messages that arrived from that page turned out to be a useful source of the words customers actually use.

The whole change was one template and an afternoon of naming.

Read your own no-result searches

The most useful thing this subject leads to.

Most site search tools record what was searched for and whether anything was found.

The failed searches are a direct list of what people expected to find and could not, in their own words.

Some of those are things you do not sell, which is useful to know, and some are things you do sell under a name customers do not use.

Fixing the second group means naming products and services the way customers name them, which improves more than the search.

Read that list monthly, since it takes five minutes and is the only place customers tell you their vocabulary directly.

Say it as a person would

Since tone matters more here than almost anywhere.

Somebody in an empty state is mildly frustrated, so a terse system message compounds it.

Write what you would say across a counter: we do not have anything matching that, here are the closest, or just ask us.

Do not blame the visitor for their search terms, and do not use language suggesting they did something wrong.

And avoid being cute about it, since a joke in the way of somebody trying to find something is an obstacle rather than a charm.

The first-run version

Worth a separate mention, since it affects new sites and new sections.

A blog with no posts, a gallery with no images, or a review section with none yet all look like something is broken rather than new.

Either populate them before launch or do not show them at all, since an empty section undermines the pages around it.

Where a section will genuinely fill over time, say so in the space: the first case studies will appear here shortly.

That reads as a business getting started and an empty box does not.

The error page is the same problem

Worth including, since it is the empty state most sites do have and least often write.

A page not found message is somebody who followed a link that no longer works, frequently from a search result or an old printed reference.

The default version says the page does not exist and offers nothing, which sends a visitor who wanted something specific back to a search engine.

Write it the same way: say the page has moved or gone, offer the three most likely destinations, and give a way to ask.

Then check what is actually reaching it, since a run of hits on one missing address usually means a link somewhere is wrong and can be redirected properly.

The counter-case

These are edge cases and should be treated proportionately.

A small brochure site with no search, no basket, and no filtering has almost none of this to do.

Elaborate illustrated empty states are also a well-known way to spend design effort on something very few people see.

And the right answer is frequently to reduce how often the state occurs, by naming things better, rather than to decorate the page that reports it.

Write the three sentences, offer a genuine next step, and read your failed searches monthly.

What to do

1. List the empty states your site can produce.
2. Visit each one deliberately.
3. Say what happened, plainly.
4. Give a reason where there is one.
5. Offer a real next step.
6. Read the failed searches monthly.
7. Hide sections that are empty at launch.

Step six is where this stops being a design exercise and becomes useful, since the failed searches are customers telling you what they call things.

Seeing your site without knowing it is covered in reading your own site as a stranger.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.