Why do we round corners?
uxdesign.cc
uxdesign.cc
The article from 2011 ``` 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. ```
What do you think about this, HN?
Link for ref: https://uxmovement.com/thinking/why-rounded-corners-are-easi...
You can't just write "The following examples are taken from this great [other article]" and then proceed to copy the entire other article, swapping synonyms like you're in 9th grade and forgot about your history report until the night before.
Pretty egregious and disingenuous article IMO. Even the captions to the pictures are the same. The only way I'd consider this even _remotely_ acceptable is if it began with an into stating "printed with permission from user 'Anthony' at uxmovement.com" or something of the sort.
https://help.medium.com/hc/en-us/articles/200737695-Report-c...
Since this HN comment thread, which was well-deserved, the webpage now implies that the copycat author's account has been suspended (likely thanks to reports from HN users), noting: "ERROR 410 This account is under investigation or was found in violation of the Medium Rules. There are thousands of stories to read on Medium. Visit our homepage to find one that’s right for you."
For reference purposes, this is an archived version of the article with plagiarized content that was originally submitted: https://archive.fo/x4UDs
The best piece of advice I got from my dad before I started on this (for me) ambitious project was in question form: "Are you going round over all the edges? A 1/2 inch round leaves a bruise on a little one. An unfinished edge leaves a cut."
He's been right. They're psycho 2 year olds who think monkey behavior is the best. I've watched them bonk multiple times on facetime. No cuts, just a rub at the bonk spot.
We see this in product design all around us. Sharp corners cuts and hurts us. So we tend to round things over. And when we use software interfaces, I think the rounded corners engender a "this is safer" sub emotional response, and therefor more approachable.
Briefly: boards get wider and narrower as they absorb and release moisture from the air, respectively. The length remains constant. Anywhere you have a wide board (or glued up panel) affixed cross grain to another piece, you need to account for wood movement.
The problematic joint in this case is where the side panels run into the posts that form the corners and support the "roof".
Best case is that your grandkids live in an area with extremely constant humidity and nothing bad happens. In any other case, those wide panels are going to get wider and narrower as the seasons change and you'll either split a panel or the Kreg screws will work loose over time.
Traditionally, there are a couple of ways of dealing with this. If you're doing mortise and tenon construction, you'd have multiple mortise and tenon joints along the width of the panel/length of the post. Only one is fitted tightly and glued. The remainder are left unglued and loose along the length of the post to allow the panel to grow and shrink in width.
Table tops are traditionally joined to table bases using table buttons. Modern figure eight hardware or elongated screw holes are other equally valid options.
On the subject of rounding corners, I try to avoid a super aggressive rounding for most furniture. I agree with your dad that this is a great place to put a heavy round over. Those beds are going to be a fort, jungle gym, and probably space ship over time.
For anything that isn't going to be used quite so hard (bookshelves, for instance), I usually consider whether the client has kids or not when I'm deciding how much to break the edges.
If there aren't kids, I shoot for my old boss's standard of "looks hard, but feels soft", if there are kids, I break them a little more aggressively than that, as much for the preservation of the furniture as the children. Sharp corners wear pretty poorly, and a little extra softening helps keep the finish and wood in better shape over time at the cost of some initial crispness.
Anyhow, I hope the grandkids love the beds, and that everything works out without things loosening up over time. Just the same, maybe give them a little shake next time you visit to make sure :-)
Glass optics (lenses, mirrors, etc.) will usually specify "protective bevel on all edges," and the fab shops know exactly what to do. The beveled edge is resistant to chipping.
I'll look out for this in the future. Thank you!
Personally, as a non designer and someone with close to zero natural aesthetic abilities, this single point is the one that resonates. There are some forum tools that used to choose to separate content threads by rectangles. When scrolling through a page quickly it was easy to miss where one thread started and the other finished. After the switch to rounded corners the distinction when moving fast became a lot easier to see.
Second would be how rounded corners on buttons or inputs helps distinguish the background and surroundings from the interactive part of the page.
Can we? Much like that top 40 song that comes on the radio way too often, I have come to find all the rounded corners off-putting. They are usually a signal of form over function, and often used by information sparse sites.
Give me square corners like HackerNews, old Reddit, or Vanguard any day.
From the article:
+ Boxy shapes are commonly seen as reliable, uniform, traditional, and professional.
+ Round shapes are commonly seen as charismatic, endearing, harmless, and friendly.
Sounds like you and the authors would agree.
Why Does ‘Mother’ Sound The Same In So Many Languages? The concept of “Mom” is universal — and, for the most part, so is the name we’ve given her. The reason is probably a lot simpler than you think.
https://www.babbel.com/en/magazine/why-does-mother-sound-the...
It's a little ironic to me that we've literally resorted to "cutting corners" with our latest UX trends.
I'm sure that it does despite being far from being my aesthetic
I mean I know as soon as I use it it's all disappointment but every time I look at the new Surface I actually want to buy one Windows 11 and all (if I could combine the talent and the means I'd r restore W2K look and feel immediately as by bid for the Nobel economic fake prize award for getting that many people back to working.
[1] https://www.famefocus.com/tv/33-things-didnt-know-battlestar...
Nobody does that any more.
(With a very few hackish exceptions, some of which may be news to you... ;-)
Checking IAWBM: the original site design used a Gif for the design element:
https://web.archive.org/web/19980113191222/https://slashdot....
https://web.archive.org/web/19980418031312im_/http://slashdo...
Recent HN discussion about the wyze cam app - it was pointed out to me that a feature I had never been able to find (and only put in a less than half-assed attempts to find tbh) - was via a HUGE green button on X screen.
Seeing as though I have used this app many many times over the past year plus, I went looking for it - and wham - it is actually there.
But.. it's a large sharp cornered bottom of the screen - which made it look like a header / footer / name of page to me.. it never dawned on me that it was a 'button' - if it had rounded corners and a drop shadow it would have be obvious to me.
Of course I had other expectations as well - that the 'thing to push' would be above the half way fold of the screen to access such an important function - and that the naming conventions would be done better - but I digress.
Now I did like the 'beauty' of slightly rounded corners back in the day when everything was sharp, and many web pages had 'sidebars' - I liked the look of a round corner there.
Sadly most content is absorbed via the mobile devices and such 'form' is not as much about beauty / style as it is to show function these days it seems.
Small data points, but another perspective that may not have been considered nonetheless.
No one could figure out how to print because it turns out that round thing in the upper left was basically the old file menu, but since it didn't look like anything else on the screen people were really confused, so much so, that as you see from the link above they just moved it to the tabbar/ribbon in the next version of office.
So, its doubtful it has anything to do with how round something is, and more to do with the drop shadowing and whether people expect a button in that location, and whether it looks like one.
so I can see how if all the other factors were aligned, that roundness would not be an issue - so you are right - but given that the other things were out of whack in the wyze screen issue - non-roundness vs roundness would of made a difference for sure.. but yeah, if the location was better and the sizing a bit better - I can see how roundness would not matter / make much of any difference.
https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...
I don't agree with a lot of what Jobs did, but he was absolutely right about rounded rectangles.
> Bill's technique used the fact the sum of a sequence of odd numbers is always the next perfect square (For example, 1 + 3 = 4, 1 + 3 + 5 = 9, 1 + 3 + 5 + 7 = 16, etc). So he could figure out when to bump the dependent coordinate value by iterating in a loop until a threshold was exceeded. This allowed QuickDraw to draw ovals very quickly.
Still blows my mind. I have a hankering to try to blind-rewrite this algorithm knowing only the above.
Certainly a fun exercise...
The square rectangle pairing was also easier than the rounded one to match (there were fewer details to compare).
The orthogonal straight line diagrams create a phantom b-c connection whenever you connect a-b and a-c.
Rounded diagrams can still have that b-c connection if it’s intended.
UX people are mostly high on fresh MacBook packing material fumes I think.
Easier to "interpret"? Maybe not.
Easier on the eyes though is one aspect of the point they are making, an aspect I can get behind.
I think there is a way of thinking where you step outside yourself, try to see things in a novel way as though seeing them for the first time. I think in those times of reflection/meditation, you do see how maybe a thing like a shape can worm its way into your subconscious — cause a mild sense of unease for example.
Designers, artists, I would argue are more in tune with that — maybe more sensitive to it?
if I was shown a picture of an explosion and a picture of a flower, then asked "which is more peaceful" I would not be able to pick, because pictures are all equally peaceful. a picture may depict something, but a picture is a picture. what's that? oh you meant to ask about the content of each picture? well now you've completely eliminated any 2D representation of anything, and are now talking solely about explosions and flowers; concepts independent of media. oh but UX person wanted me to think that because an explosion is inherently less peaceful than a flower, that makes a picture of an explosion less peaceful than a picture of a flower? NOPE. totally separate things. try again, UX person.
this is what confuses me. shapes are shapes and have no inherent feeling or opinion about anything. if you want to talk about the concept depicted by each shape then you're no longer talking about the shapes at all; you've left user-experience-ville.
but UX people use a normal person's desire to couple the photograph itself and the subject in the photograph to say "round corners are better, here's a whole article about it" and normal people will (apparently) say things like "sharp corners are so much more jarring for my eyes and make it so much more difficult for light to pass through my pupils so obviously I'm on team round-corner."
just feels like mental slight-of-hand, like someone is trying to trick me into agreeing.
I mean look back at the toolbars on Windows applications from 20 years ago. those icons meant NOTHING (beyond the simple cut, copy and paste icons, really) and we all learned what each meant. and don't you dare try to tell me that a floppy disk icon naturally means "save" and definitely could not also mean "load" or even just "floppy disk" which is what it actually represents. you try depicting the concept of "saving a file to disk" on a button with enough room for a 16x16 image supporting 16 colors.
shapes don't mean ANYTHING. they have no meaning or inherent ease of viewing at all. at best all you can do is hope users either memorize the shape-to-action relationship table or know how to show the tooltips.
I say that UX people are crackpots, but I've worked with a few and they all seemed very sane and well-thought out folks, so I dunno. but then there's this article saying a sunburst shape is "harder to look at" than a circle shape and then it is hard to go anywhere other than going straight to "UX people are nuts!"
More seriously: I found the examples in the article quite interesting. "Which of these is easier to look at?" The high frequency of the starlike shape (spiky circle?) and the fork tines induce a bit of fatigue versus the given example alternatives. But I found the curved lines and the grid of rounded rectangles to be of a similar noise: added visual complexity that required more effort.
Just go to any website and run:
document.querySelectorAll('*').forEach(_ => _.style.borderRadius = 0);
You'll barely even notice the change. I just tried it on all my most favorite websites. No change in "feelings".The reason probably being the other UI fad, which is to make everything so lacking in contrast, that it's hard to discern the difference between round/sharp corners, even if you focus on it.
The idea was to use Photoshop to round the corners and "slice" those elements and used them as background images in CSS. In Photoshop, one has to know the trick to "feather" (I hope I'm using the right term) the corners for a smoothly rounded corner, else you get pixelated ones.
This happens pretty often and is a monotonous boring task after a while for the team. My team and I created a 9-Splicer tool in Flash, wrapped in a Windows Program (forgotten the name of the paid tool). Now any front-end developer could use different styles of rounded corners from the varieties of rounded corner graphics that the designer creates in her spare time.
-webkit-border-radius: 5px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
border-radius: 5px;The rich, Corinthian leather in later Mac design... sigh.
https://en.m.wikipedia.org/wiki/Corinthian_leather
https://www.cultofmac.com/189707/steve-jobs-himself-is-respo...
We're fine tuned to notice things that stand out as artificial and we usually respond to it in a negative way. The uncanny valley effect is another example.
3 dimensions: https://www.macworld.com/wp-content/uploads/2021/09/iphone-s...
2 dimensions: https://4.img-dpreview.com/files/p/articles/2759540226/Apple...
- present insufficient information on my screen and generally waste pixels
- do not have settings
- have poor performance, with every click taking 300+ms to do anything
I wouldn't let my child play with a fork, but I wouldn't let them eat their dinner with a ball either?
No, there's something "intrinsically" old-fashioned about round corners. Windows XP had round corners.
But I guess I'm just not in tune with the UI fashion cycle, in 5 years, pointed corners will be the next big thing again, along with enthusiastic blog posts from UI designers about how "intrinsically satisfying" those pointed corners are.
Objects with sharp angles are easier to break. External corners are easily damaged. Metal corner guards for cabinets are often rounded, and that makes them not only safer for people but also rugged.
Internal corners concentrate stresses, making it easier to start a crack and break the object.
Sharp corners are easy to produce, requiring less tooling, and so look cheap.
An artifact of modernity, surely? Historically, tight, neat corners required large amounts of skill and the right tools to create, whereas there were many approaches to rounding-off an arbitrary corner or edge.
I guess really it's from the age of the saw or file. Making sharp corners isn't particularly hard to do
You can generally make a rounded edge/corner rounder, much harder to re-plane a whole surface to restore the edge.
I think rounded is what sharp corners will look like over time. A woodworker takes a block plane and chamfers the edge of the furniture they are working on so that it isn't instantly dinged up within days of being in the buyer's home.
At the same time then, a sharp-edged piece of furniture shows that either the material itself is extremely strong, resilient, or shows that the owner is fastidious in the care of their furniture. The sharp edge is perhaps a subtle status-symbol.
1. Novelty drives some preferences and trends - so there will be cycles of round corners followed by squarish corners and back to round corners.
2. Whatever is DIFFICULT to achieve with current commonly available tools and technology is considered classy and EASY is considered cheap. In early Web days, HTML tables and DIVs only supported square corners. iPhone/iOS with it's rounded buttons and text boxes was all novel and engineered UX. Now it is easily supported by simple CSS -- I see rounded corners overused in even government websites with horrible UX so rounded corners do not automatically invoke a premium feel anymore unless there are other elements of careful UX design.
Same argument about "hand-drawn" illustrations feeling special when hard geometric lines and clean curves are more common/easy.
Similar reason why use of Times New Roman and now Calibri font (default in MS Word) feels lazy.
I don't think it's just a matter of square or rounded as there are many variations of round. I have clients say they only want sutle roundness as too much round makes the UI feel like a toy.
I agree with the comments that see no real benefit to the rounded corners except for the one comment I read that points out that we see sharper corners as more fragile.
I think there may be some sunk-cost bias here - if you spent a lot of time and energy making rounded corners at a time when CSS didn't make it easy, now you'll have quite a bit of cognitive dissonance concluding that rounded corners are no better than sharp ones.
The way to actually produce rounded squares is to fix the curvature, and then solve for a corresponding curve. You want at least a differentiable function for the curvature. Something with a bit of a spike (think of a Gaussian, but make it level off to flat after the spikes). From the curvature you can use something like the Frenet–Serret formula, integrate and find a formula for a curve. You then approximate it with a bunch of bezier curves. Should get something nice and smooth.
Oddly, Jobs' next venture, NeXT, went with a sharp-cornered rectangular UI.
I guess I still prefer the former to the latter.
border-radius: var(--border-size);
We figured this way every 6 months or so we could switch between squares and rounded edges... This may provide little design pops to give a fresh feeling to users... we'll see so far it feels very fresh to me.
And the article offers no proof more compelling than my own anecdata. So I haven't changed my mind yet.
Tide goes out, tide stays out?
https://web.archive.org/web/20010418154702/http://www.glideu...
also "stress risers"