| UI or UX | UI + UX - Temporary full-viewport modal task mode | UI + UX - Focused modal task layer | UI + UX - Adaptive temporary sheet for a context-bound child task | UI + UX - Short related multi-field submission page |
| UI guidance | Render a full-screen takeover as a full-viewport modal surface with a visible title, labelled exit control, primary outcome action, and blocked parent content. | 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 sheet as a titled adaptive surface with clear edge or window attachment, visible close or back controls, stable actions, and sizing that matches the task. | Render a clear form heading, short instruction, required or optional indicator explanation, grouped related fields, one primary submit action, and a visible error summary only after failed submit. |
| UX guidance | Use the takeover only when full-viewport focus materially improves the temporary task and users must return to the invoking context afterward. | Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page. | Use sheets for short child tasks that need more room than a dialog while preserving parent context after the task closes. | Use a single-page form when users benefit from seeing, comparing, and editing a small related set of fields before one submission. |
| Good UI | A document scan opens a full-screen capture mode with title Attach receipt, Close, Save scan, internal Review back behavior, and the parent expense row restored after close. | Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context. | A review follow-up sheet opens from a claim row with the title Schedule follow-up for Claim C-1042, fields, close control, compact and expanded sizes, and sticky Save and Cancel actions. | A contact-details form shows one heading, a required-field note, grouped name and contact fields, communication preference radios, aligned field errors, and a Save details button at the end. |
| Bad UI | A full-screen layer titled Details hides the page, offers only an X, and behaves differently from browser back. | A vague popup titled Popup floats over active page controls and offers only OK. | A panel titled Sheet opens with no selected object, no close affordance, and hidden actions below an inner scroll area. | A long application with eligibility, address history, uploads, and payment fields is dumped onto one scrolling page. |
| Good UX | A user opens camera capture from an expense row, moves to Review, uses Back to return to Capture, presses Close, sees an unsaved-scan review, keeps editing, saves, and returns to the same row. | Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog. | Opening the sheet focuses the first useful field, expanding the sheet preserves typed notes, Escape triggers discard review when edits are dirty, and Save returns focus to the claim row. | A user edits email and phone together, submits, sees two linked errors, fixes both without losing the preference selection, and saves the whole form once. |
| Bad UX | A user presses the visible X inside a nested takeover and loses the entire product-selection flow rather than only the current detail view. | Users can click background Delete or Navigate controls while the modal is still open. | A user changes the appointment note, presses back, and loses the work without a decision point. | A user submits a mixed form, sees a generic red banner, scrolls through many unrelated fields, and cannot find which answers failed. |
| Best fit | A temporary task needs the whole viewport for capture, immersive preview, focused setup, scanning, or dense editing. | A short task must interrupt normal page interaction but should return users to the same context afterward. | A user starts a short context-bound task that needs more room than a dialog but should not become a full page. | A compact set of related fields should be reviewed together before one submit. |
| Avoid when | The task is short enough for a compact modal dialog. | The content is only informational and does not require blocking the page. | The content is mainly destination navigation. | The form is long, high-stakes, branched, or too hard to recover from on one page. |
| Required state | Closed parent state with the selected object, filters, scroll, and opener visible. | Closed page state with an obvious invoking control. | Closed parent state with an opener tied to the object, field, or task that launches the sheet. | Initial empty state with form heading, instruction, required or optional indicator explanation, grouped fields, and submit action. |
| Accessibility burden | Expose the takeover as a modal surface with an accessible name from the visible title. | Use dialog semantics with an accessible name from the visible title. | Give the sheet a visible heading and use it as the accessible name. | Keep field order in the DOM the same as the visible order. |
| Common misuse | Using a full-screen takeover as a dramatic wrapper for a short confirmation, single text field, or routine message. | Using a modal as a generic container for routine information that could stay inline. | Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions. | Using one page for a long complex application just to avoid designing steps. |