34

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

Name          Email                   Description         Actions
James         [email protected]         Desc 1              Edit  Export  Delete 
Carl          [email protected]          Desc 2              Edit  Export  Delete 
Mike          mi[email protected]          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?

Improve this question
4
  • Did you look at: ux.stackexchange.com/questions/37583/… ?
    – rk.
    Jul 10, 2013 at 18:38
  • If you edit a row, is it just the rows you are displaying that are being edited or is there a larger chunk of information that will be edited?
    – Justin
    Jul 10, 2013 at 21:10
  • @Justin It's just the rows we are displaying. But in the future, they might add more stuff that will require more fields to be edited (but not necessarily displayed).
    – catandmouse
    Jul 11, 2013 at 2:20
  • also, this ux.stackexchange.com/questions/75444/…
    – dennislees
    Jun 8, 2017 at 17:10

9 Answers 9

Reset to default
19

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

table example

Improve this answer
3
  • I like this solution although I'm worrying about how easy it is for regular users to know that they can tick the checkboxes and apply a bulk action to them versus just showing them the actions for each row (although it looks repetitive).
    – catandmouse
    Jul 11, 2013 at 2:24
  • Don't worry, people will know as long as the actions will appear at the 1st check (if nothing is checked the buttons will stay hidden), and also be visible in the 1st screen. You can make a simple A/B test and you will see.
    – Ciprian Pălici
    Jul 11, 2013 at 8:40
  • 1
    This is ok, but I prefer the buttons in the row. It provides a single-click action for the user. You literally double the number of clicks for a user deleting one entry at a time with this design.
    – richard
    Nov 20, 2015 at 9:36
9

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.

Improve this answer
1
  • Usually you get 2 types of actions: inside the table (on single element row) and outside the table (multiple actions on multiple elements). You just have to be careful not to go too far with that double click which can bring a lot of trouble in understanding (it's not natural). If you want to make interactions with a table row, then you can use a single click for view/open (normal action in many systems) but no double click for web apps. You can still use Click for focus or view and 2 x Click for Edit but ONLY on Desktop Systems.
    – Ciprian Pălici
    Nov 25, 2015 at 10:21
6

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.
Improve this answer
5

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 :

enter image description here

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.

Improve this answer
3

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.

Improve this answer
1

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.

Improve this answer
1
  • I like this idea but there will be an empty space on the right where the action buttons are supposed to be (if the row is not highlighted at the moment). Is there an example for this that I may take a look at?
    – catandmouse
    Jul 11, 2013 at 2:22
1

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:

Adding a record

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

Editing a record

Removing a record

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

Improve this answer
0

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.

Improve this answer
0

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.

https://i.stack.imgur.com/kzmz8.jpg

Improve this answer

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.