Denoting multiple values for the same checkbox or radiobutton

Question

I have a screen where the user can select multiple students and can click on edit. When he clicks on edit, the following happens -

• All users have the same value for a field, so that value is shown
• Some users have different value for a field, so (multiple) is shown.

For example in the mockup below, we have different values for Name and Class fields hence we show (multiple), but all the selected users have the same value for Country of origin, hence the actual value is shown.

Now, for textboxes and selects its fairly simple, we simply add a (multiple) if they have multiple values, but what would be the best approach for radiobuttons or checkboxes?

Answer 1

Indeterminate checkboxes are not a good idea

...but if you must use them, the two common styles are shaded (windows approach) or dashed (mac approach):

A key issue with the mixed/indeterminate state is that once the user makes a selection (checked or unchecked), you have to either:

• Provide a way for them to get back to the indeterminate state (e.g. make it a 3-state checkbox, which is obviously awkward because users expect checkboxes to have binary state); or
• Provide users with the ability to leave the form, e.g. via a Cancel button which I don't see on your form.

If you are going to use the indeterminate checkbox then I would add a (mixed) or (unchanged) suffix to your checkbox label, to render it consistent with the select controls above in the form, and to communicate to users what the less-familiar indeterminate state means.

Answer 2

The most common way to represent a multiple state selection with a checkbox is to give it a dash. In the example below: all students have "Lorem" selected, some students have "Ipsum" and some don't, nobody has "Dolar".

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

In the case of radio buttons your best bet is to just leave them blank. If you really wanted to make sure the mixed nature of the selection is called out, you could put something off to the side.

^{download bmml source}

Think about what your users are doing, what they task flow is and their ultimate goal in modifying multiple records. Also, what is the field in question and the required nature of that field. Keeping with the student example, every student is a "male" or "female" (at least for this example). It would be assumed that this is a required field too.

A user will have selected multiple students themselves, and entered the edit mode. They know they have multiple students selected from the beginning (and the few fields that have "multiple" in them furthers this). When they reach a set of radio buttons that are blank, it's because they have multiple students and they know it.

Don't underestimate your users. They know how they got here and they know why both radio button might be blank.

If in the case the user is here to make sure everyone is "Male", they can quickly see that is not the case and fix it by selecting the radio button. Now everyone is.