1

I'm designing a selectlist that allows you to select multiple levels simultaneously. It works fine for up to 3 levels:

enter image description here

This is just an example, in some instances this model would accommodate product selection which can have pretty deep nesting, about 10 levels, in various categories. Beyond 3 levels, the idea of managing nesting with indentation and font sizes seems ludicrous as it could be infinitely deep.

Any thoughts or examples would be greatly appreciated.

Improve this question
8
  • 1
    Perhaps you could allow users to "drill into" a category if they want to be more specific. So, just show one level at a time (allowing them to select "Sales" all at once, for instance), and then have a right-facing arrow or something that'd allow them to select children…selectively. You could offer a breadcrumb to let them climb back up, or at least to the immediate parent and/or the top level. Commented Oct 21, 2016 at 14:13
  • Also, surely it's not infinitely deep, except hypothetically. There must be a reasonable maximum, no? Like, it seems like with your example, you'd drill down 4 or 5 levels and surely terminate with "Jeff" or something. Commented Oct 21, 2016 at 14:15
  • Oh, and to add onto my suggestion, the search portion should cross levels, and show results as a flat list (giving context would help too, e.g. "Consumer Physical (in Sales > Consumer Sales)") Commented Oct 21, 2016 at 14:17
  • thanks for the reply Nate. This is just an example, in some instances this model would accommodate product selection which can be nested pretty deep in various categories. I agree that there's a reasonable maximum but it could still be 10 deep I think which doesn't work in this model. I think your first suggestion doesn't necessarily work because you need to be able to expose all the levels so users are aware of what they have chosen so far. Like you would have to go back into different levels to double check what you had selected in that instance Commented Oct 21, 2016 at 14:27
  • 1
    good point...maybe you could pop selected objects into a list that stays visible (off to the side, or above, as "tokens") Commented Oct 21, 2016 at 14:36

2 Answers 2

Reset to default
1

Interesting design problem. One of the big challenges in design is about choosing the correct user interface element(s) for a given situation.

The user interface element you showed is not ideal for the problem you are trying to solve, e.g. a select list is basically a flat list where the only thing you can do is group its contents in one level. It does not really scale beyond this simple 1 level grouping.

If you need to group beyond this, I recommend rethinking the selection process. After all, the primary goal for the user is just to select stuff, no matter how it is grouped or organised in your system.

There are other much better ways to organise the stuff you need to select from, but trying to create a single widget to achieve 3+ levels of grouping will be impossible.

Some Information Architecture analysis would be a useful exercise to solve this.

Improve this answer
-1

I agree that your design solution doesn't seem to scale beyond 3 levels. As SteveD has already pointed out, this is an indication that you haven't yet found a suitable UI element for this problem.

Categorization

I can't imagine a category listing with 10 levels, but, users will find it difficult to navigate a list with this much depth. I would recommend stripping away the list and focusing on the search functionality exclusively. When a list is that deep, hierarchy is less effective than search as a retrieval aide. Instead of exact matches also offer related terms and categories in the search results to help users explore the search space.

Multiple selection

Make the search results clickable and add them to a selection list when clicked. Provide a close icon on each selection to allow users to remove the selection from the list. Provide a confirm button to confirm selections.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.