The Rounded User Experience

Ever wondered what the fuss is with the rounded corners on buttons, cards, and other UI components? Read on to find out.

Design — Sandhya

This article entails the What, Why, When, and Where of Roundness in User Experience.

What?

By Rounded User Experience, I primarily mean rounding off corners in UI objects that are sharp by default. The most predominantly rounded off objects are cards and buttons, especially CTA (Call-To-Action) buttons.

A rounded corner is usually achieved by using a border-radius. Basically, you use a circle to mask off a sharp corner, so it appears rounded. This is better depicted in the graphic.

Design — Sandhya

Why?

Right off the bat, rounded corners look visually appealing but did you know that there are actual psychological studies to back this theory?

This is a classical conditioning principle where our brain is conditioned to think sharp objects can be harmful. A real-life example where sharp corners are considered harmful is when you’re baby-proofing your house by using rounded fittings on sharp table corners.

Since the human brain attributes this condition to everything it experiences, rounded corners give off the following vibes — safe, friendly, and hence, approachable. So the human-centered design should incorporate these attributes over the sleek, sharp corners.

When and Where?

Now comes the question of whether to use rounded corners or fully rounded components.

Rounded corners are perfect for grids,

  • They help with a friendly interaction
  • They are space-saving
  • They draw attention to the content and not the component

Fully rounded buttons are perfect for CTAs,

  • The component has to be standalone
  • You should have space to spare as fully rounded buttons take up more space in the horizontal axis. This is better depicted in the graphic

References


If you liked this article, give it a clap and share 🙂

Designs at https://dribbble.com/sandhya_subram
Tweets at https://twitter.com/sandhya_subram

Get articles like this in your inbox!

Join ~18,000 and receive 4 quality articles
and the latest tools in your inbox once a week:

6
Like
avatar
Available for all

Support Prototypr

We believe the web works better when everybody can access content, regardless of where they live or what they can afford. That's why our platform is free – no paywalls, popups, or abuse of data. As a tiny, independent team, we accept donations to help keep the lights on. Contributions are also redistributed to writers.