Why Text Buttons Hurt Mobile Usability

From UX Movement http://bit.ly/2XpPpRv

The usability standards for buttons are higher for mobile apps than desktop apps. With a smaller screen and finger navigation, mobile buttons must be easy to tap and read. Most solid buttons meet this standard, but text buttons rarely do. Before you use text buttons on your mobile app, here’s what you should know.

Text Buttons Are Harder to Tap

A finger is larger than a mouse cursor. Placing it over a smaller target feels awkward for users. Their finger covers the button’s text with no visible border to confirm if their action was executed. If the text label is long enough, users have a small visual cue but still not enough of one to assure users their action registered.

text-buttons-cues

The small target size of text buttons forces users to move their finger with precision to hit the target. More precision requires more effort from users. They have to keep their eye on their finger and the target to make sure they tap it.

The lack of straight edges makes the borders harder to distinguish and the button harder to target. Solid buttons don’t present this problem because the target is larger and has straight edges.

All Caps Text Buttons Are Harder to Read

To combat the tapping problem of text buttons, some designers style their text buttons in all uppercase. Google’s Material design system promotes this button style. All caps give the text straighter edges and make the target larger to tap. But this isn’t much better because the target is only slightly larger and the text style reduces readability.

all-caps-edges

All caps text buttons are harder to read, especially for dyslexic users. Users rely on the shape of letters to identify words. Uppercase letters don’t have contrasting ascenders and descenders, making words harder to recognize.

all-caps-shape

What to Use Instead of Text Buttons

Many use text buttons for their secondary action to show that the button is the lower priority one. But there are better ways to do this that won’t hurt usability.

Button Outline

One way is to place an outline around the text label. This makes the border of the button visible for easier tapping. Users will see the target their finger is hitting, giving them a better feel when they tap it.

The lack of a solid color prevents it from competing with the main call to action. Keep the button outline light yet visible so it doesn’t compete with the text label.

text-button-outline

Light Button Shape

Another alternative to text buttons is to put the text label on a light button shape. A light button shape distinguishes the button borders and background without competing with the main call to action. Light button shapes should almost blend into the background but still maintain enough contrast for visibility.

text-button-shape

When Text Buttons Make Sense

There are cases when text buttons make sense. Instead of using them for secondary actions, use them for tertiary actions. Tertiary actions don’t get as many taps and don’t need as much prominence. Primary and secondary actions are more important, so make sure they have more visual weight.

tertiary-action-button

Another case when text buttons make sense is when you’re helping users. Providing users with contextual information helps them choose the best option. But you don’t want users to perceive the help button as a call to action. A text button works well here to offer help without competing with other actions.

contextual-help-actions

Don’t Abuse Text Buttons

Sometimes there are certain buttons you don’t want to draw too much attention to. You may think it’s best to use text buttons to achieve this, but you’re making your buttons harder to tap and read. Don’t abuse text buttons. Make your buttons look like buttons, not text.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.