Why Rounded Corners are Easier on the Eyes

http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/

by waterhole • 15 years ago

133 29 15 years ago

ristretto2• 15 years ago

There are some exaggerations there. Corners, like edges in general attract attention and our visual system exaggerates them (but not in the retina as is suggested). Just like gradients, round edges do not attract attention. I don't think it's true that the computational/metabolic cost is different for the visual system. So, use corners when you want to attract attention (that's why arrows are jagged for example)

danilocampos• 15 years ago

I can no longer see a conversation about round rects without thinking of this fascinating story on developing the first Mac's drawing subsystem:

"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!". He even persuaded Bill to take a quick walk around the block with him, pointing out every rectangle with rounded corners that he could find.

When Steve and Bill passed a no-parking sign with rounded corners, it did the trick. "OK, I give up", Bill pleaded. "I'll see if it's as hard as I thought."

http://www.folklore.org/StoryView.py?story=Round_Rects_Are_E...

Interesting example of Steve Jobs' leadership style that doesn't revolve around him being an asshole. Also, given how prevalent round rects were in classic Mac system software, surprising to consider they almost weren't possible on early systems.

Amazing, the cleverness once required to create things we now take for granted.

jamesbritt2• 15 years ago

Did they just ignore all the non-rounded rectangles around them? They're everywhere, too, and I fail to see how this does or does not argue for their use.

ellyagg• 15 years ago

It's simple if you think about it. Making rectangles with rounded corners takes work. You have to go out of your way. That so many craftsman, engineers, etc. did so is suggestive.

Moreover, looking at a lot of rounded rectangles will have the same effect that the examples in the linked article did. You'll notice that objects with them are more appealing than their counterparts.

mmahemoff• 15 years ago

It does show that the world is not just sharp angles. Most UIs with round angles still include sharp angles too.

chipsy• 15 years ago

If brightness at the edges is the visual cue, would you get the same effect as rounding by fading out straight corners?

ristretto2• 15 years ago

it's an illusion created by the visual system, which will persist unless you completely remove the corners. It's similar to why you perceive the edges on your ceiling to be brighter.

gurraman• 15 years ago

I've found previous articles from the same source a bit thin. And I have a personal dislike of the author after reading the comments on another article on the site:

http://uxmovement.com/navigation/designing-tab-navigation-th...

I was happily surprised as this was a pretty good read with some interesting references (with criticisms as well). I hope the articles keep improving!

cturner• 15 years ago

I found this one extremely thin.

There's a title that says we're "hard-wired" for rc. Then makes claim that our aversion to corners is a result of socialisation (i.e. not hard-wired). The case is simply ridiculous. Do parents not mind when we play with jelly-fish, but get upset when we eat sandwiches? Do schools round the corners on textbooks lest children suffer physical or emotional damage from those nasty sharp corners?

There's no substance here, just vague claims and circular citations.

cobrophy• 15 years ago

The some of the examples were pretty moronic: Is a sunburst easier to process than a circle - well yea but you could equally have a complex object with rounded corners that was harder to process that a triangle.

Would you trust your child with a beachball or a scissors... really?

ars2• 15 years ago

Maybe I'm strange but I found the sharp corners much easier to see.

The round ones were distracting, especially the rounded arrows. I also found the pointy circle much nicer to look at.

With sharp corners you have 4 things to look at and process - each line. With the rounded ones you have 4 lines, 8 spots where a line changes into a curve, and 4 curves.

At least that's how my eyes do it - they notice the curve for each corner and that wastes time.

pyre• 15 years ago

Shouldn't that be:

  4 lines and 4 corners

  4 lines, 8 spots where line changes to curve and 4 curves

If you have to process the fact that a line changes into a curve, then why don't you have to process that two lines are intersecting, or 'changing' at a 90deg angle?

ars2• 15 years ago

I thought about that and mathematically it makes sense, but that's just not how I experience it. The corner is "simple" there is nothing there for me to process, so I don't need to notice it.

mrb• 15 years ago

I tend to agree. I dislike many uses of rounded corners.

I also find it ironic that in the example diagram they use to compare squared vs. rounded corners, they use squared corners on the A, B, and C boxes, implicitly acknowledging that they are more appropriate than rounded corners in this case.

zobzu• 15 years ago

can't believe _SPIKES_ and _SCISSORS_ are compared to squares, in order to claim rounded corners are "easier on the eye". Squares are more space efficient and just fine on the eye. If you make a ball with 100 tiny ball forms coming out of it, its going to be just as hard to process as spikes.

Can't believe people can even follow such thoughs. wow.

fuzzythinker• 15 years ago

I don't think the answer is so binary. I think non-rounded corners convey a feeling of simplicity. And because of that, I believe using rounded corners in a simple design can actually be harder on the eyes. Take HN for instance. If the corners were rounded, would it really be easier on the eyes? Well, I guess we would need new users to verify that.

Or take Microsoft's or anyone's tile UI for instance. I think the tile UI gives a feel of simplicity. If the tiles were rounded, would it really be easier on the eye?

philh• 15 years ago

I don't like the diagram example because it looks like B is being given some form of precedence over C. The lack of symmetry throws me off.

I would suggest having it round in both directions and removing the bottom edge of the 'triangle', so that it looks more like a curly brace. I'm not sure though, that might look weird or too cute.

rvavruch• 15 years ago

That bugged me too. I like your solution, and I think it would look more interesting graphically.

grannyg00se• 15 years ago

I agree it definitely looks as though B comes first and then C is a secondary option. Furthermore, I see nothing wrong with the other diagram that doesn't have a curvy path. I think this example is different because it's a three path node. It doesn't jar the mind as badly as a two path node having a sharp vertex.

espeed2• 15 years ago

When I was considering what to name "bulbs" (http://bulbflow.com), the round corners of the letters was one of the factors. For example, I think the round letters in google and apple help give the brands a soothing feel.

Likewise, I think the soft edges in the python and ruby syntax are more pleasant, and I find it irritating to switch between python and sharp-edged languages such as JavaScript }{ -- this may be one of the reasons lisp is so beloved :)

cousin_it• 15 years ago

Your homepage looks like a rectangle with sharp corners. Have you considered making them rounded? ;-)

