Guidance Block

A Guidance Block provides a familiar layout that is visually prominent to draw attention to related content and encourage people to take an action. It guides people to new actions they haven't done before or connects them to relevant content and action they can take on another page.

Also known as:
CalloutCallout cardMedia cardPromosCampaignNoticeNotification

AnchorNeed to know

  • Use a Guidance Block to encourage action on another page.

Visuals

UI Kit

Options

To ensure the Guidance Block is distinct from other page content, you might use a different visual treatment for the card container.

To keep in mind

The Guidance Block is a modular design element with a consistent structure and a clear call to action. It is commonly used to:

  • Prompt a user action (e.g. Select a focus area, create an action, redact comments, start onboarding).
  • Provide a summary view of longer form content contained on another page. This is similar to a content application of tile but with more prominence/hierarchy (e.g Manager learning).
  • Cross promote relevant content or functionality in a different part of the platform.
  • Avoid showing more than one Guidance Block at a time because they would compete for the user's attention instead of guiding the user. Instead, you might conditionally show only whichever Guidance Block is most important to the user at that moment.

Anatomy

  • Card container: The Guidance Block content appears inside a card.
  • Spot illustration: Provide an illustration that assist the user in the task the Guidance Block describes.
  • Title and description: Use the guidelines above to guide the user with appropriate copy.
  • Action button: Use a link styled as a primary action button (if there are no others on the page) or a default action button to navigate to the page with the action that the Guidance Block describes. For immediate actions, show a confirmation modal instead of navigating.
  • Optional dismiss button: If it's possible a user will never want to take this action, consider providing a secondary dismiss button to remove the Guidance Block.

Behavior

  • The Guidance Block may appear conditionally, depending on the state of the action we want the user to take. For example, if they've been through onboarding before, we might remove the Guidance Block from the page.
  • If the use case action is optional or not relevant to all users, the Guidance Block may also be made dismissible.

Copy guidelines

Guidance blocks are a chance to flex those marketing writing muscles. Grab the users attention but don’t go overboard into the ad world. Avoid superlatives, flowery or overly sales and marketing heavy language. Instead speak to the user’s objective, describe the action they need to take and highlight the benefit. Remain calm and clear. Don’t use urgent language in an attempt to drive engagement and clicks. It could lead to a negative and disappointing experience if the urgency is misplaced or unwarranted. If the guidance block has to perform an immediate action, consider showing a confirmation modal.

Write an eye-catching title

Give your guidance block an attention grabbing title and front load it with keywords.

Do:
  • Do
    How are your newest employees settling in?
  • Do
    The time for feedback is now. Check in with your employees during COVID-19.
Don't:
  • Don't
    Psst...we’ve got onboarding surveys
  • Don't
    COVID-19 is here

Body content should be actionable

Make sure that the body copy is clear, concise and actionable. Highlight the importance of the feature you’re talking about and always prioritize the most important information. Make the subject of the guidance block as clear as possible to ensure the user that clicking on it won’t lead to any action, but will send them to another page where they can perform an action.

Do:
  • Do
    Good onboarding can improve new hire retention by 82% and productivity by over 70%. Start measuring your new starters’ experience with our onboarding survey. Get it up and running in under 5 minutes.
  • Do
    Send them a targeted COVID-19 pulse survey and start collecting actionable insights right away.
Don't:
  • Don't
    Did you know you can send surveys to your new starters to see how they’re going?
  • Don't
    Why not send your team a survey?

Give it a clear Call-To-Action (CTA) button

Your CTA button should be short and clear. Give it a strong verb. A user should know what to expect when they click on it. If a user scans the title of the guidance block, the CTA button should clearly direct them towards an action.

Do:
  • Do
    [View onboarding survey]
  • Do
    [View survey template]
Don't:
  • Don't
    [Check in with them]
  • Don't
    [Send survey]

Write in sentence case with minimal punctuation

All guidance block copy should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

When to use and when not to use

When to use
  • Use a Guidance Block to encourage action on another page.
  • Use a Guidance Block in onboarding.
  • Use a Guidance Block to introduce users to related features.
  • Use a Guidance Block to draw attention to under-utilized features.
When not to use
  • Avoid Guidance Blocks for primary content. Instead, use a Hero Card.
  • Avoid Guidance Blocks for system notifications. Instead, use a Notification.
  • Avoid Guidance Blocks for promoting content or actions on the current page.
  • For more than 1 item, use a Tile.

See also

External links

Here are some examples of other existing design systems: