Thought from Origin

UI Decisions: Rounded Corners on Buttons

Designers are always trying to make the best design decisions for the project. No matter how minute, every decision affects the whole design. Buttons are a key part of any project. They signify a call to action and are responsible for any action taken on the page. Therefore, it is important that the buttons are well thought out.

As the understanding of UI has evolved, we have seen a steady shift away from sharp-edged buttons to rounded cornered ones. So, why has this shift occurred? Let us dive into the UX behind the shape of the buttons.

Rounded cornered buttons are more aesthetically appealing to the current sensibilities. They are modern looking and signify optimism. For businesses that want to appear up-to-date, these are a great option. The reason why many design systems are adapting to rounded corners on buttons is that they are minimalistic, the latest example being, Google's Chrome. Chrome has switched to a rounded address bar that looks exactly like its search bar. This indicates the merging of the two.

Why Use Rounded Corners

Apart from aesthetics, rounded edges are easy on the eyes. When it comes to stacking cards, rounded edges perform even better. It is far easier to count the cards with rounded edges as they are distinguishable from one another. When the edges of the stacked cards are sharp, they look uniform and our eyes glide over the stack instead of lingering on them. This is even more noticeable in grid layouts.

It is no surprise that most website templates make use of cards with rounded edges for their features and services.

Fully Rounded Buttons

The difference between buttons with rounded corners and fully rounded buttons is that fully rounded buttons only perform well with a lot of space. This means that you cannot stack round buttons the way you can with other buttons.

On the other hand, when there is space, fully rounded buttons act as a great call-to-action. They can be used to direct a user's attention to a specific action. And, they work even better when the layout is in the form of a list, or cards.

There is always the chance of fully rounded buttons not working out. This happens when the visual guide is unclear. Fully rounded buttons can appear like tags instead of buttons, especially since Google uses fully rounded buttons for tags and not CTA. Therefore, it is important to use them appropriately.

Round buttons are also not a great option for displaying nesting options. This is because they restrict the click area and make clicking difficult. So, when displaying nested options, it is best to use a semi-round button.

Making the Decision

When it comes to making the decision for picking buttons, there is no universal guide. Design is versatile and it can be used to your advantage. Make sure that whichever option you pick is conducive to the whole design. A user testing the decisions is a great option if it is feasible. At the end of the day, a button should make the user want to click it.

other blogs