Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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:

enter image description here

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.

enter image description here

share|improve this question
30  
They really look like radio buttons, users would learn after they checked more than one of course, but will they try and check more than one... –  Ben Brocka Oct 10 '11 at 13:55
    
I won't bother too much for this kind of stuff –  gd1 Oct 11 '11 at 7:52
    
@jimp and others allude to this, but you would think the term "check boxes" would have insulated them against this kind of change in the first place! –  A.M. Aug 7 '13 at 16:54
add comment

8 Answers 8

up vote 123 down vote accepted

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:

enter image description here

-- 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.

enter image description here

share|improve this answer
    
That was my thought, but was curious what the overall sentiment was. I googled "round check box" and found a lot of hits regarding them, but until now have never seen one in use. –  Matt Rockwell Oct 10 '11 at 14:07
3  
It also reminds me of radio buttons, which only allow one selection. –  JoJo Oct 10 '11 at 16:06
6  
"Only the wording of the title would indicate to me that..." - and we all know that no one reads dialog instructions or titles! –  Steven Noto Oct 10 '11 at 21:41
4  
Maybe that's their (evil) plan - to subtly nudge the average number of selections towards 1, rather than encouraging the customer to select more than they would know what to do with (oh, the number of PDF files I've downloaded to "read someday") –  Erics Oct 11 '11 at 1:31
1  
Agree with @Roger. There is no change in the underlying behavior which is that of a check box, so tinkering with the conventional visual representation makes the user 'pause', creating an unintentional hindrance. –  Kartik G Oct 11 '11 at 4:53
show 2 more comments

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.

share|improve this answer
1  
A simple yet very clear explanation! Good point! –  DA01 Oct 11 '11 at 13:54
2  
I would disagree with your definition of "function." I would suggest you consider it a favor of style over familiarity. In essence, both buttons do exactly the same function. –  Andrew Davis Oct 11 '11 at 20:20
5  
And radio buttons should only be used on radios? :) –  Vitaly Mijiritsky Oct 11 '11 at 21:38
    
"but user interfaces have always represented a checkbox as a square and a radio button as a circle" That is simply not true. Checkboxes often used to be represented by diamond-shaped objects in the past. –  André Jul 12 '12 at 11:57
add comment

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.

share|improve this answer
3  
+1 Great in depth answer. I added more to my question as to how they made that mistake going against their own rules. –  Matt Rockwell Oct 11 '11 at 13:32
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

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. :)

share|improve this answer
add comment

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.

share|improve this answer
7  
Usability should always be top priority –  Emil Oct 11 '11 at 8:13
1  
Agree to disagree. Functionality is always more important than usability. –  user606723 Oct 11 '11 at 14:28
add comment

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.

share|improve this answer
1  
I agree: some users know the conventions and others don't, and similarly some users, when faced with uncertainty, will experiment, while others won't. Take an educated guess, test it, and be prepared to make changes if you are wrong. –  user246 Oct 11 '11 at 13:46
2  
If we deviate from the convention, it's no longer a convention, so it's not helpful to anyone. –  Patrick McElhaney Oct 12 '11 at 10:49
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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