0

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

Naturally I'm very pushed for space and would like to know what the best-practice is 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

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

0

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.

  • 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 '18 at 9:27
0

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

  • 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 '18 at 7:56
0

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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