When the list is still empty
Picture someone opening their invoices page on the very first day. Instead of a bare “No data”, tell them what this page will hold one day: “Your invoices will appear here.” Right under that, put the button that gets them going, for instance “Create your first invoice”. A link to a finished example can help too, because many people like to see what they are aiming for before they start.
Empty can mean quite different things, though. For a brand-new customer it simply means “nothing yet”, so a warm start is right. After a search it usually means a typo or too many filters, so offer to fix those, or show some popular items instead. And when somebody has ticked off every task on their to-do list, the empty screen is good news, so you might just congratulate them.
Fig. 05.1Do and don’t
Don’t
Do
How long people will wait
In 1993 the usability researcher Jakob Nielsen described three time limits, and they still hold up well. If something happens within a tenth of a second, it feels instant, and nothing extra is needed. Up to about one second, people notice the pause but keep their train of thought. Up to about ten seconds, they will still wait and pay attention, but they need to see that something is happening. After that, their mind wanders off.
So a button that saves in half a second doesn’t need a spinning circle. A report that takes eight seconds should show progress. And a big export that takes two minutes should happen in the background, with a note when it is ready, so people can carry on with other things.
Grey shapes instead of a blank page
When content takes a second or two to load, it often feels faster to show pale grey shapes where the text and pictures will be. Designers call this a skeleton screen. When the real content arrives, it fills the shapes and nothing on the page jumps around.
Keep the shapes simple and the same size as the real content. A gentle shimmer is fine, but some people get dizzy from movement on screen and switch it off in their phone settings. Developers can respect that with the prefers-reduced-motion setting.
Fig. 05.2Sequence
10–1 s
2Data arrives
Don’t
When something goes wrong
Imagine writing a long letter on a website and pressing Save just as the Wi-Fi drops. A grey box says “Error 500”. Is the letter gone? Should you press Save again, or copy everything somewhere first? Now picture a different message: “We couldn’t save your changes because the internet connection dropped. Your text is still here. Try again.” With that in front of them, most people just wait a moment and press the button again.
Show the message where the trouble is. If one photo failed to upload, the message belongs on that photo, not in a banner at the top of the page. Put a “Try again” button right next to it, and never throw away what the person typed. There is more about errors in forms on the Forms page, and more about wording on Words on the screen.
Saying that it worked
When the result of an action isn’t visible, confirm it: “Message sent” or “Settings saved.” A short note near the button, or a small box at the edge of the screen, is enough.
Give people time to read it. A note that vanishes after two seconds is gone before many people, especially older readers, have finished reading. And don’t hide the only “Undo” in a note that disappears quickly. Blind people won’t notice a note that silently appears, so developers should mark it with role="status". Then the screen reader reads it out.
Before you move on
Use your product as a brand-new customer, then switch your phone to a slow connection and try again, then turn off the internet in the middle of saving. Look at every screen you see on the way. If any of them leaves you wondering what to do next, it needs a better message.