How to load data into a table based on the selection in a tree?

Question

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

Answer 1

Something like this could be done ,

^{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.

Answer 2

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.

Answer 3

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.