USER INTERFACE ELEMENTS

Overlay

met-life-des-foundations-standards-user-interface-elements-asset-01

Overview

Overlays are modals that serve to overlay content on top of the existing interface. They sit on top of a main window, disabling the grayed-out main window content until the user closes the message. Overlays provide focused interactions without navigating away from the current experience.

Usage Guidelines

Resources

Usage Guidelines

Do

Use overlays in the following scenarios:

  • To interrupt the user with messages too important to miss.
  • When immediate input is needed from the user in order to begin, continue or conclude a process.

 

 

Do

Keep the content simple and concise.

  • Aim for a few sentences or key points of information within the overlay to convey your message effectively.
Do

Use proper hierarchy and readability.

  • Use proper typography, hierarchy, and legible font sizes to ensure that the content is easily readable.
  • Users should be able to quickly scan the content.
  • Important information should be prominently displayed.
Do

Use proper trigger elements.

  • The trigger element, which opens the Overlay component, should be a recognizable interactive element such as a button or text link.
  • Ensure the trigger element has a clear label indicating it's purpose, such as "Open" or "View Details".
Don't
  • Don’t use overlays that interrupt a users’ tasks or workflows, as it can be disruptive to the overall experience. 

Resources