本文へスキップ

フィードバックの即時性

操作した瞬間に、受け付けたこと・何が変わったかを返す。反応が無いと、人は押せていないと思って繰り返すか、不安になって離れる。

Immediate Feedback

なぜ効くか

Nielsen の 10 ヒューリスティックの第 1 項「システム状態の可視化」が根拠で、Norman も「行為のあとに結果を評価できること」を操作の基本構造に置いている。物理の道具は押せば沈み、音がする。画面はそれを自分で作らないと無反応になる。Web UI で反応が抜けやすいのは、通信を伴う操作（コピー・カート追加・保存）と、状態の切り替え（トグル・お気に入り）で、押した直後に変化が無いと二重送信や連打が起きる。反応は「受け付けた」（押し込み・波紋）「進んでいる」（送信中）「終わった」（チェック・トースト）の 3 段階があり、見えない利用者にはライブリージョンで同じ内容を届ける。

UIでの当て方

  1. 01押した瞬間の変化（押し込み・波紋・色の変化）を必ず付け、結果が出るまでの間も何かが動いている状態にする。
  2. 02結果は操作した場所の近くで返す。コピーならボタンの文言、カート追加ならカートのバッジ、削除なら行の消失。
  3. 03完了の通知は 2〜4 秒で消える控えめな表示にし、続きの操作を邪魔しない。取り消せる操作なら取り消しボタンを添える。
  4. 04見た目の変化と同じ内容を aria-live（polite）で読み上げる。エラーだけは role=alert で割り込ませる。
  5. 05入力の制約（残り文字数・強度）は打つたびに更新し、上限に近づいたら色で予告する。

誤用・反例

  • 反応を派手にしすぎて、毎回の操作が演出待ちになる。反応は速く、短く。
  • 成功のトーストだけ出して、失敗のときは何も出さない。

この原則を体現するパーツ

  • クリック

    リップル波紋ボタン解説あり

    Ripple Effect

    クリックした位置から波紋が広がる。Material Designでおなじみの「押した手応え」。

    • JS
    コードを見る →
  • クリック

    押し込みの手応えトグル

    Press-Scale Toggle

    「保存」「通知」「お気に入り」の 3 つのトグル。押している間だけ 0.96 倍に沈み、離すと弾んで戻る。切り替わった瞬間に navigator.vibrate があれば 10ms 震える。

    • JS
    コードを見る →
  • クリック

    コピー完了フィードバック

    Copy-to-Clipboard Feedback

    クリックすると「✓ コピーしました」に変わって元に戻る。操作が伝わる安心感のある演出。

    • JS
    コードを見る →
  • クリック

    トグルスイッチ解説あり

    Toggle Switch

    クリックでつまみが滑らかにスライドする ON/OFF スイッチ。設定画面の定番UIパターン。

    • JS
    コードを見る →
  • クリック

    カート投入アニメ

    Fly-to-Cart Animation

    「カートに入れる」ボタンで商品サムネがカートアイコンへ放物線を描いて飛び込み、バッジ数が +1 される。タップでも動作。

    • JS
    コードを見る →
  • 入力

    文字数カウンタ解説あり

    Character Counter

    テキストエリアの残り文字数をリアルタイム表示。上限に近づくと色が変わり、超過を防ぎやすい。

    • JS
    コードを見る →
  • クリック

    トースト通知解説あり

    Toast Notification

    ボタン操作後にふわっと現れ、数秒で自動消滅する通知。処理完了などの確認に使う。

    • JS
    コードを見る →
  • クリック

    ライブリージョンの読み上げ順解説あり

    ARIA Live Region

    「カートに追加」は aria-live=polite で今の読み上げが終わってから、エラーは role=alert（assertive）で割り込んで読まれる。帯に読み上げ中の文と待ち行列を可視化。

    • JS
    コードを見る →

関わるカテゴリ

出典