Is there any alternative UI for tree structure?

  • Is there any other better UI feature for tree structure to reduce the multilevel nodes.

    What are you trying to achieve? Can you mockup the information you want to display - this will help work out possible solutions.

  • I don't know all the different ways of visually displaying a hierarchical list of 'nodes', but here are the four main ones I can think of:


    Hierarchy: Stacks


    Hierarchy: Columns


    Hierarchy: Arrays


    Hierarchy: Networks

  • An alternative that is used sometimes, is a Miller Columns view.

    QColumnView image taken from Qt Documentation

    The idea is that the subnodes for the selected item in column a, are shown in column a+1 next to it. A benefit, especially with trees that contain different types of nodes on different levels, is that each column only contains one a single type. That is easy to understand. One downside is that you cannot view and compare multiple branches at the same time. Another is that parent brances move out of view quickly in deeper trees, and that the items which form the ancestors can be at different places in the lists.

    An example of this pattern in use, are Apple style file dialogs like these: adjacent columns of descending file directories

    Miller Columns aren't pretty but they do work well

    Miller Columns seem to go against some UX rules. it's displaying data which is really not needed. Plus you can easily get overwhelmed with a complete overload of data. it is not friendly on the eyes that is for sure.

    @Fractal I don't see it displaying any more data than a conventional tree view? Note that I think that _the_ major shortcoming of a conventional tree view is that it doesn't show _enough_ contextual information. In bigger trees, it is impossible to see your location within the tree quickly. Even the direct parent can easily scroll out of view. Miller Columns don't suffer from that problem as much. A bigger problem is that the hierarchy isn't visually defined all that clearly.

  • For certain types of hierarchies (such as nested text), a control that I call a 'NestView' might be suitable:

    enter image description here

    This actually evolved from a number of answers given to a question on Programmers.StackExchange:

    While this solution is rather original, it's not easy to use and requires significant training.

    That's cool. I never imagined laying out indent levels like that. A little harder to read, but gives you the advantage of lining all the code up flush left (fits more characters on the screen horizontally).

    @dnbv I agree that it will require some getting used to because its new. When the TreeView first appeared, it probably took a while to get used to this also.

    +1 for originality. Time will tell whether it's usable, although I have my doubts.

  • One alternative - which may not fit your application is the treemap. It is a useful way to display data when the relative size of the nodes is important.

    Treemap image from Wikipedia

    (wikipedia example treemap - in this instance showing changes in waiting times for patients)

    This paper on Squarified Treemaps[pdf] is how I learned about the technique. It is quite accessible.

    Note that as seen in the example above, the treemap can lead to unexpected UI/UX concerns as text becomes unreadable and small categories congregate into a blob.

  • There is also a great jQuery plugin for accomplishing iOS-like drill-down menus:

    "iOS-like drill-down menus" are Miller columns that are shown one at a time. Moreover, the OP didn't say it was for a web project.

    @dnbrv and here's the same.

    @MechanisM: And here it's even more clear because the suggestion is to use the jQuery plugin not the concept.

    @dnbrv okay, so let's ask someone to edit question and add "non-web" mention(if it's really is). so it's not confuse ppl.

    @MechanisM: There's no need to edit the question. This SE is about UX, so the answers here should be about interface patterns & user behavior and not about code. Platform-specific solutions are necessary only when the platform in question has particular limits or established design paradigms.

    @dnbrv "about UX, so the answers here should be about interface patterns & user behavior" - why it's can't be web related? And I didn't talked about code I'm just showed example of how tree can look/behave like and to test UX.

    @dnbrv just take off from your mind the fact that my link goes to html/js example. imagine it's just some program's UI with tree!

    @MechanisM: Yes, UX can be related to the Web. However, the point is that you linked to a jQuery sample not an explanation of why that pattern should be used (i.e. use cases/scenarios).

    @MechanisM: What you're missing is that "iPhone-style menu" is actually Miller columns that are modified to fit mobile devices.

    @dnbrv so you don't see any use cases for such kind of menu? it's can be nice part of interface to show trees. For example look at for first imagine it's not a web site(if it's so important for you web or non-web) lets look at it like some software interface.. look at sidebar category menu and imagine iphone menu instead of their category menu. will look much better. and better UX. And yeah I'm know about miller columns. Btw I'm talking about this one I don't like jQuery UI one.

    @MechanisM: It's not a menu. It's Miller columns modified for mobile devices. It's not appropriate to use this pattern in most desktop environments because there aren't the limits, for which it was designed. Moreover, it wouldn't work on DevianArt because it's a completely different navigational pattern (quickly find a sub-category vs. browse through all content).

    UX isn't strictly web, of course. But most people working in UX today are working on web projects. So it's a safe assumption unless otherwise noted. "answers here should be about interface patterns & user behavior and not about code" -> they go hand in hand. And in this case, the answer was pointing to a pattern (that just happened to be coded already).

  • I would prefer to use smth like iPhone sliding menu for tree structure. Smth like this one

    "iPhone sliding menu" is Miller columns that are shown one at a time. Moreover, the OP didn't say it was for a web project.

    @dnbrv Who says it's for web or non for web? it's used in iPhone - so iPhone is web too? UI is UI and web or not doesn't matter.I can do same ui for web or not for web project.

    You linked to a jQuery implementation without knowing what kind of project it is.

    @dnbrv I'm just linked to concept of how it's can be done. and look like. not to code or realisation.

  • I have used a Tag Cloud as a way to organize all the content on my computer for a long time. I have found it to be a efficient way to quickly organize data. The only downside is that you need to make sure your content is tagged.

    I use a program for Mac OS X called Leap and it has changed the way I store and access files on my computer.

    A tree structure can be converted to tags. This conversion is usually one way, since tags usually do not have hierarchy. In that manner a tag cloud is not an alternative for a tree structure any more than a list view. One major difference, however, is that items can have multiple tags, which can provide a replacement for trees - if you turn every parent folder into an additional tag and you do not care about the order.

    I find the lack of structure of multi-tag searching to be liberating and can lead to much quicker paths to finding a specific file

    I prefer tags too, this is also the concept used in gmail (labels) as an alternative for moving new emails to folders (which also enables multiple labels and now also hierarchical labels). What I meant, is if the data source is a tree (e.g. organizational structure, file system) then the tags are not the equivalent (unless you use hierarchical tags).

  • A minimalistic solution is a "Breadcrumb", like most modern file managers have today. This example is from Wikipedia.

    That's just one (incomplete) path from a hierarchy. It does not give much overview.

  • As a powerful alternative, I recommend the solution "stolen" from the Windows Explorer.

    Windows Explorer

    To make it easy to use, you have to make it simple:

    1. list view - flat display of items at the current level,
    2. breadcrumb - hierarchical display and navigation between chosen levels,
    3. tree view (!) - but only to show the structure without items itself.
  • For navigation to the deepest nodes and if you don't need an overall view of the tree but only the lowest nodes, but visibility who they belongs to, then an great alternative that is used by many Car Occasion sites is that it uses combo boxes for navigation down the tree. Look at this: 1. Select car brand in combo box, 2. Select type of car in combo box. 3. Select build year in combo boxes 4. Text free word and then a list is presented with those cars.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM