UI Behavior

Use static symbols when the state is final or persistent—like a completed action or a permanent status indicator—because they avoid distracting motion and align with screen reader expectations. Animated states should be reserved for brief, intentional transitions: a loading spinner for ongoing processes, a checkmark pulse for successful submission, or a rotation for expandable elements. Avoid animations longer than two seconds or those that loop endlessly, as they interfere with comprehension and may trigger motion sensitivity.

Hover triggers should only activate when the symbol is interactive—such as revealing a tooltip for an info icon on desktop—and must never be the sole indicator of interactivity on touch devices. Use consistent timing and easing so users learn expectations quickly; a short delay (100-200ms) before hover reveals or disappears prevents accidental triggers during cursor passes. Disabled indicators must retain structural alignment—don’t collapse or reflow the layout—so users anticipate missing functionality without guessing why something is inactive.

For disabled indicators, use subtle dimming or reduced opacity rather than full removal to preserve spatial memory and reduce cognitive effort in reactivation. Always pair visual cues with semantic markup so assistive technologies announce the state clearly. Ensure animation triggers are time-bounded and reversible—no forced waiting—so users can proceed unblocked even if animations lag. This keeps UI predictable whether navigating with mouse, keyboard, or voice input.