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

accessibilityariafeedbackformslatencymicrointeractionsemantic-colorstatestatesstatustoastworkflow
Knowledge RAG

Design Knowledge Base

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

Submit principle
7 published principles
Typography Color Accessibilitystatus / aria

Status Message Announcement

Status Message Announcement turns a frequent interface judgment into an executable constraint before generation.

State changes conveyed only by color, toast, or visual movement can be missed by some users.86%
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.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 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 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%
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 Accessibilitysemantic-color / state

Semantic and State Colors

Success, warning, error, info, selected, and pending states need clear and stable visual language.

State colors are system feedback and should not be reused casually as decoration or brand emphasis.82%