user-feedback-clarity

ユーザーフィードバックの明確さ

Disneyの原則を活用して、フィードバックアニメーションを見逃せないものにします。

問題の兆候

• ユーザーが複数回クリックする（フィードバックに気づかなかった）
• 「ちゃんと動きましたか？」という質問がある
• ユーザーが成功／エラーの状態を見逃す
• フォーム送信時に混乱がある
• 状態の変化に気づかれない

原則ごとの診断

予備動作

問題：アクション完了前の予兆がありません 改善策：すぐに読み込み／処理中の状態を表示します。ユーザーが入力を受け付けてもらえたとわかるようにします。

フォロースルー

問題：フィードバックの表示が短すぎて、すぐに消えます 改善策：フィードバックをしばらく表示します。成功メッセージは最低でも2～3秒表示する必要があります。落ち着くアニメーションも加えます。

演出

問題：ユーザーの注目している場所とは別の場所にフィードバックが表示されます 改善策：きっかけとなった操作の近くにフィードバックを表示します。ボタンがクリックされた場合は、ボタン上またはその近くに表示します。

誇張

問題：フィードバックが控えめすぎます 改善策：コントラスト、サイズの変化、または動きを強めます。フィードバックがユーザーの作業への集中に負けないようにします。

副次動作

問題：フィードバックの手段が1つしかありません 改善策：視覚、動き、色を組み合わせます。エラーには赤色と揺れを、成功には緑色とチェックマーク、パルスを使います。

すぐにできる改善

1. 即座に応答する - 100ms以内に何らかの表示を行います
2. きっかけとなった要素をアニメーションさせる - ボタンが目に見える形で反応するようにします
3. 色と動きを組み合わせる - 複数の手がかりを使います
4. フィードバックを画面内に表示する - ユーザーの注目している場所の近くに表示します
5. 触覚フィードバックを加える - 対応デバイスで使用します

トラブルシューティングチェックリスト

• 操作から100ms以内にフィードバックが表示されますか？
• フィードバックはユーザーが現在注目している領域に表示されますか？
• 周辺視野でもフィードバックに気づけますか？
• 複数の感覚（視覚、動き）が使われていますか？
• フィードバックは読めるだけの時間、表示されていますか？
• エラーのフィードバックは成功時よりも目立ちますか？
• テスト：テキストを読まなくても、操作が成功したかどうかユーザーにわかりますか？
• ユーザーでテストし、「今の操作はうまくいきましたか？」と尋ねます

コードパターン

/* 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); }
}