4

I'm looking for ideas on how to design radio buttons that have a second state that means "no change".

So the user selects a few items, similar to how rectangular selection works in Windows Explorer or Finder. In the side panel input fields are displayed that correspond to common properties of the selected items.

For example, all items have can have a "status" property. If I have two items that both have the same status I can display a normal set of radio buttons with the statuses and make the common value checked.

But what happens if item#1 has "published" status and item#2 has "private" status? The user should be able to change the status of both items to "private", "published" or leave it unchanged.

I solved this somehow for text fields and checkboxes but I don't know how to do it for radios. This is how it looks so far:

form

And this fiddle demonstrates how the user interacts.

4
  • Do you think you might risk overloading one item with too many meanings? (At an intersection, does a red light mean anything other than stop?)
    – JeromeR
    Sep 24, 2015 at 3:11
  • I do, but what other choice do I have? Sep 25, 2015 at 2:39
  • I imagine you'd have lots of choices. (Are you not a designer? Your question doesn't say.) Once you make the decision to separate the pieces of information, then the field of choices opens significantly. A common approach to design problems is to saturate the design space before you make any judgements. Here's a reading that's tangentially related: fivesketches.com/why-so-many-sketches
    – JeromeR
    Sep 25, 2015 at 4:26
  • I don't disagree with those principles, but given the required functionality (a web file manager with upload capability), that's the solution I've came up for selection editing. Adriano's ideas sounds better to me so I'll use that instead. But I'm open for any other suggestions, even if they require a completely different design approach Sep 26, 2015 at 14:44

5 Answers 5

9
+100

Short answer: do not select any radio button. Leave them all unselected.

UI with unselected radio buttons

However:

  • This is a misuse of radio button control where (by convention) there always should be one (and only one) selected item.
  • Unselecting all items is not noisy (IMO) and recall same pattern used in other controls (for example combo boxes) where no selection means multiple selection. This is a benefit but it's also a drawback (the same you have for combos): it's almost impossible to have a no selection state (for example to distinguish a state where user didn't select anything); to avoid this you may consider what the other answer says. Note that this is a bad usage for radio buttons, if it's what you need then you should use another control.


Controversial answer: DO NOT USE A THIRD/MIXED STATE.

The other answers address radio button issues (one of them even attempting to unify checkbox and radio visual model). It's a model already in use on some OSX applications and default Gnome theme then it won't astonish many users (with visual style variations it's in use from 1980s in Motif widget toolkit).

However...

For each control of your user interface you have a different interaction model. Users will need to learn something different multiple times:

  • For text boxes you have a special placeholder text: you use text itself to clarify content (using styles to highlight it's not an user input). It works but it's not perfect and users should learn this behavior (if they don't know yet). It also adds noise to your UI.
  • For checkboxes you have a third state, if they aren't other checkboxes it may not be clear if it's checked or indeterminate/mixed.
  • For radio buttons you do not select anything but it breaks a common convention: radio buttons have always one selected item. Moreover is it unspecified or indeterminate?
  • For sliders and knobs...you don't have an option (at least nothing I can think about).
  • For lists and combos you may use something similar to text input.
  • And so on...

In my opinion, even if it's common and well-accepted (or tolerated?) we're asking too much to our users. It's a reminiscence of old days we're still sticking with. It's a simplification (both for old days UI designers and programmers) we no longer need.

What to do? I have to admit I don't have an answer that really convinces me. What I have is a compromise I use when I want to avoid any ambiguity (think, for example, users entering medical records: too much data, too much work, too little time...errors).

In this cases (unless my audience are other programmers then used to this kind of incoherent abstractions) I prefer to do not show original control but something else, an explicit user action will change it back to right control. Eventually you may pre-select most common value (but also pre-selection is controversial, I'd use it only for coherence).

Alternative multi-value selection

Note that this UI example is just...an example. What' I'm trying to express is the concept; I'm a programmer then a better UI designer may make it pretty and well integrated in existing UI. Probably a small subtle transition from this control to expanded inputs may also help.

Note that same control may be used for every type of input. Text is pretty important in this case: it has to clearly communicate that there are multiple values for an existing field (it's not a common pattern then users have to learn) and, if there is not a label, also describe which field will be changed.

As last option you may even consider to replace radios with combos (where a multiple selection state can be clearly communicated):

Combo with multiple selection example

6
  • Thanks! I think you are right, that type of control seems to be a better idea. There's a small downside though, you don't get to see what kind of input is there until you click that Sep 25, 2015 at 2:38
  • Yes, even if you show common value you still can't see other options. For radio and lists it's annoying (at best). You may keep controls in place but disabled but...I'm programmer, I'm sure better designer than me can lay out a better control for this. Sep 25, 2015 at 5:53
  • FOOTNOTE: consider, often when you have TWO radio buttons in a radio button group, it should be a checkbox instead.
    – Fattie
    Sep 28, 2015 at 12:20
  • @JoeBlow I agree, not always but pretty often! Sep 28, 2015 at 12:23
  • Re: your short answer: Keep in mind that you can't unselect a radio button. So if something is pre-selected and I want none of them selected, I have no way of doing that. This is why we provide a "none" radio button. Sep 28, 2015 at 15:09
4

A radio group is to select one and only one option out of several, hence selection will be mutually exclusive.

To solve this problem you have to override this mutually exclusive behavior of radio buttons only initially, and show check for all the options which have different values in the group of items.

Once user starts interacting with this type of radio the mutually exclusive kicks in, and all the items in the group will get same value for this property.

Example:-

1) There are 5 persons in the list, 2 male and 3 female.

2) When all five are selected, then the gender radio button should show both gender as selected (May be you can give a different check mark here).

3) Now you think there is a mistake and all 5 persons should have been female, to correct this you selected all five and click on female option, now this radio button behaves normal with mutual exclusivity.

enter image description here

3
  • Hi Chetan .. like I mention, once could consider using "THE LITTLE LINE" which is universally used in checkBOXes to mean multiple selection .. like you say, one would fill all the radio buttons; but it may be better to use the "little line" symbol. In your vosual example, the whole row should definitely be "gray", though, I'd say. (And add "Multiple values" written warning underneath, in the gray.)
    – Fattie
    Sep 28, 2015 at 12:28
  • @JoeBlow BTW I agree about "the little line" but it's not universally used in checkboxes, it's (mostly) an OSX thing. Sep 28, 2015 at 14:10
  • Ciao Adriano ....... interesting point, thanks.....
    – Fattie
    Sep 28, 2015 at 14:13
2

This is commonplace.

1. Gray the row

2. Have a written "Multiple Selection" message

enter image description here

It's that simple.

Sure, turn off all the buttons. But (1) and (2) is the key.

2

I know it's 4 years late, but my solution is to have a third radio option for "mixed values". This option only appears when applicable. If the user selects option A or B, the mixed values option then disappears or disables. This way you still have one and only one option selected at all times but still communicate to the user that this input was mixed.

radio button option showing a third button labeled "mixed values" selected

1

Why not simply just include a third option that says something like No preference or something to that effect. Not a big fan of leaving radio buttons unselected for obvious reasons.

With No preference..

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.