13

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?

19

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.

  • 1
    Absolutely agree – Alvaro Nov 18 '16 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. – Snow Nov 18 '16 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. – Snow Nov 18 '16 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 Nov 18 '16 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 Nov 18 '16 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.

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

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.