Improving comprehension through intuitive actions

Published in

Google Design

9 min readFeb 5, 2021

Illustration by Mingguo Li, Next Billion Users illustrator

I wrote this story with Susanna Zaraysky, a Content Strategist on the Material Design team.

“You are not your user” is a common UX mantra and one to keep in mind when designing for maximum user understanding. Starting with the basics: Your users may not have the same relationship to technology as you do.

Touch interfaces, audio and video media make technology less reading-dependent, allowing more people access. However, those who are illiterate and low-literate still experience challenges. The ability to read and technology fluency impact how people interact with mobile devices.

Making actions clear — such as how to preview a video — builds trust. Users will feel confident they can use your product and understand what an action will do. To learn more, read Designing for Digital Confidence.

Mental models

Understand how your users think and you may uncover what many designers take for granted.

A mental model is a user’s thought process about how something works. Learning about mental models will help designers understand how the people using their products interact with what they see on the screen.

First-time internet users will not have the mental models of how to interact with technology as someone with years of exposure to the internet, computers, and devices. In the CNN Asia report Connecting the Unconnected, Hassan Baig of ClubInternet in Pakistan explains that new users may not understand sign up flows, usernames and passwords, or how to use gesture-controlled technology on smartphones.

For example, empty text fields may mean nothing to a first-time user who may not know where to tap or type. The ClubInternet video “Is Google Usable” shows how a former feature phone user doesn’t know where to tap or type a search query on the Google homepage. The user is able to read and has heard of Google, but has never used the internet before. (Google has since improved empty text fields to make them easier to find and fill out.)

The lack of mental models may create various hurdles for new internet users, including not understanding these common features of apps and websites:

Gestures (swipe, drag, drop, long press)
Usernames and passwords
Spinning wheel icon, denoting waiting
Using the QWERTY keyboard, after using a numeric keyboard on a non-smartphone device
Decorative icons with no function
Text fields

Strategies

Use tooltips and onboarding to show how to use your app
Combine icons with text labels
Explain what loading icons mean with tooltips
Teach the user how to perform gestures via tooltips or animations
Include an animation showing how to enter text in a text field

Listed below are some examples of common comprehension problems and how wise design choices can improve user understanding.

Labeled actions

Confusion with text-only call-to-actions

Call-to-actions (CTA) are important UI elements used to navigate, modify state, and record user intent. They are an integral part of app design. For example, a “Save” button used in app design is a CTA. Thoughtful button and action design is essential to a positive user experience.

Text-only buttons and CTAs present several potential problems around scannability and comprehension. They often require the user to read the text each time they appear, making them difficult to scan. Lacking visual cues, such as color and capital letters, these text-only actions may be indistinguishable from body text — leading to further confusion. Nor visual boundaries limits their ability to communicate tappability.

It’s also important to be aware of how the language scripts used in your products impact understanding. While languages such as English have capital letters, others like Arabic, Hindi, and Thai do not. Because of this, avoid calls to actions that rely solely on capitalization. For example, a button with the word “SAVE” in all capital letters may stand out compared to body text written in sentence case in English, but a text-only button in Hindi needs additional differentiation, perhaps using color, as well. And yet another word of caution: Calls-to-actions that only rely on color are especially challenging for users with visual impairments.

See the Material Design accessibility guidelines about including accessible color contrast and other visual cues besides capitalization.

Color is the only visual cue that differentiates the blue text buttons from the black body text. (1) Caution: Since Arabic has no capital letters, text buttons could be confused as body text if viewed by someone who is color blind or using a desaturated screen. (2) Caution: In English, with the exception of the body text following sentence case, the same confusion could occur.

Confusion with icon-only calls-to-actions

Calls-to-actions that rely on icons alone may not clearly communicate their purpose. Icons do not have the same meaning, relevance, or popularity in every region. Or, in environments with bright sunlight, buttons that communicate tapping can be hard to see, especially on low-resolution screens.

In these cases, icons can be mistaken for logos, illustrations, or state indications, such as backup status, and not perceived as actionable. If they do not use other visual cues, like a fill or outline, they are only minimally separated from other UI elements, especially on dense screens.

