Why Rounded Corners are Easier on the Eyes | Hacker News Reader

Why Rounded Corners are Easier on the Eyes

uxmovement.com

133 pointswaterhole29 comments

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.

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.

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.

That so many craftsman, engineers, etc. did so is suggestive.

In many cases it suggests that leaving a sharp corner, such as on a table, would risk injury to some users. But in general, that something took extra work, says nothing about the rationale behind it. Maybe it's a way of showing off skills; I've certainly seen that in code , where the people did something the hard way for reasons other than "this is what is best for this situation."

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.

What I notice is that sometimes they are appropriate, sometimes not. They are not universally appealing.

In many cases they give things an inappropriately childish (childlike?) feeling.

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

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.

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

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.

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.

You put it into words. Nice fit.

Letter and layout create space with edge and curve.

One big graphical language..

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.

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?

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.

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.

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?

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 :)

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

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

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!

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.

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?

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?

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.

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

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.

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

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.

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)

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.

Reply on news.ycombinator.com