Toggle button for actions

Question

In our web application, we have a list of items for which multiple actions can be scheduled. If an action is available but not selected, it is displayed as a gray button. When the user clicks on it, the button changes to a color, indicating that the action is scheduled. When the user clicks on it again, the action is cancelled and the button reverts to its previous state. One such button is displayed for each action, for each item.

An example:

My team has raised a couple of concerns:

• The gray color may make the user think that the button is disabled

• It may not be clear to the user that he can cancel the action by clicking on it again

I don't think this is a problem, especially if we use tooltips (The "vote" and "accept answer" features of StackExchange are implemented the same way), but are there ways to improve the usability of these action buttons?

Answer 1

Over the years I've learned that toggle buttons are not for displaying states in lists. This being said, a toggle button works well when it is on its own. Like a play/pause button.

A checkbox, however, serves as a great indicator of state in a list of items. It is visually clear and does not use much real estate. The label for a checkbox does not have to repeat on every row in a list. Simply place it in a column header.

Also, if you are concerned about users being able to scan the list easily you could add some visual clues when a checkbox is selected, like bold or background color.

Answer 2

To make it clearer you could add a icon to the button when it's activated. Here's a very rough draft of the idea:

Update after Jens comment:

I think both Denzos and Allans answers have a valid point (using checkboxes with text instead of buttons / using embossed buttons). But it's hard to say which solution would work best without knowing more about your project. I'd recommend you read these two posts, they could help you with your decision making:

• Learnability vs. usability: You mention that it's a web app so I assume most of your users are returning visitors. Great article on uxbooth.com about that issue: When is Learnability more important than Usability?

• Icons alone are usually not a good solution (with exceptions of course). Great summary on that issue on uxmyths.com: Myth #13: Icons enhance usability

Hope that helps, Phil

Answer 3

It will largely depend on your UI conventions, but you can consider making it actually look like a button, with an embossed (appearing to be clickable) and clicked state.