Designing high converting buttons
Buttons may seem like a small element in user interface (UI) design, but they have incredible power when it comes to driving user actions. Let’s take a look at some of the factors that contribute to creating buttons that drive conversions.
Size Matters
When it comes to buttons, size does matter! Starting with a recommended size of 44x44 points for mobile devices sets a solid foundation. But why stop there? The sweet spot for mobile button height is around 50 points, making them easier to tap and interact with. Don’t underestimate the power of larger buttons on desktops — they not only catch attention but also make interaction a breeze.
Padding
Ever encountered misaligned or unevenly spaced buttons? Properly aligned and evenly spaced buttons are essential for a polished UI. Ensure your button labels are centered both horizontally and vertically. When it comes to spacing, apply the 2x:1x ratio — horizontal:vertical spacing.
Text Case
To shout or not to shout? That is the question. While ALL-CAPS labels might seem attention-grabbing, they actually take a bit longer to process. Reserve them for short labels like “DOWNLOAD” or “SAVE.” For longer labels, go for title case — it’s easier on the eyes. Remember, brand consistency matters, so align with your brand’s communication style.
Corner Radius
Buttons come in different shapes and sizes, even corners make big difference. Sharp, slightly rounded, larger radius, or even a pill-shaped border — the choices are endless. But tread carefully! Aligning the corner radius with your brand’s visual identity is crucial. Sharp corners fit well if your logo and elements boast similar shapes. Opt for slightly rounded corners — they are popular and user-friendly. Just keep in mind that larger corner radius can make text alignment a bit trickier. And for those all-important call-to-action (CTA) buttons, a “pill” style works wonders.
Call to Action
Now, what everyone’s focus is on — the call to action! Placing your buttons strategically is key. Think below descriptive elements and along the left edge (the F-pattern). Our scanning habits naturally lead us to the CTA button, so leverage this pattern to your advantage. The strongest visual element should be at the bottom to avoid slower processing. Your buttons should stand out and never fight with other elements in the background. Make them irresistible!
To sum up
By paying attention to size, padding, text case, corner radius, and strategic placement, you’ll elevate your UI design and create an intuitive user experience.
Of course, these are only a few key factors to creating buttons that convert while keeping in mind the usability and accessibility for users. What are your secret sauce to creating your high converting buttons?
Check out more design and career tips on my instagram. Happy button designing!
