Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Did you look at: ux.stackexchange.com/questions/37583/… ? –  rk. Jul 10 '13 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 '13 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 '13 at 2:20
add comment

8 Answers 8

up vote 10 down vote accepted

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

share|improve this answer
    
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 '13 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 '13 at 8:40
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
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 '13 at 2:22
add comment

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.

share|improve this answer
add comment

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.
share|improve this answer
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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