I'm building a dialog where we need to do a selection, before configure. The configuration varies, depending on the 'meal'. What kind of dialog is better? (and why?):

  • The one with the dropdown

enter image description here

  • The one where I'm exposing all the options on the first selection

enter image description here

  • 1
    Problem with the second option is that it might not work for a narrow display. I'd consider a wizard approach as a third alternative.
    – Savage
    Commented May 16, 2017 at 15:34

5 Answers 5


Personally, I feel like the second one would be better. The user does not have to expand the list first in order to see all the options thus saving one extra click. For the type of the meal, I'd suggest using radiobuttons. It depends on how many options your users have there though. If there are only two or three, I'd go for radiobuttons.


Meal type (breakfast, lunch, etc.) seems to be the header of the form rather than a setting.

In the first solution all meals are displayed in a dropdown under one form, and the rest of the form varies depending on what meal the user selects. When choosing a meal the layout configuration changes. This could confuse users, some might even want to keep settings from "Lunch" while selecting "Breakfast", because the setting is in the same form.

The second solution is a tab layout where the user selects between different forms, and each form has its own configuration and options; so it is better in that sense.

On a side note, I would try to avoid using checkboxes and toggles in the same page. In this case I think checkboxes are more appropriate.

  • I'm thinking that gluten-free is more likely to be an overriding preference that applies to all meals, so a different type of control makes it less likely to be altered? More of a setting than a selection?
    – user67695
    Commented May 16, 2017 at 19:41
  • @nocomprende In that case (if the setting applies to several forms) it might be better to separate it and make it fixed, always accessible or visible. In which case probably a toggle would be more appropriate (in a settings page). But we would need more context to see how this fits/could fit.
    – Alvaro
    Commented May 16, 2017 at 19:54

The second dialog box is clearer because:

  • The user can see immediately that the 2 dropdowns are related and how, on contrary to the 1st dialog box where this is not clear
  • The user can see all the options at once
  • 3
    The only issue is that there could potentially be some confusion over whether they need to, say, go through all the meal choices and choose their preference for each (i.e. if they were booking a day's worth of meals and thus needed to pick an option for each meal: breakfast, lunch diner etc.
    – Joe
    Commented May 16, 2017 at 13:50

Progressive interaction

If the form is progressive, build it that way. If they need to answer one question before the others can even be formed, just ask one question. Once you have that answer, you can ask the next one or more that become relevant.

Example of a progressive version of the OP's form

Also note that I picked one control type for the additional data rather than a radio and toggle.


I find second dialog better, no overlaying selects etc. But both have same problem - why "Include organic food" is checkbox and gluten-free is switch?

  • Maybe gluten-free is an overriding setting that would always be true or not for this user, and non-organic could vary by each meal? Maybe attempting to switch away from gluten-free would trigger a warning? Maybe I am just making up stuff?
    – user67695
    Commented May 16, 2017 at 19:36

Your Answer

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

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