1

My form has two fields.

The first one is a dropdown list displaying a list of categories, and the second one is a data list that displays a list of users. The data list options depend on the category selected in the dropdown list.

E.g.:

  • User selects category A, data list shows options 1-2-3,
  • User selects category B, data list shows options 4-5-6.

Here are the questions:

  • Should I disable the data list until a category has been selected in the dropdown list?

  • What should happen if the user changes the category after selecting an option in the data list?

    • Should the option in the data list be removed from the field?
    • Should the field be in an error state?

Screenshot showing a Category dropdown and a Label field beneath that

Improve this question

3 Answers 3

Reset to default
2
  • If there are useful defaults to have in both lists, go for that option. Useful meaning that you have reason to believe that in at least 70% of cases these will be the options selected by the user. Alternatively - if that's the option that promotes your business goals the most, AND you're fine with preselecting it for the user (i.e. the cost of error is minimal and there are no ethical problems with that).
  • If not, disable the second list until the first one is selected and keep it in a "Please select..." state. Don't hide it because it might make the user wonder where that data is selected and might send them looking for it in other parts of the UI. You want your interface to be predictable.
  • If the user changes the category in the first dropdown, reset the second one to "Please select...".
Improve this answer
1
  • I agree, hiding it might only add confusion. By having it in a disabled state with some explaining text, "Select category first" or so, the user is already introduced to the selection logic instead of being surprised after selection.
    – Big_Chair
    Jan 31, 2022 at 8:54
0

Hide the dependent data list until a Category value is selected; this will avoid the user engaging with the data list until they should.

If the user changes the value in the Category dropdown, reset the dependent data list with updated values, clearing the user's previous selection. Don't show an error state - the user is simply selecting new information, no error has occurred.

Improve this answer
2
  • 1
    Hiding the data list is not a good option. It does not give completeness impression to user. Data list having an empty text like "No data" or "Select category to display data" may help user to guide what is it about and what to do next. Option change behavior is correctly explained. It is always ok to remove selection and reset the data list after changing value in combo.
    – Moksh
    Jan 27, 2022 at 18:41
  • The user doesn't need to see a non-working UI element with no valid values in it. Hiding it is fine.
    – Izquierdo
    Jan 27, 2022 at 23:23
0

First of all, try to use such an element in a horizontal way if possible.

Field 1 > Field 2 > Field 3

Example https://dribbble.com/shots/10233514-Conditional-Automation

Child Element should be disabled if the parent category is not selected, meaning you cannot choose a child element's options if the parent value is not set.

If the parent category is changed after selecting the child, the child field should reset and let the user choose a new value.

Hope this helps. Imran

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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