In situations where icons communicate ambiguous concepts, they may not be universally understood. For example the ‘close action’ (often symbolized using a large “X”) can indicate different end results, like closing a panel or a mode.

How often the action is used will also impact its recognition. Infrequently used icons are hard to remember.

(1) It can be challenging for users to understand which elements are interactive when relying only on the icons in the bottom navigation. (2) Users may not recognize that this “X” icon will not just close the bottom sheet, but exit navigation mode entirely .

Localize icons

Adapt icons and symbology to be relevant for your target market.

**Do:** (Left, Top) The Pay icon has an image of the Indian rupee currency. (Left, Bottom) Use a generic icon representing your concept for global relevance. **Don’t:** (Right) Avoid using icons that only have local relevance for global products, like a dollar sign to represent payment or money in countries beyond the US and Canada.

Pair text with icons

To avoid the comprehension issues that come with text-only actions, combine text and icons, when possible. As described in The Obvious UI is Often the Best UI and Designing the UI of Google Translate, pairing icons with a text label can improve the findability, understanding, scannability, and recall of the CTAs, such as buttons or tabs.

To clarify the meaning of an icon, combine the icon with a text label. Combining the two can help the user learn what the icon signifies.

**Do:** (Left) Pairing “Unlock your phone” with the icon can help users understand what to do and what will happen. **Don’t:** (Right) An unlocked padlock icon may not be understood by all users to be an unlock action.

**Do:** (Left) Combining the “Set alarm” text with the alarm icon makes it easier to understand. **Don’t:** (Right) The alarm clock icon may not be understood to mean “set alarm.”

**Do:** (Left) Users may not understand basic interaction icons, such as an expand icon. Include an action label that clearly describes what users can expect after tapping the icon. **Don’t:** (Right) Without a label, it’s hard to tell that the icon is actionable and what it does.

Encapsulating text and icon within a container

Containers around CTAs may improve discovery and usability. Containers, such as a contained button, use visuals to make it easier to distinguish between two nearby CTAs, such as two buttons. Containers also make calls-to-actions more obvious on low-contrast and cracked screens. Place containers around important calls-to-actions to indicate tappability. Adding a container around a button (in addition to using text and icons) can further improve findability and comprehension.

In some cases, the container + text + icon combination is not possible because not all text has a related icon. For example, many “OK” and “Got it” buttons don’t have icons. In those cases, text-only buttons may be easier to identify when they are within a container, because they are more visible against the background.

In this example, “OK” and “Got it” buttons with a colored container combined with an icon increase discoverability and usability, compared to text-only buttons or outlined buttons.

Choosing the right button

For significant actions, consider using filled, outlined, or tinted buttons to properly signal actionability. This will aid in user understanding and detecting which elements are actionable. Use this type of approach regardless of where your buttons appear on pages, cards, and dialogs.

To aid comprehension, consider pairing icons and text where possible.

Emphasis levels

High emphasis: Use filled styles for high emphasis buttons.
Medium emphasis: Use colored outlined and tinted buttons for medium emphasis buttons that still present significant actions for the user.
Low emphasis: Try to avoid using text buttons for significant actions, even if they are low emphasis, unless you combine text with other visual cues. Combine the text with an icon and use other visual cues, like a delineation and position, to signify actionability and distinction from the rest of the content.

**Do:** (1) High emphasis: The filled button style helps to clearly distinguish the action from the rest of the content.

**Do:** (2) Medium emphasis: Use an outlined style. (3) Medium emphasis: Use a tinted style.

**Do:** (4) Low emphasis: Use a filled text label button if there’s no good icon to pair with the action label. (5) Low emphasis: Text buttons can be used when reduced emphasis is desired.

**Don’t:** (6) Avoid text only buttons, without any additional cues, for significant actions as they are harder to distinguish from the rest of the content and easily overlooked.

Combining buttons

Use a combination of button styles of filled, outlined, or tinted buttons to focus the user’s attention and immediately direct them to a primary action.

