Separating actions on items from general actions in a toolbar

Question

Rearranging an existing toolbar of ours, I would like to separate between types of action buttons.

1. General actions that applies to the system, e.g. Settings,
2. List actions that applies to the entire list, e.g. New or Print,
3. Item actions that applies to selected items, e.g. Delete and Print again.

When no item is selected, some icons are enabled, others disabled.

^{download bmml source – Wireframes created with Balsamiq Mockups}

When a row is selected, the action buttons that applies to selected items, are lit up.

^{download bmml source}

Note that the print button that earlier printed the list, now prints this selected item.

The problem is that users have a hard time learning how the system works and what the features can do for them. I believe this is party due to that the work flow is unintuitive, with actions that applies to different things are mixed with each other.

The question: Is it a good idea to separate these two types of actions graphically in some way, other than enabling/disabling the buttons? And in that case, in what way? I think three toolbars would take too much space. We already have got a right click menu on the item rows for the item applicable actions, but it is not enough to only show them there, as a right click menu could be hard to find.

Answer 1

Ideally, the idea that the same Print button will select the whole list and then the selection is not write. There is no indication that the button can do 2 task once without selection and one with selection.

I would go with contextual menu which is visible inline while we hover on the item and it makes more sense that now the people know what they are printing. As for the print all feature, I would write a text next to the icon "Print All" which will make more sense to the users.

If we need multiple selection to be printed, I will change the text to Print Selection once we have more than one items selected. (I am not sure if that is supported in your app)

As for the other items, I always display the option which is active and hide when inactive. We have seen in some of our user study that when a user sees an inactive button he makes himself busy in finding how to make the button active and his concentration is broken.

For placement of buttons, I will make all the buttons which are part of list to be left side and the one which is general (setting in your case) to be on the right side. With the buttons on the left, I might make a small difference with colors if I want to separate NEW with others icons. So for me new can be a soft Green while the rest can be a general grey (Depends on your branding).

Answer 2

The best solution for your problem is to move the item actions on to the actual items. This is what Google and many other digital products have begun doing.

It is definitely a good idea to group item-action buttons with their item. There are a lot of reasons why this has started happening and makes the most sense, including Fitt's Law and Gestalt principles of grouping.