User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Smooth corners are gaining more and more attention recently in UI design.
As a designer of iOS mobile apps, I recently tend to design only with smooth corners as it just makes the look and experience much nicer. Also, looking at iOS's design language in the past few years, it seems like iOS uses smooth corners everywhere in the system. Here's an example from iOS Control Center:
My question is, should we sometime prefer "regular" rounded corners over smooth corners, and why?
I think it's more of an aesthetic or fashion decision than something inherently functional. Anyway, here's an argument.
Most of the components in an interface are framed within an orthogonal grid, such as the example in the question. In fact, the screen itself responds to Cartesian axes, we have not yet reached the oval or formally fluid screen. This image shows a basic layout grid with its respective items where both elements are clearly perceived:
This type of layout not only emphasizes the structure but interferes with a clear perception by adding a third element: the gutter. The grid alone, while simple, is perceptually too complex:
Sometimes the designer prefers to avoid the clear preponderance of the base grid or eliminate these gutters from the root to simulate a less structured, more natural design or simply give more relevance to the items. The extreme would be the item with a fully rounded frame or circle:
By eliminating the edges of the shapes, the optical center becomes more visually relevant, each item is placed at the intersection of the axes of the structure lines (a). The gutter gets totally diluted. Perceptually it's much simpler:
The orthogonal shapes with rounded corners try to weaken the marked Cartesian axis of the base structure. But, while the gutter is still clearly perceptible, the rigidity of the union between the curve and the side generates a new element: the grid illusion.
Smooth corners are an optical arrangement to simplify visual perception, trying to avoid the mismatches described without dispensing with the use of orthogonal shapes, replaced by circled squares: squircles.
When and why should we choose rounded corners over smooth corners?
When your target platform tells you that you should.
This is nothing more than a trend and if you want to stay "relevant" then you follow the trend.
All of this boils down to consistency. The ecosystem's UI certainly has a look to it but inside of your app you could implement a different look as long as it's consistent.
My question is, should we sometime prefer "regular" rounded corners over smooth corners, and why?
The differences are too subtle to notice in your examples, to be honest. Nobody besides you and some ardent designer that decided to rate your app and mention the choice of squircle would ever notice.
At some point you'll realize that Apple moved on to NURBS or Beziers and your wild goose chase starts all over again; colloquially known as the "Seventh Squircle of Hell".
Interesting question. One reason is that
the squircle and other superellipses can be scaled up or down quite easily. This is useful where, for example, one wishes to create nested squircles.
The same Wikipedia article lists uses for squircles:
Squircles have also been used to construct dinner plates. A squircular plate has a larger area (and can thus hold more food) than a circular one with the same radius, but still occupies the same amount of space in a rectangular or square cupboard.
Many Nokia phone models have been designed with a squircle-shaped touchpad button.
Italian car manufacturer Fiat used numerous squircles in the interior and exterior design of the third generation Panda.
Apple Inc. uses a shape that resembles a squircle as the shape of app icons in iOS, iPadOS, and macOS (as of macOS Big Sur), but it is not actually a squircle but an approximation of a quintic superellipse. The same shape is seen on the home button in iOS devices with a home button but not Touch ID (currently only the iPod Touch).
One of the shapes for adaptive icons available in the Android "Oreo" operating system is a squircle.
The logo used by Instagram since 2016 includes a squircle forming the outline of a camera.
Smooth isn't really a good term for this. How round the corners are is one good way to describe it. Corner radius is how to measure how round the corners are. The corner radius on your examples are really close.
Material design is getting rounder. The latest version of Material Design has gone totally round, no corners any more. They've also made their buttons taller and use lower case text to add to the roundness.
From Material Design 3:
Here's a comparison of current design and new design.
Material Design Two buttons:
Material Design Three buttons:
