This is an open space for collaborating on a content block pattern. To join in the conversation please add a comment below.
Content blocks
Background:
The current card pattern groups related content or tasks to make it easier for users to scan, read, and find information. However they do not allow for inline links or to group multiple links together. Therefore we have looked at a content block design to give users additional context and access deeper information quickly.
Overview
Content blocks allow users to select from multiple actions related to a topic or task.
When to use Content blocks
Use content blocks where a user needs to be presented with multiple pieces of information or actions to deep dive into content quickly.
Do:
- Consider and choose text and visual elements carefully. Test content blocks with the minimal content and only add additional content or graphics where they give needed context to the user
- Use headlines and links that set clear expectations about the content being linked to
- Outline the main idea with the minimal possible information, don’t overload with information where you link the user to more detail
Do not:
- Use to group related content, consider Cards
- Use when content only has one call to action, consider Cards
- Use when a large amount of text is needed to give users context
Interaction Design & Usability Research
- Surfacing content helps users access their required information quickly and gives users greater context of content areas
- Content blocks use the text link style to indicate clickable elements.
UI Design
Proposed solution of:
Default:
Icon option:
Image option:
Showing different content types:
Credits
These awesome collaborators have contributed insights, knowledge, and time to the information above:
Web Consolidation Team