Where is the most conventional/best place to add actions for items inside datatable?

Question

Like actions I would say "delete", "edit", "details" and many more maybe. How display that on a desktop application. Some possibilites that I already used could be :

• Add to the top before the header and display when one item is selected
• Inside the row at the beginning or at the end
• With a three dot icon after the first cell like with can see in Sharepoint
• In the top of the row when you are over with the mouse
• Other ?

My feedback is as follow...

• For the first one, it's good to set batch action (things you do to a group of things) or to the table as the whole. But sometimes you see actions for the selected item too. Could be good when you have a lot's like 5 to 10 actions. And it's a good idea because you have space and on your datatable you have just DATA and nothing else more. But for a user it's not always easy to understand the link between actions on the top ouside datatable and the selected item.

• For the second one, I like it because you directly understand that these actions are for the item. But if you put at the end and your table have several columns or if your sceen is small you must always scroll and you didn't see them directly. If you put at the beginning it could takes a lot's of space and the most important thing (data) are pushed to the bottom and maybe ouside the visible part of the page

• With the third you can group it and gain some space. Your button will be always visible and it will not takes too much space. But the user didn't see actions directly and for all actions he want to do he must do one more click to open menu then find on the menu what he want then click again. It will takes more time to activate an action than the other solutions.

• Last one... I m not a big fan it cover data and you think that there is like a glitch on screen.

To resume for me there is no good solution or standards with material design and it is kind of shame...

If you have any article/feedback who speak arround this problem... Please send me !

Answer 1

There are some good practises when designing datatables but there are not specific guidelines. In a way it depends very much on the data you are displaying on each table and the available actions you allow the user to take.

There are filter actions, search actions, personalization actions. In your case you are talking about actions for individual data items/rows such as delete/edit/view so here's my personal opinion in regards to your mentioned possibilities:

1. I like that option a lot, it's something we see a lot in emails such as gmail, outlook etc. It reduces the overall visual clutter of the page but in order to maintain a proper UI and UX you have to consider the case where the data is too long and user has to scroll. Then the header has to be "sticky" and always visible so that when a user clicks a data item the actions are displayed. You have to also consider the other actions of the databale that might be visisble at the table of the header. For example if you have 3-4 filters for example and one search bar on the datatable header then you are limiting the space to add the item-specific actions.

2. This option is viable in my opinion only in the case when the data is small and you don't have many columns. Otherwise it will take a lot of space that could be used for displaying better another piece of data.

3. Icon ins general are very practical as long as the user can easily identify them. The 3 dots are indicating that there are more actions in regards to a specific item and it takes less space than the previous option but it requires more interactivity by the user. For example clicking on the dots (1st action) view the more available actions and maybe click one of them (2nd action).

4. For the last option (when a user hovers) it reduces visual clutter as the above but it can cause discoverability issues again because the user needs to interact with the table to display the presentation of available actions. However this is a very common practise since the user has already focused to a specific item and expects to have an action on it either by clicking on it or by hovering it to see it.

In addition to the above possibilities you can consider the following ones:

• Use icons for each action. For example there are icons that can clearly represent the "edit", "delete" "view/details" actions that could be added at the end of a table row that will minimize the space they take and as a result reduce the visual clutter by maintaining a better discoverability of the avalaible actions.

• Use modal windows on a click of a button/icon to show the available actions but it cause issues like the 2nd option.

• Make the table rows as accordions/make them expandable. This is more useful when there are many actions available.

The correct answer to your question is to put down every time what data you are going to display on a databale, consider the amount of rows and columns that are present, think about the available actions that are applied on the overall table and on each data item/row and design the table and actions based on the above and do not follow a general rule.

Think how important is each action, how possible is an action to be taken by a user and think like a user to see what would be more practical for you. Are the actions easily discoverable? Can you expect the interactions needed to be taken in order to take an action?

Here are some resources for good practises in regards to designing tables:

• https://uxdesign.cc/design-better-data-tables-4ecc99d23356
• https://uxdesign.cc/11-table-design-guidelines-adb27ac01c8e
• https://medium.muz.li/complex-tables-356826d11861