Data Grid Heuristics Help - Actions in Grid or on Top?

1 Dec 2010 - 11:52am
4 years ago
6 replies
1208 reads
bojcampbell
2010

In trying to establish consistency of interaction across multiple tabs on a large web application, I'm faced with creating heuristics about where to place actions for particular records. Certain grids have a large number of records where actions on multiple records at one time is probable; using a checkbox on the left with a multiple action button on the top makes sense. Other grids have less records and may have no multiple actions; using inline action links/buttons makes more sense (an edit link and a delete link inside the grid.) Yet other grids will have one of each, perhaps a multiple delete action and a single record edit option; using one action item inline and one action on top of the grid addresses this.

I'm pulling out my hair trying to balance consistency, intuitiveness, easyness and interaction. I am leaning toward putting all actions on top of the grid with checkboxes on the left column. This saves grid space and allows all manipulation at the top and to the left of the grid in easy to reach places, in plane view. But to click a checkbox and then an edit button on the top to manipulate the data in a given row does not sit well with me. I then end up with a grid that has edit links in each row and a delete button at the top with checkboxes on the left, coming full circle.

I'm wondering if anyone has been through this harrowing task or has advice from a fresh perspective. I saw some references to this in the discussions going back to 2006 but I feel interactivity has changed a great deal in 5 years.

Comments

1 Dec 2010 - 2:05pm
DrWex
2006

I sympathize with your problem, Bo. It's similar to what we've faced. One lesson I learned in dealing with this is that it can be really hard to predict over time just how much data a grid will have in it. Grids you think now are small may grow in size over time, and the reverse is also true. Likewise different users may have very different experiences of the same grid based on things like permissions and/or narrowing criteria.

Given this level of variability and unpredictability we have opted for the checkbox/top button pattern you mention on all grids regardless of their current appearance.

On Wed, Dec 1, 2010 at 1:08 PM, bojcampbell wrote: > In trying to establish consistency of interaction across multiple tabs on a > large web application, I'm faced with creating heuristics about where to > place actions for particular records. Certain grids have a large number of > records where actions on multiple records at one time is probable; using a > checkbox on the left with a multiple action button on the top makes sense. > Other grids have less records and may have no multiple actions; using inline > action links/buttons makes more sense (an edit link and a delete link inside > the grid.) Yet other grids will have one of each, perhaps a multiple delete > action and a single record edit option; using one action item inline and one > action on top of the grid addresses this. > > I'm pulling out my hair trying to balance consistency, intuitiveness, > easyness and interaction. I am leaning toward putting all actions on top of > the grid with checkboxes on the left column. This saves grid space and > allows all manipulation at the top and to the left of the grid in easy to > reach places, in plane view. But to click a checkbox and then an edit button > on the top to manipulate the data in a given row does not sit well with me. > I then end up with a grid that has edit links in each row and a delete > button at the top with checkboxes on the left, coming full circle. > > I'm wondering if anyone has been through this harrowing task or has advice > from a fresh perspective. I saw some references to this in the discussions > going back to 2006 but I feel interactivity has changed a great deal in 5 > years. > >

1 Dec 2010 - 3:27pm
bojcampbell
2010

Thanks Dr. Wex. It was your post that I saw earlier. I probably should've tried to contact you directly.

Do you use it for the Edit function even though only one row can be selected at a time? Are you literally using checkboxes are a different method for selecting a row such as highlighting?

1 Dec 2010 - 4:05pm
DrWex
2006

On Wed, Dec 1, 2010 at 4:28 PM, bojcampbell wrote: > Thanks Dr. Wex. It was your post that I saw earlier. I probably should've > tried to contact you directly. > > Do you use it for the Edit function even though only one row can be selected > at a time? Are you literally using checkboxes are a different method for > selecting a row such as highlighting?

We do have edit functions that operate (like the other functions) on one row at a time. Since our rows represent things like orders in the marketplace we require a high level of certainty to ensure that users aren't doing things like cancel/replacing the wrong order. We also support some mass actions (e.g. closing out a group of positions, with each position represented as a row) but both sorts of actions are via the same interaction pattern of select-checkbox/click-button-at-top.

As it happens we also have some actions that are available via direct row-level selection, particularly copy, but users don't seem to discover these options on their own. I've spent some time investigating other tools that our users interact with often (such as Word and Excel) and found that those tools have somewhat oblique methods for selecting rows. I hypothesize that these past experiences are conditioning our users so that they don't find and use row-level selection in the way one might expect.

If anyone has a good way to make row-level selection more obvious I'm interested in hearing about it.

--Alan

1 Dec 2010 - 7:05pm
Cindy Lu
2006

If the grid you are using supports this interaction, you may consider this design:
1. Use checkboxes on left and buttons on top/bottom for mass actions2. When the user highlights a row, display an outline around the row with action links/buttons. For example, the Transactions table in Mint.com displays a handle Edit Details.  You can click Edit Detail, open the panel, edit information or delete the selected transaction.
- Cindy 

7 Dec 2010 - 1:40pm
bojcampbell
2010

Alan, do you have any grids that have some rows that can be edited and some that don't? I'm looking for a solution and considering just using disabled checkboxes on those particular records. We could eliminate the checkboxes completely but i think a disabled checkbox with a tool tip makes more sense. Any thoughts?

 

2 Dec 2010 - 11:24am
bojcampbell
2010

That's not a bad idea, though I just logged into my Mint account and had trouble finding that tiny gray "Edit Details" button/image. It's pretty slick and obviously once I found it I will probably not forget where it is. Hopefully. That type of interaction might take a bit more planning and visual design. Thanks for mentioning it. The inline editing is also helpful in case you want to change that particular name of the transaction. They are pretty much offering you all different types of view.

The very few tests that I did with a checkbox and edit-on-top configuration resulted in the users finding this functionality right away, especially if it was obvious that there were no other action items in the row itself. For some reason it still seems clunky. My intuition is to make the row clickable like Mint, but then bring up a detail edit and not an inline edit. I just don't want anyone to be shocked or frustrated when each time they click a detail form pops up.

(UPDATE: On the Mint Budgets, the edit buttons is much more pronounced. Just found it.)

Syndicate content Get the feed