The Empty State Is Your Best Teaching Moment
A blank screen has the user's full attention and nothing competing for it. Use it.
Larkspur is a tool for running retrospectives. A new team lands on the Boards page and sees a grey illustration of a clipboard, the words No boards yet, and a blue button reading Create board. They click it. They get a blank board with three empty columns called Column 1, Column 2 and Column 3. The meeting is in four minutes. They open a shared doc instead and never come back.
That empty state: What a screen shows before there is any content in it. was designed. Someone drew the clipboard. What nobody did was ask what the user needs to learn in the eight seconds before they decide this tool is not worth the risk.
The only screen anybody reads
What an empty state is competing with
An empty screen is the only moment in your product where the user has no data of their own to look at, which means it is the only moment where they will actually read what you wrote. Every later screen loses that attention to their own content. Treating it as a placeholder is spending your best real estate on an apology.
Kathy Sierra's framing in Badass is the right one to hold. Users are not trying to get good at your product. They are trying to get good at the thing your product is for. Larkspur's user does not want to learn Larkspur, they want to run a retro that does not go sideways. The empty state should teach the retro, and carry the tool along with it.
The apology
- No boards yet
- Nothing here! Create your first board to get started.
- You have no items. Click the + button to add one.
- Your dashboard is empty
The lesson
- Start your retro. Most teams use Went well / Didn't go well / Try next. We'll set those columns up.
- Start from last sprint: paste your Jira sprint link and we'll pull the ticket list in as cards.
- Try a 15-minute format: 5 min writing, 5 min grouping, 5 min picking one action. We'll run the timer.
- Nothing to show until your first retro. Here's what this page looks like with three retros in it: [preview]
Four jobs an empty state can do
- Show the filled version
- A faint preview of the populated screen answers what is this for better than a sentence. It also sets expectations about volume: one card or forty.
- Teach the domain
- Give the default column names, the standard format, the typical cadence. You are handing over a working practice, and the tool comes with it.
- Remove the first step
- Offer an import, a template, or sample data that can be edited in place. Blank canvases are a tax on people who do not yet know what good looks like.
- Distinguish empty from broken
- A filtered list with no results, a first-run screen, and a failed load look identical if you use one component for all three. They need different words.
That last row causes more damage than the others combined. If a user applies three filters, gets No items yet, and concludes their data is gone, you have manufactured a support ticket out of a string. Write the three cases separately: Nothing here yet for first run, No results for Q3 and Owner: Priya for filters, with a Clear filters link, and We couldn't load your boards. Retry. for failure.
Worked example
Larkspur's rewrite
The Boards page now opens with three template cards: Went well / Didn't go well (the classic), Start Stop Continue, and Sailboat. Each shows a ghosted preview with two example cards in it. Beneath, one line: Pick one, or paste a Jira sprint link and we'll fill the board with your tickets. Time to first board drops from 4 minutes to 40 seconds, and the share of boards that get more than five cards doubles, because the team no longer spends the meeting naming columns.
One caution about sample data. If you seed a real account with fake content, label it and make deleting it one action. A user who cannot tell your demo rows from their own will distrust every number the product shows them afterwards. Ghosted previews that cannot be edited avoid the problem entirely, at the cost of being less hands-on.
Quick check
Why is reusing one empty-state component for first run and filtered results a problem?
The takeaway
An empty state is the only screen a user reads, so use it to teach the practice and to hand over a working first step.
Try this tomorrow
Pick your most visited empty state and rewrite it as three separate states: first run, no results after filtering, and failed to load. Ship the first-run version with a template or import.
Answer the check above, then bank the day.
Where this comes from
- Badass: Making Users Awesome, Kathy Sierra
- Don't Make Me Think, Steve Krug
- 10 Usability Heuristics for User Interface Design, Jakob Nielsen, NN Group
Craft is one of six tracks. These lessons summarise and build on the work above, they do not reproduce it. Buy the books, they are better.