Product and primary task
Product or surface:
Primary user task:
Current starting point:
What should become easier or clearer:
Interaction contract
Persistent anchor: Name the trigger, heading, selected object or spatial origin that remains recognisable through the change.
Compact state: What is visible before activation? Keep frequent controls available and make the next action understandable without an icon-only guess.
Expanded state: What workspace appears, and what task can be completed there? Give it enough room to work rather than enough room only to look animated.
Trigger: What opens or replaces the surface? Define the pressed or expanded state and its accessible relationship to the content.
Exit: How does the user close, replace or finish the surface? Return focus to a connected, enabled trigger where appropriate.
What persists: List the selected object, mode, filters, inputs, drafts and results that survive a mode change. State what intentionally resets.
What must never happen: List context loss, stale results, hidden focus targets, accidental submission, or other unacceptable transitions.
Shared context and state
Separate the states below rather than letting each panel maintain a contradictory copy:
- Domain context: selected object, mode, filters and current task
- Workspace: saved items and drafts, scoped to their owner or task
- Presentation: active surface, nested menu and return-focus target
- Request: loading state, request identifier, captured owner and result status
When a user changes object or mode, synchronise dependent labels, content and controls. If an asynchronous result finishes after the selection changes, keep it attached to the context that started the request or explain that it was cancelled.
Connected surfaces
Surface A:
Surface B:
Shared selection or context:
Replacement rule: Which surface becomes inactive when another opens? Mark inactive content hidden or inert so it cannot receive focus or input.
Nested controls: Define how menus close, how Escape works from the innermost layer outward, and how Tab exits.
Controls, motion and material
Use the target product's existing control family. Choose typography, colours, materials, density and geometry for that product; do not copy another product's palette or layout. Keep labels visible when an icon is ambiguous and use a consistent icon system with decorative icons hidden from assistive technology.
Define explicit tokens for:
- Structural transition duration and easing
- Short feedback transitions
- Focus indication
- Surface spacing and usable viewport bounds
Animate only properties that explain the state relationship. Prefer transform and opacity when they communicate enough. If a panel expands, coordinate the available content space so the reading target is not repeatedly displaced.
Keyboard and focus behaviour
- Use buttons for actions and accurate expanded or pressed states.
- Move focus into a task surface only when the task requires it; otherwise preserve a sensible reading order.
- Return focus to the opening control on close when it remains available.
- Keep normal Tab navigation. Trap focus only in a genuinely modal dialog.
- Ensure inactive surfaces are hidden or inert, not merely transparent.
- Provide visible focus states and touch-friendly controls.
Responsive and reduced-motion form
Narrow-screen layout: Decide whether the expanded surface reflows inline, becomes a bounded sheet, or uses a split view. Keep the close control reachable above browser chrome and the on-screen keyboard.
Overflow risks: Check long labels, tables, menus, code, inputs and nested scrolling. Avoid fixed dimensions that work only for the reference viewport.
Reduced motion: With prefers-reduced-motion: reduce, remove nonessential movement and smooth scrolling while retaining all content, state changes, focus behaviour and operability.
Loading, empty and unavailable states
Loading:
Empty:
Disabled:
Unavailable optional dependency: Preserve a truthful useful path. If prepared content is used as a fallback, label it as prepared or local; do not present it as live AI, current data or completed external work.