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 are developing a web application that has a screen with two parts. On the left side we have a tree where the user can check or uncheck specific items, even leaves or nodes in the tree. If we select a node in the tree one time, that might mean we select thousands of its children at once.

On the right side we have a table with paging and filtering possibilities. This table shows the details of the selection that was made in the tree.

As fetching the details is time-consuming. Because of paging and filtering we cannot load only the deltas.

Currently our design is that first the user has to make the selection in the tree and we have to press a big "Update" button under the tree so that the table refreshes according to the changed selection in the tree.

Unfortunately this yields poor usability according to our tests. (People don't understand the "Update button" and wait for the table to update automatically.)

We thought of making the selection change immediate, but as the typical scenario is selecting many nodes and then work with the table, this would yield many wasted server calls because only the last one call's result would be used.

Could you suggest me a better way to solve this problem (possibly supported with live examples)?

share|improve this question
    
Because of paging and filtering we cannot load only the deltas. Why? Page is just another filter criterion? Which for fetching details could be translated into an "is in []" with the identifiers of the rows in the paged filtered result. –  Marjan Venema May 24 '13 at 11:19
    
@jabal Adding a mockup will make it easier for people to understand. –  rk. May 24 '13 at 11:55
    
Could you specify (in a mockup) how the update button is currently implemented? –  Koen Lageveen May 24 '13 at 17:33
    
Do users need to review the table during their selection of items? Have you considered to have the table disabled (or even better, hidden) before the user has made up her mind as to what items she wants to work on? –  Dvir Adler May 26 '13 at 8:58

3 Answers 3

up vote 5 down vote accepted

Something like this could be done ,

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The part on the right could be made darker or blurry if update is really important . Or maybe just leave it there, warning colors like red and other bright colors could be used to grab user's attention .

EDIT : " Some changes have been made " can be replaced by , "You made some changes" because the former tends to confuse the user.

share|improve this answer

Could you consider a different architecture in which the data is manipulated client-side rather than through server calls? I've built some pretty big data tables (> 100,000 rows) with Backbone.js that supported real-time filters/sorts/etc. With that approach, you could update automatically with each user click without incurring the cost of additional network requests. It also has the benefit of giving the user immediate feedback on every click; no more wondering which of the multiple selections I clicked messed up my data.

share|improve this answer
    
Although I haven't used this particular library, it might be something to consider: rotundasoftware.github.io/backbone.collectionView –  Stephen Thomas May 24 '13 at 18:31

This is an example of a client-side selection tool I developed a while ago:
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
The user can select items from a tree at the left of the page and accumulate them in a table (or whatever) on the right side. This particular example only allows the selection of leaves, but the modification to make it work with nodes is possible.
You only need to transfer the item names (or ids, or whatever) during the selection process.
When the user gets to the right-hand side then you pull any additional data from the server, without any button clicking.
You might want to overlay the table with a pls wait while the data comes throbber while the data is being downloaded.

share|improve this answer

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.