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
Single Toolbar
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.
@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.
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:
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
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.
