gui design - Modern Alternative to Tree View for Hierarchical Data

There are other similar questions to this, but none of the solutions really fit my problem space. Breadcrumbs and drill-down menus are not the solution. So without further ado:

• The design problem is a configuration panel that takes up 1/3 the application space


• It's a desktop application (not web, not mobile)


• Configuration groups have files which have child items that need to be seen/managed


• There is a search feature, but no facets


• Needs to be compatible with touch screens


• The 1/3 width configuration panel directly affects the 2/3 width application area. The user needs to see the affects of their configuration choices live.

Everything about the design problem suggests we need a tree view, except for touch screens. I attempted to use an accordion pattern in mockups with our development team and it didn't really work for our situation. We need to have more than one sub-group open at once.

More requested Detail:

• Typical depth: 4 levels
  
  
  
  • Config Section
  
  
  • Group
  
  
  • File
  
  
  • Record
  
  
  
  



• Worst case real world depth: 5-6 levels (groups can have sub-groups)


• Typical records per file: 10s


• Worst case records per file: 100s


• Configuration sections: 4

NOTE: We may or may not choose to show the file level only if the user requests it. That will reduce the max depth we need to worry about, and for some configuration sections it gets in the way.

Search will be a key part of this dialog, there really is no other way to do it. However, we don't have the real-estate for faceted search, or any obvious facets that aren't already part of the hierarchy. Breadcrumbs can be a part of the solution, but in the area where we have the most records we need neighboring groups open at the same time.

Answer

I don't like tree views, but sometimes they really are the most appropriate widget.

Before you write the tree view off, it's worth thinking about whether it can be redesigned better for tablets.

---

1. Issues with tree views

• The drop-down icons are usually too small. They're hard to click even on desktops, let alone on tablets (see Fitt's law).
  
  
  
  • Idea Can we make the icons larger?
  
  
  
  


• Deep tree hierarchies occupy a lot of horizontal space, so you get clipping or horizontal scrolling, which is frustrating for users.
  
  
  
  
  • Fortunately for you, you're intelligently budgeting 1/3rd screen space for this control so this is a bit less of an issue.
  
  
  • Idea Can we use smaller indenting and line-wrapping to preserve horizontal space budget?
  
  
  
  


• If the tree has many nodes, it's easy for users to get disoriented while deep inside the hierarchy.
  
  
  
  • Idea Can we use indicators to show what level of hierarchy we're at?
  
  
  
  

---

2. Design sketch

Here's one approach which incorporates the ideas above:

• Large icons for touch friendliness


• Icons are >2x line height, which allows you to wrap long lines once rather than have them overflow the box


• Narrow indentation


• Use of leading . period indicators to show level in hierarchy


• Top toolbar for search/filter/etc

This may or may not suit your needs, but I think it's always helpful to look at the possibility of modernizing an existing control before writing it off as antiquated.

My last suggestion is: remember that for enterprise applications, the goal is usually to design the most effective interface, not the most beautiful one.