14

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.

  • why can't an accordion have multiple sub-groups open at once? This is the path I would go as well. – DaveAlger Mar 12 '15 at 16:40
  • Technically it's no longer an accordion when you do that. I can go with "expanders" in WPF speak (wpftutorial.net/Expander.html) But that also met with luke-warm responses. – Berin Loritsch Mar 12 '15 at 16:42
  • 1
    Questions: 1. It's a 3 level hierarchy (group, file, child)? 2. Roughly how many nodes in each level (order of magnitude... Tens, hundreds, thousands?) – tohster Mar 12 '15 at 16:59
  • I can see how multiple levels of "expanders" would be met with concern. I do think the solution will have one level of expand/collapse in it though -- codepen.io/run-time/pen/MYPGJZ – DaveAlger Mar 12 '15 at 17:02
  • It's n-level, but 4 levels in most cases. Config section->group->file->child. Groups can have subgroups, but in practice it shouldn't go more than 5-6 levels overall. Some groups can have hundreds of sub-items. Total number of items depends on what the user loads, but potentially close to 10,000 items the user can interact with. Search will have to be an integral feature. It's the browsing structure I'm having trouble with. – Berin Loritsch Mar 12 '15 at 17:29
14

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:

enter image description here

  • 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.

  • 2
    tohster like the idea of improving what exists rather than coming-up with something completly new! A secondary issue: What do you think should be displayed before any selection is made? – Okavango Mar 12 '15 at 18:45
  • 2
    A lot of merit to this approach. In my case, I would display the top level configuration items completely collapsed. Also some good reminders about being effective. – Berin Loritsch Mar 12 '15 at 18:47
  • 1
    Seems quite reasonable to me and handles emphasis smartly ! I was just thinking about making use of space prior to selection to highlight some of the configuration options. If I am not mistaken salesforce which deals with huge amount of config settings does that, though "clumsily" – Okavango Mar 12 '15 at 18:56
  • 1
    Agreed! Enterprise software hold tons of data that consumer facing products can't even dream of having... They should make use of it :) – Okavango Mar 12 '15 at 19:36
  • 1
    NOTE: I'm still preparing for the design review meeting before I accept an answer or not. A couple things came up that are taking my time at the moment. – Berin Loritsch Mar 13 '15 at 20:14
1

Hierarchical pull downs across the top
Consider State, County, City

First all I see is state
After you select a state then to the right you get to select county and it only present counties in that state
Then city

If you have parish in some counties then parish before city

Texas
Texas Harris
Texas Harris Houston

I change state then county starts over

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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