Hot answers tagged tree
38
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
Columns
Arrays
Networks
15
You are actually asking how to ensure better interaction design while combining two elements which are not UX-friendly: tree structures and pagination.
1. Tree structures
Unfortunately, hierarchical trees are one of the most inappropriately used controls in the toolbox. They can be highly problematic for users; many people have difficulty thinking in ...
10
Like This?
I'm picturing a vertical tree structure like one would see in an OS file browser (see below). Is this right?
Stripes can Improve Usability
I think horizontal stripes (or lines) can help, but the help they provide is most beneficial when dealing with a horizontally large tree or list. For example, in the image above, if I need to connect a ...
10
An alternative that is used sometimes, is a Miller Columns view.
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 ...
9
You pretty much want to go for one or the other extreme, where the extremes are:
Explicit Save for Everything. Everything needs saving through an explicit command.
Autosave Everything. Everything is saved automatically and instantly.
You want the user to have as simple a mental model of the system’s behavior as possible. You don’t want to burden the ...
9
You're on the wrong path, here.
The problem is that you try to show the attributes in different trees.
The tree should contain the content.
The attributes should be displayed as attributes to each node.
This can be done in various ways depending on the importance of attribute.
As a column:
...or:
- As a popup dialog
- By showing the attributes ...
8
When your hierarchy is so large, there's no way to avoid clunkiness because it's there by design (large data sets are unwieldy). Miller columns with an "add" button on the bottom will be the most elegant solution here. They allow you to have as many hierarchical levels as possible while making selection process simple because they clearly separate the ...
7
Multi level pie menu
Tree map
Zoomable interface
7
Showing the actions only on hover is the way that 37Signals do it in many of their products, and so far I haven't seen any problems with it, other than it not being usable on touch devices. That is a big downside if your customers are likely to be using touch devices. With the prevalence of iPads, this is becoming a bigger concern.
Another possible method ...
6
Tree navigations is a simple and effective solution to discover hierarchical structures. I would test two different solutions.
Accordion: http://ui-patterns.com/patterns/AccordionMenu
Drilldown lists: http://mobile-patterns.com/lists
Accordions work if you have flat hierarchies (e.g. one sub level). They keep the user in context and you don't have to ...
6
A few considerations:
What OS is this for (or is it for multiple)?
Are there any constraints or known limits on your hierarchy?
Is there a search option provided?
No. 1 is important as you noted... because the Mac Finder would be foreign to most Windows users.
No. 2 may provide assistance also. E.g. finder works good if you have a shallow tree, but if ...
6
If you only have two levels, you could use an ordinary master detail approach.
See #1 here: http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
If more levels are needed, you could go for the drill down design pattern.
Eg: http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx
If you want to keep every thing in the same ...
5
Let's break down your options:
Always show the 'child' items.
Visual nesting will be important here, using contrast to visually separate the items from the parent and alignment and proximity to visually group them. For example, see, this screenshot from Rally software, and notice how the tasks (TA*) are visually distinct from the stories:
Note that you ...
5
Personally I would suggest not using a tree but using something like Miller columns.
You'd have Contracts in the left column, Groups in the second column and Articles in the third column.
You could add a fourth column which gives information about a selected article - for the given group and contract. Maybe you need a leftmost column for users too. You ...
5
Looking at the image, a few things come to mind:
Flatten the hierarchy. Your hierarchy is deep, and (deep) trees are difficult to use
Your tree is unclear, because it repeats the same nodes at different levels. Get rid of the repitition. For me, it is not clear what this actually means. Are you trying to represent a network in a tree widget?
If you must ...
5
This is a great opportunity to get creative.
download bmml source – Wireframes created with Balsamiq Mockups
Smart programming can take care of your performance issues hopefully. Just load things as you need them. Allow users to hide things they don't care about. Use a tree (it just makes sense logically) but don't let yourself be stuck in ...
5
It seems like the different options are more related with each other than that they are unrelated. They all manage "tree operation". In that sense it would make a lot of sense to combine them on just 1 tab. It would take away the need for users to constantly switch between the tabs.
The fact that you have plenty of screen real estate left is also an ...
4
If the same object can be on multiple locations in the same tree, then you don’t have a hierarchy. At the very least, you have multiple hierarchies. Or perhaps you have some many-to-many relationships.
In any case, I think you need to think more about your data model. You probably need to break down the hierarchical scheme into several orthogonal ...
4
Just as food for thought - and I have no idea if this will suit your situation, but you might try considering a completely different approach to the problem. You said this was to let the user choose world regions and countries - how about letting the user interact with more meaningful data like the mock-ups below.
The user simply selects one of 6 or 7 ...
4
I might be wrong but the pattern which you seem to be hinting at is that of faceted navigation.
Faceted search or navigation is an increasingly popular method of organizing data that would otherwise be hierarchically displayed in a fixed structure. With faceted navigation, the user can pick what's important to them. With each facet selection, the effect of ...
4
Most users come from Windows and are more familiar with tree controls than Miller columns, so for a public website's navigation you should use a tree (or menu bar for horizontal layout) in preference.
If most of the users on your intranet are on Windows, use trees. If most are on Macs, you have a case for using Miller columns, but read on...
Miller ...
4
I think it depends on the typical tasks.
For just seeing a hierarchy and clicking on links, I do agree with lucasrizoli, that tree is very similar.
If user have to go through folders a lot (forward and backward in hierarchy) I prefer the Mac OSX idea. It is very useful at work, where I have to find thinks in folders.
Why is it good?
Firstly it uses much ...
4
I can't answer from a mathematical perspective, but from a UX perspective the root node is not required if it conveys no information about the hierarchy, and especially if it is liable to cause confusion about what the root actually represents.
The primary reason for including a root node is to represent an actual object which is a superclass of all its ...
3
1) Tree widgets (as in Windows Explorer) and drop-down menus (mega or otherwise) I would say are the most familiar.
2) "Get" is vague, as are "users," really.
This is not an answer to your question, but is it necessary that the user see/navigate a deep hierarchy? Avoiding a hierarchy or simplifying it, making it shallower, I suspect it will be easier ...
3
Yes, you can collapse in a bunch of ways.
IntelliJ's IDEA shows class hierarchies in a treeview, but an option will collapse intermediary levels and shows them as a single item (com.sun.java.foo) instead of multiple levels (com/ containing sun/ containing java/ containing foo/).
You could also use some sort of ellipsis if you don't care about the content ...
3
Look at how the macOS does it using panels. Fixed height with scroll bars and it moves left-right as you click through. I used this for a similar situation last year. Additionally, you could represent the current position using bread crumbs.
Secondly, check out the new address bar in file management in Windows 7. It creates drop down boxes for each ...
3
Is this really a tree? It seems more like a grid of data.
If the set of possible 'editions' is small--sounds like it is six--then why show them as a tree?
Show them as a table, with:
one row per product, and one column per edition.
Present a checkbox or other control if that edition is available for that product, or a blank cell if it isn't.
If you have ...
3
A few things to add for consideration to what has already been said in the other options.
I do think option B is the strongest of the options though I would suggest the following differences:
Combine in option A into your solution (in reverse from what you described). Meaning double click to expand/collapse (if clicking the circle instead of the + -). ...
3
Maybe you don’t want a tree control. Tree controls are best for users editing the hierarchy to an arbitrary depth (e.g., like when creating and moving file folders). I don’t know what the user task is here, but here’re some possibilities:
UI #1. Known Entity Selection
If the purpose of the UI is to select a known entity (e.g., a custmer) for further work, ...
3
For certain types of hierarchies (such as nested text), a control that I call a 'NestView' might be suitable:
This actually evolved from a number of answers given to a question on Programmers.StackExchange:
http://programmers.stackexchange.com/q/87077/27103
Only top voted, non community-wiki answers of a minimum length are eligible
