6

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

UX Doubts

More details about hamburguer menu:

Submenu options

Which is the best option in this case?

3
  • 1
    Hamburger menu is used to access the submenu? What is in the submenu? Feb 21, 2017 at 13:00
  • There are many different data tables, for many different kinds of informations. The menu icon will show the actions which were hidden (Comments, Time tracking and close - check icon) and sometimes extra actions which may change on each table (other screens) Feb 21, 2017 at 13:10
  • You might (or might not) enjoy reading this article by Nielsen-Norman. The gist: icons need text labels. Feb 21, 2017 at 14:40

5 Answers 5

5

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.
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 enter image description here

Don't.

Don’t include unrelated or confusing actions.

In the end

test, test, test

2

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

1
  • 1
    Or simply a ghost button with the text label as "Actions". This provides more affordance than hamburger or triple dot icons. Mar 7, 2019 at 12:12
1

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.

1
  • Thanks Stacked, I updated my question with more details about hamburguer menu. It represents "more options" when we have more than 3 icons. Feb 21, 2017 at 16:58
0

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.

enter image description here

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

enter image description here

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.

Your Answer

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

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