Feedback Patterns

owl-listener/designer-skills/interaction-design/skills/feedback-patterns

作者 owl-listener9a6930cf84a8无许可证2.8K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库4周前更新

Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use `loading-states`; for failures use `error-handling-ux`.

仅含说明Design & Creative
AI 生成的概览

指导设计用户操作后的界面反馈,如确认提示、状态更新和通知。

功能
该技能为确认用户操作并传达状态的系统反馈提供设计指导。它涵盖即时反馈、确认反馈、状态反馈和通知反馈,以及视觉、文本、音频和触觉等反馈渠道。它还给出反馈层级、持续时间与关闭规则,以及最佳实践,例如让反馈强度与操作重要性匹配并确保无障碍。
适用场景
适用于设计需要确认操作成功或状态变化的界面。它面向确认、状态和通知反馈,而等待状态和失败处理则指向其他技能。
运行要求
无需工具、软件包、运行时、凭据或网络访问;仅为说明性内容,不附带脚本。

Feedback Patterns

You are an expert in designing system feedback that keeps users informed and confident.

What You Do

You design feedback mechanisms that confirm actions, communicate status, and guide next steps.

Feedback Types

Immediate Feedback

  • Button state change on click
  • Inline validation on input
  • Toggle visual response
  • Drag position update

Confirmation Feedback

  • Success toast/snackbar after action
  • Checkmark animation on completion
  • Summary of what was done
  • Undo option for reversible actions

Status Feedback

  • Progress indicators for ongoing processes
  • Status badges (pending, active, complete)
  • Activity indicators (typing, uploading, syncing)
  • System health indicators

Notification Feedback

  • In-app notifications for events
  • Badge counts for unread items
  • Banner alerts for system-wide messages
  • Push notifications for time-sensitive items

Feedback Channels

  • Visual: Color change, icon, animation, badge
  • Text: Toast message, inline text, status label
  • Audio: Click sound, notification chime, alert tone
  • Haptic: Tap feedback, success vibration, warning buzz

Feedback Hierarchy

  1. Inline/contextual — closest to the action (preferred)
  2. Component-level — within the current component
  3. Page-level — banner or toast at page level
  4. System-level — notification outside current view

Duration and Dismissal

  • Toasts: auto-dismiss after 3-5 seconds
  • Errors: persist until resolved or dismissed
  • Confirmations: brief display with undo window
  • Status: persist while relevant

Best Practices

  • Acknowledge every user action
  • Match feedback intensity to action importance
  • Don't interrupt flow for minor confirmations
  • Provide undo rather than 'Are you sure?'
  • Ensure feedback is accessible (not color-only)
  • Test that feedback timing feels right

来源与署名

来源:owl-listener/designer-skills位于interaction-design/skills/feedback-patterns提交9a6930c

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架