Should a dropdown have a value (or be visible) when the associated checkbox is unchecked?

Question

We have users that can be assigned to different groups with an associated role on that group. For example, a user may be a "Contributor" on the "Human Resources" group, but an "Admin" on the "How To Play Pictionary" group.

So far, we've decided on using a list of all of the groups. A checkbox is beside the row and when checked, it enables the text and the dropdown for the role.

When the group is not selected, we want to make it clear that the user will not be assigned to that group. I've thought of 3 options:

1. Hide the role selector:

2. Clear the text of the role selector but keep it disabled:

3. Leave the default value but leave it disabled:

Which of these would best convey that the row is disabled and that the user will not be part of this group?

Answer 1

I can't find any specific user research data on this topic but there is plenty of tests showing LESS is MORE.

Option 3 shows roles and although disabled has a chance of raising questions "Will the Viewer role accidentally get assigned?" (friction)

Option 2 removes the role but also raises questions, "I can assign roles to the first 2 but why not the last 2?" or "Will it remember my last role selection if I uncheck then recheck the box?"

Therefore, Option 1 is the better of the three options because only pertinent information is shown as needed.

Note: be sure to remember the last selected role when hiding/showing the dropdown

Answer 2

Option 1.

Design principles

There are two design principle behind this recommendation:

Progressive disclosure

A strategy for managing information complexity in which only necessary or requested information is displayed at any given time.

Signal to noise ratio

The ratio of relevant to irrelevant information in a display. The highest possible signal-to-noise ratio is desirable in design.

The point is, that if the user has got something unchecked, she will have no use of anything related to that option; she is clearly uninterested. This image illustrates this well:

The one exception to this would be if seeing the options promotes serendipity, but seeing as the other controls are comboboxes (which anyhow hide all but single option), I doubt such will be the case.

Gestalt - law of similarity.

Then, both options 2 and 3 express less visual distinction between the ticked and unticked rows - with option 1 it will be easier for users to scan the interface for relevant information (what's actually is in force).

Answer 3

Option 2 and 3 are more consistent. Option 1 lacks consistency. As user will be unaware of the checkbox event and then presenting him to choose one more option once he selects the category is a bad idea. User should be aware of the idea that once he selects a check box he has to select a dropdown list. In my view 2, 3 both are good but in providing user with a visual feedback of how its working 2 is the best option. As in 3 has one extra type as viewer which is going to confuse user as if this is some kind of a new category. To keep it simple and easy for user and to be consistent use option 2.

Answer 4

I agree with @Anand answer but I defer in the selected option.

---

Although I completely agree with Mies quote "Less is more" it is meant as less decoration (unnecessary stuff) make things be more functional. But we have to keep in mind which is the function or reason behind to know where is the limit for "less". Or as Einstein quote says:

“Everything should be made as simple as possible, but not simpler.”

---

Now, in your examples selecting the checkbox gives the user the possibility to choose from a dropdown.

It is a good idea to let the user know what can he do if he selects the checkbox. So this takes option 1 out of the solutions.

It is important that the information is hidden enough to be ignored but visible enough to be read. The fact that the dropdown doesn't display its function doesn't help the user. The user should be aware of what there is behind. So this takes option 2 out of the solutions.

So my suggestion is Option 3.

Also about the way you are displaying the checkbox: a disabled option should have less opacity, not an unchecked one. And also I think the disabled option should have the same styling as the enabled one but with less opacity.