/adaptive-interfaces

name: adaptive-interfaces
description: Use when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density, or any interface behaviour that should adapt to individual needs

Adaptive Interfaces

Good design does not force everyone through the same experience. It adapts. This skill ensures interfaces respect user preferences, system settings, and individual needs — not as optional extras, but as fundamental design requirements.

When to Use

• Designing themes (dark mode, high contrast, custom colour schemes)
• Implementing motion or animation
• Building flexible typography or layout systems
• Designing for varying information density needs
• Any time the interface could benefit from adapting to the user

Process

Step 1: Identify Adaptable Properties

Review the design and map what should adapt:

| Property | User Preference | CSS/System Signal | |----------|----------------|------------------| | Colour scheme | Light/dark/custom | `prefers-color-scheme` | | Contrast | Standard/high | `prefers-contrast` | | Motion | Full/reduced/none | `prefers-reduced-motion` | | Text size | System font size settings | `rem`/`em` units, viewport scaling | | Information density | Compact/comfortable/spacious | User setting or breakpoint | | Transparency | Standard/reduced | `prefers-reduced-transparency` |

Step 2: Motion Sensitivity

Motion is the most commonly harmful interface property. Handle it rigorously:

**Default behaviour:**

• All animations and transitions are wrapped in a motion preference check
• `prefers-reduced-motion: reduce` disables non-essential animation
• Essential motion (e.g., a progress bar filling) uses reduced, simpler alternatives

**Implementation pattern:**

/* Full motion (default) */
.element { transition: transform 300ms ease-out; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .element { transition: none; }
}

**Never autoplay:**

• Video, carousel, or animated content must not play automatically
• If autoplay is a business requirement, provide immediate pause/stop controls AND respect prefers-reduced-motion

Step 3: Colour Scheme Adaptation

Dark mode is not "invert the colours." It is a separate design exercise:

• **Backgrounds:** dark grey (not pure black) reduces eye strain
• **Text:** off-white (not pure white) on dark backgrounds
• **Elevation:** lighter shades indicate higher elevation in dark mode (opposite of light mode shadows)
• **Semantic colours:** error red, success green — these may need different shades in dark mode to maintain contrast
• **Images and illustrations:** may need dark-mode variants or reduced brightness

Step 4: Typography Flexibility

Text must be resizable without breaking the layout:

• Use `rem` or `em` units, never fixed `px` for font sizes
• Test at 200% browser zoom — content must remain usable
• Support system-level large text settings
• Line spacing, letter spacing, and word spacing should be adjustable (WCAG 1.4.12)
• Do not clip or overflow text when sizes change

Step 5: Information Density

Different users need different densities:

• **Spacious:** more whitespace, larger touch targets, fewer items visible — beneficial for motor impairments, cognitive load, mobile use
• **Comfortable:** balanced — the default for most users
• **Compact:** denser information, smaller elements — beneficial for power users, large dataset work

If offering density controls:

• Persist the user's choice across sessions
• Ensure all density levels maintain accessibility requirements (touch targets, contrast, readability)

Step 6: Respect and Persist Preferences

• **System-level preferences** (via media queries) should be respected automatically with no opt-in required
• **Application-level preferences** (density, layout) should be easy to find, easy to change, and persisted
• **Never override system preferences** without explicit user action
• **Never require users to justify** their preferences (no "Are you sure you want dark mode?")

Step 7: Document Adaptive Behaviour

For each adaptive property, document:

• What adapts and why
• The default behaviour
• The adapted behaviour for each preference
• How the preference is detected and respected
• Fallback behaviour when preference detection is unavailable

Integration

• **Called by:** `ui-composition`, `interaction-design`
• **Pairs with:** `cognitive-accessibility` (density and simplification), `inclusive-personas` (preference awareness)
• **Reviewed by:** `designpowers-critique`