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.

This is a follow-up question from the previous question managing taxonomy hierarchies UI patterns.

Question: When an item in a list has action buttons that perform create/edit/delete actions, is it better to display each action button as a separate element or should they be grouped into a single toolbar?

Separate Elements

enter image description here

Single Toolbar

enter image description here

share|improve this question

4 Answers 4

up vote 11 down vote accepted

Separate buttons.

Combining the buttons creates a relationship between the buttons, even though that's not really important. Placing the buttons individually within the element probably does a better job of establishing the relationship between button and item, which is more important.

Plus, it means larger target sizes. Fitts' law and all that.

share|improve this answer

I'd mix it: group what belongs together.

In your first example, it is harder to get an overview of the provided actions (harder to distinguish).

Your second example might be harder to use, because the buttons are nearer to each other, so the click-area is smaller. But it's straightaway clear what actions are possible.

I assume the following actions:

  • Move item up
  • Move item down
  • Add new item (as a child of the current one?)
  • Edit item
  • Delete item

I'd display the edit and delete button inline right next to the item name (without the eye-catching button background color, if these actions are rarer used than move/add).

Then I'd group the two move buttons as you did in the second example, but with a higher whitespace inbetween. And then display the add button separately next to the move buttons (with more whitespace than what is used inbetween the move buttons).

So it would look like:

Test
  test ✍ ✖                             [↑ ↓]   [+]
    test
    child
share|improve this answer

@Jimmy is right about the usability aspect - in terms of Fitts' law it's indeed much preferable to separate the buttons.

However, from the visual and cognitive load aspect it may be better to group them in a toolbar. You can see from your own sketches how much visual noise is added when you separate them - instead of one background and X icons you get X backgrounds and X-1 strips of whitespace between the buttons. You also feel like there are X elements on the screen, rather than the one element of a toolbar.

share|improve this answer
    
Does the perception of more visual elements increase cognitive load? I'm not in doubt; I've suspected this but never seen a source confirm it. –  Jimmy Breck-McKye Dec 22 '12 at 11:20
    
AFAIK visual noise directly affects cognitive load, but I don't have any research to cite on this. It's a good question to ask on CogSci.SE. –  Vitaly Mijiritsky Dec 22 '12 at 11:48

I would suggest grouping the buttons simply because I find it esthetic, but with one caveat: can you eliminate the up/down arrows?

I am assuming that this is for reordering the list item, but in this day and age, users expect to drag the list item. Needing to move the item three rows down means clicking on the down arrow icon, moving the mouse (because the arrow’s icon has moved with the item), clicking again, etc.

Update: Jimmy raises a good point about the lack of affordance for drag and drop. This can be addressed by adding three horizontal lines, an affordance that most users would recognize, I think. The designer can further improve the UI by providing immediate feedback when the user clicks on the three lines, e.g. by drawing an outline or changing the selection color — i.e. not waiting until the user actually drags the item.

enter image description here

share|improve this answer
1  
One problem with drag and drop, though, is that without affordance there's no clue it's there. Granted, in user testing I have seen users spontaneously try to drag elements, but I've also seen them fail to. –  Jimmy Breck-McKye Dec 22 '12 at 3:45
    
Moving the items 3 times doesn't necessarily mean you have to move the mouse every time. We can move the cursor along with the item, and in many cases we can just move the list around the item, anchoring the item in place. –  Vitaly Mijiritsky Dec 22 '12 at 7:29
1  
Moving the mouse cursor is a big no-no; it is very disorienting to the user. I have ran into just one app that did that in the last 28 years and hated it. Moving the list while anchoring the item is a better option, but it doesn’t feel quite right IMO. –  Hisham Dec 22 '12 at 9:28
    
Without those arrow buttons you have no chance to re-order the items if you use keyboard only. –  unor Dec 22 '12 at 14:52
    
@unor: no, that is not true. You can have keyboard shortcuts without corresponding buttons. Hitting for example the up or down arrow can still move items around without there being a button to do the same thing. Having the drag icon there should be enough indication that moving items is possible. –  Marjan Venema Dec 23 '12 at 10:45

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.