Rules for labelling buttons

It was one of those really conscientious discussions that seemed to have no end.

First UI designer: ‘Right. Now here we have a tabbed dialogue box. When you press ‘Cancel’, it should remove all the changes the user has done since the box opened.’

Second UI designer: ‘Hmm. Are you sure that’s right? Doesn’t ‘Cancel’ just remove changes on the current panel?’

Third UI designer: ‘Hang on, we’re supposed to aim for consistency. What does the style guide say?’

And then off they went… looking for evidence, trying to find out what best practice is, getting other opinions. Even planning some specific tests for their next round of usability testing.

Which is all very well but I thought; ‘Are they trying to answer the right question?’

They had become fixated on the question of what the ‘Cancel’ button should do.

Jarrett’s rules of buttons

I think they needed to look at the problem the other way around. So here, I reveal for the first time in a public forum “Jarrett’s First Rule of Buttons” which is:

Label the button with what it does.

and also  “Jarrett’s Second Rule of Button Labels” which is:

If the user doesn’t want to do it, don’t have a button for it.

OK, I realise that these rules aren’t exactly original. I’d appreciate it, before I disgrace myself by claiming authorship, if anyone with a bibliographic turn of mind could let me know where I might have got them from.

Using the rules

Now let’s look at our UI designers’ problem in the light of the First Rule.  We have a button with a proposed label (“Cancel”) but we’re not sure what it does. Now the First Rule tells us that rather than figure out what Cancel should do, we should in fact think what the button does and create a label that corresponds to its function.

For example: If the button cancels the window, removing all changes then it should be labelled “Cancel this window, removing all changes” (or perhaps, we might be able to abbreviate it to “Cancel and remove all changes – or perhaps we might need to use the user’s description of what it does).

If the button cancels the changes on the current panel  then we should label it: “Cancel the changes on this panel” (or whatever users say when they describe what it does).

Now let’s look at the button in the light of the Second Rule. Does the user want to remove all changes, or remove the changes from the current panel?

Answer, I don’t know. But likely the users do. So this is one that I’d have to run past the users – probably in a short test.

Longer button labels

The consequence of the two rules may be that you end up with buttons with labels that are longer than a single word. I think that’s much better than striving for single words that are either confusing (as they might be in our example) or infuriating (as in the many dialog boxes that inform me that some program has done something truly ghastly to my computer, and then expect me to click ‘OK’ as if I’m happy about it).


This article first appeared in Usability News

Picture of buttons by Alper Cugun, creative commons

#forms #formsthatwork