Usability: Prepend a checkbox on a dropdown

Question

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)?

Answer 1

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.

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.

Answer 2

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}