Thursday, October 25th, 2007

Designing the perfect Tree

Category: Component, UI

Glen Lipka has been thinking about Trees. He looked around for patterns for building them, and couldn’t find anything. Then he looked at examples such as the Ext Tree component and ended up writing up his dream tree:

  1. Hover.  This is a problem with Vista as well.  If it’s clickable, then it should afford clicking.  The best way to do this is with a color change in the background.  EXT and Vista do this very well in Menus, but they forget about it in the Tree.  Trees need clear hover states.  This is my number one pattern in general for trees and it is missing in tons of JS trees out there.
  2. Bigger target.  The hover in the above step needs to be wide.  As wide as the whole tree.  Plus it needs to have a little padding.  Give the user a decent target to hit.  Don’t make them hit a tiny spot.  Give them breathing room. David Foltz says, “Don’t make the user play target practice”.  He is right.
  3. Keyboard shortcuts are good when the tree is focused, but what about when it’s blurred.  Keyboard shortcuts don’t work when tree is blurred.  In Vista the “on state” changes to be lower contrast on blur, so that it’s easier to tell that moving the mouse will have no effect.  In the EXT example, it doesn’t change.  This causes issues.  I actually asked the engineers to turn keyboard shortcuts off, and it seems that the keyboard option is not easily turn-off-able.

    The pattern I actually like with keyboard shortcuts better than this example is to move the “selector” or “hover” with the keyboard, and NOT the onstate. Moving the onstate changes the right side.  This is OK in an operating system, but not OK in a web application, where latency is much greater.  Interestingly, Vista is different than XP on this score.  Vista moves the hover state, although it looks like the onstate.  And XP actually moves the onstate.  Ugh, this is all a mess.

    Ok, the bottom line is:  Keyboard shortcuts for web trees should move the hover state and require an enter or spacebar.  This is the same pattern as keyboard shortcuts in raw HTML.

  4. Bigger On state.  It should be clearer that you are ON a selection.  It should be a background color going as wide as the whole tree.
  5. Should not collapse the entire tree.  The root node on a tree with only one root node should not collapse.  Even though I see this in lots of trees including Microsoft, I think its terrible.  Why would the user want to collapse the tree down to one node?  It makes no sense to me.

Posted by Dion Almaer at 8:27 am

2.5 rating from 119 votes


Comments feed TrackBack URI

Ad. 5 Why not?

Let the user decide pattern / A user interface pattern.

Don’t take (all) users for stupid.
The user knows what he wants, let him decide.
Don’t be too smart.

Comment by Mrrau — October 25, 2007

“Should not collapse the entire tree. The root node on a tree with only one root node should not collapse. Even though I see this in lots of trees including Microsoft, I think its terrible. Why would the user want to collapse the tree down to one node? It makes no sense to me.”

If you are viewing a forest? ie/ a set of unrelated trees that arent naturally children of a common object. In this case you amy want to collapse some trees to their root node.

Comment by Dave Crighton — October 25, 2007

Why such a low rating? Not exciting enough for you? Not Ajaxian enough perhaps?

Well, I very much appreciate this ideas for upgrading a commonly used interface such as this. #2 is very important and I’m surprised to hear that many tree implementations apparently don’t account for this. Being a power user it’s not very annoying for me personally but I’ve seen ‘regular’ folk struggle with this. On no. 5 – a one root node tree should not be collapsible – I entirely disagree. Absolutely do not make a one root node tree collapse challenged. I would suggest making sure the default/initial state of said one root node tree as ‘open’. Perhaps opening it upon focus too – hmmm?

Comment by Eric — October 25, 2007

Firstly, add the tag ‘Ext’ to the article.
Secondly, if the author feels that strongly about the tree topic and Ext comes as close as it gets, then put in a feature request on the Ext JS site and see what happens. Until the passion meets action, the author is just part of the problem and the article is nothing more than a whine.

Comment by Michael — October 25, 2007

I have often wondered: why did Apple choose not to use the tree in Finder? What is the usability issue with trees that they decided to come up with an alternative (the sliding thing, don’t know what it’s called)?

Are trees difficult for regular users (yes, we understand them, but we use them daily).

Comment by Mike — October 25, 2007

Umm. Am I getting something wrong? Vista does hover on Trees. Its not the full width to the splitter pane, but it is changing the background color to a light blue below the text when the mouse is over it. As long as the tree has the focus, the selected node will stay a light blue a bit darker than the hover blue. If the focus is elsewhere, that color will be grey.

Comment by Gordon — October 25, 2007

Trees are hard to use, especially when they are large and the hierarchy is not intuitive. I liked the idea of a hyperbolic tree, which is easy to navigate, at least in my opinion. At least, you the tree is not pages and pages long and you would have to search linearly.

Comment by Rags — October 25, 2007

The EXT tree is really good..and it is flexible to make the changes I desire. The post isn’t a complaint. It is simply that I couldn’t find a written UX design pattern on the web for trees. So I decided to write one. Rather than just start with nothing, I thought the EXT example was close, so I would write from that point of view.

The web needs more written UX patterns. YUI has done a good job with this, but for some reason doesn’t have it all. Not sure why.

The point isn’t to have a perfect “product” but rather best practice direction for product makers.

Comment by Glen Lipka — October 25, 2007

Sorry, one last thing. This post omits all the “good stuff” I wrote that EXT does.

Comment by Glen Lipka — October 25, 2007

The EXT tree is definitively the best for web apps I’ve seen out there.
to 1. I think it’s possible to add this for yourself.
to 2. Small hover areas are ugly –)
to 5. Why not collapse the whole tree? E.g. it’s useful, if you use several trees one below the other.

Comment by Andi — October 26, 2007

Nice work Glen! I think we _way_ more documentation like this. Similar to what Yahoo started, but open and for everyone to contribute. Screencasts would be good too.

Comment by Andre Charland — October 26, 2007

@Andi – #5 was really about when there is just one root. Multiple roots would disqualify the statement.

@Andre – A friend was actually talking about starting up a patterns website that was open, wiki style. I thought the biggest problem is editorial. My suggestion was to have a site that you could add your pattern to a section called Trees, and they would all be linkable on a master page. Maybe with votes for them (5 stars). Then you could see different peoples views without the right/wrong discussion. I agree with you completely that we need more patterns out there in an open way.

Comment by Glen Lipka — October 29, 2007

Leave a comment

You must be logged in to post a comment.