15

A radio button is normally presented as circular control but more recently checkboxes are also being presented with a rounded border making them look like radio buttons.

http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

We have a UI design company working on a project at the moment and they have done the same thing.

So is a circular checkbox bad UI design?

12

3 Answers 3

21

It Depends

We use circular "radio" buttons to indicate there's only one choice available in the group.

Square checkboxes are used to indicate that a more flexible entry is allowed (none, one, or several). Individual choices are checked or unchecked.

If you're allowing none, one, or several options, use square checkboxes.
If you're only allowing one option, use a round option/radio button.

Allowing multiple choices for round checkboxes is just plain confusing.

Refer to the Microsoft guidelines for Radio Buttons for further reading.

With a radio button, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option. Radio buttons are so called because they function like the channel presets on radios.

With a check box, users make a decision between two clearly opposite choices. The check box label indicates the selected state, whereas the meaning of the cleared state must be the unambiguous opposite of the selected state. Consequently, check boxes should be used only to toggle an option on or off or to select or deselect an item.

In short, radio buttons offer a choice of a set of options (you have to listen to one radio station, you can't choose none or many). Checkboxes allow you a yes/no to each of a set of options.

9
  • 1
    Absolutely agree
    – Alvaro
    Commented Nov 18, 2016 at 11:57
  • 1
    @Bonner - Sorry, I can't. Mine is in print format (I bought it many many years ago). Online Microsoft documentation for radio buttons is here I see that MS no longer use "option buttons" as a preferred term. Navigating from that page will lead you to guidelines for other types of controls.
    – user93670
    Commented Nov 18, 2016 at 13:46
  • 1
    @Bonner - HERE. Although the documentation at the link in my answer above is probably more up to date. The last edition of MSMOS was published back in 2012.
    – user93670
    Commented Nov 18, 2016 at 14:27
  • 8
    Why your answer begins with "it depends" when the rest of the answer boils down to "yes, round checkboxes are definitely bad design" ? I almost downvoted.
    – Agent_L
    Commented Nov 18, 2016 at 15:44
  • 4
    From the phrasing of the question (and linked page) I understand that OP already knows the difference between radiobutton and a checkbox. The only way "depends" may be true is if one adds confusion by calling radiobutton a "single choice checkbox" - which you also clear up.
    – Agent_L
    Commented Nov 18, 2016 at 15:52
2

Although Pete is right, to elaborate as to 'why' it is a bad design choice, is that it's simply a standard we're all accustomed to. Everyone will regocnize a set of square boxes instantly as more choices possible/checkboxes, and round ones as radio buttons/one choice.

Swapping these shapes will be confusing, and even if people find out the boxes don't work as normal, they'll still be unsure of whether the site/app is working like it's supposed to.

1
  • If they can't get such a simple thing correct, why trust them with your information, time, money, or anything else?
    – user67695
    Commented Apr 20, 2017 at 14:31
0

It may depend on the platform. I (and my colleagues) had the same question, especially after we found out our MAUI app used square checkboxes on Android and round ones on iOS. This is not the default MAUI control but it sheds some light on round checkboxes:

The CheckBox follows the rendering guidelines of the operating system. As a result, on iOS it is visualized as a circle while Android and WinUI display it as a square.

When you open the default Mail app on iOS, and tap the 'Edit' button on the top right, you'll see round checkboxes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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