5

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:

hide role selector

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

clear role selector text

  1. Leave the default value but leave it disabled:

leave default value and disabled

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

  • 3
    My vote goes to the first option. Clean and clear. – Justin Jan 7 '15 at 18:59
3

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

  • 1
    @TheCloudlessSky, that’s a terrible reason to accept an answer. (Here or anywhere.) – Tim Grant Nov 24 '16 at 3:13
  • 1
    @TimGrant Of course that's generally a terrible reason to accept an answer. But both answers had the same conclusion for the same reason (option 1). There weren't other answers at the time. – TheCloudlessSky Nov 24 '16 at 22:31
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:

A wall-mounted control panel, with the front panel lifted by hand

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

  • I've accepted @DaveAlger's because he was first, but your justification was what I had in mind too. Thanks! – TheCloudlessSky Jan 8 '15 at 4:17
0

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.

  • (not sure who downvoted you). As long as the user is lead down the correct rabbit hole (and this has been talked a lot about), I think it's OK that there's another step once they check it. Also, I don't want to make it appear that they can change the role before clicking the checkbox. – TheCloudlessSky Jan 8 '15 at 15:34
  • @TheCloudlessSky Thanks. I know some people are weird and they have very narrow understanding of things in life. – Akshay Anand Jul 29 '16 at 22:41
0

option 3 redesigned

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.

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.