Are round check boxes confusing or an accepted standard?

Question

I was browsing dribbble.com today and came across a new post by one of the designers that I follow. He had posted a new modal form which was using rounded check boxes. I have never seen these before.

Are this an accepted standard, or are they confusing to the user (before they check them especially) because they look like radio buttons?

Update: Just found another place that uses them as well.

Update #2: After reading some of the comments, I realized this is present in iOS also, but I have never noticed. Also after going back Morgan's other work, I saw that his original design of this type of check box was a redesign of the current iOS one:

My guess as to where this came from is as a modification of the usual iOS delete button which is round. Since the only time the round check box shows up is when deleting messages, it must have been a clearer way to display that several messages were ready to be deleted, but they didn't give any thought to the fact that is looked like a radio button. It also seems to only be used when removing an item.

Answer 1

If I saw that in an interface - I would assume only one item can be checked, especially before any had been selected. Only the wording of the title would indicate to me that multiple selection is possible. I think this design would lead to a greater than normal number of people choosing a single item rather than a selection of items.

I don't see the benefit here in bucking accepted trends other than to make it all curvy everywhere, but pretty rounded rectangles would do the job just as well, be more intuitive and more standard.

I don't dislike the appearance from a pure graphical perspective - I just don't think it's right from the affordance perspective.

-- edit update --

I redesigned it with rounded squares:

-- further update --

As an interesting addendum - I found this (below) on a Google spreadsheets viewform survey (from UXPin) recently. It combines the outer shape of a checkbox, so that multiple-answer questions and single-answer questions have options that look quite similar in appearance, but the single-answer options have the inner circular shape of a radio button.

I had no confusion as to how it might be used, but I found this representation very unusual - in fact this was the first time I'd seen it. I find this quite interesting.

Answer 2

A checkbox should look like a box and not a circle. They are not check circles, after all. Subtly rounded corners, as others have mentioned, would be okay, but user interfaces have always represented a checkbox as a square and a radio button as a circle. The designers behind your examples are likely trying to be different, favoring style over function.

Answer 3

A checkbox should be square. As Cooper, Reimann, and Cronin wrote in About Face 3 (emphasis mine):

Traditionally, checkboxes are square. Users recognize visual objects by their shape, and the square checkbox is an important standard. There is nothing inherently good or bad about squareness; it just happens to have been the shape originally chosen and many users have already learned to recognize this shape. There is no good reason to deviate from this pattern. Don't make them diamond shaped or round, regardless of what the marketing or graphic arts people say.

The round "checkboxes" in your second update seem to be a violation of Apple's own Human Interface Guidelines.

People expect standard views and controls to look and behave consistently across applications.

Follow the recommended usages for standard user interface elements. In this way, users can depend on their prior experience to help them as they learn to use your application.

...

Avoid radically changing the appearance of a control that performs a standard action. If you use unfamiliar controls to perform standard actions, users will spend time discovering how to use them and will wonder what, if anything, your controls do that the standard ones do not.

Notably, there's no mention of checkboxes or radio buttons in that document.

The Mac OS X guidelines describe how radio buttons and checkboxes should be used ("Use radio buttons, instead of checkboxes, to provide a set of choices from which users can choose only one."), and the standard checkbox control is a square with rounded corners.

Answer 4

The round "boxes" implies that it's a different graphical representation of a radio button. A confusing one.

Whether or not that is the case, I do not know without reading the context. Rounded boxes is one thing, but circles are not as helpful as they could be as they use the visual language of a different widget that is close enough in functionality to cause cognitive dissonance.

Answer 5

There's not quite enough context on the dribble.com posting to be certain if this will work. In the context of an app, these rounded checkboxes might work okay. They also might work if one of them is (always) checked by default (i.e. the checkmark image will help with understanding of the function).

However, there is no doubt in my mind that round checkboxes are NOT a standard; these look nice, but will cause confusion. Jakob's Law of the Web User Experience says "users spend most of their time on other websites."

Answer 6

I don't think the ios version is confusing. What stops it from being seen as a radio button in the standard sense of the familiar circle with the dot in it as provided for many years by both the Windows and Mac OS, is the use of the tick iconography. The tick suggests a tick box similar to a check (cross) box. Not the surrounding border shape. If they had used a round dot in a square box, then I believe that this would be confusing. But why? Ticks have been used as a replacement for a cross (or check) for years. Look at the complete box on a to-do list. No-one is confused by this. So from my perspective, if the right iconography is used in design, then it does not matter what the surrounding border shape is. Push the boat out. You could stars. Not that I would. :)

Answer 7

I am in no way a UX expert, but I think they are fine depending.

If you're creating an application where useability is a top priority (Many Demographics), then you probably should avoid them...

But any website that targets youth. (ie twitter), then I think it makes no different. Any users in that demographic will figure it in like 2 seconds.

Answer 8

I am not convinced that most users know the different shapes for standard UI controls, also I believe the iPhone UI may not keep to what most of us assume are the standards anyway.

So it all comes down to testing with the target users. I expect that the wording on the site will have more effect on most users then the shape of any given control.