UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.
Contribute

Categories

AllInteraction Responsive MotionTypography Color Accessibility

Tags

accessibilityanimationariaauthenticationchartscognitive-loadcolorcontentcontrastcontrolscopydrag-droperrorsfeedbackfocusformsgestureicons
Knowledge RAG

Design Knowledge Base

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

Submit principle
22 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 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 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%
Typography Color Accessibilitymotion / reduced-motion

Reduced Motion Accessibility

Reduced Motion Accessibility turns a frequent interface judgment into an executable constraint before generation.

Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.86%
Typography Color Accessibilityforms / labels

Persistent Form Labels

Persistent Form Labels turns a frequent interface judgment into an executable constraint before generation.

Form labels should remain visible before and after input so users can confirm meaning and context.86%
Typography Color Accessibilitycharts / accessibility

Chart Accessibility Encoding

Chart Accessibility Encoding turns a frequent interface judgment into an executable constraint before generation.

Charts cannot rely on color alone; categories and states need text, shape, line style, or direct labels.86%
Typography Color Accessibilityauthentication / accessibility

Accessible Authentication Flow

Accessible Authentication Flow turns a frequent interface judgment into an executable constraint before generation.

Secure flows still need low cognitive load, helping users complete rather than testing them.86%
Typography Color Accessibilityforms / errors

Error Summary Pattern

Error Summary Pattern turns a frequent interface judgment into an executable constraint before generation.

Users need to know how many errors exist, where they are, and how to fix them without hunting for red text.86%
Typography Color Accessibilitytarget-size / touch

Target Size and Spacing

Target Size and Spacing turns a frequent interface judgment into an executable constraint before generation.

Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.86%
Typography Color Accessibilitylinks / contrast

Link Contrast and Affordance

Link Contrast and Affordance turns a frequent interface judgment into an executable constraint before generation.

Links are navigation promises; users must quickly recognize clickable text in reading flows.85%
Typography Color Accessibilitycognitive-load / copy

Cognitive Load Copy

Cognitive Load Copy turns a frequent interface judgment into an executable constraint before generation.

Users should not need to remember system state, previous-screen information, or hidden rules to complete a task.84%
Typography Color Accessibilitycontent / plain-language

Plain Language

Plain Language turns a frequent interface judgment into an executable constraint before generation.

Understandability is part of accessibility; complex copy increases cognitive load for everyone.84%
Typography Color Accessibilityicons / aria

Icon Accessible Names

Icon Accessible Names turns a frequent interface judgment into an executable constraint before generation.

Icon-only buttons and statuses need accessible names, while decorative icons should be hidden from assistive technology.84%
Typography Color Accessibilitytypography / spacing

Text Spacing Resilience

Text Spacing Resilience turns a frequent interface judgment into an executable constraint before generation.

Interfaces should tolerate adjusted line height, letter spacing, font size, or browser zoom without hiding content.84%
Typography Color Accessibilityforms / redundant-entry

Redundant Entry Reduction

Redundant Entry Reduction turns a frequent interface judgment into an executable constraint before generation.

Redundant entry increases cognitive load, errors, and abandonment, especially for assistive technology users.84%
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%
Typography Color Accessibilitytouch-target / mobile

Accessible Interactive Targets

Buttons, links, menu items, and icon buttons need sufficient hit area, especially on mobile.

A visually small control does not need a tiny hit area; targets require stable size and clear feedback.82%
Typography Color Accessibilityaccessibility / color

Color Must Not Stand Alone

State, risk, category, and selection cannot rely on color alone; text, icon, shape, or position must help.

Color semantics weaken under color blindness, low vision, printing, and poor lighting.82%
Typography Color Accessibilityfocus / keyboard

Visible Focus States

Keyboard and assistive technology users need to know where focus is; focus states must not be reset away.

Focus state is part of the interaction path, not a browser default flaw.82%
Typography Color Accessibilityforms / accessibility

Accessible Form Feedback

Form feedback should sit near fields, explain why, and remain understandable before and after submission.

Error messages are not punishment; they guide users toward completion.82%
Typography Color Accessibilitycontrast / accessibility

Legibility Contrast

Text contrast must serve reading first, especially for small text, disabled states, notes, and button labels.

Low contrast turns polish into unusability, especially on mobile and in difficult lighting.82%