Do rounded buttons perform a better usability?

TL;DR 

• Yes, rounded buttons improve usability. 
• Research by Dipayan Biswas, Annika Abell, and Roger Chacko shows that rounded CTA buttons get significantly more clicks than sharp-cornered ones, with click-through rates (CTR) 17% to 55% higher. 
• Rounded corners attract attention by providing visual distinction, guiding focus inward, offering larger touch targets, establishing a clear hierarchy, and appearing friendlier and more modern.
• To enhance button visibility and usability, ensure high contrast, appropriate size, predictable placement, clear visual hierarchy, and incorporate microinteractions.
• Use rounded buttons consistently and in logical groups for the best results.

Detailed answer

Rounded buttons have indeed been shown to have a subtle, yet measurable, positive impact on usability compared to sharp-cornered buttons. 

Research by Dipayan Biswas, Annika Abell, and Roger Chacko showed that rounded CTA buttons get significantly more clicks than sharp-cornered ones. Here are some key findings:

• Click-through rates (CTR) for rounded buttons were 17% to 55% higher.
• Restaurant ads using rounded buttons had a 24.6% increase in CTR, with a 16.8% rise in online food orders.
• A landing page for an event planning tool saw a 55.5% improvement in CTR with rounded buttons.
• In a lab setting, students were 46% more likely to click on a rounded button for an additional survey.
• Shoppers purchasing smartphone accessories added 25.7% more items to their carts when rounded buttons were used.
• Eye-tracking research showed people looked at rounded buttons 28.6% longer, and their gaze returned to these buttons 61.8% more often.

However, the choice between rounded and sharp corners isn't a simple binary decision – it depends on the specific context, aesthetic goals, and user expectations of your application.

Why do rounded corners attract more attention in an interface?

We've touched on this topic earlier, but here’s a closer look at why rounded corners draw more attention. Here are the main factors: 

Visual distinction: Rounded corners can make buttons stand out from other UI elements, especially when placed against sharp-edged containers or backgrounds. This visual distinction helps users quickly identify interactive elements.

Focal points: Rounded corners subtly guide users' attention toward the center, emphasizing the content within the container. This gentle direction helps keep users focused on what matters most: the content itself.

Finger-friendly targets: On touch devices, rounded buttons provide larger target areas for fingers, making them easier to tap accurately. This is particularly important for buttons placed near the edges of the screen.

Content hierarchy: In complex interfaces with many buttons, using rounded corners for primary or frequently used actions can help establish a visual hierarchy and guide users' attention.

Aesthetic: Rounded buttons often appear more friendly, approachable, and modern compared to rectangular buttons. They can contribute to a cleaner, more polished look in the interface.

Pro tip: Rounded buttons are most effective when used consistently and grouped logically within the interface. Avoid mixing rounded and sharp-edged buttons unless there's a clear reason to differentiate them.

What variables can increase button visibility and usability for users?

To improve button visibility and usability, consider these key factors:

• Contrast: Ensure the button's color stands out against its background. Use color contrast tools like the WCAG contrast checker to meet accessibility standards. High contrast improves readability, especially for users with visual impairments.
• Size: Make buttons large enough for easy tapping or clicking, particularly on touchscreens. Follow guidelines such as the Apple Human Interface Guidelines or Google's Material Design, which recommend a minimum touch target size of 44x44 pixels for touchscreens.
• Placement: Place buttons in predictable, easy-to-find locations, following common design patterns. Following common reading patterns, such as placing buttons where the eye naturally travels, can also enhance visibility. For instance, primary action buttons are often placed at the bottom right of forms or dialogs because users expect important actions there. 
• Visual hierarchy: Establish a clear hierarchy using size, color, and positioning to differentiate buttons. Primary actions should be more prominent with bolder colors and larger sizes, while secondary actions can be less emphasized.
• Microinteractions: Add subtle animations or hover effects to provide visual feedback. These small touches confirm to users that their action was recognized, improving their overall experience. For example, you could change the button color when hovered over or add a slight press animation when clicked. Learn more about the effective use of microinteractions in our previous chapter.

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• What is the primary function of this button, and does its design clearly communicate this function to users?
• Does the button's color contrast sufficiently with the background?
• Is the button large enough to be easily tapped or clicked?
• Is the button positioned in a predictable, easy-to-find location that aligns with common design patterns and user expectations?
• Have I established a clear visual hierarchy, using size, color, and placement to distinguish primary actions from secondary ones?
• Have I added appropriate animations or hover effects to provide visual feedback and confirm button recognition?
• Am I using rounded buttons consistently throughout the interface to avoid confusing users with mixed styles?
• Have I tested the usability of these rounded buttons with real users to validate my design assumptions and gather feedback?
• Have I considered the specific context and user expectations for my application, and does the rounded button design fit these criteria effectively?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Using rounded buttons excessively, which can dilute their impact and make the interface look cluttered.
• Mixing rounded and sharp-edged buttons without a clear reason, leading to a disjointed user experience.
• Failing to ensure sufficient color contrast between the button and its background, reducing visibility and accessibility.
• Making buttons too small for easy tapping or clicking, especially on touchscreens.
• Not incorporating microinteractions like hover effects or animations, which help users recognize and confirm their actions.
• Using rounded buttons inappropriately for certain actions, such as complex nested options, where other designs might be more effective.
• Skipping usability testing with real users, leading to assumptions about effectiveness that might not hold true in practice.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Make sense of rounded corners on buttons by Shan Shen
• The Rounded User Experience by Sandhya Subramaniyan
• Rounded CTA buttons drive more clicks by Thomas McKinlay
• Common UI mistakes and how to do it right by Spaceberry

📚 Keep exploring 

Never stop growing. Explore resources thoughtfully handpicked by Cieden’s designers. 

• How do I select the appropriate shapes for my design? by Karyna Khmelyk
• What does a rounded interface mean? by Karyna Khmelyk
• Why Rounded Corners Are Easier on the Eyes by Anthony