What is a Full-screen Overlay?

A full-screen overlay is a user interface pattern that covers the entire screen, typically used to focus user attention on a specific task or message. It often appears as a semi-transparent layer that dims the background, allowing the foreground content to stand out.

When to use Full-screen Overlay?

This pattern is useful when you need to present critical information, gather user input, or display options that require undivided attention. Common scenarios include login screens, modal dialogs, or notifications that need immediate user interaction.

When not to use Full-screen Overlay?

Avoid using full-screen overlays for non-essential information or when the user needs to maintain context with underlying content. Overusing this pattern can lead to frustration, as it may disrupt the user's workflow and create a sense of being trapped in the interface.

What is the anatomy of a Full-screen Overlay?

A full-screen overlay typically consists of a background layer that darkens the content behind it, a foreground layer containing the main message or interactive elements, and optional close buttons or actions that allow users to dismiss the overlay. It should be designed to be visually appealing and easy to navigate, ensuring a smooth user experience.