読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

Lionel Barrow「ページデザインする人が人間の眼について知っておいた方がいいこと4つ」

斜め読み
  • アイトラッキングの分析によるコンサルやってるGazeHawkの2011.7.22のブログエントリ
  • 2012.3.11追記

What everyone should know about the human eye | GazeHawk Blog

アカデミックな研究、面白い実験、アイトラッキング分析を絡めて学んだこととページデザインに活かせることを淡々と書く、という主旨のエントリ

以下斜め読んだ内容

人間の眼とカメラは違う

  • カメラ
    • 動きは遅く、連続的、なめらか
    • パン(左右にレンズを動かす)、ズーム、チルト(上下にレンズを動かす。人間の眼はどれもできない
  • カメラと人間の眼は似てる所がない
  • 人間の目
    • 凝視とサッカード。この2つの状態をもつ
    • 凝視(fixation)
      • 200〜400ミリ秒継続
      • 眼球の運動が停止した状態
    • サッカード(saccade)
      • 高速の眼球運動
      • 200ミリ秒以下という短いインターバル
      • 両目が同時に停止地点へ移動(fixationへ移行)
      • 動きの段階は20弱ある
  • サッカードは色々面白いトピックがあるが割愛
  • 見てる人は「チラッとみて別の箇所へジャンプ」を繰り返しながらサイトをみてる

見たいものだけみてる

  • 人は視線を向けてる対象を常に見ているわけではない
  • 眼は常に活動してる
  • 意識的に注意を向けてるときでも眼を通して受け取ってる情報の大半を処理できていない
  • 視界にあるものの中から注目したいものをピックアップしている
  • monkey business experimentという実験が上手く説明してる
    • The Monkey Business Illusion - YouTube
    • 被験者は2チームがバスケットボールをパスしてる動画に見てもらう
    • 被験者にボールがパスされた回数を数えながら動画を見てもらう
    • 動画途中で着ぐるみゴリラが登場ししばらく胸を叩くパフォーマンスをしてから画面から消える
    • 被験者の半数が着ぐるみゴリラの登場に全く気が付かなかった
  • 日常生活でどの程度こういう効果が表れてるかを数値化して示すのは難しい
  • 訪問者が見落としがちなものがあることを前提にしてどうやってウェブサイトをデザインしていくか?
  • 簡単な解決。ページ上にあるのは1つだけ。これを徹底すればいい。
    • 一度にいくつも情報を受け取ることを期待できない

人間の脳は勝手に顔認識してくように作られてる

  • 人間が誕生して成長していくのに合わせて顔認識機能が発達してく
  • 生後二か月の赤ん坊の行動バターンに視界に飛び込むものから顔に視線を向ける傾向がみられるという研究あり
  • The development and neural bases of face recognition - Nelson - 2001 - Infant and Child Development - Wiley Online Library
  • ついつい顔(や顔にみえるもの)へ注目してしまう
    • 人間にとって先天的な衝動
  • ウェブサイトに顔写真を配置したら、サイト訪問者のほぼ全員がその顔写真に目をむける
    • 顔写真がウェブサイトの1st viewエリアにあれば、サイト訪問者が最初に目を向けるものになるはず
    • 顔に目を向けてしまうのは脊髄反射並になってる

他人が目を向けているものについつい目を向けてしまう

  • 顔認識の話の派生ネタ
  • James Breezeの実験
    • You look where they look | User Experience Strategy, Usability Testing, Eye Tracking - UsableWorld
    • 被験者100人に広告2パターンみせ、アイトラッキング
    • 広告には赤ん坊と短いテキスト。
    • パターン1では、赤ん坊が正面を向いてる
      • ヒートマップは赤ん坊の顔に集中
    • パターン2では、赤ん坊が広告右半分に配置されたテキストへ目を向けている
      • ヒートマップは赤ん坊と赤ん坊の視線の先にあるテキストに集中
      • 赤ん坊の視線が向けられてるものを探ろうとする
      • 赤ん坊の顔のところへ視線が止まるが、止まってる時間は短くなる
  • 重要なコンテンツや要素は顔の近くに配置されてる場合は、その配置がサイト訪問者の視線の動きに与える影響に注意する