3

Rounded Corners Over Sharp Corners

 2 years ago
source link: https://blog.bitsrc.io/rounded-corners-over-sharp-corners-f71008a51afb
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Rounded Corners Over Sharp Corners

Why rounded corners are trending

Have you noticed that most popular products like Facebook, Netflix, and Spotify use Rounded/Curved Corners in their UIs more often?

Even though using Sharp Corners for UIs and products is an industry-standard, Curved Corners are gradually becoming a trend. Let’s understand why Curved Corners are more attractive than Sharp Corners and when to use them in your designs.

Is there Science Behind it?

Some of you might have already come across posts in LinkedIn by UI/UX designers asking, “Which UI is Better”?.

In the context of this topic, I’ve analyzed several posts that offer a comparison between Curved and Sharp Corners UI elements. In most cases, the majority voted towards Curved Corner elements.

However, the most exciting question is whether there is any science behind it?

According to the experts, visual processing of Curve Cornered rectangles is much easier than rectangles with Sharp Edges as they require less cognitive effort.

Sharp corners emphasize a sign of danger or lack of safety. Therefore, our minds have trained to avoid them as much as possible.

But, on the other hand, curved corners give a friendly, safe vibe. Therefore;

Curved Corners look more appealing, simply because they are easier on the eyes 👀.

When to use Curved Corners?

Note: All use cases mentioned in this article are shared publicly via a Google form to gather the opinion of the end-users.

Buttons (Individual)

After carrying out the survey, I’ve found that 65% preferred the Curved Corners for button UI comparisons.

Therefore, it’s safe to conclude that Curved Corners for buttons has a high preference for general use cases.

Left: Sharp corner | Centre: Curved corner | Right: Fully Curved corner

Dialog Boxes (Individual)

When it comes to information dialog boxes, many preferred the one in the middle with moderate Curved Corners.

Left: Sharp corner | Centre: Curved corner | Right: Fully Curved corner

And, the competition was close between Sharp and Curved Corners, keeping the Fully Curved Corner the least preferred choice.

But does this mean that we have to avoid using sharp corners?

No! There are use cases for Sharp Corners. Let’s find out when people like to see Sharp Corners based on my survey results.

When to use Sharp Corners?

Button & Dialog Boxes (Individual)

As I’ve mentioned before, sharp corners drag our attention for some use cases. When considering Buttons and Dialog boxes, some of the use cases found from the survey results are for;

  • Important and attentive content boxes.
  • Buttons that need to be noticeable.
Left: Fully curved corner | Centre: Curved corner | Right: Sharp corne

Therefore, sharp corner UI elements fit well into elements that require user attention.

Then, I’ve carried out the same survey by grouping these buttons to understand their effect.

Grouping Buttons

Interestingly, when we group several buttons, people start to change their preferences.

1*4WGxQ1eCUkZ1cYGyHMEbBQ.png?q=20
rounded-corners-over-sharp-corners-f71008a51afb
Left: Sharp corner | Centre: Curved corner | Right: Fully curved corner.

Most survey participants preferred the sharp-cornered button (the left-most one in the below image) even for use cases where it doesn’t require close attention.

Then I’ve evaluated whether there is an impact if we use a mix of different containers for these groups.

1*Aby_gYBft51yPalTun8qpg.png?q=20
rounded-corners-over-sharp-corners-f71008a51afb
Left: Sharp corner | Centre: Curved corner | Right: Fully curved corner

The results were far more interesting. The majority preferred having a Sharp Corner container for curved corner button groups.

However, many prefer not to mix different Corner types. So it is better to stay away unless there is a solid reason.😊

Grouping Button: Experiment with Filter Components

I’ve evaluated the use of buttons as a filter element to understand the implications of button grouping when considering different Corner types.

Again the results in the survey indicate that majority prefers the filters with Sharp Corners.

1st section: Sharp corner filter tags

Besides, it is essential to note that there could be other contextual impacts when choosing different corner types. For example, people working in the medical industry might prefer some and in creative work would like another.

Therefore, don’t jump to conclusions and take these survey results as a rule of thumb. Instead, I would highly recommend you to carry out further A/B tests for your application audience.

Key Takeaways

However, I’ve summarized the results from the survey for your quick reference, as shown below.

Note: The choice of corners may differ based on the device or the mode, such as mobile version or web.

Conclusion

As you have seen, there are many options to make your UI look better and attractive.

There are no hard and fast rules to use only rounded corner elements, and you should always make sure not to overuse them. Also, carry out the usability tests with your users before coming to conclusions since many other factors could impact their choice.

Let me know your thoughts on this by commenting down below.

Thanks for reading!!!😊


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK