Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

enter image description here

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?

share|improve this question

3 Answers 3

up vote 6 down vote accepted

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.

share|improve this answer

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:

Button with tick

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:

Hope that helps, Phil

share|improve this answer
    
Thanks, Phil! We want to keep the buttons as simple as possible -- they are about 60% of the size of my example (no room to adorn it with a a checkmark), and there are a lot of them on the screen. I want to user to be able to see with one glance which actions are selected (hence the emphasis on color vs. grayed) –  Tony the Pony Apr 10 '11 at 21:05
    
Thanks for your reply - see updated answer for my thoughts on it. –  Phil Apr 11 '11 at 5:36

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.

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.