How do rounded corners affect usability?

Question

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.

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?

Answer 1

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.

Answer 2

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.

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.

Answer 3

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

Answer 4

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:

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

Rectangular buttons are sharp. Our brains process sharper objects as a danger. For example, a knife. Rounded corners makes our brain feel safe.

Answer 12

They can affect usability if the radius is too large, by leaving less room for text.

For instance in Google's new mobile Chrome style (Android Oreo) there are no corners at all on text fields, ie. the ends are semicircular. This is not a good choice in general for small mobile screens.