User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Imagine a form where you can enable a feature. After enabling, you have some additional options related to the feature.
(A) Would you design a checkbox for enabling/disabling the feature + a dropdown list to select additional options
or
(B) Would you design a single dropdown with options: Disabled, Enabled with option 1, Enabled with option 2....
A
B
Option B with a slight modification of the text:
There's a fair amount to unpack here.
A lot of this is dependant on context within the product, context within the page, and the core users.
If your users are in a hurry, almost always choose different options here, completing a long form, etc. then the better option may be to run with the most simple looking option - The single dropdown containing an option to disable the control entirely (B)
If, on the other hand, your users almost always choose the same option or you want them to take time choosing (this control may be critical in some way), then you could slow them down with the more complex option - The dropdown and checkbox pairing. (A)
However, if you have a very limited number of options in the dropdown, you could also consider using a radio button group that shows all the options up front and makes it easier for the user to see what choices they have.
I would suggest that you test this with your target audience to figure out which is the best for them.
Design (B) seems superior from an ergonomics standpoint.
With design (A), if I want to enable and configure the feature, I have to interact with two widgets instead of one. Using keyboard navigation, I have to press: Space to check the box, ↹ Tab to focus on the drop-down, Space to pull the drop-down, arrow keys to choose the item. With design (B), I only have one widget to interact with. Additionally, with (A), if the drop-down is entirely hidden from view when the check box is unchecked, this may even annoy the user (‘oh great, I enabled the feature, now the stupid computer is nagging me with more questions I didn’t know I had to answer before’).
Design (A) may be better when the user doesn’t usually need to configure the feature mode, or often needs to disable the whole feature while remembering the mode in which it was enabled.
There's an important functional difference between those two options: option A allows the software to remember the position even when the feature is disabled, and option B doesn't. Only you know enough about the software to decide whether that's desirable or undesirable.
Another thing to think about is what will most users do? If most users will disable the feature, it's easier for them to uncheck a box than it is to find "Disabled" in a drop-down. If most users will enable the feature, having a separate checkbox will just be an extra step for them.
Also consider homogeneity with other settings - if there is a stack of checkboxes to enable different features, it would be jarring to have a single feature with a drop-down instead.
Note: if you go for a separate checkbox then the drop-down should be disabled (or completely disappeared) when the checkbox is unchecked, to prevent users wasting time setting a value that will be ignored (and to reduce the cognitive load of reading the screen when the feature is disabled).
As others have stated, it can depend on a variety of factors, such as what this control is used for. However, my immediate response is very emphatically that option A is clearly superior. Option B is just too clunky.
With option A, I can set the location of all my widgets until I like the interface. Then, I can simply enable and disable any particular widget I want to see at that moment and it's right where I left it.
With option B, if I want to re-enable a widget, not only do I have to click a button to enable it, I have to read a list of locations, remember where I wanted it, and click that location. It's not the end of the world, but is far less streamlined.
With regards to placing the widget to begin with: With A, I have to click once to enable, then click twice more to pick a location. With B, I only have to click twice to pick a location. So the initial selection is ever-so-slightly simpler with option B, but I just can't see that being worth all time wasted in the future.
As soon as your widget placement gets more complex than 4 preset locations, option A becomes almost mandatory. The only way I could see option B still working with, e.g., 16 locations is if you had tickboxes arranged so they represent the physical spot in the screen with a final option for "disabled". But even there, option A would be better for the reasons above.
Option B might become more appealing if you can only have one widget per corner, and there are a lot of widgets to pick from. Because now you might change the location every time you change widgets. However, in this case it would almost certainly be better to simply have a dropdown for each corner, instead of a selection for each widget.
I would like a third option, like the Microsoft Excel cell border widget:
The GUI has the field labeled "None" ordered in parallel to the various line styles: all of them are immediately accessible. That makes sense: Only one of them can be active at any given point in time. Logically though it could be seen as a two-step process, like in your question: 1. Do you want a line? And only if, then 2. you have a dialog for formatting that line. From a usability perspective it is more convenient to fold both decisions into a single one: "I want this border." No hidden options, only a single click.
There was a similar design improvement between the first and later generation card payment user terminals, as used at supermarket cash registers. Logically, it is a two-step process: Do you accept the transaction sum? That was, in the first generation terminals, a separate dialog. Only if you did, you would be prompted, after another second or so, to authenticate yourself with a PIN. The payment is logically two distinct actions: Authorization ("I do") and authentication ("yes, it's really me").
Later designs folded this into a single screen and decision: You were prompted to authorize the payment and authenticate yourself with a single action. Because to the user it is: For heaven's sake, yes, I'm buying this, now let me leave already.
I, as a user, would prefer a number of radio buttons or clickable fields as in the border dialog shown, or in the similar color chooser. If you can make them visually self-explanatory like in those two examples, all the better (chances are that you can with a geometric placement decision). One of these choices would be labeled "disabled" or similar.
Whether those parallel choices are doable depends on the available real estate on your GUI. With too little space, I'd prefer a single drop-down menu over a two-step option.
How much do you want/expect users to customize the position? Option A indicates your preferred default value: top-left. I would choose option A if you want more homogeneity among users but still want them to have options.
Option B gives all of the positions more roughly equal weight. I would choose option B if you don't care which they choose.
Even a lot of designers avoid steps in design for "ergonomic" reasons, sometimes this can help improve usability. I definitively choose version A because it is more natural and clear. For enable features, you can use switch buttons, with disabled option by default and the implied section hidden. When is enabled, the section appears.
