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

  • 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. Commented May 24, 2013 at 11:19
  • @jabal Adding a mockup will make it easier for people to understand.
    – rk.
    Commented May 24, 2013 at 11:55
  • Could you specify (in a mockup) how the update button is currently implemented? Commented May 24, 2013 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
    Commented May 26, 2013 at 8:58

3 Answers 3


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.


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.


This is an example of a client-side selection tool I developed a while ago:
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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