| UI or UX | UI + UX - Unnecessary modal interruption anti-pattern | UI + UX - Focused modal task layer | UI + UX - Small anchored contextual overlay | UI + UX - Supplemental edge panel for current-context detail or light actions | UI + UX - Contextual in-flow feedback |
| UI guidance | Replace read-only status, optional help, preview, release-note, supplemental detail, and low-risk announcements with inline messages, banners, toasts, popovers, drawers, disclosures, or side panels that keep the current task usable. | Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries. | Render a popover as a compact surface visually tied to the trigger, field, selection, or object that opened it, with a clear title or labelled content when the body is more than a short sentence. | Render a drawer as an edge-aligned panel with a visible heading, selected-object identity, close control, stable width, and clear relationship to the page content it supplements. | Render the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. |
| UX guidance | Use this anti-pattern during review when users must press OK, close a popup, or leave a focus trap before continuing a task that did not require a blocking decision. | Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page. | Use a popover when users need local context, clarification, or a small edit without losing their place in the page. | Use drawers to preserve parent-page context while users inspect supplemental detail or perform simple adjacent actions. | Use inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. |
| Good UI | A case review page shows a saved-state banner above the queue while filters and rows remain usable. | Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context. | A Due date button in a task row opens a small popover beside the field with Today, Tomorrow, Friday, a custom date field, and a visible close control. | A right-side case details drawer opens from a table row, names Claim C-1042, shows status, owner, activity, and a close button while the table remains visible. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. |
| Bad UI | A Saved successfully dialog blocks the form until users press OK. | A vague popup titled Popup floats over active page controls and offers only OK. | A large floating panel appears in the middle of the screen with no arrow, no title, no trigger relationship, and hidden controls below the fold. | A panel slides over the table with the title Details, no close control, and no selected record name. | A vague Important message appears above the whole page with no object reference. |
| Good UX | A reviewer can keep selecting cases while a nonblocking update explains why one row changed. | Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog. | Opening the due-date popover moves focus to the first date option, choosing Tomorrow updates the field, closes the layer, and returns focus to the Due date trigger. | Opening the drawer preserves the table filter and selected row, Next item updates the drawer title, Escape closes it, and focus returns to the selected row. | Users can reveal why export is limited, add the missing contact, and see the local message resolve without losing table context. |
| Bad UX | Users press OK through repeated routine status modals and stop reading them. | Users can click background Delete or Navigate controls while the modal is still open. | The user scrolls and the popover stays in the old position, so it appears to describe the wrong field. | The drawer keeps showing Claim C-1042 after the user selects Claim C-1043 in the table. | The message disappears like a toast even though users still need the invoice reference. |
| Best fit | Use this anti-pattern to review informational dialogs, help popups, status popups, release-note prompts, marketing modals, and preview modals that interrupt work without a required decision. | A short task must interrupt normal page interaction but should return users to the same context afterward. | A local control needs brief explanatory content or light editing while page context remains visible. | Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page. | A visible object or section has local status, warning, success, or next-step information. |
| Avoid when | The layer contains a compact task that truly must block background interaction. | The content is only informational and does not require blocking the page. | The content is essential instruction that must remain visible for task completion. | The surface is mainly app navigation or destination switching. | The message is a one-field validation correction. |
| Required state | Default page state where the primary task remains visible and usable. | Closed page state with an obvious invoking control. | Closed trigger state with visible label, icon name, or field relationship. | Closed state with a clear opener tied to a specific object or page section. | Neutral local context with no message. |
| Accessibility burden | Avoid trapping keyboard and screen reader users in a modal when the content is only informational. | Use dialog semantics with an accessible name from the visible title. | Use a real button or equivalent control as the trigger whenever possible. | Give the drawer a visible heading and expose it as the accessible name for the region or dialog-like surface. | Keep the message in the reading order near the context it describes. |
| Common misuse | Showing success confirmation as a modal when an inline message, toast, or confirmation page would fit better. | Using a modal as a generic container for routine information that could stay inline. | Using a popover as a hidden modal, drawer, sheet, command menu, or full workflow. | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. | Using an inline message for a single field error that should be connected to that input. |