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.

How do rounded corners on buttons and containers affect usability? Do they make buttons look more clickable? When used on other non-button elements, do they make the site look more friendly? I'm looking for some scientific tests on their effect.

digg firefox ie

Rounded corners are very time consuming to do in old versions of Internet Explorer. Many websites, such as Digg, just use border-radius: 0.4em on browsers that support it and leave bad browsers with sharp edges. Did they purposely do this to IE because the time needed to implement rounded corners in IE was not worth the usability increase?

share|improve this question
2  
Nope, it's not anymore time-consuming to make it work on IE browsers. Just use CSS3 Pie, Modernizr etc. –  Marc D Nov 14 '11 at 10:29
3  
Marc, It is not always possible to use these alternatives. A HTC file contains JavaScript to render the round corners. In large enterprise applications this might impact the web performance considerately and in some cases can even pose security issues. Using older CSS techniques for example: image slicing can often be the only way to ensure rounded corners in all browsers. Knowing if rounded corners affect the user experience or in this case the usability when left behind can decrease the overall development time and cost considerately without affecting the UX. –  Dennis Gommé Nov 15 '11 at 8:50
    
Have you seen the new GMail / Google Docs layout? They seem to have a foot in both camps by having what amounts to a rounded corner by employing a sharp corner with the corner pixel removed. –  msanford Nov 15 '11 at 21:16
add comment

10 Answers

up vote 56 down vote accepted

Known as contour bias (see this page from the book Universal Principles of Design), rounded corners make objects appear less harsh and more friendly. The book cites the seminal work on contour bias as being this article Humans Prefer Curved Visual Objects by Moshe Bar and Maital Net

However, note that rounded corners are not necessarily the right answer - the book also says:

Objects with pointed features, elicited stronger activations in the region of the brain related to associative processing, meaning that although angular objects were less liked they elicited a deeper level of processing than did the contoured objects - they were in effect, more interesting and more thought-provoking to look at

So perhaps it is a question of whether you wish content to appear more friendly or more noticeable. As the book continues:

Angular objects are more effective at attracting attention and engaging thought; contoured objects are more effective at making a positive emotional and aesthetic impression.

Edit:

I was thinking about what we find in nature - and subconscious interpretation.

We are preconditioned over time to what we find in the natural world. Curves are more likely found in nature, while square corners are pretty unlikely, and often where they might occur (eg due to fractures, breaks or other forces) they get worn down over time to make a natural curve again. Square corners simply do not have a place in natural world.

For this reason, when we try to create a natural looking page we create rounded corners rather than square corners. This helps the border or the frame to sit more comfortably in the content. However, if we use square corners, those sharper points become more noticeable (the subconscious is hardwired to look for danger and threats).

Square corners start to distance themselves from the content. The result being that square frames are interpreted more as a separate window - providing a view through into the content inside. Little surprise then, that art is hung in a square frame - the frame doesn't get seen as part of the picture - which allows you to see the whole picture unhindered. It's about separation of figure and ground.

For this reason, I'd expect the message inside a square button to be more clearly perceived if inside a square cornered frame than a rounded one. Indeed, a serious message or warning does seem to carry more importance and command more respect in a square shape than a friendly rounded one. And no surprise that even more pointy triangles are used for warning signs.

So - it seems to me that both square and rounded have their place depending on context and how the message is intended to be perceived - whether the message is serious and needs to be presented unhindered for maximum impact, or a natural and organic, friendly and inviting environment is more appropriate.

share|improve this answer
1  
Why does everyone make call-to-action buttons rounded if that study says square buttons would attract more attention? –  JoJo Sep 12 '11 at 17:46
4  
Well - 1) I think the majority of people are more aware of the rounded=friendly aspect rather than the angular=attention aspect. 2) There are many more cues and affordances in the designer's toolbox, so call-to-action buttons can be made noticeable without the angles, and kept more inviting by the rounded corners - thereby achieving both desirables. Additionally I myself would probably tend to go down the friendly route generally because you want to provide an environment in which to sustain the user for as long as possible. Therefore positive and inviting emotions win through –  Roger Attrill Sep 12 '11 at 18:20
5  
Prolonged usage of square buttons in Internet Explorer may result in such side effects as unfriendliness, high blood pressure, and risk of stroke. –  JoJo Sep 12 '11 at 18:32
3  
Aren't buttons in the physical world rounded so they feel pleasant on the fingers? How would you feel if the keys on your keyboard were razor sharp? Wouldn't that feeling subconsciously transfer to the way you think about call-to-action buttons? –  JoJo Sep 13 '11 at 4:44
1  
@JoJo good point. Definitely interesting on touchscreens. –  Marc D Nov 14 '11 at 10:20
show 3 more comments

Did they purposely do this to IE because the time needed to implement rounded corners in IE was not worth the usability increase?

Short answer: yes

