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?

  • 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
    Commented Feb 29, 2012 at 16:14
  • 2
    It would be helpful to see an example for a sense of context. Commented Feb 29, 2012 at 18:00
  • 1
    To be clear, you are referring to something like this, right? Commented Feb 29, 2012 at 20:06

2 Answers 2


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

  • 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." Commented Feb 29, 2012 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
    Commented Feb 29, 2012 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. Commented Mar 1, 2012 at 16:52
  • @peteorpeter cheers mate :)
    – robmclarty
    Commented Mar 1, 2012 at 18:03
  • @robmclarty - Thanks for the great answer! Especially the Adobe example was very helpful.
    – heumann
    Commented Mar 19, 2012 at 15:40

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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