espeed2• 15 years ago

But then it would no longer be a golden rectangle :)

bluedanieru• 15 years ago

The two flow diagrams don't convey the same information because the left one lacks symmetry and singles out B. As such there is significant cognitive overhead as you have to convince yourself they mean the same thing (and only in this context, in most contexts I would not consider B and C to be equivalent choices). It can be easily fixed, but wasn't.

molecule• 15 years ago

optimization: like rounding corners when piloting a vehicle: it shortens the distance of travel. in the visual case, fewer arc degrees, fewer saccades for the eye to traverse, fewer bytes sent down the optical nerve to the brain for processing.

extension• 15 years ago

I can't believe that never occurred to me: rounded corners are like serifs for borders. They make the structure more obvious when boxes are packed together and aligned.

intellection• 15 years ago

You put it into words. Nice fit.

Letter and layout create space with edge and curve.

One big graphical language..

josefresco• 15 years ago

I couldn't help but think about WP7 and how they chose an angled/square interface in "sharp" (hehe) contrast to Apple's rounded UI. Will this simple principle hurt them?

mannicken• 15 years ago

Rounded corners are friendly. It's almost as if they say "come play with us, we won't bite or cut you".

Sharp corners on the other hand are more like "I'll cut you if you come near me."

Perhaps this means that one can constrain user by placing sharp corners on contextually unavailable objects, and rounded corners on available objects.

Speaking in terms of progressive disclosure, one can animate sharpness of the corners depending on if the users need to interact with the info inside of the corners.

Then it's more like "oh, ok, now I won't cut you -- you're cool, boxes around me told me that, come enter me".

Why Rounded Corners are Easier on the Eyes

Related Stories