adaptive-interfaces

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: