web app - Toggle button for actions

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

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.