33

On the dashboard we are building we got 2 sets of options users can pick:

Multiple options (checkboxes) enter image description here

and single options (radio buttons behavior)

enter image description here

while the look of the components is similar, their uses are different.

In usability tests, users used these components without any difficulties or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product.

But, my designer colleagues argued that the components should look different and users have to understand if its a checkbox or a radio box from the first glance.

My aim was to keep the consistency and lower the cognitive load.

Any thoughts or inputs?

Edit 1: Updated the UI, thank you @200_success for the feedback

Improve this question
5
  • 34
    If you go with this approach, it becomes crucial to make sure it's clear when only one option is allowed vs. multiple. For instance, your example has two selections made for the field "Age", which I wouldn't have expected to be possible. One way to make this clear without changing your elements is adding some help text like "Choose all that apply"
    – nvioli
    Apr 24, 2019 at 19:58
  • 35
    Those gray options look more like they're disabled, rather than deselected.
    – 200_success
    Apr 24, 2019 at 20:18
  • 5
    "My aim was to keep the consistency and lower the cognitive load." - Consistency with common patterns (global consistency) is more important than a single control design for both, even (particularly) if it behaves differently. I would also argue that if you're worried about cognitive load, then this is not going to achieve that reduction. "or once they used and understand the functionalities they didn't have any issues to use them in the other parts of the product." - did this require intervention to achieve? Did you test for hesitancy/etc vs control group version using normative design?
    – taswyn
    Apr 25, 2019 at 2:05
  • 4
    you've tested it and found no issues. This absolutely over rides whatever business think. It's not broken. Don't fix it.
    – colmcq
    Apr 25, 2019 at 10:15
  • 2
    One thing I find unusual about this choice for the "Age" field is that it is possible to select non-contiguous groups of ages. Is this something that you intend? It seems to me that it would be somewhat odd to select "7-9" and "13-16" but not select the "10-12" in between them. If what you're looking for is a contiguous range, consider something like a bar above the ages where you can move the minimum and maximum left and right to select as much of the range as you want, but in a strictly contiguous manner. A common example of this would be the margin settings in a word processor.
    – Darrel Hoffman
    Apr 26, 2019 at 19:48

4 Answers 4

Reset to default
33

It depends. How often do your users see this form / section / settings?

Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.

Part of this has to do with Application Posture.

A sovereign application is a program that monopolizes the user's attention for long periods of time.

Google docs and Microsoft Word are great examples of Sovereign Posture Applications: Users spend long periods of time manipulating documents.

The target users are usually intermediates, who encounter these controls repeatedly over long use.

Certain controls that appear the same but behave differently don't pose too much difficulty after repeated prolonged exposure.

Most of us have become accustomed to the toolbar, as pointed out by another post:

enter image description here Another example is OmniFocus, the task management application.

The inspector panel displays details for repeated and scheduled events. It has a multiselect toggle showing which days of the week to include an event. It has the same effect as checkboxes:

enter image description here

The mental model for events is clearer to begin with, which probably helps in using these controls:

Events have:

  • Start dates
  • End dates
  • Frequencies
  • Repetition

For example, it's clear to me that I can go to Karate class Sunday, Monday, and Wednesday. I can select multiple days as I need to.

One time forms, rarely accessed 'Settings' pages, and seldom encountered UI can be challenging without clear labels and/or controls.

I'm not clear on your larger context, but clear labeling is crucial for users encountering your form for the first time, or infrequently:

enter image description here

It seems like you're in a good place, as it has been confirmed by user testing. Keep in mind that in some contexts, you'll design for perpetual 'first timers' that are venturing into unfamiliar territory.

Improve this answer
52

You don't need to make different appearances for these components.

Your case is similar to well-known toggles in a toolbar of text processors like Word. These font settings toggles act like checkboxes:

enter image description here

And these Word’s alignment controls act like radio buttons:

enter image description here

Note, they look identically and it doesn't produce any confusion or difficulties because in our mental model (user's view of how the system should work) we understand that a piece of text can be bold, underlined and cursive simultaneously so we expect that respective toggles should act like checkboxes. And we understand that text can't be right and left aligned simultaneously so it's not a surprise for us that alignment controls act like radio buttons. We know that and we don't need extra reminders about that.

You wrote that in usability tests, users used these components without any difficulties. I think that means that the behaviour of the components matches the user's mental model i.e. users understand and expect that they can choose several age-ranges and only one view (lists or thumbnails).

I took the example of Word's toggles from A. Cooper's "About Face 3. The Essentials of Interaction Design". He wrote about it as an example of a more graphical and more space efficient approach to the checkbox or radio buttons (see Chapter 21: Controls, Check boxes (p. 443) and Radio buttons (p. 446)). And also Cooper didn't say anything like these two types of toggles must look differently.

Improve this answer
5
  • 22
    And yet, this principle gets abused all the time, including by Word. All sorts of things on Word's ribbon don't immediately match the user's mental model and they only find out whether it's a checkbox or a radio button by trying it. So it's important to make sure that the user's mental model really covers this. (Coming to it cold, without any context, it's not clear to me at all that the OP's first one is checkboxes and second one is a radio button set.)
    – T.J. Crowder
    Apr 25, 2019 at 8:52
  • I don't agree with this answer. I think it would make much more sense to simply see checkboxes...but that is just me. Sure craigslist.com is ugly, but the darn thing works and is easy to use.
    – JonH
    Apr 25, 2019 at 18:35
  • @T.J.Crowder Can you give an example where Word's buttons don't match the mental image? I can't think of any I don't find intuitive, although it might just be because I've already used them all. :)
    – Nulano
    Apr 25, 2019 at 21:23
  • In Word there’s the additional button “click to action”, which is neither a radio or a checkbox, it simply performs an action once (undo, increase font size, zoom in).
    – Tim
    Apr 26, 2019 at 2:08
  • 1
    This is a wrong answer. The examples you used are grouped by style in the second example but not in the first. Text modifications are completely different to alignment. You can't have two alignments, you can have two text modifications. Doesn't really help when we're trying to select multiple ages....... I can't believe how highly voted this is an answer.
    – insidesin
    Apr 26, 2019 at 6:31
6

I think your designer colleagues are right.

If I now look at the options, I have straightforward an idea how I can interact with them and for what they are used.

enter image description here

enter image description here

Using the squares for checkboxes and circles for radio buttons are very old, common and recognizable for most of the users. So, it simplyfies your problem in this case.

Improve this answer
4
  • 23
    In my opinion this is less visually appealing and doesn't add much value
    – Some Guy With a Tomato
    Apr 24, 2019 at 17:36
  • 2
    @GrumpyCrouton It makes it clear the top buttons are check-boxes (multiple selections), and the bottom ones are radio buttons (single selection).
    – Uyghur Lives Matter
    Apr 25, 2019 at 13:32
  • 2
    @cpburnz I'm not disagreeing with that, but it's a compromise on how visually appealing it is, and I don't think that distinction is worth it (Again, this is an opinion)
    – Some Guy With a Tomato
    Apr 25, 2019 at 14:39
  • 1
    The average user, who does not engage with ux design, will not know that there is a difference between check boxes and radio buttons. They are just shapes you can click to select something.
    – GittingGud
    Apr 26, 2019 at 12:39
1

Most normal users don't know the difference between a radio button and a check button. At the most, they sometimes get upset when you can't activate multiple radio buttons where it would make sense.

Doing without a visual difference won't confuse a single user - they will see that in some cases selecting one thing removes the other selection, and in other cases not. And they won't care, especially if it makes sense.

If you do want them to have a difference, how about using round corners for the radiobuttons (maybe even between options) and angled corners with the check boxes? The design stays simple, and people who are 'in the know' can see the difference immediately.

Improve this answer

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.