The UI Patterns card deck

Card deck

UI Patterns

Design better products, faster.

Printed + digital · $129

Alternate titles: Next Best Action, Next Step Prompt, Recommended Action.

Problem summary

After finishing a step, or on arriving at an empty page, users often don’t know what to do next, and the momentum fades.

Example

Suggested Action example from mailchimp.com

▲ On Mailchimp’s empty Campaigns page, one suggestion fills the screen. “Start with a test email: send a ready-made email straight to your inbox so you can see how it works.” A primary button creates it, and a lighter option creates a new email.

Usage

  • Use when there is a clear next step that builds on what the user just did or where they are.
  • Use when the product can infer that step from the user’s progress.
  • Use when a single suggestion would help more than a menu of options.
  • Do not use when the suggestion would interrupt a task in progress.

The card deck

Find more patterns like Suggested Action in the UI Patterns card deck

A collection of 60 User Interface design patterns, presented in a manner easily referenced and used as a brainstorming tool.

Solution

Show one primary suggestion that follows from where the user is, with a short reason.

One suggestion, one reason

Say what to do and why in a sentence: “Send a ready-made email straight to your inbox so you can see how it works.” A reason makes the step easy to accept, and one suggestion at a time keeps the decision small.

Put it where attention already is

Place the suggestion in the user’s line of sight: in the empty state, after the action, or at the top of the page. Make it the most prominent element, with any secondary option clearly lighter.

Make the first step easy and safe

The best first suggestions are quick, low-risk, and visible: sending a test to yourself, trying a template, or opening a sample. They give the user a result before they commit anything.

Let users dismiss it

Allow the suggestion to be dismissed, and don’t bring it back unchanged.

Rationale

A suggested action turns a finished step, or an empty page, into the start of the next one. It keeps the user in the window of opportunity and reduces decision effort, because the product has already chosen a sensible next step.

Discussion

Suggestions that serve the business

Suggestions that mainly serve the business, such as upgrades or invitations, work against the pattern when the user has not yet reached value. Keep early suggestions about what the user came to do.

One versus several

Offering several equal options is a menu, not a suggestion. When the next step isn’t obvious, a checklist or a personalization form is a better fit than a long row of cards.

Measuring it

Track click-through on suggestions, and the share of users who complete the next key action.


More examples of the Suggested Action pattern