11 Tips on Designing Mobile Buttons

We’ve all seen them — rectangular or round, solid or outlined, flat or dimensional — buttons are crucial and ubiquitous UI elements. In theory, buttons are interactive UI components that help users navigate between pages and complete tasks like ordering food or booking a flight.

According to market and consumer data research from 2023, more than half of worldwide web traffic comes from mobile. Imagine how many users you’d lose if they found it hard to tap the buttons on your app. Adhering to core UI design principles ensures that buttons are both functional and accessible. In mobile apps, the design of buttons, including considerations for size, shape, and padding, is crucial for user interaction and overall usability.

To save you the trouble, here’re 11 tips to create the perfect mobile buttons — they’ll be easy to spot, provide enough feedback, and guide your users to the right destination.

Understanding Buttons in UX Design

Buttons are a fundamental user interface element that plays a crucial role in facilitating user interaction and navigation within a digital product. In UX design, buttons are used to initiate actions, submit forms, and trigger specific functions. A well-designed button can make a significant difference in the overall user experience, while a poorly designed button can lead to frustration and confusion.

Think of buttons as the bridge between the user and the digital world. They are the touchpoints that allow users to interact with your app or website, making them essential for a smooth and intuitive user experience. Whether it’s a primary button guiding users to complete a purchase or a secondary button allowing them to cancel an action, each button must be designed with the user’s needs in mind.

Provide optimal button size and touch area

If you’ve ever designed buttons, you know that the size of a UI button is one of the essential characteristics that can make or break the whole user experience. Button design for mobile is a tricky concept, as buttons should be large enough for users to interact with. At the same time, they shouldn’t break the visual hierarchy and compositional harmony. User interface elements play a crucial role in creating a clear visual hierarchy, enhancing user experience by distinguishing primary actions from secondary ones.

According to the Web Content Accessibility Guidelines (WCAG) recommendations, the touch zone for mobile buttons should be at least 9x9mm, regardless of the screen size, device, or resolution. It’s the average size of a human finger pad area. Material Design Guidelines advise a minimum 48x48px touch area which corresponds to around 9mm.

Stick to traditional button shapes with rounded corners

When it comes to the button shape, rectangular buttons with slightly rounded corners are the safest choice — they ensure balance, symmetry, and trust. Rounded corners feel safer and more natural to users' eyes, while sharp edges may imply a threat.

Users are also quite familiar with circular buttons — for example, floating action buttons (FAB) that define the primary action on the page.

We don't want to undermine your creativity, but sticking to these shapes guarantees predictability, giving users a sense of control and comfort. Plus, it will prevent friction and unexpected product abandonment.

If you still decide to swim against the stream and try an unusual button shape, make sure to find ways to teach users so they can identify and recognize them as buttons.

Tip! Discover the different types of UI buttons and their use cases in the Intro to UI Buttons lesson.

Make it Look Clickable

One of the essential principles of button design is to make it look clickable. A button should clearly communicate its interactive nature to the user. On desktop devices, a button should have a distinct visual appearance that indicates it can be clicked. This can be achieved through the use of rounded corners, shadows, and subtle animations. On mobile devices, where hover states are not applicable, designers should focus on creating a clear and consistent visual language that indicates interactivity.

Visual cues like slightly rounded corners and shadows can make buttons appear more tangible and inviting. Subtle animations, such as a slight change in color or elevation when tapped, can also enhance the perception of interactivity. These design elements help users quickly identify buttons and understand their functionality, leading to a more intuitive user experience.

Prioritize button colors by importance

Color is more than a decoration tool. First off, when it comes to button design, color brings clarity and recognition. Secondly, it indicates the level of importance of an element. Users expect the brightest interactive element on the page to be the primary button — the tool that helps them achieve their main goal and complete a task. That's why you should carefully choose colors to help users identify buttons and interpret their purpose with no difficulty. Button color should also define your brand and/or product personality.

When it comes to the Call-to-Action button, it should carry a strong visual weight, stand out among surrounding elements, and encourage users to interact with it.

Secondary buttons like Cancel or Back should be less prominent — it will reduce the risk of confusing them with primary buttons. Avoid making secondary buttons too pale, as users may think they are disabled.

In addition, color helps users understand the button's state. Hover/tap and active states should be distinct enough from the default or disabled state.

Tip! Take our course on Color Psychology for more insights into how users perceive and are affected by colors.

Maintain accessible color contrast ratio

