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.

Best way of selecting rows in a grid across pages? We have a data grid which spans multiple pages, which is core part of our web based application.

Scenario 1: Checkboxes denote selection.

Use Case 1: Users can select/highlight rows to perform an action (with a modal windows popping up for user input), using a context menu or menu underneath the grid.

Use Case 2: Users also have check boxes for allowing selection across multiple pages. When users highlight a set of rows and select an action, this will automatically check the check boxes in highlighted rows.

In both above scenarios, check boxes denote selection.

Scenario 2: Rows Highlighted denote selection.

User Case 3: User can also drag drop selected rows onto a drop box to perform an action (with no modal windows popping up).

In this scenario, highlighted rows denote selection.

New Use Case

Use Case 4: Recently we started combining these two scenario(s), user's can drag and drop selected rows onto a dropbox. This time we popup a modal window asking for user input before we perform the action (same action(s) used Use Case 1, Use Case 2).

This time, highlighted rows denote selection.


As you can see, it's confusing to say the least.

We want to remove the checkboxes all together, to simplify the product. But how do we acheive the row selection across multiple pages.

One suggestion has been to have temporary bucket(s) users can drop rows into to and perform actions on the bucket later.

What do you think would be a better UX? Have you seen this implemented better anywhere rather than good old checkboxes?

enter image description here

share|improve this question
    
I've got a solution in mind but I'm absolutely confused by what you need. What are the multiple pages? Is your "grid" actually a table where each row represents an object and each column is a property and there are so many of them they don't fit into 1 horizontal screen? How's your screen currently laid out? Where are controls/actions located with respect to the data? –  dnbrv Feb 6 '12 at 13:06
    
Also, "drop box" is a term for a particular control element, which doesn't allow dropping other things into it. Do you mean an active area? –  dnbrv Feb 6 '12 at 14:26
    
Post a link to the image & we'll edit your post to display it. –  dnbrv Feb 6 '12 at 21:19
    
Regarding @dnbrv 's questions. 1) Drop box is like a category/folder where user's can drop selected rows and their categories will be updated. Yes it is control element for us, you can only drop selected rows onto them. 2) The grid has many rows, so to avoid too much scrolling we show only 25 rows per page and allow for pagination, same as email. –  chinto Feb 6 '12 at 21:22
    
And actions are at the bottom of the grid, but you can also perform actions by using the context menu as well. –  chinto Feb 6 '12 at 21:36

3 Answers 3

I guess its for a web application, but anyway may be a look at Silverlight Toolkit can give you ideas how to tackle it. At chapter Data > DataGrid you see a typical sort of grid used in desktop applications.

For showing detailed data, there is a pattern called DetailedRow, which I like for its elegance. And you can fix/frost rows (you may know this from excel as well). What you think about frosting selected rows across your pages? Editing data by clicking twice in a cell. And some more stuff. May be worth to consider?

share|improve this answer

Isn't this just like shopping for groceries online? (or a wish-list or wedding list or anything similar you're happy to think of it as).

When shopping online I visit multiple pages - I select some things to add to a basket and when I've got all I want, then I click the button that says Checkout [or Check out before Rahul says anything :-)]

Add a mechanism to add your rows to the 'basket', and substitute your action for the Checkout button and it's an almost identical scenario - just a different application.

The mechanism to add rows to the 'basket' can consist of the following.

  • select/highlight one or more rows - click 'Add' icon/button.
  • select/highlight one or more rows - drag to drop area (basket).

Mark the added rows in some way to provide some simple feedback (this is the equivalent of your checkboxes), and also indicate the number of items in the 'basket' for the same reason.

Maybe your application would also benefit from the equivalent of 'View Basket' before applying the chosen action.

It's very difficult to otherwise deal with multiple pages without having the concept of a list or basket to which you've added items from different pages.

share|improve this answer
    
Thanks for the answer. This is the option we are considering, I was wondering if there is anything better we have missed. –  chinto Feb 6 '12 at 21:39

Could you draw on Excel for an answer? So a button at leftmost end of a row would select that row on that page, while a button to the left of that would select that row on all pages?

share|improve this answer
    
Sorry, our grid is not like excel where are columns are pages. This is more like outlook/gmail where rows are paginated. You don't want to select every second email on all pages and delete wouldn't you :) –  chinto Feb 6 '12 at 21:45

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.