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 4 down vote favorite
2

I am in the process of defining a style guide for a family of software applications, including the usage and visual design of a tree widget. Right now, we are having discussions whether to use lines to connect the hierarchy of nodes or not.

Do such lines in a tree widget improve usability?

share|improve this question
It could...but it all depends on the overall UI of the widget. Too many 'it depends' variables to say with any certainty one way or the other. – DA01 Feb 29 '12 at 16:14
2  
It would be helpful to see an example for a sense of context. – Joel Garfield Feb 29 '12 at 18:00
1  
To be clear, you are referring to something like this, right? – peteorpeter Feb 29 '12 at 20:06

2 Answers

up vote 10 down vote accepted

Like This?

I'm picturing a vertical tree structure like one would see in an OS file browser (see below). Is this right?

enter image description here

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 file name on the far left to a file size on the far right, the stripes help my eyeballs stay on the right line and connect the bits of information I want.

But Keep It Subtle

If you're using the lines as a "helper" like this, I would take the time to seriously design them properly to balance their contrast with other higher-level interface actions. For example, don't make them pure black on pure white (the stripes will be hard to read between). Instead do something like an alternating background color for each row of the tree/list and make that color have only just enough contrast that you can see it (and use it) but no more (so as not to interfere with more important parts of the interface).

Stripes May Not Be Necessary

If the list is mostly vertical and relatively horizontally compact, the lines might not be that helpful and may only be cluttering the interface. For example, below is an example of the file browser for a project in my code editor. Without the added complexity of lines or stripes, this vertically-oriented list is easier to scan:

enter image description here

Keep All Elements in Balance

This is a really subtle part of the design and should really be a lower priority to the primary actions of the application that's being designed. Everything in the interface needs to be balanced and weighed against everything else for both utility and aesthetics.

EDIT: Vertical Lines

Vertical lines can play the same role as horizontal lines in that they enhance the user's ability to navigate tables of data with his or her eyes, but they're not absolutely necessary, and should always be balanced with the design's visual hierarchy. Below is a screenshot I took from Adobe's Livedocs and modified to illustrate alternative approaches and how they work side-by-side.

enter image description here

share|improve this answer
Good discussion of using zebra stripes with trees, but I don't think zebra stripes are what the OP meant. I think he meant lines that connect parents to children - "lines to connect the hierarchy of nodes." – peteorpeter Feb 29 '12 at 20:05
@peteorpeter You're right. I may have misinterpreted the OP's intentions. However I think the same advice applies: useful for moving eyes over long distances, not absolutely necessary, needs to be balanced in the design's visual hierarchy. – robmclarty Feb 29 '12 at 20:17
It was a great (if misguided) answer before and now with the edit it's an excellent one, that could benefit many people. -1 --> +1. – peteorpeter Mar 1 '12 at 16:52
@peteorpeter cheers mate :) – robmclarty Mar 1 '12 at 18:03
@robmclarty - Thanks for the great answer! Especially the Adobe example was very helpful. – heumann Mar 19 '12 at 15:40
show 1 more comment
up vote 2 down vote

If the elements in the tree are very similar to each other (ie: text), and the association between them and their place in the hierarchy is obscured by factors like a large number of items in each level, high density of text, the ratio of width of item to steps in the hierarchy (ie: each item is a lot wider than the step), then the answer is yes.

If any of those things are not usually present, then no, you don't need lines or any other method of making it easier to visually separate each item.

share|improve this answer

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.