Do Rounded Corners on Buttons Make Sense?


Keval Padia

Every few months, the user interface and user experience design have some or the other kind of advancements and those advancements become the most trendy thing of that year. This year, one such trend is the rounded corners. Is everybody trying to swap the sharp-cornered buttons with rounded corners?

In the past few months, rounded corners have become more of an industry standard rather than a design trend. Rounded corners have not only become common on software interfaces but also on hardware product designs. But why are rounded corners so popular? Is it true that rounded buttons have better usability? How do professional UI/UX Designers make a decision here? These are probably minuscule decisions, but they play a big part in the usability of a design.

Is it easy to recognize buttons with round corners?

It is true that rounded corners are better to look at and easy on the eyes. A simple example is of cards. When you put them in a line, it is much easier to tell the number of cards. This happens when they have rounded corners. Sharp corners will make these cards look identical and will not attract a lot of attention. The round corners act as a distinguishable edge and guide our eyes to acknowledge the visual differences. Rounded corners are also said to perform a lot better in a grid layout than sharp-cornered buttons.

Using Fully Rounded Buttons

If the interface has enough space, then the fully rounded buttons are a good choice. Spotify does this by using fully rounded green buttons on its web and mobile app. These buttons have successfully guided users on call-to-action buttons. This works for Spotify as the user experience is surrounded by play: music, podcasts etc. The primary interaction is simple and straightforward. It is extremely easy to distinguish fully-rounded buttons on albums. This will encourage the user to tap on “play”.

But fully rounded buttons won’t work when:

  1. They look like tags. When you design a fully-rounded button and make it look like a tag, it will only confuse the user. The user will not be able to decide if its a button or a filter.
  2. Displaying nested options. There is a chevron icon on a fully rounded button which will show that there are nested buttons available. This will limit the size of the chevron icon. The area to click on is pretty small. Using a semi-rounded button might work. This will act as a pop-up button. The available options will be shown upon clicking, which is much more effective. Apple doesn’t really support using rounded buttons as action buttons.
  3. Stacking. If you have a data table with 10 rows and each row has a rounded button that will make it look like a primary action button. Users will only be able to concentrate if you manage to minimize the presence of buttons.

Rounded Corners are more Aesthetically Pleasing

It is true, rounded corners look more aesthetically pleasing and also look modern. This trend of making use of fully-rounded corners in the user interface started with mobile apps and slowly went into being for the web as well. What rounded corners do really well is that they communicate optimism and openness along with providing a sense of simplicity. It all makes sense why so many design systems have recently adapted to rounded corners. Many brands and design systems have used rounded corners as icons and buttons.

Google Chrome browser was updated very recently and the first thing I noticed was the use of a fully rounded address bar. This is where Google has managed to merge the functionality with the search bar on the mobile app. A brief view of the search results will also be provided while you type even before landing on a new page. Even other updated Google apps like Calendar and Drive also have round shapes.

Wrap up

There is no right decision to be made here. Adapting rounded corners completely depends on what a brand is trying to communicate with its design. The rounded corners will only add a certain degree of simplicity and sophistication along with making the overall design more appealing and easy-to-understand. To get the right guidance on rounded corners, design trends and any UI & UX design related information, check out our Portfolio to see our work.

Related Post

Better UX/UI Design Can Improve Your Engagement in 2022
06 Jan 2022173 Views

How Better UX/UI Design Can Improve Your Engagement in 2022?

Have you ever visited a website trying to purchase a product but then quickly left because the check-out process was too complicated? Well, that...

Difference Between a Sketch, Wireframe, Mockup, and Prototype
18 Aug 2021273 Views

What’s The Difference Between a Sketch, Wireframe, Mockup, and Prototype?

A sketch, wireframe, mockup, and prototype are all very different things, but they are all interconnected. These are very similar exercises that...

Tips and Guidelines for Icon Usability
23 Nov 2018237 Views

Tips and Guidelines for Icon Usability

There are icons everywhere around us, be it smartphones or websites or software. Not only online, but even the offline world is filled with...