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 從公開儲存庫中收錄這些內容。

檢舉或申請下架