The UX of Large Tree Navigation

I have recently fallen in love with a new UI tool for large trees.  There are numerous examples of applications that need this.  Any application that has a tree on the left with more than 25 nodes would qualify.  (Outlook, Salesforce, Marketo, MSDN, Windows File Manager, etc)  Additionally, all photo sharing sites would benefit from this as well.

Look at this prime example from ExtJS.  This screen is where I believe the UI was invented.  The tree on the left is collapsed.  If you expand it you will see how big it is.  Now here comes the magic moment.

In the search box above it, type in the letters col one at a time.

Notice how it instantly filters down the results.  No “searching”.  No “please wait” or spinner.  It has the tree cached and it filters it down for you to look at.  Of course it COULD have a searching thing if the tree was gigantic, but the UI should be the same.  It should filter the results right beneath and maintain the folder structure.

This is beautiful and I have been watching users use that in Marketo to enormous success.  It means never having to search through a tree.  This UI tool has become as staple for me.  Any tree is going to get this from now on.


Comments

One response to “The UX of Large Tree Navigation”

  1. I like Ext JS, but also like D3.js. A lot of cool infographics run on it.

    Finance “solved” (or groped at this blindly depending on personal experiences) this problem with visualizing large dimension data sets.

Leave a Reply to ScottCancel reply