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

5 Answers 5


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.


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

  • 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. Dec 22, 2012 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. Dec 22, 2012 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, 2012 at 9:28
  • Without those arrow buttons you have no chance to re-order the items if you use keyboard only.
    – unor
    Dec 22, 2012 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. Dec 23, 2012 at 10:45

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

  • 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. Dec 22, 2012 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. Dec 22, 2012 at 11:48

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 ✍ ✖                             [↑ ↓]   [+]

Many people are referencing Fitt's Law which is definitely relevant, but a much more applicable law is the Gestlat Principles of Proximity which state, in-part, that "perception lends itself to seeing stimuli that physically resemble each other as part of the same object, and stimuli that are different as part of a different object."

In your particular example, you want to show grouping between the list items and their independent actions, but I don't think you need to show grouping amongst just the actions. In fact, the only quality they share is that they are all actions. It's more important that they're shown in proximity to their list item, which you've already accomplished.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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