Overview

A Callout is a communication component that uses Secondary Emphasis and semantic sentiments to highlight important details and provide context for a flow.

What sets Callout apart from other communication components are two key factors:

1. They are synchronous: They load with the rest of the page content to provide context before taking action. There are other options for giving reactive feedback, such as Error Text—for Form Controls—, Confirmation, or Notification.
2. They cannot be dismissed: The message remains until the underlying situation is resolved. If the message is disposable, you shouldn’t use a Callout.

Types

Anatomy

Callout anatomy

1. Icon (sentiment signifier)
2. Heading (Optional in General Callout only)
3. Description
4. Link (Optional)

The Callouts are composed of an icon, a short description, and an optional link. They purposely lack properties like headings or actions that can distract people from their primary tasks.

Properties

How to use

Type

General

General Callouts are relevant to an entire page or an entire landmark. We should position them right below the page, landmark, or region header—to ensure people read them first so they can better understand the context.

Specific

In this case, the Specific Callout alerts the user about the potential consequences of performing an action. If people activate the 'Use a live prototype' feature once the maze is live, it can prevent tests from completing the mission.

Specific Callouts are related to a particular page element and should be positioned immediately below to associate them more effectively.

⛔️ Avoid using Callouts as Form Control errors

Callouts do not emerge when the error occurs, as they are loaded with the rest of the content. Additionally, we're missing an excellent opportunity to prevent the error before it happens.

✅ Leverage Helper Text and Error Text

A good Helper Text—available in all Form Fields—can prevent errors by providing context before people interact with the Control. Error Text provides reactive, in-context feedback with instructions to solve the problem.

⛔️ Avoid using actions inside a Callout

Actions must take place within the surrounding UI context rather than inside the Callout. The UI should be functional even without the Callout, as its sole purpose is to enhance the context.

✅ Explore alternative resources and steps

Consider reevaluating the flow and identifying areas where alternative components could better fulfill the required purpose.

Sentiment

Semantic colors are intended to draw attention to essential experience elements and, through specific sentiments, assign them a particular meaning that facilitates their differentiation.

Further reading

Examples

Warning

In this example, we are informing the user that performing an action like "Changing to live prototype" can have unexpected results for users.

Critical

Due to the lack of a website connection, the feature will not be functioning so action is required. In this scenario, users are not able to progress effectively.

Success

A success message informs the user about the success of a task.

Featured

In this example, we are letting the user know about important but neutral information in the context user needs to know. In this case, we are informing users that there is a new projects display.

Heading

In this example, it was necessary to develop the reason for the warning a bit further, so the message was split in two: Heading and Description.

Headings should be added when there is a lot of information to make it easier for people to scan. But we must use them sparingly to avoid diverting the focus of the task.

Writing guidelines:

1. Write Headings in sentence case (only the first word and proper nouns are capitalized)
2. Do not end with a period.

Description

In a Warning Callout, the Description should clearly indicate the necessary steps people need to take to prevent an error or problem.

Clear and concise descriptions help people understand the context and complete their tasks. Including too much information or links can be distracting and hinder their ability to do so.

Writing guidelines:

1. If there‘s a Heading, we must avoid repeating the same information.
2. It must go with a period at the end, except if it works as a Heading occupying only one line.

Best practices

To ensure effective communication, we must follow a consistent structure and order when writing our messages. They should include the following:

1. Main message: Clearly states the reason for displaying the Callout.
2. Additional info: Provides further details and suggests potential solutions for the main message, whether Warning or Critical.

Warning

1. Clear warning message/explain the situation
2. How to prevent a potential problem

Critical

1. Explain what is going on/what happened
2. How to solve the blocker

Featured

1. Explain what needs attention
2. Add extra details for context

Success

1. Clearly state what was achieved.
2.

Related content

Adding Links

Sometimes, people must go elsewhere to help solve an issue, learn more about a process they may struggle with, or improve their experience. You can add them as part of the Description.

Writing guidelines:

1. They should be four words or less to avoid wrapping.
2. They must be descriptive and meaningfully indicate the link’s destination.
3. They don’t necessarily have to be at the end of the sentence—they can also be part of it.

Related content

Sizing and spacing

We use standard sizing and spacing to improve the experience depending on the information density and make our interface more accessible, predictable, and easy to use.

Further reading

Full-width

Callouts are designed to adjust its width to fit within its parent container while accounting for any padding. Once they reach the maximum width allowed by the container, the text will automatically wrap to the next line, causing the height of the container to increase as needed.

Min-width

Callout are set to have a minimum width of 180px. Less than that, the information is hard to read and overall the interface might suffer.

Behavior

Frequency

Only one Callout of each type may be shown at a time. When multiple Callouts of the same variant are necessary, and the messages aren‘t related, they should appear one at a time, based on importance. Avoid stacking Banners on top of one another.

Lists

If the callout uses a list, it should always have a heading that gives context as to what that list is about.

Lists should only be used where there are multiple mistakes or warnings that should be mentioned at the same time.