Alternatives to nested dropdowns?

Question

When a user uploads a new document, they have to assign that document to a certain category and subcategory. Our current solution uses two dropdowns for this.

The problem

So currently the workflow looks like this:

1. User selects category
2. Options for subcategory are loaded into second dropdown, depending on the selection for the first dropdown
3. User selects subcategory

However, there's one major limitation to this solution: The user cannot scan all the possibilities at a glance. This means that if they have certain subcategory in mind, but don't know the corresponding category of their desired subcategory, they will need to click through all categories in a trial-and-error manner in order to find the needed subcategory.

Since subcategories are lazily loaded when a category has been selected, there is also no possibility to search through all subcategories. Another stumbling block when it comes to searching is, that there could be equally named subcategories within different categories.

The alternatives

I've read through similar questions here on UXSE and the only viable alternative seems to be a tree view. I don't think there's anything wrong with tree views in general. However, categories and subcategories are created and maintained by admins and thus, not limited in number (note: customers' admins, not ours. So every customer might have their own unique set of categories). So we are dealing with 1..n categories, which each contains 1..m subcategories. Therefore, the tree view could get quite large, making it very cumbersome to read and use.

The same is true for a singular dropdown with both categories and (indented) subcategories.

Constraints

• Exactly one category and one subcategory can and must be selected.
• The hierarchy is limited in depth as described. There are no sub-subcategories.
• Categories are unique.
• Subcategories are unique within their category, but not globally (There could be an equally named subcategory in another category).
• No constraints to number of categories and number of subcategories.

The goal

Making it easier and more convenient for the user to select category and subcategory. Especially if the user is unsure about the needed (sub-)category, it would be very helpful to get an overview of what's available.

Is there something I am missing? There must be a clever way to do this. Or is our current solution already the most feasible option? Any input is greatly appreciated!

Answer 1

If the user is unsure about the needed (sub-) category, then getting an overview (tree view) will help them see what is available.

Also if the options are infinite (m*n) as you have pointed, users will still have a hard time getting an overview (because of the huge number of possibilities).

That said, you can combine a scroll tab with a tree view to achieve something in between. This is an example of something I did in the past. (even though this illustration is for creating categories).

Answer 2

I think the first thing to do would be to ensure your categories actually make sense. Your user shouldn't ever be looking for a specific subcategory without knowing which main category their document fits into. The main category should be a broad generalization of the type of document with the sub category then only adding additional detail to further narrow in on the document type.

A multi-stage select input seems like the best option. You select your main category and then the subcategories are loaded in as child elements but child elements are only visible for the currently selected category allowing users to select another main category if required. This is a common pattern on mobile devices for filtering by category.

Here is an example of something similar:

The Gumtree app lets users filter down into multiple levels of categories. All ads lists the different types of listings, for sale lists all items for sale, appliances lists all items that are appliances that are for sale, etc. Each level loads in a child list of categories but the user can still select a parent category to show the previous hierarchy.

This is overkill for your situation as you only need a single level of nesting so instead I would show the full list of primary categories and once tapped have the subcategories display as a child of that category and allow the user to tap on any main category at any time to show the different lists of child categories. This would allow the user to quickly search through each category for the item they are looking for.

Answer 3

Another option for easily finding all the categories could be to have a

search built in the category dropdown

and in the subcategory dropdown as well (only if it makes sense there since it is already filtered by the category name and the options are reduced.) The first 2-3 rows can also be dedicated for suggestions in the dropdowns.