17

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.

Improve this question
10
  • why can't an accordion have multiple sub-groups open at once? This is the path I would go as well.
    – DaveAlger
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 at 17:29

3 Answers 3

Reset to default
16

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.

Improve this answer
10
  • 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
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 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
    Commented Mar 12, 2015 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
    Commented Mar 13, 2015 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

Improve this answer
0

Tree view was not usable for the use case in my Habit tracker app so I replaced tree view levels with a single level but different level style

enter image description here

Improve this answer

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.