4

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?

Multiple values

  • Why do you need to edit multiple students at the same time? – DarrylGodden Apr 23 '15 at 8:13
  • @DarrylGodden - This is just taken as an example. The actual entity is different and could certainly use this feature. – Abijeet Patro Apr 23 '15 at 10:40
  • Question still stands, understanding the why really helps. Also actual data for the scenario helps form a UI. – DarrylGodden Apr 23 '15 at 10:55
  • @DarrylGodden - These are sensors connected to monitoring systems. They have loads of configuration options regarding when to contact the server, what server to connect to, what WIFI to use etc. Hence it's easier for the user to configure some of these options in bulk. – Abijeet Patro Apr 23 '15 at 17:32
2

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

enter image description here

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.

1

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

mockup

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.

mockup

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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