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.
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Field
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Field
- Radio Group
- Rich Text Editor
- Search Field
- Split Button
- Text Area Field
- Text Field
- Tile Grid
- Toast Notification
- Toggle Switch Field
To ensure the Guidance Block is distinct from other page content, you can use the Prominent option for the card container.
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.
- Card container: The Guidance Block content appears inside a card - choose between Default or Prominent.
- 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.
- 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.
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.
Give your guidance block an attention grabbing title and front load it with keywords.
- How are your newest employees settling in?
- The time for feedback is now. Check in with your employees during COVID-19.
- Psst...we’ve got onboarding surveys
- COVID-19 is here
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.
- 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.
- Send them a targeted COVID-19 pulse survey and start collecting actionable insights right away.
- Did you know you can send surveys to your new starters to see how they’re going?
- Why not send your team a survey?
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.
- [View onboarding survey]
- [View survey template]
- [Check in with them]
- [Send survey]
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.
- 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.
Here are some examples of other existing design systems: