Multiple options vs single option UI

Question

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

Multiple options (checkboxes)

and single options (radio buttons behavior)

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

Answer 1

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:

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:

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:

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.

Answer 2

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:

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

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.

Answer 3

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.

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.

Answer 4

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.