Why text buttons harm the usability of mobile apps

Button usability standards for mobile apps are higher than for desktop apps. With a smaller screen size and touch navigation, mobile buttons should be easy to press, read and recognize. Most solid buttons conform to this standard, while text buttons only rarely. Before using text buttons in your application, here s what you should know.

Text buttons are harder to click

The finger is larger than the mouse cursor. Users find it inconvenient to place it on a smaller target. The finger covers the button text with no visual cue to confirm whether the action is logged. If the text label is long enough, the user will get a little visual cue, but not enough to make sure the goal has been achieved.

The small size of the text buttons forces users to precisely move their finger to “hit” the target. Greater accuracy requires more effort from users. They have to keep an eye on their finger and aim to make sure they are pressing the text button.

The lack of straight edges makes it difficult to define boundaries and makes it difficult to target the button. Solid buttons do not have this problem because they have a large pressing target and straight edges.

All-caps text buttons are harder to read

To solve the problem with clicking text buttons, some designers make them in uppercase. Google s Material Design system supports this button style, however, it has its drawbacks.

A text button written in capital letters has smoother edges and a larger purpose. But these are minor improvements as the target is only slightly larger and the style of the text makes it less readable.

Capitalized text is more difficult to read, especially for dyslexic users. Users rely on the shape of the letters to identify words. Capital letters do not have contrasting ascending and descending elements, which makes it difficult to read words at a glance.

Text buttons are harder to recognize

The difference between text buttons and text is only in color. This makes it difficult to recognize text buttons, especially for color blind users. Without a clear form, users will likely miss the text buttons and miss the call to action.

What to use instead of text buttons

Many people use text buttons as a secondary action to indicate that the button has a lower priority. But there are better ways to do this without compromising the usability of the mobile app.

Outline button

One way is to place an outline around the text label to make an outline button. This makes the border of the button visible, which gives users a larger and more understandable click target. Their finger can land anywhere within the contour to take action.

The lack of a solid background prevents it from competing with the main call to action. The light yet visible outline is perfect to not compete with the text label.

Light buttons

Another alternative to text buttons is to put a text label on the light colored buttons. The light button shows the difference between the button border and the background, while not competing with the main call to action. The tint of the button should almost blend in with the background while maintaining sufficient contrast to be visible.

It has more visual weight.

The outline and light buttons work well for secondary actions. But the light button has a little more visual weight and is more comfortable to press. The background of the button gives the finger a firm target as opposed to a thin outline.

When are text buttons appropriate to use

There are times when it makes sense to use text buttons. Instead of using them for secondary actions, use them for tertiary actions. Users rarely take tertiary actions and they don t require much attention. Primary and secondary actions are more important, so they need more visual weight.

Another time text buttons make sense is when users need help taking action. Use text buttons when you need to provide contextual information to users to help them choose the best option. Text buttons prevent users from seeing help as a call to action because they are not in competition with other buttons.

Don t overuse text buttons

It s easy to add lots of text buttons to an interface because they don t take much effort to design. But the consequence is frustrated users who have trouble reading, recognizing and pressing your buttons. Don t be lazy or overuse text buttons. Your calls to action can contain text, but they should always look and feel like buttons.