体系 / interaction

rule.interaction.product-quality · canon

Product quality includes recovery states

Empty, loading, error, and partial success are designed, not improvised.

実践ガイダンス

Every flow defines recovery and next best action.

検証契約

component tests for empty/error

根拠リファレンス

• ref.apple.hig-spatial — Apple HIG Spatial Design
• ref.govuk.design-system — GOV.UK Design System
• ref.linear.brand — Linear
• ref.nielsen.usability — Nielsen Norman Group
• ref.notion.design — Notion
• ref.shopify.app-design-guidelines — Shopify App Design Guidelines
• ref.shopify.polaris — Shopify Polaris
• ref.stripe.design — Stripe
• ref.uswds.uswds — U.S. Web Design System
• ref.vercel.web-interface-guidelines — Vercel Web Interface Guidelines

実装・検証成果物

• artifact.component.empty-state — EmptyState component · packages/react/src/components/Status.tsx
• artifact.component.error-state — ErrorState component · packages/react/src/components/Status.tsx
• artifact.component.skeleton — Skeleton component · packages/react/src/components/Status.tsx
• artifact.component.toast — Toast component · packages/react/src/components/Status.tsx