Modality

The degree to which a system constrains available actions to focus attention on a specific task or context.

All interfaces exist on a spectrum from fully modeless (any action available at any time) to fully modal (only the presented task can be addressed). Design stance following Tesler and Raskin: prefer modeless; when unavoidable, make modes visible, escapable, and scoped as narrowly as possible. The cost of a mode is cognitive — the actor must track what state they’re in, and same input producing different outcomes is the root of mode error.

Mode types

Persistent modes remain active until explicitly dismissed — highest mode-error risk. Edit vs. view, or focused vs. inline vs. ambient bot interaction. The actor must remember which mode they’re in; nothing in the physical world reminds them.

Quasimodes last only while a physical action is maintained (holding a modifier key, long-pressing). The body is the reminder — release the key, exit the mode. Toggle mode in dynamic hyperlinks is an example. Preferred for temporary mode shifts because they’re self-terminating.

Transient modes are system-imposed interruptions that block the primary workflow until resolved — dialog is the most common. The system forces focus; the actor cannot continue until they respond.

Modal vs. non-modal

Transient modes split further by whether they block the underlying interface:

Modal surfaces disable interaction with the background. The actor must resolve the presented task before returning. Typically paired with a scrim (lightbox overlay) that signals the blocked state. Dialog is always modal; drawer can be either.

Non-modal surfaces coexist with the primary interface. The actor can interact with both. Popover, toast, and callout are non-modal — they add information or options without demanding resolution.

Some patterns shift between modal and non-modal depending on context. A drawer may be non-modal on a wide viewport (side peek alongside the main content) and modal on a narrow one (covering the primary surface). Mobile platforms often call this a sheet.

Design considerations

• Visibility: if discovering the current mode requires performing an action, the mode is invisible — and invisible modes cause errors.
• Escapability: cheap exit always. Undo mitigates mode errors but doesn’t excuse them.
• Scope: narrow (single tool, single field) is safer than broad (all input reinterpreted). The broader the mode, the more the actor must hold in memory.
• Promotion/demotion: a frequently toggled setting is a mode switch that belongs in the primary interface. A mode actors rarely leave may just be the default.
• Agency: actor-initiated transitions are legible; system-initiated ones risk mode error. Transient modes imposed by the system (alerts, confirmations) should be rare and clearly justified.
• Temporality: how long the mode persists affects its cost. A quasimode lasting 200ms barely registers; a persistent mode lasting an entire session accumulates error risk.

Overlay vs. page decision tree

When something needs more space or focus than the current page allows, the first question is whether to use an overlay or navigate to a separate page. The second is which overlay fits.

Related components

Complementary

• Dialog – the strict-modal anchor of the gradient
• Drawer – the gradient’s hinge, where modal and non-modal behaviour meet
• Callout – sits beside toast on the non-modal end, anchored rather than ambient
• Popover – the loosest transient mode, yielding to any other interaction
• Toast – the non-modal floor of the gradient

Tangentially related

• Dropdown – an option reveal that demonstrates non-modal selection
• Context menu – contextual overlay whose modality depends on platform conventions

Resources & references

• Raskin (2000). The Humane Interface — mode error, quasimodes, and the cost of invisible state
• Apple HIG / Modality — platform guidance on when modal presentations are justified