Are You Obsessed With App Buttons Like I Am?

Okay, here’s the thing every time I find myself creating mobile app UI designs, I’m always stuck and obsessed with finding the right size and radius (if any) for primary buttons. It gets so crazy that I can go back and forth a million times before I decide which size to use. You know, I don’t want the button too small to click on the app and I also don’t want it soo big it’ll begin to screw up the visual hierarchy. One time I was working on a E-commerce app, I was basically done with the project, only for me to go back and edit all the buttons. OCD? maybe…are you like me? Then you’re not alone. But don’t worry, we’re going to talk about rules guiding buttons and how you can pick the perfect sizes depending on what kind of mobile app you’re working on.

Let briefly see some rules guiding button ui design:

1. Size: Android’s Material Design principles recommend that touch targets should be at least 48 x 48dp, with at least 8dp (or more) between them. This is to ensure balanced information density and usability.
2. Color: UI button visuals have undergone extensive changes over the years, but one thing hasn’t changed: the use of color and contrast that guide users towards taking meaningful action. Users crave predictability and familiarity, so use color to help them identify and interpret your app’s content and interact with the right elements. Remember that whichever color palette you choose will determine how users will recognize and remember the elements in your user interface. The colors in your UI should help users navigate buttons and anticipate the actions behind each click, as well as match your brand.
3. Shadows: When it comes to priority tasks, you should remove any friction that slows down the user’s progress to ensure that they can follow through with the task. By pairing color and contrast with clever layering, relief and subtle shadow you can create the illusion of 3-D on a flat screen. This draws attention to promoted or primary actions and distinguishes them from surrounding UI elements. Similarly, drop shadow and highlights help users to interpret visual hierarchy and understand which components are interactive. Consider adding highlights between the most important buttons to distinguish between primary and secondary buttons. The correct use of layering and shadow along with the proper positioning of elements will help you reach those higher landing page conversions because users will likely notice the Call to Action (CTA) button and engage.
4. Location: It’s all well and good to design buttons that stand out and provide visual feedback. But if the user can’t see the button, it’s all been a waste of time. Location, position and order are key, so place your buttons where users are going to find them: in the user’s path. When designing for iOS, clarity, deference and depth are your 3 objectives. Buttons should be precise and lucid and should be placed for ease of scanning and to communicate the priority of the tasks. In Android, the floating action button represents the primary action of your app and therefore only one is recommended per screen to represent the most common action, increase its prominence, and reduce decision fatigue by giving users the best, most distinct, and fewest options. It is placed 16dp minimum from the edge on mobile.
5. Label: There’s nothing more frustrating for a user than being unable to complete an action due to incoherent or a complete lack of guidance. Label buttons with a clear message of what they actually do to avoid the user blues. Using clear and distinct labels with help you eliminate ambiguous user guidance and make for a seamless experience.

With these out of the way now, let’s be a little bit practical, let’s assume you’re creating a mobile app for whatever brand, and now, you want to design a button for payment, the first thing you can do is to find a label right? Let’s go with ‘Buy now’, the next step is to determine the button size, since it’s a primary button you can use the full width of the screen excluding the margin of course, now we have our width, what’s next? The height of course, this is where things get a little bit tricky, from the rules above at least 48px is recommended right? but sometimes, 48px can appear a little bit small, the day I realized this was the day my real obsession began, I started studying other designers’ systems, real apps and rules that will help me, until I came across the 8-point rule, a design system if scaling, sizing and spacing using multiples of 8 and I realized that pro designers used it. I made a quick research and I found out that the best height to use for mobile primary buttons is either 56px, 64px and 72px, which are all supported by the 8-point rule system, which I will discuss in another article. So let’s go with 72px for our buy now button, so picture it now, a product page with details of the product and price with a buy now button with 72px height, awesome. Next is the radius, and to me this depends on the brand’s attributes, Microsoft uses buttons without radius and Adobe uses buttons with full radius and it aligns with their attributes, for example, if the app we’re designing is a kids toy brand you definitely want to use a fully rounded radius, e.t.c. Let’s assume it is a kids toy brand, so we’re going for a fully rounded button. Finally what’s left is the color. This depends on the action, the brands palette and the priority. For this buy now button, we can use a cool green to try to nudge users to make that buy instead of using red, which will be weird.

So I hope this can help relieve your button obsession and make you feel more at ease when deciding on primary button structures. Danke.