Do non-technical users understand radio vs checkbox?

Question

Using a circle for a radio button and a square for a checkbox seems like a de facto standard, but does the average, non-technical user actually understand the functional difference implied by these two shapes? This question arose because I'm looking at a UI widget library that offers "square radios" and "round checkboxes":

The "square radios" look exactly like checkboxes. The "round checkboxes" look exactly like radios in the unselected state and look a bit different in the selected state.

This seems like a source of confusion for users who understand how the two different controls behave and which shape is associated with which behavior. As a programmer, this bothers me, but does the average, non-technical user even care? Is there any research on users' understanding of radio vs checkbox?

There is a similar question that only asks about round checkboxes, but the selected answer there doesn't cite any research and doesn't even really answer the question. My question is broader because it also asks about square radios, and I'm interested in relevant research.

Answer 1

I'm not aware of any research on your specific subject. I have seen that UI before in a Bootstrap add-on and personally, I think that only because that UI exists doesn't mean it is correct, because it's not.

However, let's do a simple logic exercise. Let's suppose we have these subsets of users:

• Subset 1: Users that can't recognize the difference at all
• Subset 2: Users that wouldn't recognize the difference by default, but they do when they see the element and recall the affordance for such element
• Subset 3: Users that recognize the difference, therefore will be really upset if you change the affordance

Now, let's use round checkboxes and square radios. For this experiment, we'll ask users to choose some fabric (only one, hence radio) and at least 3 different colors (multiple selections available). What do you think will happen?

• Subset 1: They will still have no idea and will try to click everything with random results
• Subset 2: They will recall the affordance, then get confused because it was changed and wonder if they're doing something wrong
• Subset 3: They might get to the point of not interacting thinking the radio inputs disguised as checkboxes are not working (since they know what that element SHOULD do), so nothing will work.

After this little experiment, nobody learned anything, user behavior will be random at best, and some users will feel stupid.

In short: changing the affordance has 0 benefits and it brings a lot of issues, so it wouldn't be a great idea to do it.

Additional reading:

• The Inmates Are Running the Asylum

• Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

Answer 2

I had the same problem years ago, so I came up with html SELECT-OPTION to replace the checkbox. That way, it would be more clear for the users the ON/OFF state.

<select>
    <option value='OFF' selected>OFF-STATE</option>
    <option value='ON'>ON-STATE</option>
</select>

I'm not sure if that's a good practice, but in my case the users were not so familiar to forms/controls.