Buttons

A button or a link?

A link takes you somewhere else, like another page or a file. A button does something on the spot, like saving, sending or deleting. They can look alike, but they behave differently. Screen readers for blind people announce them differently, and the keyboard works with them in different ways.

So when something should act like a button, developers should build it as a real button in the page code, not as a box made to look like one. A fake button often can’t be reached with the keyboard at all.

Make one button the main one

On each screen, decide what most people came to do, and make that one button stand out. Give it a solid, strong colour. Other buttons can be outlined or look like plain links. If every button is big and bright, nothing stands out, and people have to stop and read them all.

Write what will happen

A good button finishes the sentence “I want to…”. So write “Save changes”, “Send message” or “Download invoice”. Words like “OK”, “Yes” or “Submit” only make sense if you read everything above them first, and many people don’t.

Imagine a small window that asks “Throw away your draft?”. With buttons “Yes” and “No” you have to think. With “Throw away” and “Keep writing” you know at once which is which.

Use the same words all the way through. If the menu says “Print receipt”, the button in the next window should also say “Print receipt”, not something new.

Show what the button is doing

A button changes as people use it, and each change tells them something. With a mouse, it can get a little darker when the pointer is over it. When someone moves around the page with the Tab key, the button needs a clear outline so they can see where they are. The accessibility rules ask for that outline. When it is pressed, a quick change confirms the tap.

If the action takes longer than about a second, put a small spinning circle inside the button and write “Saving…”. Keep the button the same width so the page doesn’t jump, and ignore a second press, so nobody pays twice.

Grey buttons that do nothing

A greyed-out button says “you can’t go on” but not why. People press it, nothing happens, and they start guessing. Often it is kinder to leave the button working and, when it is pressed, show what is still missing. If you do grey it out, write the reason right next to it, like “Fill in your name to save”.

Making deleting safe

Deleting something should take a tiny bit more effort than saving, but not much more. Use a clear word like “Delete” on the button, and often a red colour too. Say exactly what will be lost: “Delete 3 photos. This can’t be undone.”

There is a softer way, too. Delete the photo straight away and show a small strip at the bottom of the screen: “Photo deleted. Undo”. Leave it there for around ten seconds. Most people never touch it, and the few who deleted by mistake get their photo back with one tap. Nobody has to answer “Are you sure?” twenty times a day. Keep that question for the rare things that can’t be restored, such as closing an account.