Long answer: Yes, but there's not necessarily a direct UX issue with lack of rounded corners (Roger's links are to some research on the direct relevance). It's more of an issue of time spent coddling antiquated technologies is time taken away from accommodating the rest of the features for the rest of the users--which could have direct UX improvements for the audience. Rounded corners are pretty low on the prioritization list so is a feasible feature to let go for IE users. On top of that Digg's demographic (at least originally) would likely have had much fewer older IE users.

share|improve this answer
add comment

The UX Movement article on Why Rounded Corners are Easier on the Eyes mirror some of the comments here, but also make a really interesting point about how rounded vs. squared corners work to direct the eye in different directions, with rounded winning for bringing the focus into the rectangle, and sharp corners emphasizing the surrounding negative space.

share|improve this answer
1  
Is it possible that the author twisted the study on optical processing to what he thinks about usability? If the study shows that sharp edges take longer to process, wouldn't that be beneficial to use on UI elements which you want to draw attention? But the author believes that sharp edges should never be used. We should be careful about how to interpret data. –  JoJo Sep 16 '11 at 16:44
1  
And the finding about children preferring round objects is fishy. It all depends on comparisons. Of course a child will prefer the round beach ball over the sharp fork. But what if you let the child choose between round slices of carrots and a rectangular videogame magazine? He will choose the magazine. Data can definitely be twisted for the author's own mission. But +1 for finding the article anyway. –  JoJo Sep 16 '11 at 17:05
add comment

Research indicates that users perceive more attractive interfaces as more usable, even when the only differences are aesthetic. Many users are jaded with unfriendly interfaces, and that means users will typically seek alternatives to an application when they suspect it will be hard to use (even when 'just trying' will prove their suspicions ill-founded).

