#423
インタラクション・アニメーション
#423変化盲
変化盲
別名・表記:Change Blindness
UIXHERO Definition
目の前で何かが変化しても、視界がいったん遮られたり、注意が他に向いていると、その変化に気が付かない現象。
概要
人間の視覚的注意の限界を示す現象。画面の一部が大きく変わっても、瞬きの瞬間や、画面切り替え（暗転）、あるいは別の場所に集中している時であれば、人はその変化に全く気づかないことがある。変化の大きさよりも「注意が向いていたかどうか」が決定的である。
UXでの活用
- 明確なフィードバック: ボタンを押した結果、画面の一部だけが更新された場合（Ajaxなど）、アニメーションや色変化を使って「ここが変わりました」と明確に伝える必要がある。そうしないとユーザーは「何も起きていない」と勘違いし、連打してしまう。
- エラーメッセージ: フォームのエラーを、スクロールしないと見えない位置にこっそり表示してはいけない。視界に入る場所、目立つ動きで通知する。 ステートレスな画面遷移の場合も注意が必要。
- アニメーション: アニメーションは「変化を知覚させるための注意誘導装置」である。変化を「突然」ではなく「連続的」に見せることが重要。
💡 使いどころ
画面の状態が変化したことを、ユーザーに確実に伝えたい時。特に非同期通信（Ajax）で部分更新を行う場合。
⚠️ 注意点・誤用
変化が控えめすぎると、ユーザーは気づかない。「保存しました」というトースト通知や、変化箇所を一時的にハイライトするなどの演出が必須。
具体例
- 商品をカートに入れた瞬間、カートアイコンがアニメーションする
- フォーム送信後、ボタンが「送信中...」→「完了」に変わる
出典・参考文献:
- Rensink, R. A., O'Regan, J. K., & Clark, J. J. (1997). To see or not to see: The need for attention to perceive changes in scenes. Psychological Science, 8(5), 368–373.
- Simons, D. J., & Levin, D. T. (1997). Change blindness. Trends in Cognitive Sciences, 1(7), 261–267.
- Simons, D. J., & Chabris, C. F. (1999). Gorillas in our midst: Sustained inattentional blindness for dynamic events. Perception, 28(9), 1059–1074.