How to avoid repetitive actions in table rows?

Question

We have a table with data and actions on each row like so:

Name          Email                   Description         Actions
James         james@gmail.com         Desc 1              Edit  Export  Delete 
Carl          carl@gmail.com          Desc 2              Edit  Export  Delete 
Mike          mike@gmail.com          Desc 3              Edit  Export  Delete 

Et cetera. As you can see in the example above, Edit, Export, and Delete are repeated on each row. This table can have up to 100 rows of data and each action is also repeated 100 times. Is there a better way of presenting the actions without being so repetitive? Or is this perfectly normal?

Answer 1

Another way of doing this is by placing check boxes in front of every row and adding actions (Edit, Export, Delete) on single or multiple selection at the bottom but it really depends on the case.

You can also have a top check box for selecting all rows in the table or on the current page (if you have pagination.)

Answer 2

Your actions are different:

• Edit is individual for each record in sense it starts another form for editing this particular record.
• Export and Delete are batch actions which could be made on a set of records.

So Edit could be done by double-click and Export, Delete could be done using multiselection with checkboxes and single action button.

Answer 3

Here are some different ways you could tackle this:

1. Create universal buttons for batch actions. Consider making actions like Delete or Export a universal action located above your table, becoming active once you start selecting rows. Great examples of this are Netflix's DVD Queue and Gmail.
2. Hide secondary actions until user hovers/focuses row. There are pros and cons to this approach, but exposing additional controls on each row only when the user is hovering (or has focused the row for touch-based devices) is a way to keep actions associated with each row with the row itself. A great example of this is Twitter.
3. Show the Edit button, but hide Export / Delete options untile row hover/focus. It just comes down to the nature of your app for this consideration. If exporting and deleting is a regularly used feature, then this probably isn't the best option.

Some considerations to keep in mind:

• Consider making Delete a harder action to take. What I mean by this is, make it a two-step process somehow. Whether that's checking a box on each row and then selecting a Delete button on top or focusing on the row and then providing a delete option.
• It probably wouldn't be a bad idea to provide individual row options and batch row options. This depends on your app, but if the user is managing larger volumes of data, having the ability to batch export, edit or delete row items (if possible) helps save a lot of time. Conversely, having the ability to go into one row and perform one of those actions without using a big batch operation is nice as well. It just depends on how users interact with the data most of the time.
• Provide a select all function. If you go the route of checkboxes to select rows for export / delete functions, provide an easy way users can select all rows for easy exporting / deleting. You might want to throw a speed bump in front of the user in either case to ask them to confirm if they want to export or delete all rows.

Answer 4

Considering the three tasks : Edit, Export and delete . I assume that Export and Delete are the most used of the three, and Edit has several other nested tasks .

What I would do in this scenario is keep Export and Delete options attached to every single row even though it's repetitive. Using icons instead of text would be a much better choice here . Now each single row has a checkbox attached too which will be used to select the row.

something like :

Now You can have some disabled controls at the top, that'd be all your tasks under edit . When user tries to click on the disabled controls You can have a tooltip that says something like :

Select "datas" to perform "this action".

Or when user clicks on the checkbox i.e selects a row you can have disabled controls change their state in a noticeable way.

Answer 5

It's the same difficult problem that I am currently facing. Interestingly, after looking at this article about table UI patterns I examined how Dropbox currently display their file lists, they apparently no longer have the drop down for each row, instead providing a set of buttons or actions which replace the table header row (the table actually seems to be constructed of list items ul > li) when a item in the table is selected.

I also checked Google Drive, their design is a bit cleaner but effectively the same, rendering buttons above the table.

This is the cleanest solution I have come across, if that's of any use to you.

Answer 6

Repeating the actions may make it difficult to be sure you're in the right row, depending on the overall layout. If you're already highlighting the row the mouse is in, you could show the buttons just for that row.

Answer 7

How you go about this depends on if the actions are exclusive or not (if you're deleting a record, what's the point of being able to edit it?) and whether the user will want to perform a mix of actions in one submission (delete some records, export some other records). A radio control might be your best bet for a mix of actions that are exclusive.

In the web application I'm working on, there are many instances with 2 or 3 exclusive actions that can be taken on any given element that requires sending more than one piece of information at a time (so a simple set of radios won't work). I've developed a specialized control for this task that employs radio elements to enable/disable fieldset elements related to the selected task.

The controls shown below are for editing an item's association with a region specific publication in 3 ways: print + web, web only, or not at all. If it is being printed, then a size must be designated for the item.

Controls for adding a record:

Controls for editing a record (the "button" label text is adjusted to reflect the action being taken):

Elements that are washed out are disabled (no action being taken for this item). The tasks are color coded to make it easier to tell at a glance what actions are being made before the form is submitted (add = green, edit = orange, remove = red).

Answer 8

Apart from 'menu-bar' and 'mouse-over' styles of display for 'Actions', you can also opt for the so-called 'bag' or 'cart' style.

Just allow the user to select(row-click/drag-drop/radio-check/checkbox-check) records to add them into an 'Actions-bag' visual(an empty div perhaps).

As the records are entered into this 'Actions-bag' container, they undergo visual transition for the selected action.

You may create three such 'Action-bags' with a tabbed or auto-hide feature, for each of the three actions.

Answer 9

A possible solution could be to put the actions into a dropdown with the most important or common action appearing on mouse over. This is what Dropbox does in their current (June 2017) design.

http://imgur.com/bz9AjCl