2

I'm working on a material design web-app designed for a mobile/touch environment.

Obviously I have tight space constrains and would like to know what is the best-practice for conditionally providing a sub-set of options.

I don't really like the idea of showing two selects only when the appropriate option is selected.

Example:

  • Option 01
  • Option 02
  • Option 03
  • Option 04
  • Option 05 (only this has the "sub-options" i.e. [sub1, sub2, sub3, sub4, sub5])

example dropdown

More info about the context: these are a sort of preferences... options in this case are different kinds of visualizations but the option number five has a more detailed visualization divided by areas.

(Thanks @cyberspark I don't know how to thank you for edit)

Improve this question

4 Answers 4

Reset to default
2

can you provide a bit more input here? I'm missing the context of the options. For example, if you have a date range it is good practice to show a start and end date in the same dropdown. Because there pointing out a period. So, in that case, I would use one drop-down, however, if there is a relation let see a subcategory. It makes more sense to have 2 different dropdowns...

For showing the input options(depending on the context) it could be possible to use the native device/os select options. But not sure if that is possible in your case.

Improve this answer
1
  • sure, these are a sort of preferences ...options in this case are different kinds of visualizations but the option number five has a more detailed visualization divided by areas
    – Ugo Nooz Torresi
    Oct 9, 2018 at 9:27
2

Correct me if I'm wrong, but my understanding of the question is that you don't want the 2nd dropdown to only appear only if a specific 1st dropdown item is selected.

What you can do is make the 2nd dropdown disabled (and possibly smaller or indented), with the label explaining so.

In the example the first dropdown might have options Small, Medium, Large, Custom, so the second dropdown only unlocks when Custom is selected.

Example

Improve this answer
1
  • You are right, I don't want to use an hidden second dropdown and I'm looking for a solution.
    – Ugo Nooz Torresi
    Oct 10, 2018 at 7:56
2

If I am understanding you correctly then I don't think there is a need to display multiple dropdowns on the UI at the same time.

What I would suggest would be displaying your main dropdown (e.g. Options 1-5) first, then when a selection was made from this dropdown replacing the entire dropdown with the subset of options. You then provide a "back" button to go back up to the previous set of options.

This way you can have as many levels of dropdowns as needed and you keep using the same amount of screen space.

If you were to take this approach I'd also suggest using some kind of breadcrumbs titling for the dropdowns so the user can keep track of the levels they are on e.g. "Primary options > Option 2 > Option 2-c > Option 2-c-1"

Improve this answer
2

Consider using radio buttons instead of drop down list.

----------------
( ) Option 1
----------------
( ) Option 2
----------------
( ) Option 3
----------------
( ) Option 4
----------------
( ) Option 5
    ( ) Sub 5-1
    ( ) Sub 5-2
    ( ) Sub 5-3
----------------

This would have an advantage that user sees suboptions before he selected corresponding option. And at any time he can see all possible options and suboptions.

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.