Your question seems to be about buttons in particular, but you technically asked about rounded corners and usability quite generally, so I'll also throw another idea at you - that rounded corners are a great way of signifying contiguity between visually distinct boxes, letting you keep designs visually interesting, but still convince users that they're dealing with a single object (in web forms, a user must feel that each group of data they're entering is linked to a single form 'object'.

Consider the following web form:

enter image description here

Here, my form is made of three visually distinct boxes - one blue, one white, and another blue. This visual variation helps my object look more interesting than a single blue or white block, but the rounded corners at the top or bottom indicate that the three are still part of the same object. The user sees a visually varied form, but isn't put off by seeing related data split across separate boxes.

share|improve this answer
3  
This form immediately triggered to me the question if the two items in the middle were perhaps different in some way, like they being optional. If it's just for visual variation or looking interesting, I would not do this. You are right that the box appears as one single object, due to the mind filling in the missing blue piece in the middle. –  André Apr 11 '12 at 10:20
1  
That's a very good point, actually, and one I hadn't considered. I would certainly have to put this to user testing before pushing such a design to production. –  Jimmy Breck-McKye Apr 11 '12 at 11:06
add comment

As it happens I just wrote an article about this, called "Call to Action Buttons Part 3: Shape and Size". In the article I suggested to use rounded corners for 3 reasons:

  • First, rounded corners point inward and draw the attention to the inside (content) of the button. A square edge on the opposite, points outward and draws the attention away from its object.
  • A second reason to use rounded corners is that these settles your subconscious. Studies have shown that we are ‘programmed’ to avoid sharp edges in nature (primordial reaction) because they present a possible threat.
  • The last reason why you should use rounded rectangles is because it actually takes less effort to see. I would like to quote Professor Jürg Nänni, author of the exemplary Visual Perception: “A rectangle with sharp edges take indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down”.
share|improve this answer
1  
+1 for the new perspective. @Roger Attrill said sharp edges draw more attention, but you say rounded edges do. I don't know who to believe. Your link to your call-to-action article is broken. –  JoJo Sep 16 '11 at 16:51
    
"Our “fovea-eye” is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down" That sounds fancy. But is there any real meaningful data to put that in the context of web design? I'm a big fan of research and data but I do think the UX world tends to glom on to individual studies a bit too tightly at times at the expense of the bigger picture. –  DA01 Sep 21 '11 at 14:23
add comment

Why restrict to software- another example of 'rounded rectangles are easier on the eye' theory that @Paul Olyslager pointed out is evident in Apple's products as this blog post Realizations of Rounded Rectangles says:

Rounded rectangles didn't stop with software. Increasingly, the rounded rectangle has become the parti of Apple hardware design. The shape made large machines approachable and small ones pocketable.

enter image description here

So, rounded corners may not be a critical usability element but they help in creating a perception of approachability and friendliness. In this way they are addressing a psychological need at a visceral level.

share|improve this answer
1  
Heh, as I recall, my Commodore 128 was just about as rounded as my Mac Classic... –  Peter Turner Nov 15 '11 at 18:00
    
It's also not a universal pattern in Apple products, eg this: i.imgur.com/DSXfM0I.jpg and: i.imgur.com/IPueQ2H.jpg - though I have to admit, rounded corners is a pretty pervasive design pattern throughout their products. Whether you take this to mean their rounded corners indicate they are good for usability, or just that they are good for creating a trademark look and feel, is up for individual interpretation I guess. –  thomasrutter Sep 25 '13 at 7:04
add comment

While rounded corners look great on most browsers, consider the device it is being viewed on. Mobile devices are increasingly becoming more widely used, especially with tablets newfound popularity. Rounded corners can look less than stellar in non IOS tablets and mobile devices.

I would encourage contrast (between the button and the background) to increase the appeal and 'clickabillity'.

share|improve this answer
    
I agree that mobile usage is increasing at a fast rate. So far, Android and iPhone are dominating and they both sport modern Webkit browsers. I hope Windows phone never gains popularity because it is using IE. I've never actually used a Windows phone before, but if history repeats itself, the IE browser on those phones probably don't support CSS3. –  JoJo Nov 18 '11 at 8:25
add comment

This is a really good question and a lot of useful answers/opinions have already been given.

But I want to focus on the followup question you and many others may be asking:

Should we keep supporting rounded corners for the troublesome browsers like Internet Explorer 6,7,8?


A short explanation why the support of rounded corners and other things like gradients, shadow effect are so hard to achieve for IE 6,7,8:

Cascading Style Sheets level 3 (CSS3) can do this very easy with only a few lines of code. Older CSS versions require images or other techniques to produce these rounded corners. Older versions of IE (6,7,8) fail to support this new CSS3 language, so they still rely on the older technniques, which require more specialized CSS knowledge and therefore costing more implementation time. Companies are often confronted with these type of issues since these browsers often seem to be the most used ones by their clients. Let's hope this will change soon!


It's correct to say that round corners can affect the user experience. The answers above try to explain why. We are merely looking at the usability aspect of the matter but we should look at it from a larger point of view (UX).

If supporting them would be no hassle at all we should use them appropriately. However in the field of UX, we should also be concerned with other aspects.

Here are some reasons why we should not provide support for rounded corners in IE 6,7,8:

  • A project will require extra work and time during implementation for supporting round corners in IE. You need more specialized CSS knowledge which often means better resources. This all adds to the total cost of a project, which is often constrained by a budget. We need this budget to concentrate on much more important UX aspect then ensuring pixel perfect browser compatibility between all used browsers.
  • It is easier to advocate a workload decrease for a small priority UX issue than it is to advocate a workload increase for the same issue. It's vital to focus on the important stuff first.
  • Let's say that we fully support round corners for all used browsers. Basically this means we are using techniques to ensure these rounded corners which are created to support these particular versions of browsers. General support for these browser (versions) will be dropped worldwide when years go by. This means you will be left with products which use outdated techniques for non-existing browser versions. Using CSS3 immediately and applying gracefully degradation will automatically provide browser support when companies update their browsers to support CSS3.

Conclusion: I am not saying we should drop all support for these browsers. At this point in time it is not possible. We are talking about rounded corners, but there maybe other things out there which we can gracefully degrade without affecting the UX too much. Ask yourself what these things are and how they affect the UX.

Just make sure you, the UX professional, are deciding about this, not business or management.

share|improve this answer
    
I can't say I agree with this - I really don't think implementing curved edges in IE6/7/8 is all that difficult. I think most front-end developers have been exposed to this requirement before. –  Jimmy Breck-McKye Apr 11 '12 at 11:10
add comment

Rounded corners separate an element from the structure of the page.

Rounded objects are singular objects which are structurally separate from the objects around them. We are accustomed to associate this quality with elements that can move independently. On a website this usually applies exclusively to interactive elements such as buttons, which can be pressed or move in some other way.

It should be fairly easy to find an alternate design solution for elements in IE, which would reproduce the structural isolation of rounded objects. For example a prominent border or a 1px drop shadow. This would give you the usability benefits of rounded corners without the pain of development.

share|improve this answer
    
Only IE9+ has drop shadows. –  JoJo Nov 18 '11 at 8:18
add comment

There have been psychological studies which suggested that a person's reaction to visual environment is a learnt behaviour - ie if you live in an urban environment with lots of straight edges, you react differently.

http://www.eamonfulcher.com/CogPsych/page3.htm

• Cross-cultural studies. Segall et al. (1966) found that people from Zulu tribes were unable to perceive the Muller-Lyer illusion. This might imply that because their visual environment contains few rectangles, straight lines and regular corners, they were unaffected by top-down processing (and hence implying the importance of environmental influences in perception).

Annis and Frost (1973) found that Canadian Cree Indians who lived in the countryside were very good at determining whether two lines were parallel regardless of whether they were presented as diagonally, vertically or horizontally, yet Cree Indians who lived in the city performed poorly when the lines were presented diagonally. The explanation offered is that exposure to the vertical and horizontal lines of the city makes perception of diagonal lines more difficult.

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.