Callout Cards in Mobile Search List

UX Designer
Prototyper

Sketch
Principle

Users may not know about a new feature or may not have applied enough filters to get a manageable set of results.

Callout cards introduce features and give users a way to take action in refining their data set.

• Use Callouts to entice the users to take an action.
• Use Callouts to introduce new features in the product.
• Be concise with the information inside of a Callout. Short sentences are best.
• Clearly articulate the benefit of the Callout.
• Provide users with a clear call to action.
• Be targeted to users who will most benefit from the feature.
• Use an illustration that helps to communicate the subject or user benefit.

• Too many Callouts can be perceived as interrupting workflow.
• Don’t put text that simply repeats what is already on the screen in a Callout.
• Don’t put important or required information in a Callout.
• Don’t block important UI with the placement of a Callout.
• Don’t open Callout from within another Callout.
• Don’t use Callout to ask the user to confirm an action, use a Dialog instead.

1. Title: Provides a concise overview of the content of the Callout Card.

Title should be:

Descriptive: help users understand what the Callout Card is about.

Concise and scannable: Use simple, clear language that can be read at a glance.

Short: Keep titles to a single sentence and avoid using punctuation such as periods, commas, or semicolons

Typography: Titles are sentence case (first word capitalized, the rest lowercase).

2. Body: Content of the Callout Card.

Body content should be:

Actionable: start sentences with imperative verbs when telling users what actions are available to them. Don’t use permissive language like “you can”.

Concise and scannable:  Don’t try to cram too much info in the Callout Card. If multiple steps are required, consider using a different pattern instead. Exception is for Interactive Callout Card.

Background: Text is most legible when placed on a solid color background with a sufficient contrast ratio to the text. Text should not be placed on image backgrounds (photography).