UX Design Guides
Containers

Containers are a means to group content, components, and other containers into cohesive units on a page.

Design Recommendations

Headers

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.

Guiding Principles

  • 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.

Typical Features

  • 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

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.

Guiding Principles

  • 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.

Typical Features

  • 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

Disclosures are containers that hide secondary content to help simplify the page.

Guiding Principles

  • 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.

Typical Features

  • 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.

Tabs

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.

Guiding Principles

  • 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).

Typical Features

  • Selected tabs are displayed visually distinct from unselected tabs.

Dialogs

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.

Guiding Principles

  • 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.

Typical Features

  • 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.

Variations

  • 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.