Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 19 down vote favorite
14

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

share|improve this question
6  
What are you trying to achieve? Can you mockup the information you want to display - this will help work out possible solutions. – ChrisF Mar 21 '12 at 12:09

7 Answers

up vote 38 down vote

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:

Stacks

Hierarchy: Stacks

Columns

Hierarchy: Columns

Arrays

Hierarchy: Arrays

Networks

Hierarchy: Networks

share|improve this answer
up vote 10 down vote

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

share|improve this answer
Miller Columns aren't pretty but they do work well – Ben Brocka♦ Mar 21 '12 at 17:05
up vote 3 down vote

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:

http://programmers.stackexchange.com/q/87077/27103

share|improve this answer
1  
While this solution is rather original, it's not easy to use and requires significant training. – dnbrv Mar 23 '12 at 12:27
1  
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). – robmclarty Mar 23 '12 at 20:22
1  
@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. – pgfearo Mar 24 '12 at 16:05
up vote 1 down vote

There is also a great jQuery plugin for accomplishing iOS-like drill-down menus: http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

share|improve this answer
"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 Mar 22 '12 at 15:50
@dnbrv and here's the same. – MechanisM Mar 23 '12 at 5:42
@MechanisM: And here it's even more clear because the suggestion is to use the jQuery plugin not the concept. – dnbrv Mar 23 '12 at 5:55
@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 Mar 23 '12 at 5:59
1  
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). – DA01 May 22 '12 at 19:20
show 7 more comments
up vote 0 down vote

I would prefer to use smth like iPhone sliding menu for tree structure. Smth like this one http://codecanyon.net/item/jquery-infinite-sliding-menu-plugin/full_screen_preview/164115

share|improve this answer
"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 Mar 22 '12 at 15:50
@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. – MechanisM Mar 23 '12 at 5:38
You linked to a jQuery implementation without knowing what kind of project it is. – dnbrv Mar 23 '12 at 5:42
1  
@dnbrv I'm just linked to concept of how it's can be done. and look like. not to code or realisation. – MechanisM Mar 23 '12 at 5:43
up vote 0 down vote

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.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
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. – Danny Varod May 22 '12 at 22:15
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 – Dave Hyman May 23 '12 at 21:12
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). – Danny Varod May 23 '12 at 23:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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