Containers are a means to group content, components, and other containers into cohesive units on a page.
Headers are hierarchical and so represent nested and peer relationships of content blocks on a page, or even within another container. Creating a cohesive and semantic html heading structure (e.g. ‹h1›, ‹h2›, ‹h3›) is the first step towards organizing content and making your content accessible.
- First determine the heading structure for a page that represents the organization of the page content and then think about the visual design of the headers in a subsequent design iteration.
- Pay special attention to labels and terminology and to building narrative cohesiveness when using headers.
- As with any hierarchy, each header level (save for H1) should have at least one peer.
- Some headings can be determined to be redundant to the visual presentation of page content. In this case, use CSS to move visually redundant headers offscreen for non-visual audiences.
Callouts are areas of a page that visually separate content from the rest of the page in order to highlight it. This can be accomplished using color, background images or textures, and/or borders.
- For them to be effective, use callouts sparingly.
- Be consistent with the type of information placed in callouts across your product.
- Pay special attention to accessibility when using panels so that an visual distinction or grouping is also communicated at the semantic code level.
- Can be used with or without a header.
- Background colors or textures, outlines, or font styles provide contrast between callouts and the rest of the page.
Disclosures are containers that hide secondary content to help simplify the page.
- Use for separating optional or non-critical content to help users focus on what is most important.
- Can be used for revealing additional content without forcing users to another page.
- Load in a closed state unless prior user interaction determines otherwise (e.g., remembering last saved state).
- The disclosed content should be indented to align with the disclosure label.
- If you have pages with multiple disclosures, consider providing a control to show and hide all disclosures at once.
Using a familiar metaphor of file folders, tabs can be used to organize content into groups, break down a task into multiple parts, present distinct views of an object, or to initiate different paths.
- Grouping and labeling of content should match user’s expectations and mental model of the content. This can be achieved through user research methods like card sorting.
- Tab groups should be limited to 2-6 tabs; beyond that it may be helpful to introduce another level of navigation/hierarchy.
- Tab labels are usually concise and discrete, helping users clearly choose which one they are interested in.
- Tabs should not be used when it is important to communicate a process or consumption order (e.g. don’t use when a form on each tab needs to be completed in sequence).
- Selected tabs are displayed visually distinct from unselected tabs.
A dialog is a window or panel that overlays the current page view (appearing to float on top of it) to allow users to perform supplemental actions, view relevant information, or make a decision about the current task while preserving the current context.
- Use if there is no need to interact with the underlying page's contents to conclude a brief task.
- Use if there is a desire to collect additional information from the user without removing the context of the current form.
- Use to confirm whether or not a requested action with significant consequences should be performed (e.g., delete).
- Use if an element requires additional context or definition that is not otherwise visible on the page.
- A higher z-index positions the dialog as floating on top of page content.
- Non-modal dialogs disappear when they lose focus.
- Modal dialogs restrict access to the underlying page, forcing the user to interact with its contents or until has been dismissed. When an action is completed, modal dialogs automatically close.
- Tooltip (dialog)
- Tooltips are small non-modal dialogs that are typically triggered by mouseover (hovering) or touch and that typically provide contextual information about an element's label or function, but no other interaction or functionality.
- The default orientation of a tooltip is above the item for which it provides context.
- Tooltips should not be used for providing validation errors.
- Popover (dialog)
- Popovers are non-modal dialogs are typically triggered by mouse clicks or touch and that display a small temporary panel with additional functions or controls next to the anchored content.
- The default placement of the popover panel is below the trigger.