Contrast goes in tandem with color. Apart from making buttons prominent for users with good vision, setting the right contrast makes them accessible to visually impaired users. Approximately 4.5% of the global population live with color blindness (that's 1 in 12 men and 1 in 200 women). At least 2.2 billion people have a near or distance vision impairment, and about 39 million people are believed to be completely blind. As designers, we should remember to be empathetic and keep inclusivity as a top priority.

According to the WCAG recommendations, the color contrast ratio between background and foreground for normal text should be 4.5:1. To calculate the contrast ratio between the button's label and background color and ensure it meets WCAG, you can use Coolors or WebAIM checkers.

Tip! Explore our Design Accessibility course for more recommendations on color contrast, text formatting, and other visual properties that help create products suited to all users. 

Balance shadow design

Flat buttons went out of style for a reason — they don't look interactive and/or encourage users to tap them. Shadows, however, make buttons look more like physical buttons on household appliances. They create an illusion of depth and clearly indicate priority, distinguishing them from other page elements.

However, it's important not to go overboard with shadows — disproportionately big and dark shadows will make the layout seem dirty and visually cluttered.

So, what's the magic recipe for button shadows?

• Instead of the default black or grey, use a color that's similar to the button's color
• Keep the opacity under 40%
• Make the shadow smaller than the button

Don't use shadows for the sake of aesthetics only — their purpose is to complement the button and emphasize its depth.

Establish button visual hierarchy through visual cues

When there's more than one button, indicate the buttons' priority and purpose with visual cues like color, size, contrast, borders, and shadows.

The primary button should always be the most prominent button on the page. For example, floating action buttons always represent the main or the most common action. It is usually the only button of its kind — it doesn't stand any competitors. 

The secondary buttons represent actions that are one step less important than the primary action. To indicate their level of priority, use ghost or outlined buttons.

Text buttons are text labels without containers. They are perfect candidates for actions with less emphasis, like secondary or even tertiary buttons.

Maximize tap accuracy through adequate button spacing

White space creates a minimalistic and elegant look. More importantly, it enhances readability and draws users' attention to the elements. When it comes to mobile design, space is even more essential. As humans have limited processing brainpower, apps that throw too much information at their users make them feel overwhelmed. Every extra button, image, or icon might be the last straw to make users abandon a task.

If the page contains more than one button in a row and they're too close to one another, users' fingers can slide off and miss the target. Leave your buttons some breathing space, and make sure it's enough for a high tap accuracy.

Tip! Make sure buttons in a row have at least 12px between them.

Provide optimal visual feedback

In the physical world, when you press a button, it responds to your interaction. Subconsciously, we expect the same experience when communicating with digital controls. Providing visual feedback to reward user interaction enhances user engagement by informing users that their actions are recognized and encourages them to continue interacting with the UI. In other words, if users struggle to understand if it’s a button or label or if it’s clickable or disabled, it means your app doesn’t provide enough feedback.

What kind of feedback can you create for buttons?

• Visual: Elevated buttons with a natural shadow and color that changes on tap are irresistible. A nice subtle animation can also encourage users to move forward.
• Tactile: A slight device vibration on tap helps users understand that the system has registered their action.

A final reminder — keep the button design tasteful and functional. Using all visual and tactile tools at the same time can easily overwhelm users.

Place buttons intuitively

Making users embark on a button hunt is a bad idea — buttons should always be where users can see them. Regardless of how visually appealing your design might look, buttons that are hard to discover will irritate users and can potentially make them abandon your website or app altogether.

You should place buttons where users expect them to see them. One of the most traditional layouts is a zig-zag layout which is known as the Gutenberg Principle. The principle states that users' eyes scan the page in a Z-shape from the top left to the bottom right corner. This scanning path is also called reading gravity.

Placing the primary button at the bottom of the page allows users to read the information first and take action when ready — instead of searching all over the page for the button. Another advantage of the bottom placement is that it becomes more prominent and easy to tap.

Tip! Use sticky buttons that are fixed at the bottom of the screen for long pages with endless scrolling.

Provide meaningful button labels

If we compare users to travelers on a journey, labels act like directions, guiding them through an app or a website. Clear labels help users prioritize tasks by making it evident what actions they need to take next. Button labels should be as straightforward as possible, telling users what happens after they tap the button. In other words, labels should clearly state what users will get when they complete the action.

Avoid using generic, ambiguous copy like “yes” or “no” — it doesn’t say much about the result of the action. Instead, go for labels like “Save changes” or “Remove item” — something more descriptive to clarify what happens next.

Clear error message labels are vital for users with color blindness as they don’t rely on color and might not perceive red.

Ensure visual consistency of an interface

According to the Principle of Least Astonishment, users don't like surprises and unexpected system behavior — unless the surprise implies some reward. For example, free flight tickets to an all-inclusive spa resort in the Maldives.

But jokes aside, when it comes to UI, things shouldn't cause a stir. The design principle of consistency is meant to eliminate confusion and bring in predictability and comfort.

In terms of buttons, consistency includes:

• Visual consistency: The same buttons should look the same throughout the product. If you use a solid blue button with a "Save" label for saving changes, you should stick to this styling in all places where the button appears. The same rule applies to button placement.
• Functional consistency: The same buttons should work similarly throughout an app or a website.
• External consistency: If your product has a website and an app, buttons with the same functions should look the same on both platforms.

Test Your Button Design

Testing your button design is crucial to ensure that it meets the user’s expectations and needs. There are several methods to test button design, including usability testing, A/B testing, and heat mapping. Usability testing involves observing users interacting with the product and gathering feedback on the button design. A/B testing involves comparing two different versions of the button design to determine which one performs better. Heat mapping involves analyzing user behavior and identifying areas of the product that receive the most attention.

In addition to these methods, designers can also use analytics tools to track user behavior and gather data on button performance. This data can be used to inform design decisions and optimize the button design for better user experience.

By following these principles and testing methods, designers can create effective button designs that enhance the overall user experience and facilitate user interaction. Testing ensures that buttons are not only visually appealing but also functional and user-friendly, helping users navigate and complete tasks with ease.