Back to Details

user-feedback-clarity

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

User Feedback Clarity

用户反馈清晰度

Make feedback animations unmissable using Disney's principles.
运用迪士尼动画原理打造醒目的反馈动画。

Problem Indicators

问题迹象

  • Users click multiple times (didn't see feedback)
  • "Did it work?" questions
  • Users miss success/error states
  • Form submission confusion
  • State changes go unnoticed
  • 用户多次点击（未看到反馈）
  • 出现“操作成功了吗？”之类的疑问
  • 用户错过成功/错误状态提示
  • 表单提交时存在困惑
  • 状态变化未被注意到

Diagnosis by Principle

基于迪士尼原则的诊断

Anticipation

Anticipation（预备）

Issue: No buildup before action completes Fix: Show loading/processing state immediately. User should know their input was received.
问题：操作完成前没有任何铺垫 修复方案：立即显示加载/处理状态。让用户知道他们的输入已被接收。

Follow Through

Follow Through（跟随动作）

Issue: Feedback appears and vanishes too quickly Fix: Let feedback linger. Success messages need 2-3 seconds minimum. Add settle animation.
问题：反馈出现后消失过快 修复方案：让反馈持续显示一段时间。成功提示至少需要保留2-3秒。添加收尾动画。

Staging

Staging（舞台呈现）

Issue: Feedback appears outside user's focus Fix: Show feedback near the trigger. If button was clicked, feedback should appear on/near button.
问题：反馈出现在用户焦点之外 修复方案：在触发元素附近显示反馈。如果点击了按钮，反馈应出现在按钮上或其附近。

Exaggeration

Exaggeration（夸张）

Issue: Feedback is too subtle Fix: Increase contrast, size change, or motion. Feedback must compete with user's task focus.
问题：反馈过于微妙 修复方案：提高对比度、改变尺寸或增加动效。反馈必须能够吸引用户的注意力，与当前任务竞争焦点。

Secondary Action

Secondary Action（次要动作）

Issue: Only one feedback channel Fix: Combine channels: visual + motion + color. Error = red + shake. Success = green + checkmark + pulse.
问题：仅使用单一反馈渠道 修复方案：结合多种渠道：视觉 + 动效 + 色彩。错误提示=红色+抖动。成功提示=绿色+对勾+脉动效果。

Quick Fixes

快速修复方案

  1. Immediate acknowledgment - Show something within 100ms
  2. Animate the trigger - Button should respond visibly
  3. Use color + motion together - Redundant signals
  4. Keep feedback in viewport - Near user's focus
  5. Add haptic feedback - On supported devices
  1. 即时确认 - 在100毫秒内显示反馈内容
  2. 为触发元素添加动画 - 按钮应做出可见的响应
  3. 结合色彩与动效 - 提供冗余信号
  4. 确保反馈在视窗内 - 位于用户焦点附近
  5. 添加触觉反馈 - 在支持的设备上

Troubleshooting Checklist

故障排查清单

  • Does feedback appear within 100ms of action?
  • Is feedback in user's current focus area?
  • Would feedback be noticed peripherally?
  • Are multiple senses engaged (visual, motion)?
  • Does feedback last long enough to read?
  • Is error feedback more prominent than success?
  • Test: Can users tell if action succeeded without reading text?
  • Test with users—ask "did that work?"
  • 反馈是否在操作后100毫秒内出现？
  • 反馈是否位于用户当前的焦点区域？
  • 反馈能否在用户余光中被注意到？
  • 是否调动了多种感官（视觉、动效）？
  • 反馈持续时间是否足够用户阅读？
  • 错误反馈是否比成功反馈更醒目？
  • 测试：用户能否无需阅读文字就判断操作是否成功？
  • 与用户测试——询问“刚才的操作成功了吗？”

Code Pattern

代码模式

css
/* Button feedback */
.button:active {
  transform: scale(0.95);
}

.button.loading {
  pointer-events: none;
}

.button.success {
  animation: successPulse 300ms ease-out;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: var(--success); }
  100% { transform: scale(1); }
}

/* Error shake */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
css
/* Button feedback */
.button:active {
  transform: scale(0.95);
}

.button.loading {
  pointer-events: none;
}

.button.success {
  animation: successPulse 300ms ease-out;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: var(--success); }
  100% { transform: scale(1); }
}

/* Error shake */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}