Home
Community
Library
Knowledge
Docs

KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.

Categories

All Interaction Responsive Motion

Tags

accessibility actions admin affordance animation breakpoints bulk-actions buttons cards collaboration command comparison complexity confirmation controls danger drag-drop editing

Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle

30 published principles

Interaction Responsive Motionmodal / focus

Modal Focus Management

Modal Focus Management turns a frequent interface judgment into an executable constraint before generation.

Dialogs change interaction context and must manage focus, background reachability, and close paths.87%Interaction Responsive Motiongesture / mobile

Touch Gesture Alternatives

Touch Gesture Alternatives turns a frequent interface judgment into an executable constraint before generation.

Swipe, pinch, and long press cannot be the only way to complete a task.86%Interaction Responsive Motionloading / skeleton

Skeleton Loading Hierarchy

Skeleton Loading Hierarchy turns a frequent interface judgment into an executable constraint before generation.

Skeletons should preview real content structure instead of adding extra visual noise.86%Interaction Responsive Motiontables / bulk-actions

Table Bulk Action Model

Table Bulk Action Model turns a frequent interface judgment into an executable constraint before generation.

Bulk actions need to express selected count, scope, risk, and completion feedback clearly.

86%

Interaction Responsive Motiondrag-drop / accessibility

Drag and Drop Alternatives

Drag and Drop Alternatives turns a frequent interface judgment into an executable constraint before generation.

Drag and drop is useful direct manipulation, but sorting, moving, and upload need non-drag alternatives.86%

Interaction Responsive Motiondanger / confirmation

Destructive Action Confirmation

Destructive Action Confirmation turns a frequent interface judgment into an executable constraint before generation.

Confirmation should protect irreversible or high-impact actions and explain object plus consequence.86%

Interaction Responsive Motionkeyboard / navigation

Keyboard First Navigation

Keyboard First Navigation turns a frequent interface judgment into an executable constraint before generation.

An interface that works from the keyboard is usually clearer because focus order reveals the real task structure.86%

Interaction Responsive Motionmobile / actions

Mobile Bottom Action Bar

Mobile Bottom Action Bar turns a frequent interface judgment into an executable constraint before generation.

Critical mobile actions should be thumb-reachable without covering content, errors, or system navigation.85%

Interaction Responsive Motionfeedback / toast

Toast vs Inline Feedback

Toast vs Inline Feedback turns a frequent interface judgment into an executable constraint before generation.

Feedback placement should match the object; toast fits short global status, while inline feedback fits fields and local fixes.

Interaction Responsive Motionwizard / progress

Wizard Stepper Progress

Wizard Stepper Progress turns a frequent interface judgment into an executable constraint before generation.

Wizards need to show current position, remaining work, reversibility, and save state.85%

Interaction Responsive Motionfilters / state

Filter Query State Preservation

Filter Query State Preservation turns a frequent interface judgment into an executable constraint before generation.

Filter results are user-built work context and should persist across refresh, back navigation, and sharing.85%

Interaction Responsive Motionresponsive / navigation

Responsive Navigation Collapse

Responsive Navigation Collapse turns a frequent interface judgment into an executable constraint before generation.

Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.85%

Interaction Responsive Motionundo / editing

Undo Redo Reversibility

Undo Redo Reversibility turns a frequent interface judgment into an executable constraint before generation.

Reversible actions let users explore with fewer confirmation interruptions.85%

Interaction Responsive Motionlatency / microinteraction

Reduced Latency Microinteraction

Reduced Latency Microinteraction turns a frequent interface judgment into an executable constraint before generation.

Microinteractions should confirm input and state change, not make the interface feel busy.84%

Interaction Responsive Motionpagination / scroll

Infinite Scroll vs Pagination

Infinite Scroll vs Pagination turns a frequent interface judgment into an executable constraint before generation.

Browse lists can scroll continuously; task lists usually need position, selection, return, and count awareness.84%

Interaction Responsive Motionrealtime / collaboration

Realtime Collaboration Presence

Realtime Collaboration Presence turns a frequent interface judgment into an executable constraint before generation.

Collaborative interfaces need to show who is present, who is editing, and how conflicts resolve.84%

Interaction Responsive Motionfeedback / latency

Optimistic Update Feedback

Optimistic Update Feedback turns a frequent interface judgment into an executable constraint before generation.

Optimistic updates make interfaces feel fast while failure and rollback remain understandable.84%

Interaction Responsive Motioncommand / shortcuts

Command Palette Safety

Command Palette Safety turns a frequent interface judgment into an executable constraint before generation.

Command palettes are useful for speed, but scope, risk, and outcome must be explicit.84%

Interaction Responsive Motioninputs / controls

Input Mode and Control Matching

Controls should match decision shape: toggles for binary, segmented controls for modes, menus for option sets, sliders for continuous values.

The wrong control adds cognitive cost and makes reversibility unclear.82%

Interaction Responsive Motiontables / responsive

Responsive Tables and Comparison

Tables support comparison, so responsive behavior must preserve columns, sorting, and key actions.

Turning tables into cards indiscriminately can destroy comparison; choose the pattern by data task.82%

Interaction Responsive Motionloading / performance

Perceived Performance and Loading Structure

Loading states should preserve layout skeletons so users know what will appear, instead of showing only a spinner.

Stable skeletons reduce waiting anxiety and avoid layout shift when content appears.82%

Interaction Responsive Motionmotion / animation

Restrained Motion With Purpose

Motion should explain state change, spatial relationship, or feedback instead of adding noise.

Excessive motion interrupts tasks, especially in dense tools.82%

Interaction Responsive Motionbreakpoints / responsive

Breakpoint Recomposition, Not Scaling

Responsive design should recombine layout relationships at breakpoints instead of scaling everything by viewport.

Scaling type and containers causes unpredictable overflow; recomposition is more stable.82%

Interaction Responsive Motionmobile / responsive

Mobile Priority Stack Layout

Mobile is not a smaller desktop; content and actions should restack by task priority.

Small screens need important information, controls, and feedback early without overlap.82%

Interaction Responsive Motionprogressive-disclosure / complexity

Progressive Disclosure by Task Risk

Low-frequency, risky, or advanced settings should be deferred while common tasks remain reachable.

Progressive disclosure does not hide functionality; it places complexity at the right decision moment.82%

Interaction Responsive Motionfeedback / states

Feedback States for System Continuity

Loading, saving, generating, review, and failure all need visible states so users know the system is responding.

Missing feedback causes repeated clicks or fear that data was lost.82%

Interaction Responsive Motioncards / panels

Card and Panel Density Affordance

Cards represent objects, panels represent tools or context; they need different density and affordance.

Clickable objects must be recognizable, while informational containers should not masquerade as buttons.82%

Interaction Responsive Motionbuttons / actions

Button Priority and Action Separation

Primary, secondary, destructive, and navigation actions need clear differences to avoid mistakes.

Button styling expresses decision cost and risk, not just visual preference.82%

Interaction Responsive Motionforms / workflow

Form Flow and Validation

Forms should follow the user's mental order and provide recoverable feedback at key moments.

Good forms split complex tasks into completeable steps rather than dumping every field at once.82%

Interaction Responsive Motionnavigation / wayfinding

Navigation Landmarks and Current State

Users need to know where they are, where they can go, and what scope the current page belongs to.

Navigation is not a pile of links; it continuously communicates structure and current location.82%