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.

Why are circular buttons in software/websites so rarely used? Is it purely convention or are there usability reasons behind this?

share|improve this question
    
The new metro(modern) style of Windows uses a lot of circular buttons with icon inside. –  John Isaiah Carmona Feb 4 '13 at 4:36
    
This very page has at least 2 of them (the star and the checkmark). –  Mechanical snail Feb 4 '13 at 8:38
add comment

5 Answers

up vote 44 down vote accepted

Circular buttons can work well when an icon is all that's needed inside. A good example of this is Path. Their single icon buttons are circular and work well. However, to fit a word in the button, like 'Register', the button would have to be as tall as it is wide, taking up a lot of valuable space and creating a huge button. If using completely circular buttons throughout an entire interface, all buttons would have to be as large as the longest word(s) within a single button. IE, a button for the word 'Add' would have to be the same size as the button for 'Register', for continuity in sizing throughout the interface. This would be a huge waste of space.

Lots of apps like Path and sites like Svbtle get around this by using circular buttons for icons, then keeping the same height button and elongating it horizontally to create a rectangle with rounded corners for buttons with text.

I guess the disadvantage in terms of usability is that a circle or a rectangle with circular rounded corners has a smaller click area than a rectangle with smaller or no rounded corners. So, there's a slightly increased chance of users missing the button completely. However, this is more of a style choice I think.

share|improve this answer
1  
Even if you can use small circular buttons with just icons, they likely won't be quite as space-efficient as rectangular ones. A lot of the icons you'll end up using will have rectangular-ish bounding boxes, so when you enclose that in a circle, then pad the circles out to rectangles in order to fit them into a layout (think square inside circle in side square), you'll waste more space than with rectangles (think square inside square inside square). –  Jefromi Feb 3 '13 at 20:51
    
@Jefromi: Not necessarily. If the icons are designed to be circular, the unused space in the rectangular bounding box can be made transparent or programmatically trimmed away. –  Kevin Feb 4 '13 at 3:41
    
@Kevin: I know some icons are or can be made circular, but you can't always just design new icons to suit your design. If there are established symbols for things, new ones just confuse people. –  Jefromi Feb 4 '13 at 3:45
add comment

The answer is largely historical. In early HTML, there were no native circles or even squares with rounded corners, and the only way that you could have them was to use images. And at a time when speed mattered a lot (think 2000+ times slower than a connection today), most websites avoided images as much as possible.

So, if you wanted to make a button, you used a rectangle. I suppose it stuck as people became used to buttons being rectangles. There are many situations where a rectangular button is a better choice than a square one, but not so many to justify the rarity of a circular button.

When you look at physical interfaces, however, you will see that circular buttons are very popular. They are in general easier to make, cheaper, and arguably more aesthetically pleasing. I think if you watch interfaces over the next few years, you will see a marked increase in the use of round or non-rectangular buttons.

share|improve this answer
6  
IF you're arguing historical reasons you should be pointing out their lack in early versions of Windows, MacOS, and various Unix desktop environments that first made GUIs mainstream. –  Dan Neely Feb 4 '13 at 1:31
3  
Indeed... and one reason they weren't used on many of those desktops is that the display technology was too lo-res and with too few bitplanes to render visually pleasing circles. Another is that a circle was relatively slow and mathematically complicated to draw at an arbitrary size, whereas rectangles could either be drawn with straight lines, or composed from pre-rendered bitmaps (one for each corner, and one each for top, bottom, left and right segment). –  scottishwildcat Feb 4 '13 at 9:48
2  
Was also tempted to give a -1 for the all-too-common supposition that the the web is the be-all and end-all of GUI design, but I'll let it slide this time :) –  scottishwildcat Feb 4 '13 at 10:17
    
@scottishwildcat, Agreed. I was referring to web more than desktop applications. There are other reasons why they aren't used much in desktop applications beyond what you have stated. –  JohnGB Feb 4 '13 at 14:48
2  
@JohnGB I think the "OK" whatever-you-want-to-call-it in the first screenshot in the second link qualifies as a button. Or look at the fourth screenshot from the top at that same link. I'd think those qualify as buttons. –  Michael Kjörling Feb 4 '13 at 15:26
show 5 more comments

Considder how you're going to place multiple round icons:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In the first solution, you're basically still using a rectangular grid, and you're effectively wasting the space around the icons. However, with circular icons you could go for a hexagonal grid like in the bottom solution. That would allow placing the icons closer together than in a rectangular grid, but I doubt it will score well on scanability.

share|improve this answer
add comment

I think that it also about fitting circles into a grid. Web pages and interfaces are mostly based on grid systems and look like blocks. So the circular buttons will look weird with blocks of text surrounding them.

share|improve this answer
    
Valid point. Even if aligning circles in a grid, the though process still has mostly been "rectangular". Also has to do with what @JohnGB pointed out in his answer, I suppose. –  kontur Feb 6 '13 at 8:35
add comment

Its also worth noting that from a design POV its easier to fix text into a rectangular button than a circular one, especially if localisation is involved.

share|improve this answer
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.