To direct the user’s attention aiding the completion of the shopping checkout process, the “CHECKOUT” button uses a filled style with an icon. To highlight its lower importance, the “KEEP SHOPPING” button uses either outlined or tinted styles.

Use the same outlined or tinted button style when presenting equal options on dialogs, cards, or screens.

The “Allow” and “Deny” buttons for accepting storage permissions both use an outline style with icons, as they are of equal priority.

Use color to signal medium emphasis and greyscale for lower emphasis.

The purple filled-in and outlined buttons are of medium emphasis and the grey filled-in and outlined buttons are of low emphasis.

When actions are grouped, consider using 16dp horizontal spacing between buttons to improve tapping and targeting performance on mobile devices in bright sunlight and on devices with poor touch feedback or low-resolution screens.

There is 16dp of padding between the “Events” and “Share” buttons.

Floating Action Buttons

Floating Action Buttons (or FABs) are an effective way to highlight the most important action on screen. However, users have to understand the icon to comprehend what the action will and will not do.

To make the action more understandable and prominent, consider using extended FABs that present both icon and text.

Refer to the Material Design Extended FAB guidelines for implementation.

The Extended FAB has room for both the check icon and the “SEE ALL RESULTS” text label in capital letters.

Full-width actions

Consider adding horizontal margins to full-screen-width actions to visually distinguish actions from other screen elements so they are easier to detect. This is especially helpful on visually dense or colorful UI’s.

**Do:** (Left) Margins make it easier for users to visually distinguish actions, such as the full-width “ANSWER” and the “ASK A QUESTION” buttons with icons. **Caution:** (Right) It’s not clear that the full-screen-width “DELETE” button (without an icon) is actionable.

Card actions

When presenting a singular action on a card, consider using a high emphasis action like a full-width and colored-bottom action. In visually dense card designs, this makes the CTA stand out. Do not use full-width colored actions for presenting multiple actions that are equally important.

High emphasis card action guides attention to the primary action on screen.

Localization

When designing for languages that use long strings, consider vertically stacking your buttons so the action label does not have to be truncated and remains clear and readable to users. Ensure the primary action is presented on top. This allows it to be the most visibly prominent element after scanning content or reading preceding text on the screen.

Consider a minimum vertical padding of 16 dp to ensure easy targeting and tappability.

**Do:** (Left) Vertically stack buttons if the action labels are long strings. Consider using a wider button for easier targeting and tappability. **Don’t:** (Right) Avoid placing a button below another button if there is space to place them side by side.

**Don’t**: Avoid truncating buttons if there is enough space on the screen to stack them without the buttons being cut off from the screen.

For more information on localization versatility on small screens, visit To Make Apps Accessible, Make Them Compatible with Different Devices.

As you design and build your apps, have frequent check-ins with yourself and your team to create comprehensible user experiences. Are you making assumptions based on your own behaviors and interactions with technology? Test out your designs with new internet users and see if they can follow the flows you have created. Learn about different prototype methods for field testing.

Provide calls-to-actions that combine visual cues, such as background, icons, color, or labels, and make calls-to-actions distinct from surrounding content. This is especially true for actions where user guidance is important. The user will have the highest chance of successfully understanding what an action is meant to do by recognizing the icon, reading/scanning the text label, or a combination of both.

Additional reading

Accessibility Color Contrast (Material Design)
Contained buttons (Material Design)
Designing for Digital Confidence (Last Mile Money)
Extended Floating Action Button (FAB) (Material Design)
Text fields (Material Design)
The Evolution of Material’s Text Fields (Google Design Medium, November 2019)
The Obvious UI is Often the Best UI (Google Design Medium, October 2019)
To Make Apps Accessible, Make Them Compatible with Different Devices (Google Design Medium, August 2019)
Designing the UI of Google Translate (Google Design Medium, May 2018)
Nine ways designers can be more empathic and effective when creating products for emerging markets (Google Design, June 2017)
Sketch, Scroll, or Swipe? (Google Design, November 2017)

Videos

Connecting the Unconnected (CNN Asia, January 2015)
Is Google Usable (Vimeo, January 2015)