A few days ago I had to implement some check boxes for a back-end system and I realised just how badly check boxes are labeled online. Most of the time, it’s actually really difficult to predict what impact it will have to leave the check box ticked or unticked.
In my case, the check box represented the ability to hide a page from all navigation on the site so it would effectively be a “hidden page” (yet remain accessible, so you for example could send people to this special page from an ad campaign without making it an integrated part of the entire website).
So in the page’s settings area, there was a check box which you could use to either hide or display that page in the site’s navigation. If the check box was ticked the page should be hidden from all navigation.
Below is the 4 iterations I went through in an effort to clarify what outcome you as a user would expect when leaving the check box either ticked or unticked.
1. Absolute nonsense
Now, by default the label name was mapped to the name used in the database, in this case “Menu hide”. Not very meaningful, at all. In fact, this was complete nonsense and the check box was also on a new line which seemed a bit strange. As a user, you had no idea what the check box would do unless you yourself coded the system. Rubbish!
2. Better, but far from good
I started by changing the label to something more meaningful – “Hide this page from the navigation”. Better, but still not crystal clear what would actually happen when the check box was ticked. Also, the check box seemed a bit lonely, being on a new line all by itself. The label was also difficult to scan because it was quite lengthy, which was a problem since there were 5 other fields (with their own labels) on this page, so getting a quick overview of your different options would be difficult without brief labels.
3. Close, but no cigar
So I had to make the label shorter. Then it hit me: why not put a longer description after the check box and then shorten the main label above? I gave it a quick stab, putting “Don’t show this page in the navigation” next to the check box in a slightly smaller font, indicating that this was a more detailed, secondary description. I also shortened the main label to “Hide this page” to make it more scannable. This definitely had potential since the labels that were now scannable yet also had an in-depth description of the outcome you should expect when ticking this check box.
4. Great
Still, the labels were still a bit unclear. There could still be confusion as to whether or not the ticked-state would hide the page or display it. Also, the two labels didn’t seem to interact, so there was obviously room for improvement in the wording.
After a few short iterations and a quick chat with Casper, I ended up with the final version, where the main label asked “Hide page?”, and the secondary label answering “Yes, hide this page from all navigation”.
The previous “Hide this page” label was actually a question, yet it didn’t end with a question mark which was confusing (and grammatically incorrect). Also, the “this” in “Hide this page” was a bit redundant, so I removed it to make the main label even more scannable. After these two changes, I ended up with a really concise question as the main label: “Hide page?”
With this change in place, I suddenly had an obvious way to make the two labels interact – by answering the question! To make things super clear, I answered the question with an unambiguous “Yes, …”. Now it would be really obvious that when the check box was ticked, the page would be hidden because it was now a question with a very clear reply: “Hide page? Yes.”
There was still one last problem, though – the secondary label was written in negative-form: “Don’t show this page in the navigation”. This didn’t make sense with “Yes” in front of it, but also – and this was more critical – the label told you what you didn’t do.
When you have a yes/no question you don’t want the label to be written in negative form, since people will then have to juggle around with the fact that yes means no, and no means yes. Or wait.. does it? By using a direct word like “hide” instead of “don’t show”, I got rid of any confusion and the final version of the secondary label would read: “Yes, hide this page from all navigation”.
Here’s the final result: “Hide page? Yes, hide this page from all navigation.”
Nice and clear. (It definitely beats “Menu hide”.)
