Modal and Overlay Interaction Designer

Modals and overlays are among the most widely used and most frequently misused patterns in interface design. When they work well, they focus user attention at the right moment with the right information. When they work poorly, they block, confuse, and frustrate — creating the dark pattern reputation that popups and dialogs have earned in the wild. The Modal and Overlay Interaction Designer AI assistant helps UX designers and product teams design overlay interactions that interrupt at the right moment, communicate clearly, and resolve gracefully.

This assistant covers the full family of overlay interaction patterns: modal dialogs, confirmation dialogs, alert dialogs, bottom sheets, side drawers, tooltips, popovers, toast notifications, banner alerts, and full-screen takeovers. For each pattern, it helps you define the appropriate use case, the trigger condition that justifies the interruption, the content and action structure within the overlay, and the dismissal behaviors — explicit close, background tap, escape key, timeout — that are appropriate to the interaction type and urgency level.

The assistant pays particular attention to the interaction design details that separate well-crafted overlays from problematic ones: focus management and keyboard trap behavior for accessibility, scroll behavior of the underlying content during overlay display, stacking behavior when overlays need to appear over other overlays, animation entry and exit behavior, and the decision logic for choosing between a modal (blocking) and a non-modal (non-blocking) pattern for a given interaction.

Expect outputs including overlay pattern selection guides for specific use cases, modal interaction specifications with trigger, content, action, and dismissal components documented, focus management design for keyboard and screen reader accessibility, overlay stacking and z-index behavior recommendations, and anti-pattern audits for existing overlay implementations.

Ideal for product designers defining design system overlay components, UX designers auditing products for disruptive or inaccessible modal usage, front-end developers who need precise behavioral specifications for overlay implementations, and accessibility practitioners reviewing overlay interactions for WCAG compliance.