Actions (icons) in table

Question

I'm working to redesign our application and we are unsure where the table actions should be (in the left side of the row, right side, with or without submenu, etc). Please help us to define with would be the most user friendly option. (Please see the image bellow - full size).

More details about hamburguer menu:

Which is the best option in this case?

Answer 1

A couple of things:

1. Additional actions should go on the right since users will scan the information before making a decision on the action. (so not option 2 or 3)
2. I like the concept of the hamburger menu since you have quite a few options available, but I would change the icon though to either say 'Actions' and include all of the options or maybe a '...' to show that it is displaying the additional options. (The hamburger menu on it's own implies that it's separate from what is being shown)
3. If you have the space for it in your table and could limit options to something like 5 or 6, you could also list the actions as icons directly in the table, but I would recommend adding a tooltip on hover to each of them so that the user is 100% sure of what each does before clicking.
4. In regards to the multi-select, I like the view on option 5 so that the user can see that actions are available for the selected items.

Answer 2

On the right

This has a very simple explanation: The actions you're going to apply are based on an object. Thus, for western languages such as in your example, it's natural that you read from left to right. If you have the actions before the object.... what are you going to act over? You still didn't see the object to act upon!

However

There are 2 additional concerns on your question

• Checkbox: should be on the left side, just like you have it now
• Dropdown: It's very important to define what do you have in your dropdown. IF these are actions that affect the object itself, and they're more than 3, quite probably you'll need to use only a dropdown, and all the actions should be contained inside it.

However, if the actions contained in the dropdown are unrelated to the specific object, it shouldn't even be there and you should try another option.

While not strictly related to dropdowns, a good example of guidelines for this is Material Floating Action Button since the same principles apply to your case

Avoid using floating action buttons for minor and destructive actions, including the following:

Archive or Trash
Nonspecific actions
Alerts or errors
Limited tasks like cutting text
Controls that should be in a toolbar, like volume control or changing a font color

and

Don't.

Don’t include unrelated or confusing actions.

In the end

test, test, test

Answer 3

option 4 sounds good to me, the hamburger icon can be replace with the the below two icons.

Answer 4

There are benefits of each of the approaches. I am not very convinced with the hamburger menu. Apart from that each of the style provides certain benefits.

Icons on the right

• Use it when the scanning of most of the grid columns is required before taking action
• Generally good when columns are less in numbers and no horizontal scrolling on table
• Consider mounse travel for each time action is required.
• Also user attention is highest on the left side columns.
• You can not freeze the column on the right, that is very unusual UX.
• Best example would be outlook's default view.

Icons on the left

• Quick actions are required over multiple items and mouse travel should be less.
• Number of columns do not matter much, so they can be many as well.
• You can freeze the left action column and apply horizontal scroll to the right.
• I will still keep the multiple selection checkbox away from the action column.

Actions outside

• Best when you want to do multiple selection.
• Trade-off is the mouse travel for each action.

---

Each of the approaches have their pros/cons. You have to decide your use case fits in which bucket. I have worked on different projects and have used all three (not together obviously) and those made sense on case to case basis.

Answer 5

I think that Google nailed it, with the table experience they give (at least) in admin.google.com.

You can always see the textual buttons when hovering above a row.

The buttons also have their own place when scrolling to the end of the table, so they won't hide anything below them.

The advantages are:

1. The buttons are on the right, where they're expected.
2. You don't have to scroll to the end of the table to see them, they are always available.
3. You can choose textual buttons/icons/dropdowns/combinations of them.