On Checkboxes

I tweeted that I don’t think the checkboxes Facebook uses in its Messages section (below), are the best way to go about the problem. I suggested using the icon itself as the toggle for this job.

I come up with a rough draft. Obviously, it would need more thinking and knowing more about Facebook’s style guide, but you get the concept.

There were some interesting comments…

So here is my line of thinking.

What is the job here?

Facebook wants its users to be able to know that they can:

  • Send the message to mobile phone
  • Switch the Enter key mode

And at the same time allow them to do it.

Both the jobs are complicated enough, we can safely presume, it is impossible to design something that enough users will get the first time they see it. That’s precisely why Facebook has a tooltip in place when you hover the icon or the checkbox. That’s something I would keep.

Now, for the “allow the user to tell us, he wants to activate the function” problem.

What the user has to know?

First, what the user has to know to be able to use current solution?

  1. The checkbox is something she can click.
  2. The checkbox has two states (checked / unchecked).
  3. There is relationship between the icon and the checkbox on the left of it.
  4. When the checkbox is checked it means you want to activate the function the icon stands for and vice versa.

Quite low bets, granted, none the less, you can see there is some abstraction, mainly for the novice user you are trying to protect with “easy checkboxes”.

What the user needs to know to be able to use my proposed solution?

  1. It is something she can click.
  2. It has two states (on / off).
  3. When she clicks it toggles the state.

Back to the job we want to solve.

Less abstraction

I defined the job to be done here as letting the user know she can do something here, and giving her the tool to do it.

All in all, I think I removed some abstraction from the thought process our imaginary user has to go through: How the checkbox works.

I’m aware, that my solution introduces the problem that the user has to be able to distinguish between the two states (on / off), but I firmly believe that’s less abstract than the checkbox concept. It’s much closer to the working of physical button in the real world.

Looking forward to your comments.

UPDATED (June 12, 2012)

Jiri Jerabek tweeted his take on the toggle.

I would not show the label “Send to mobile” and stick with the current tooltip solution and the “Enter mode” toggle should look the same as the “mobile” one, but otherwise this is movement along the way I think it should be done.