15

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

enter image description here

B

enter image description here

3
  • Is is for web, desktop, mobile? How much space is available? How cluttered/heavy is the rest of the form?
    – Pablo H
    Jul 25, 2021 at 19:44
  • 1
    Would a feature ever offer more than one customization? Let's say, for instance, besides the position, users can also choose the color? Or a date formatting? Having more than one set of options would immediately exclude B...
    – Duroth
    Jul 26, 2021 at 6:05
  • My vote is A. Every time. Never, ever go with B, you will regret it. I am not writing an answer, there are enough of those already.... this is my opinion based on my experience. Take it or leave it.
    – musefan
    Jul 26, 2021 at 13:54

8 Answers 8

21

Option B with a slight modification of the text:

enter image description here

12

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.

9

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.

1
  • 1
    This. It depends a lot on the defaults - if the default is enabled, design A might be superior as it is immediately visible that the feature can be disabled. And if the dropdown comes with a sensible default value selected, enabling the feature is not as cumbersome as you portray (it might be even quicker since a checkbox is a singe click vs two for a dropdown). Also a very good point on keeping the position choice while the feature is disabled!
    – Bergi
    Jul 25, 2021 at 14:19
5

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

5
  • The software can remember anything it's programmed to remember. I think the distinction you are drawing is that Option A can display the option used when it was last enabled.
    – chepner
    Jul 26, 2021 at 19:21
  • @chepner With option B, there's no way for the user to instruct the software to retrieve what it remembered. When enabling the feature the user must explicitly choose one of the four options.
    – Karu
    Jul 28, 2021 at 12:02
  • Option A requires you to physically click the enabled button. Option B could add a "Last used (XXX)" option that gets dynamically updated to replace XXX with the last chosen option. The amount of work the user has to put it is the same.
    – chepner
    Jul 28, 2021 at 12:46
  • Yes but, that's not option B as it was presented.
    – Karu
    Jul 29, 2021 at 20:16
  • OK, let's call it option C, then :)
    – chepner
    Jul 30, 2021 at 12:27
3

Summary

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.

Reasoning

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.

Other Factors

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.

Animation of widget options being selected in each style.

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.

1
  • The point about being able to disable a feature while remembering its location is a really good one.
    – Beejamin
    Jul 26, 2021 at 23:09
3

I would like a third option, like the Microsoft Excel cell border widget:

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.

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.