How to indicate a meta-option in a select list?

Question

I have a list of options from which the user might select one option. This list might be long.

An example would be to select a screen saver. You could select a screen saver or you could select to have no screen saver (the meta-option).

For this interaction I see two different but similar solutions:

^{download bmml source – Wireframes created with Balsamiq Mockups}

I think the first option is more clear for users. It however takes more screen space compared to option 2. And adds an extra control to the screen.

Is the extra control worth it? Or is there an even better solution to this problem?

Answer 1

Version 1 is actually more common than you think, though it's usually not just for none/something meta options (and yes, I'd argue that is a meta option since it's selecting the type of option choice, not the choice itself): many interfaces that utilize complicated options with some kind of meta-choice have a similar checkbox/combobox interaction. KeePass, for example:

Since there are several different and distinct meta-options for what kind of authentication you want to use, the checkbox helps distinguish which you intend.

The important part is getting the interactivity right: making a change to any one of the fields marks that meta-option as active. Typing in the Master Password field checks that box; selecting a Key File marks that as active; etc. This keeps the 'clicks' to the same number it would be without the checkboxes, except when the user specifically uses them. It also reduces the clicks when the user wants to select the default option under a meta-option - then it's just one click (instead of two: opening the dropdown and selecting the other option).

A major pro of this route is also that it can save "preferences" for default options per each meta-option in case the user changes their mind about which they want to use: if I type in a password but want to use the key file I just browsed for and found, it's just a single click to go back to it, as opposed to losing my choice and having to browse again (and vise versa, my typed password isn't lost when I do this).

Many more applications do this and you probably don't even think of it as a design pattern: installers often give a choice between the default install path (the 'none' checkbox) and a custom one (file browser input); or browsers that ask where the downloads folder should be vs. always asking (pretty much every browser).

The cons appear when you don't get the interactivity right: either making a change/selection in an option doesn't automatically select its meta-option (adding a step that might be overlooked or missed by inattentive users) or it clears the other meta-options' choices (as in, selecting a key file clears the password field) and penalizes users for changing their minds.

Answer 2

Both versions take two clicks to select Option 1.
But, version 1 takes 3 clicks to make a selection other than Option 1 while version 2 still only takes 2 clicks.

Version 1 takes up more space and is more clicks. If speed of selection is your goal then version 1 only makes sense if Option 1 is chosen the majority of the time. Otherwise stick with the tried and true version 2.

Answer 3

I think a bit deeply. User interface is a dialog between machine and man. Any UI control is a question to a user. Any question from a UI side requires some mental efforts from human. But they don't like to read, or to think, etc. And pressing Yes button in a dialog without reading the message is a known issue in human-computer interaction.

I've drawn the dialogs:

So, following the Don't make me think rule and the heuristic of aesthetic and minimalist design, I'd recommend Option 2.

Don't count clicks, but decision points! Though assuming clicks count is an approximation of this notion, it could be used as simple heuristic, too.