5

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

screenshot of radios and checkboxes from UI widget library

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.

  • 2
    Could you provide a link to the library? Squared radios and rounded checkboxes seem rather daft to me. – Izhaki Jan 3 '17 at 1:42
  • 2
    Considering SurveyMonkey has a FAQ page explaining the difference, I think one could conclude the difference is learned, not afforded, for today's average user. On the other hand, I'm old enough to have used actual round radio preset buttons so what do I know.... – bishop Jan 3 '17 at 3:46
  • According to an Ars Technica article, the radio button was first used in the Xerox's Alto computer. So it originates in the early days of GUI research... but the original design wasn't circular. The first Macintosh had square radio buttons, too. – Mark E. Haase Jan 12 '17 at 17:39
  • 1
    However, round vs square seems to be clearly settled by 1995. Apple HIG and Taligent Docuementation both agree. – Mark E. Haase Jan 12 '17 at 17:44
5

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:

1

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.

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.