Buttons are a very common UI element used in all types of products, digital and physical alike. They help users accomplish a task, like calling an elevator or submitting an online form. In this article, we discuss how to design the clearest, most effective button for your iOS apps, but the principles are the same for websites, watch apps, physical products, and beyond.

Let’s start with the basics. Buttons should clearly convey their purpose. There can be a sense of confusion or anxiety for users when they don’t know what action a particular button will perform. Worse yet, they may tap on a button assuming it does one thing, and when it does something else, they’re left frustrated. Whatever the negative emotion, unclear buttons can prevent users from having a positive experience with your product.

So, how can you make sure your buttons are clear? Precise language, distinct icons, and meaningful colors can make a huge difference. In the button below, the sunshine icon alone doesn’t properly communicate the purpose to users. It could mean “Change to Light Mode,” “View the Weather,” or any other number of things. Adding the word “Brighten” gives the user more information about what will happen when they tap the button.

When a user interacts with a button, the button should communicate that it “hears” the user’s interaction. This is called feedback. Sometimes, it’s bigger action like navigating to a new page or deleting a card, but other times, it’s a visual change to the button itself. For example, when a button has been touched but not fully tapped, you may want to scale it down or reduce it’s opacity (don’t forget to reset the scale and opacity when the user removes their touch!)

After ensuring that your individual buttons are clear in their appearance and behavior, you have to add your buttons into context, sometimes around other buttons. Some buttons are more important than others, so you want to draw users’ eyes toward the most important button first. This can be done by varying the buttons styles or using a different button variant from your design system.

Important buttons should have a background color with full opacity, as this attracts more attention than others. For native buttons, this style is called ”Filled.” Buttons that are less important might use one of the other native button styles like Plain (no background), Gray (translucent gray background), or Tinted (translucent version of the title color).

Even if you don’t use the built-in native button styles, you should vary the color or transparency rather than size of the button to indicate hierarchy. 

If you implement these tips when creating buttons in your design system, your users will have a smooth experience completing tasks in your app. Check out Apple’s best practices on native buttons for more!

Once a button is tapped, users should know the resulting action has been accomplished.

If the user has no idea what your button does, they may ignore it or worse, they may press it and be frustrated with the resulting

There can be a sense of anxiety for users when they don’t know what action a particular button will perform, which can prevent them from having a positive experience with your product.

Some buttons are more important than others, so you want to draw users’ eyes toward the most important button first. This can be done by varying the buttons styles.

Buttons should convey their purpose through style, content, and behavior. Native buttons include presets to make this simple.

1. Fill it. Important buttons should use the filled style, as this draws more attention than others.

2. Style over size. Create hierarchy by mixing different styles, like filled and tinted.

3. Keep it clear. Make sure a button’s icon and/or title helps communicate its purpose.

4. Give feedback. Changing color, scale, or adding haptics gives users confirmation of their action.