This is regarding a situation where a function can be turned on and off and only have one property.

Case: I have a function that displays a title. If the title is displayed the size of it can be modified. Here's a Fiddle to illustrate.

Are there any research that shows how the aforementioned example compares usability-wise to two separated fields: A checkbox and a dropdown (which is grayed when the checkbox is not active)?

  • Couldn't you just add "none" as one of the dropdown options? it looks like you're making the UI more complicated than it needs to be or is there some other case where you need the dropdown and the option to switch it off? Commented Nov 14, 2016 at 14:28
  • This question is interesting on the topic: ux.stackexchange.com/questions/34271/greyed-out-vs-invisible
    – Alvaro
    Commented Nov 14, 2016 at 14:50
  • @AndrewMartin I did not design the solution. I've joined a project where it was already designed. When I saw the solution i questioned it, but I didn't have any evidence; hence why I am here. I agree, it makes the solution more complicated than needed. No, there isn't a scenario where the dropbox is used when the checkbox is not active. The problem with your proposal is that it's default "Normal title size". The user wouldn't know that they could disable the title, unless they click the dropdown and find the option. Commented Nov 14, 2016 at 15:25

2 Answers 2


I made this JSFiddle that can be used to test the different scenarios.

In the example you propose, the user is deciding two things:

  1. If he wants to display a Title
  2. The size of the Title

The second decision relies on the first one. The first one could be implicit if, for example, there would not be a checkbox and in the dropdown there would be a No-Title/--- option.

enter image description here

A common approach is to make these two choices in two different steps.


This is done to create some cognitive load strain so the user takes a second to think of what is he doing and what does he want. Instead of steping directly to the "kind of Title" he wants, he has to ask himself (or confirm himself) if he wants a Title. For you it becomes a confirmation that the user wants a Title displayed. The importance of this will depend on your app.

Edit: When there are several options that depend on a single one it is a good idea to hide them all behind the main element display. In this case, imagine there were also these options: Title color, Title font-size, Title font-style, etc. It makes sense to hide all these when the Display Title checkbox is disabled.


You don't want to show information that your users will not need. That's why a good approach would be to only show the checkbox by default

If the users activate the functionality, then show the different options for this functionality (i.e.: Progressive disclosure)

So the solution would look like this:


download bmml source – Wireframes created with Balsamiq Mockups


download bmml source

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.