マイクロインタラクション

状況: 月間3,000件のアクセスがあるBtoB企業のお問い合わせフォーム。送信完了率が65%で、「送信できたかわからない」という問い合わせが月15件。

Before（フィードバックなし）:

• 入力欄にテキストを入力 → 何も起きない
• 送信ボタンを押す → 画面が白くなって数秒後にサンクスページに遷移
• メールアドレスの形式が間違い → 送信後にエラーページが表示

After（マイクロインタラクション追加）:

• 入力欄にフォーカス → 枠線がブルーに変化（100ms）
• メールアドレス入力中 → リアルタイムで形式チェック、OKなら緑のチェックマーク
• 必須項目が未入力 → 送信ボタンがグレーアウト（無効状態）
• 送信ボタンを押す → ボタンがローディングスピナーに変化 → 完了したらチェックマークに変化 → 「送信完了しました」のメッセージがフェードイン

送信完了率65%→82%、「送信できたか不明」の問い合わせ月15件→0件。フィードバックを追加しただけでこの変化。「何も起きない」は最悪のUX。

状況: 月間利用者8万人のファストフードチェーンのモバイルオーダーアプリ。「注文する」ボタンを押した後の反応が遅く（1.5秒）、ユーザーが不安になって連打。二重注文が月400件発生し、返金対応コストが月80万円。

改善内容:

• 「注文する」タップ → 即座にボタンがローディングアニメーションに変化（50ms）
• ボタンの2回目のタップを無効化（debounce処理）
• 注文成功 → コンフェッティアニメーション + 「注文番号: 0234」を大きく表示
• 注文失敗 → 「通信エラーです。もう一度お試しください」+ リトライボタン

二重注文月400件→8件、返金コスト月80万→1.6万円。50msのフィードバック追加でこの差。マイクロインタラクションはUXだけでなくビジネスコストに直結する。

状況: 小学生向けのオンライン算数ドリルアプリ。正解しても不正解でも画面の変化が乏しく、子どもの集中力が15分で切れる。7日後の継続率が18%。

改善内容:

• 正解時: 星が飛び散るパーティクルエフェクト + 効果音「ピンポーン」 + スコアがカウントアップ
• 連続正解: コンボカウンター表示（「3連続正解！」）+ 背景色がゴールドに変化
• 不正解時: 穏やかな「ブッブー」+ 正解へのヒントをアニメーションで表示（罰ではなく学び）
• セッション終了時: 今日の成果サマリー + キャラクターが「よくがんばったね！」と表示

学習時間1.9倍、継続率2.3倍、回答数2.2倍。問題の内容は一切変えていない。フィードバックの「楽しさ」を設計しただけ。