I have 2 sections vertically divided on a page, one page has html document and another has a tree view of various elements. The task is to select portion of text from the HTML document and select another element from the tree and map both of them.
This process is simple enough but gets tedious when the number of elements increases. There is an option to select multiple elements from both sides and map them but still there is some friction from the users and it is not 'perfect'.
I am not able to find out a way to fix and change the design. If anyone has implemented or observed similar situation on any platform then it would be good to know. Technically our team will develop what is required but the main concern is not to make the process tedious for the user. I need a more user friendly flow for the process.

2 Answers 2


To overcome a problem like that, then "real-time filtering" might be a good way to locate them elements quickly. An example would be Adobe Flash objects menu;

Full list

Filtered list, based on search query


This sounds similar to the experience of hooking up outlet with UI elements when developing for IOS. Perhaps you can draw some inspirations from there. enter image description here

Perhaps you can enable a right click menu on any HTML document selection and display the tree elements in a dropdown for selection. This may at least saves the mouse movement of going back and forth between the two columns. Once multiple elements are selected, the same dropdown flow may be used to assign elements to 1 tree item (may not be applicable).

More detail on the structure and type of HTML document or tree elements can help everyone better understand the requirements and potentially come up with better solutions.

  • Thanks for the suggestion and this is more or less similar to what i already have. One more major hurdle is that list of elements on both the sides is huge so adding a dropdown might not serve the purpose well. Basically these are financial tables with an average of 25 -30 rows per table and each row element needs to map to an element from the tree to the right ( approx 17k elements in the tree).
    – plk
    Jun 16, 2015 at 12:02

Your Answer

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

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