When implementing density modes in your service, you must provide users with a mechanism to choose between comfortable and compact mode. With this pattern, you can set up service-level settings for density modes. Make sure when you use this pattern, you store the user's preference across all pages within your service.
Density settings link
Use a side navigation link to trigger a modal. Place the link as last item in your side navigation and separate it from the other links with a divider. If your service has already a settings area include the content density selection there.
Include form actions so that users can confirm or cancel their choice.
Include a dismiss button to close the modal. Upon dismiss no changes are applied.
When compact mode is fully available in your service implement the density settings and provide context to your users via form field description.
When compact mode is partially available in your service, for example due to version migration strategies or rollout in only some sub-services, include additional information in the form field description to set expectations for users.
We recommend communicating the release of the compact mode to your users, for example by using a flash message. Include information about compact mode release, and an action button to choose the preferred density level via density settings modal. You can optionally include a link to allow users to provide feedback, via the feedback mechanism found in the global footer.
Always provide comfortable mode as default. Compact mode reduced spacing can hinder readability of content for users with vision impairment, and interactivity with close targets for users with physical disability.
Store users preferences when they select the preferred density mode, and display the corresponding selection in the density settings.
Apply the mode selection at submission via the confirm button.
In case you already have a settings area in your service, implement the density settings within that space.
Don't use the density settings pattern for generic service-level settings.
For the header, use this text: Density settings
For the primary action button, use this text: Confirm
Form field label
For the tiles group label, use this text: Content density
Form field description
For the tiles group description, use this text: Choose the preferred level of content density for this console
In case of partial implementation, include additional details. For example: The compact experience is available for some features in this service
The tile label describes the density level applicable. Use these labels: comfortable and compact
The tile description provides additional information about the option.
For comfortable mode, use this text: Default spacing that optimizes information consumption.
For compact mode, use this text: Reduced spacing that provides more visibility over content.
General accessibility guidelines
Follow the guidelines on alternative text and Accessible Rich Internet Applications (ARIA) regions for each component.
Make sure to define ARIA labels aligned with the language context of your application.
Don't add unnecessary markup for roles and landmarks. Follow the guidelines for each component.
Provide keyboard functionality to all available content in a logical and predictable order. The flow of information should make sense.
Make sure you define ARIA labels for the selection inputs that are aligned with the language context of your application.
A form element that's an extension of a radio group with additional metadata to facilitate comparisons or progressive disclosure. As with a radio group, tiles allow the user to choose one of a predefined set of options.