Horizontal Navigation Tree Filter

UXD/UI Pattern Horizontal Tree

Most of the navigation tree we are familiar with, it’s the vertical tree pattern. Of course, you also have seen the horizontal tree before, like Mac Finder or File explorer.

Horizontal tree works well when you have one to many relationship that needs to be represented in a hierarchy, but for many to many, it doesn’t work well.

Here I have created a solution for the horizontal tree for many to many relationship, in other words when you need to select multiple items from each node on the hierarchy. 

Giving individual box for each level of the hierarchy, and on the second level, you see a combined result grouped by the previous level (node).

horizontal navigation tree

  1. Maury

    Interesting ! The arrow should point to the downward?

    • Good point @Maury. Yes or No. Since that arrow is not interactive or clickable and it is intended to appear as static breadcrumb, thats why I kept it like that. If it was downward, I think it would give me an illusion that it is collapsable or foldable. Where my main purpose is to totally avoid that sort of illusion otherwise it is the same as a vertical tree. I think I would totally avoid that arrow.

      Do you have any better idea?

      Cheers!

  2. This pattern has been called ‘Miller Columns’ (from it’s creator, Mark Miller, back in 1980 at Yale University). Perhaps it’s most famous first commercial use was the File Explorer that shipped with NextStep (the OS for the NExT Cube, the computer that Steve Jobs created before his return to Apple). One interesting thing is that it was possible to shift the entire hierarchy over, with the first list being at the far left, letting you drill down even further. Then, if you wanted to retrace back, you could click a right/left arrow.

    I don’t believe I’ve seen it used as a filter for searches, though. I’m assuming that only the last column controls the data plots at the bottom. Otherwise, every selection at the left and centre would display too many hits to graph practically.

    • That is some great historical information Drucker. Not sure how it was, but I can imagine the fold/unfold interaction within one column, where in this case I just wanted to avoid confusion with multiple interactions.

      You are partially right on the filter for searches. It depends on how you want to represent them, lets say you didn’t select any item from the 3rd col for one node from the second and you have selected some items on the 3rd from another node on the 2nd. You can still display your result accumulated on both. I guess, depends on how complex you want to go… but it could be a good problem solving exercise.

  3. Parametric search and filtering is quite common on B2B electronic component distributors. This pattern and more advanced versions can be found in this space due to the amount of product specifications. The behavior is dictated by the data relations and dependancies coupled with desired user experience.

    Examples:

    https://www.arrow.com/en/products/search?cat=Amplifiers&datasheets=true

    http://parts.io/search/term-Op%20Amp/Class-Amplifier%20Circuits/Category-Operational%20Amplifiers?Subcategory=Operational%20Amplifier&Amplifier%20Type=OPERATIONAL%20AMPLIFIER

DROP A LINE