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.

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

mockup

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.

share|improve this question
    
1. How do you display more than 1 list? 2. How do you delete a list? 3. Are users likely to delete a lot of items once a list has been created? 4. How do you Add a new Item? –  Jung Lee Jul 19 '12 at 3:39
    
1. In the real application, lists come in tabs. Tabs are not shown in the mockup. 2. Lists are not deleted. 3. Not really, but the mockups above are very simplified. But in the real application, yes, users are likely to perform an action on several items, supported by selecting multiple item rows at once. 4. Press 'New', a dialog appears, fill in data, save, and so on. –  JOG Jul 19 '12 at 7:18
add comment

1 Answer

up vote 1 down vote accepted

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).

share|improve this answer
add comment

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.