This is about adding a search field to a tree: the search for a keyword is supposed to return all tree nodes containing that keyword

Also the tree nodes have the usual expand / collapse checkboxes

The specifics about the tree is that when a tree node is selected, a list of attached entities is displayed on a side panel

How should the search work in regards to previously selected nodes (and previously displayed entities), from the usability point of view ?

Thank you so much in advance

  • Can you add a screenshot or mockup of the design so far? – Andre Dickson Mar 4 at 2:39

Imagine you have a search box above a tree. When you type in a term in the search box, the tree reduces down to only those nodes that contain the term, and of course their ancestors up to the root nodes. Effectively the search is a filter box. The visible nodes are the view onto the full data model for the tree.

If you already have a node selected (with its entities in the details panel) then using the search box to filter the nodes doesn't need to change/unselect the selected node(s). Although the selected node may no longer be visible in the reduced set of nodes, it should still be selected in the full data model of the tree - but not showing in the filtered model view. If you cleared the search box, you'd go back to the original tree with your selection intact, as before the search.

If however, after filtering, the user selected one of the reduced set of nodes then the details in the panel would change as expected. And if you cleared the search box after that, you'd go back to the full tree, but with the newly selected node still selected.

  • Thank you so much for your answer, it totally makes sense. – Dana Mar 6 at 15:18
  • I was still wondering if there would be a solution to maintain visible selected nodes before search (e.g. by somehow joining the search results with the previously selected nodes) – Dana Mar 6 at 15:20
  • Absolutely. We have used this approach previously, that any previously selected nodes are merged in-line with the filtered results from the search. Selected nodes are highlighted as before, while the matching portion of the filtered items is highlighted differently to show the reason for the match. This is especially useful in the case of multiple selection, or where you may want to keep the filtered state for a while - or even repeatedly searching for a term, and adding a selection, all the while keeping the existing selected items always visible for the user to see. – Roger Attrill Mar 6 at 16:56
  • This is exactly what I was looking for ! Thank you a million ! – Dana Mar 7 at 10:40

My approach is usually changing the tree view into one dimension list when filtering it.

So if we have unfiltered tree like this: Tree view

Then filtered one would look something like this:

Filtred tree view

This approach lets you not worry about collapsing/expanding different elements while filtering, so the user doesn't get lost in it. And also leaving only the filtered elements selectible, which should be easier on users cognitively - so they can't select by mistake what they didn't look for.

If the item is selected before you filter, you should also, probably, clear the selection, so not to confuse the user ("What do I see on the side panel if there are no items selected on the filtered tree?"), unless it's on the filtered list, in which case you should keep it selected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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