What is the best way for user to be able to select a Category and Subcategory?

Question

The user should be able to:

1. Only select ONE Category
2. Select multiple Subcategories

Idea (A):

• Use autocomplete select dropdown so user can search through both Categories and Subcategories
• Close matches, whether it be a Category or Subcategory, will get surfaced in the search results
• The advantage of this is if the user is unfamiliar with the Categories/Subcategories, then they can just easily search through the list:

• Once the user has selected a Category/Subcategory, their selections get surfaced on the field as chips (we'd like to ideally be able to leverage the MUI Autocomplete component that uses autocomplete and chips:

Questions:

• In the mockup above, after making a selection, the query the user typed in is not cleared until they explicitly do this (by backspacing). But should it be cleared as soon as they make a selection?
• Once the user selects a Category, since they must only select one, should other Categories not be shown anymore (the chips UI might suggest that multiple Categories are allowed)?
• Once the user selects a Category, should the rest of its child Subcategories appear automatically, effectively auto-clearing the user's search query?

Idea (B):

• Display a single Category field:

• Allow the user to search through both Categories and Subcategories, but they should only be able to select one - either a Category or Subcategory:

• If the user happens to select a Subcategory first, a Subcategory field will appear into place which will automatically be pre-filled with the user's initial selection. The user can choose to add more Subcategories if they wish to:

Questions:

• I think what bothers me here is that fields "automatically get split" into two which could be unconventional and jarring to the user. Am I wrong to think this way?

Answer 1

I personally see idea A much more complete, with some adjustments.

---

– should the query be cleared as soon as they make a selection? –

The problem I see in this design is that the query and the chips share the same field and the result is very confusing for the user. The logic would be a text editing field and the chip's area. The text inside a chip is not editable, while the query is. There is a possibility that the user wants to add one more character to those already written, I would keep the query but in a separate field and the chips in a clearly non-editable area.

---

– Once the user selects a category, since they must only select one, should other Categories not be shown anymore –

Pretty much EVERY TIME I have to select a checkbox, I always select the wrong one the first time. The only way to not start the search process over again in the event of an error is to keep all possibilities clearly visible. Ultimately, it would be useful to continue showing all possible categories and hide the subcategories of the unselected ones.

– Once the user selects a category, should the rest of its child Subcategories appear automatically –

I would let the user decide if he/she wants to see all the subcategories with a View all option. At this point, I think the most important action is the immediate search with the typed characters than displaying all the subcategories of an item. If there are three subcategories, it would not be a problem, but if there are more than ten, I would let the user choose if they want to momentarily abandon the search and use vertical scrolling to see all the content of the results field.

Answer 2

I would echo all of Danielillo's suggestions, with one modification.

When the user selects a category or subcategory, I would grey out the subcategories of different categories, rather than hiding them. This unambiguously communicates that only one category or subcategory is possible.

I would add an animation to draw attention to the chips being updated when the user changes their selection. This would make clear that if they change to a different category, they lose all their choices from a previous category, but still allow you to record their selections for the other category (e.g. if the user selects a Loganberry then changes to Boysenberry, keep a check mark or change to a filled square for Loganberry, but add an animation removing the Loganberry chip so that the user knows Loganberry isn't selected anymore. If they then select Raspberry again, Loganberry will still be selected).