Rounded Corners & Contour Bias

Designers have been rounding their corners for decades. It’s a practice that quickly became standard in user interfaces both on the web and in system applications. I was recently involved in a debate about them at work, so I thought I’d do a bit of research.

Naturally, I’m an advocate 🙄

Peeking at some of the history.

Weirdly, I found it fairly difficult to find any work on the history of rounded corners in design prior to our digital world. However, the story of how rounded corners came about in the digital realm indicates that they were physically ’everywhere’. It seems to be widely accepted that rounded corners, in respect to user interface design, were born out of Steve Job’s obsession with them, starting in the 80s.

As folklore states, this began when Bill Atkinson eagerly presented Apple with his code that allowed Apple’s OS to draw ovals extremely quickly. Jobs responded: ’Well, circles and ovals are good, but how about drawing rectangles with rounded corners? Can we do that now, too?’ The response was no, but after a quick walk and some persuading Atkinson went about making this possible.

So it wasn't until Apple's Aqua UI in the year 2000, that we start to see rounded rectangles in operating systems. But you can see (in MacOS) today that those rounded corners remain present.

Semiotics & Psychology 🤓

Contour Bias

In Universal Principles of Desgin, there's a great section on contour bias. In summary it talks about how our brains associate sharp angles and pointed features with fear and potential threat. It discusses experiments where real human brains were monitored when interacting with smooth, curved edges like that on a round watch-face. These people were happy people. It's worth a read as it delves a bit further into how humans have other perceived biases that may shift our perception. For instance, a knife is inherently dangerous so it wouldn't be fair to evaluate the effectiveness of contours in changing a human's perception of the object.

"When presented with objects that possess sharp or pointed features, a region in the human brain involved with fear processing, the amygdala, is activated."

The Microsoft Factor

Microsoft is without a doubt a proponent of the hard edge, boxy design. We see it first and foremost in Metro in Windows 8. There are very few soft edges, neither in desktop applications, layouts or actionable objects. It's a hard old world in Windows.

Microsoft's new design language Fluent maintains the decision to have hard edges, and admittedly it does look gorgeous in the concept videos and imagery.

The Google Factor

The Material design guidelines state that buttons and cards should have a corner radius of 2dp or 2px on the web. Make of that what you will, but this design language has been heavily adopted in both Android and the web.

Thoughts

There's a good argument for rounded corners in design. Firstly the sheer amount of them we see. When was the last time you saw a hard edge in iOS? Those icons are almost circles. Secondly, it seems to be well documented that rounded corners are friendlier both aesthetically and psychologically. They invoke both fluidity and a sense of comfortability that you just don't get in hard fitting sharp edges. With Metro for Windows Phone I always thought everything looked too harsh – like it all fits together a bit too well.

I must soften all the edges of this blog...

Further Reading

• Rounded Corners and Why They Are Here to Stay
• On the Past, Present and Future of Apple’s Aqua User Interface
• Introducing border-radius
• CSS border-radius
• Round Rects Are Everywhere!