Back to list

The Unnecessarily Rounded Corner

It’s has been an UI trend of iOS and Android and Web. A lot of UI become rounder and rounder. Look at Gmail Web, Youtube, Pinterest, Android, iOS.

It’s common that an UI elements looks more “fresh” and “organic” when you make its corner radius larger. However that freshness will die down quickly in several days and usability degrading really start to show off.

There are 5 typical usability issues that over rounded corners could cause:

1. Looks unpolished if not having enough margin. In the example below, when button corner radius increases, its text no longer looks in place. We have to make the button frame longer to create more margin, so that it looks comfortable again. Look at the “Skip” button in Youtube, you will see how much margin does a pill shape button need.

2.Reduced information density with a lot of round corners in the UI , to achieve a good look, UI designers will have no choice but put less contents in the same area

3. Diminish the mental weight of App Round corner create weight in an UI object. Think about real life object a wooden table vs. a piece of paper and how they have different corner radius. It’s good when only used on certain things such as app icon because app has “heavy” weight. But it’s no longer true if everything is rounded.

4. Make the contents look badly cropped Contents inside a rounded frame does not always look good, especially when it is a scrollable list, a picture or a video. Sometime sharp corner simply just fit more to the nature of the contents. Round corner makes it feel like the contents are “wrapped” in a container and users are not directly “touching” the album art or webpage, etc.

5. Make a list feel messy and distracting List of item framed by rounded corner can have this inconsistency feeling even though items are using the same corner radius.

In conclusion, when design an UI there is really no reason to give everything the same round corner in the name of “UI consistency”. Like real life, different objects have different corner radius. It’s okay to use different corner radius for different types of UI objects, and it will make the UI feel more balanced, polished and rich.