Part Three: The details · Screens
An empty screen is the honest state of a new account. It is also the first thing a newcomer sees, and it says nothing about what belongs there.
A newcomer arrives with a problem and some hope, and meets a blank table with column headings. They cannot tell what goes here, what it will look like when it is working, or what to do first.
The people who built it almost never see it this way. Their own accounts are full of test data, and every design review uses a screen with twelve tidy rows in it. The empty version gets built last, in an afternoon: a grey icon and "No events yet." For the newcomer, that afternoon's work is the product. The screen that had the most to explain was given the least attention.
The empty screen can do the explaining itself. It can say in one sentence what lives here and why that is useful. It can show a faint example of a real one, so people know what a finished one looks like. And it can offer one button that starts the first real thing. Some products go further and begin with an example the person can open, change and throw away.
Emptiness comes back later, too. A search with no matches, a filter that excludes everything, an inbox cleared: each is an empty screen, and each should say why it is empty and what to do next.
Take a ticketing service for small venues. The new account opens on "No events yet." A better version says, "Each event gets a page: its tickets, prices and guest list," shows a sample spring concert faded inside a dashed outline, and offers "Add your first event."
Events
Name Date Sold
No events yet.
Events
Each event gets a page: its tickets, prices and guest list.
Spring concert, May 9
120 of 200 tickets sold
Therefore:
Design the empty state of every screen as carefully as the full one. Say what belongs here, show what a finished one looks like, and give one clear way to make the first.
In practice. Create a brand-new account and screenshot every screen before adding anything. Put the screenshots on a wall. Fix the worst one this week.
Goes with. This is where FIRST USEFUL RESULT IN MINUTES (34) begins. The faint example is SHOW WHAT GOOD LOOKS LIKE (41), and the button should follow BUTTONS SAY WHAT THEY DO (80).