Designers use rounded corners so much today that they’re more of an industry standard than a design trend. Not only are they found on software user interfaces, but hardware product designs as well. So what is it about rounded corners that make them so popular? Indeed they look appealing, but there’s more to it than that.
Rounded Corners Appear Less Bright
Anyone can appreciate the aesthetic beauty of rounded corners, but not everyone can explain where exactly that beauty comes from. The answer to that is literally in your eye.
Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process. The fovea is fastest at processing circles. Processing edges involve more “neuronal image tools” in the brain [1]. Thus, rectangles with rounded corners are easier process because they look closer to a circle than a regular rectangle.
Scientific research done on corners by the Barrow Neurological Institute found that the “perceived salience of a corner varies linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles” [2]. In other words, the sharper the corner, the brighter it appears. And the brighter a corner appears, the harder it is to look at.
Which object is easier to look at?
We’re Conditioned for Rounded Corners
Another explanation on why we have an eye for rounded corners is because they’re more organic to how we use everyday objects in the physical world [3]. Rounded corners are everywhere. And as children, we quickly learn that sharp corners hurt and that rounded corners are safer. That’s why when a child plays with a ball, most parents aren’t alarmed.
But if a child were to play with a fork, the parents would take the fork away for the fear of the child hurting itself. This provokes what neuroscience calls an “avoidance response” with sharp edges. Thus, we tend to “avoid sharp edges because in nature, they can present a threat” [4].
Which object would you trust with your child?
Rounded Corners Make Information Easier to Process
Rounded corners are more effective for maps and diagrams because they allow our eyes to easily follow lines “as it suits better to the natural movement of the head and eyes respectively” [5]. Sharp corners throw your eyes off the path of the line so you end up experiencing abrupt pauses when the line changes direction. But with rounded corners, the line leads your eyes around each corner to continue along the path smoothly.
Which diagram is easier for your eyes to follow?
Rounded corners also make effective content containers. This is because the rounded corners point inward towards the center of the rectangle. This puts the focus on the contents inside the rectangle. It also makes it easy to see which side belongs to which rectangle when two rectangles are next to each other.
Sharp corners point outward putting less focus on the contents inside the rectangle. They also make it hard to tell which of the two sides belong to which rectangle when two rectangles are next to each other. This is because each rectangle side is exactly a straight line. The sides of a rounded rectangle are unique because the lines curve towards the rectangle it belongs to.
Final Thoughts
There are more to rounded corners than meets the eye. Rounded corners are not only easier for our eyes to process, but they also make information easier to process. There’s no doubt that rounded corners are appealing. But these extra reasons make them even more appealing to use. When you talk to a client about rounded corners, you’ll now have something more to say than it just looks good.
References
[1] Realizations of Rounded Rectangles
[2] Corner salience varies linearly with corner angle during flicker-augmented contrast
[3] Why Do We Love Rounded Corners?
[4] NeuroFocus Study Reveals What Went Wrong With the Gap’s New Brand Logo
[5] FMC Visualization Guidelines
Book
Affiliate
Wish I could find it now, but Frito-Lay did a delightful study on how rounded endcaps [those displays at the end of supermarket aisles] were more appealing to women. But wait, what was the reason WHY?!?
Because sharp corners reminded women of hot oven doors.
Perhaps more of us are afraid of hot oven doors than Frito-Lay realized. Or maybe the reason that women are able to avoid this hazard of the kitchen is not due to an innate understanding of ‘hot ovens’ but instead our brain’s dislike and mistrust of sharp angles.
Sharp things hurt. So do corners. So, um. Watch out, yo.
ps. In case my tirade on how much I appreciate the depth of understanding this article plumbs was not obvious: THIS RESEARCH IS RAD.
thanks for making this a human issue, rather than some women/oven affinity factor.
Nice tirade. Yes, I think perhaps the hot corners and sharp corners did have some overlap for some generations of women, but as a whole, many of us have also experienced the thigh-level bruise from too narrow of a path between sharp-corned tables at cafes, restaurants, etc. ad we know “SHARP CORNERS BAD”.
Still, enjoyed the tirade. Please, do it again. Intelligent humor is always amusing.
Rounded corners for connecting lines in diagrams also help to disambiguate where the lines are going (and help to discover some bizarro connection problems like you have in your diagram .. A does not flow directly to C??).
That said, while I do use rounded connecting lines in my site maps I retain the squared corners for the boxes. The contrast is an aid to distinguishing which straight edge black line is a connector, and which is an object being connected.
I don’t think the rounded corner version of the org chart diagram is better. It’s worse. It visually implies that the A-B relationship is more important than the A-C relationship. Not a good example of the principle.
As a non-professional, that was my immediate reaction too.
Have you considered that perhaps the A-B relationship actually is less important than the A-C one, or maybe there isn’t an A-C relationship at all. To me, that diagram is saying that A goes to B, and then B goes to C.
I agree, bad comparison on that example. It should be fixed with a rounded corner going the other way as well. Unfortunately that adds more visual noise and confusion rather than remaining simple with a straight line.
Nice to read this article – uxmovement gives us great articles overall.
About the diagram where A seems to lead to B – this is an example on how to fix it 🙂
http://postimage.org/image/aqvkw649n/
Join the conversation thread on the Facebook Group for User Experience called ‘YouX – UX for You’ … Ur article is the topic for the day 🙂
Good read and nice examples
Pretty sure those two flow-charts are not equivalent. The rest of your examples are all fine and I pretty much agree. But rounded versus sharp corners have specific connotations in certain areas and flowcharts is one of them.
I’m not impressed by the “sharp edges all around” example; if you want to be making the case that rounded corners help, then the complement should be a the crazy zig zag star with the points rounded off.
I suspect that proposed shape would also be hard to look at.
Hmmmmm. Nice theory. I’ll be testing out with my adsense image ads to see if rounded edges positively or negatively affect the CTR 🙂
curious though, your comment boxes don’t have rounded corners.
i’m not going to say that it made a great difference for me.
i guess it’s all relative…
i disagree. my round belly is not helping me get chicks.
Best. Comment. Ever.
Worst. Writing. Style. Ever.
Grammar. Nazi.
Best.Reply.To.A.Grammar.Nazi.Ever.
What is this? Reddit?
I dunno… some of the examples are pretty extreme. Comparing scissors to a beach ball is like comparing an active volcano to a swimming pool, asking “which one would you rather be submerged in?” and concluding that people prefer cool to warm.
I also think that curved lines in flow diagrams will create bias, so that’s not very useful – regardless of how much easier on the eyes it may be. overall, this is interesting food for thought, but not nearly as concrete as it’s presented.
I agree that the scissors is not the best example to use because it has sharp blade. I have changed the scissors to a fork, but the premise still holds – we tend to avoid sharp corners because growing up we have associated sharp objects with pain and danger.
Fork vs. Beach Ball is still a pretty far stretch. Perhaps, Fork vs. Spoon/Spork would be more realistic. They both kitchen utensils, made of the same material and still hold the sharp vs. rounded argument. However, I don’t think any parent would choose one over the other when it comes to a toddler/child playing with either, since we’re conditioned not to play with silverware, so I suppose this argument is fairly moot with these examples.
Anthony – you’re a scientist, change one parameter if you’re testing/comparing. Your example should be a rounded cornered table vs a sharp cornered table. Bringing children into it is needlessly alarmist for an article with a solid foundation – you’re not concerned with children’s responses to corners in interface design.
I agree Dan. Whilst I appreciate the thought behind this it reads as if the conclusion has been made before the research and the article written to match.
Comparing forks and beach balls? What about comparing a cardboard box and a cannon ball? Which does your child prefer to play with?
To successfully argue this point, I think you need to challenge your preconceptions. If corners are bad and to be avoided etc, why are they still used so often in packaging, architecture etc? (I’m not answering it here for you and its likely due to cost efficiency over anything else) but the fact that you haven’t challenged your own thinking feels like the perfect opportunity for a follow up article.
Jeffrey point is extremely important. The author is not comparing two similar shapes and concluding the round is preferable. He is comparing a complex shape with a simple one.
I’m interested that no one has been talking about the implied movement that the rounded connectors on the flowchart include. Certainly, informed choice is important. Always using squared off sharp corners is lazy, as is always using rounded corners. A careful reading of intended connections as well as some pretty damned basic A/B testing will result in stronger, more meaningful design.
Personally, I am very glad that my knife company has not taken “sharp corners bad” as dogma. I find their knife designs aesthetically pleasing as well as utile.
Another point [hehe] . . . the circle vs star is not a ‘pointy/round’ issue, but one of noise. The points all form an implied circle. If that circle is the information that needs to be communicated, then a circle should be drawn. If the point is to draw a star, then a circle will be an incorrect portrayal.
Wow, totally makes sense!
And the funny part is that form on this site for leaving a comment uses a sharp corners! 🙂
People should not just be talking about how things should be rounded, but also *how* things should be rounded. And it doesn’t just apply to shapes, it applies to e.g. animation timing curves and gradients as well.
Our eyes emphasize all discontinuities, whether it be shape, velocity, curvature or luminance. As a designer, it is your job to smooth them out.
Unfortunately, this requires a basic understanding of calculus to truly grok.
Actually, as a designer your job is to smooth out what should flow and draw attention where it needs to focus. Don’t ask me to pick the marshmallow-shaped tiger out of a pile of marshmallows.
this is an awesome blog post. The organizational diagram with rounded corners blew my mind.
I agree with @Jeffrey on both points, but will add that I prefer the non-rounded corner flow diagram in the example. The straight lines are easier to process because, as pointed out, the curves create unwanted bias. The burden is then on the viewer to filter out the curves in order to interpret the diagram flow.
I do agree however with the other ideas in general that a curved box is easier on the eye. But the flow diagram was not a great example.
This website only has rounded corners on this button below.
Using Firebug to make the comment boxes have rounded corners (say 10px radius) does feel easier on the eye strangely enough! 😉
Adding a slight shadow also makes it easier……I’ll stop redesigning your site now, because at the end of the day, what do I know!
You should patent this.
We want rounded corner table tennis. Not because it is better to play, but because it is easy on eyes of spectators.
Google could take not of this for pretty much all of their user interface design.
Just a little bit of care for all those sharp edges would make my eyes feel good!
Agree with Jeffrey – the beach ball vs scissors is not really helping the argument here. Maybe we are predisposed to chose soft items over hard items. Change the scissors to a piece of foam cut in the shape of scissors and the rhetorical question no longer makes the point…..so to speak.
That starburst at the beginning of the article is vibrating like all hell, while the circle is just sitting there. Hard to take my eyes off the burst. I get the inoffensive, safe component to curves but where appropriate those spikes scream “Look at me!”
The rounded path is worse as it promotes your eye to choose B because of the path. The proper UX would be for both B and C do have equal chance of being next, but the rounded one is misleading
Totally agree. I just started putting ads on my website and I started off with just the normal squares, and they looked really ugly. When I changed them to just slightly rounded corners they started to look a lot better. You can see at http://mediamonstrosity.com/#ads , and that way I don’t think they look too bad.
Ed
hard corners also take more implicit resources because every time a line ends abruptly, we must decide if that line is blocked by a closer object (meaning the line actually continues) or if does actually bends 90 degrees and go the other way.
It’s an awful idea to use non-rounded rectangles if the background color isn’t different.
This is explained perfectly in the book Visual Intelligence by Donald Huffman.
Thanks! I really enjoyed your article. Thanks for doing the work of creating it.
Apparently Steve Jobs had this insight in 1981.
http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt
Steve suddenly got more intense. “Rectangles with rounded corners are everywhere! Just look around this room!”. And sure enough, there were lots of them, like the whiteboard and some of the desks and tables. Then he pointed out the window. “And look outside, there’s even more, practically everywhere you look!”
I did find the org chart example opposite to what the author conveys. I found the rounded corner one to be misleading that one child has more weight over the other.
The flowchart example only needs to be redrawn so that the junction is symmetrical (resembling a curly bracket “{” rotated 90° clockwise) and the bias of A to B would be removed making the two diagrams equivalent again.
Flowchart example with bias-free connections:
http://imgur.com/omqex
Great article. I wonder if round or sharp edge corners are perceived the same way for humans living in tribes (Papua New Guinea for exemple) than ones living in industrialized area.
I think another factor is that we use our eyes to perceive these objects, and as stated before, sharp edges are pointy and can cause rips and tears.
Considering how delicate and gentle (gelatinous) our eyes are, the very thought of looking at something which could injure such an important organ on the human body may cause rejection.
Possibly a self-defense mechanism of the eye?
Just a thought…
deciding between rounded or not rounded corners should be related to content – to the atmosphere your website is giving the user.
so I agree in general with the associations to rounded and not rounded corners, but not to the “always choose rounded corners” or “rounded corners – good, not rounded – bad” notion i’m getting from this article.
Yeah, I remember how the Facebook people LOVED rounded corners… NOT.
Unfortunately this is just pure theory, it would be cool to make an experiment!
No, it’s not pure theory, it’s pure truth. There are research studies that justify the claim that you can find in the references section at the bottom of the article.
This is comparing apples to oranges. The designer should be knowledgable enough to understand what fits the design and the concept the best at the moment. It’s almost unnecessary to write an article to talk about corners.
I wish I could read these great comments but I can’t focus on them because of their straight edge containers! :p
Good article with good points. But in the end, straight edge has its place and rounded edge has its own place. There is no end all be all.
And another design article full of opinions being pushed as facts. When something is “in” like rounded corners, you all will do anything to justify it.
Thanks for a great post.
However, I wouldn’t say that round corners are always better. Just look at Microsoft’s Metro UI. It’s clean and beautiful, while many of its elements (along with the basic ‘grid’ of tiles) have sharp corners.
Brilliant! This sort of analytical detail where design can be examined in the minutiae is exactly why I’m so passionate about this industry.
Great job!
Do you have any examples of high-content websites that use rounded elements and borders effectively? Most of the high traffic sites are still very synthetic and straight-laced with box frames.
It looks great but it’s hard to make it subtle and not distracting.
Sometimes adding rounded corners makes such a huge difference I surprise myself. it’s amazing what a little thing can do.
I feel like I’m seeing less and less rounded edges and more squares in websites. Do rounded edges look a little, “2005” to anyone else?
Imaging designing a new car with sharp corners…if people avoid these maybe we would have car accidents anymore. Problem would be no one would buy one due to people preferring rounded corners…then again Volvo butter boxes are still on the road.
There is also the Nissan Cube.
But while boxy, it still does have rounded corners.
Ye gods! They ARE everywhere!
I can see the advantage of rounding boxes on a button, else where is design and functionality. We can not eliminate sharped corners if we want to stack boxes, rounding corners will create instability. So the article refers to digital design not real world design, therefore comparing scissors to balls or forks is kind of out of scope here. I think therefore I exists… I think.
Just wanted to point out that the first two diagrams are not necessarilly semantically equivalent. If these are railroad diagrams, for instance, the rounded diagram indicates that something can move from A to B and from B to C, but not directly from A to C. This is very useful, but designers should recognize that subtleties like that can be very important, especially in technical diagrams.
this is cool and exactly what we were all thinking. Sharp objects hurt. If it wasn’t for those pesky ie8 users we would all be so happy
I don’t think rounded edges are for looks only. Objects shaped with sharp edges like a rectangular iphone must be rounded or else it could poke your eyes out. Engineers will round an edge for safety reasons. If you look closely even the sharpest edge in most designs will be in reality rounded, not for aesthetic reasons, just for your safety.
If rounded corners are better than why did microsoft make everything rectangular in their Metro interface? They for sure have some UX/UI guys who know what they do and know about this(maybe even THIS article) and yet they choose rectangles, sharp corners everywhere. Can anyone explain?
Which diagram is easier for your eyes to follow? I would say the one with the corners! Also, the diagram with the rounded corners infers that route a>b is more important than route a>c
I have to admit that the spoon vs fork example would work better (and cause less controversy) when it comes to the “what would you want your children to play with” example. The example with rounded/sharp-edged forms, however, was absolutely interesting.
I agree with the diagram saying that rounded corners offer more information about where our arrow is trying to go, but i think the curve at the junction point is bad. It should cut straight in to the junction.
The reason for this, I see the curve leading in to one side of the junction as an implication of bias. It says to me that for some reason the route to B is preferred over the route to C. The direct cut to the junction makes it quite clear that you could go either way. If you want to round it out in any way, i’d recommend placing a circle over top of the junction point or rounding the inner corners on all concerning sides.
Am I the only one who prefers sharp over round? I like the straight, sleek lines, the clean look, over wobbly fat looking stuff.
Wow! This is really insightful! I definitely need to run some remote user testing on an array of designs with and without rounded corners.
Another interesting post that talks about rounded corners in design are these guys: https://designmodo.com/rounded-corners/
Thanks for sharing!
I can’t stand rounded corners at all! Especially if overused so damn much. The hard edged boxes around the comments here are beautiful, DO NOT apply border-radius to them.
The fact that Microsoft almost exclusively uses sharp edges on rectangles shows I can’t be the only one who thinks they are better than round ones.
This trend needs to go away, it’s just dribbble designers copying each other and someone cherry picked a bunch of articles to sound like an expert. The dribbblification of UX.
I do appreciate all the effort and hard work you put into this but you’re overthinking. Cheers bro not my cup of tea.
Nice article, found some of the references interesting too, thanks a lot!