HOMEへ戻るMCCマガジン視覚心理学から考えるWebデザイン入門

視覚心理学から考えるWebデザイン入門

2005年10月11日

鴻巣 努 千葉工業大学 社会システム科学部専任講師、慶應義塾大学 総合政策学部非常勤講師、情報処理教育室講師

1.Webは視覚系に依存するメディアである
人間の情報処理を感覚レベルで分類すると、視覚、聴覚、味覚、嗅覚、触覚の情報処理に分けることができる。人間は、あらゆる場面で五感を活用し、情報を認知している。ユーザにとって、よりわかりやすく、魅力的な情報を提供するためには、その情報がどのように処理されているかを知ることは非常に重要である。


通常我々が人と話をしたり、店頭で商品を選んだりする場合に比べ、Webを操作する場合には視覚系依存傾向が強くなる。Webユーザの感覚情報処理を分析すると、視覚系への依存は9割を超えている。つまり、情報が「見やすく」レイアウトされているかは、Webユーザの評価を決定付けるものとなる。
視覚系の情報処理にはいくつかの特徴があり、これに基づいた情報のレイアウトになっているかを確認することによって、Webデザインは格段に向上する。逆に、ユーザの視覚特性を無視したページを作ってしまうと、ユーザは必要な情報にたどり着く以前にサイトから離れていってしまう。
2.アイカメラでユーザを探る
ユーザがWebサイトをどのように「見ている」か、を図る道具として、“アイカメラ”がある。
アイカメラは、特殊な画像処理装置を使って被験者の眼球を撮影し、視線の動きをWeb画像上に再現するものである。(図1:被験者の視線の動きの例)
図1:文章を読む場合の視点
図1では、□で示したところが「注視点」であり、直線で示した部分が「跳躍性眼球運動」である。通常我々は、視線は文字の上をなめらかに移動しているように感じているが、実際の眼球の動きを観察すると、図1のように注視と跳躍を繰り返すような動きが見られる。(跳躍の最中は、視覚情報が遮断されるので、人間の知覚上は違和感がないのである。)
図2:注視点と跳躍性眼球運動
アイカメラを使って、Webサイト閲覧時のユーザの視線を計測すると、実に多くのことがわかる。例えば、注視点が多く存在する部分は、ユーザがその部分を良く見ていることを意味する。注視点の分布の様子を調べることによって、開発者が意図した通りにユーザに情報が伝わっているかを知ることができる。また、注視点と注視点の間隔を調べることによって、どのくらい早く情報が理解されているかがわかる。
3.ユーザ心理も手にとるように!
人の目には、瞳孔という外界からの光の量を調節する機能がある。ネコの目を思い浮かべてもらえば、夜間光の少ないところではネコの目はパッチリと開き、明るいところでは細い目になるという機能である。人間の瞳孔は、この光量調整以外にも、心理状態を反映することが知られている。すなわち、興味のある対象を見ているときには拡大し、逆に興味のないものを見たときには縮小するのである。心理学者ヘスによる実験では、男子大学生に女性のヌード写真を見せたところ瞳孔が明らかに拡大し、男性の水着写真では縮小したという例がある。
図3:心理学者ヘスの実験データ
先述の画像処理を利用したアイカメラでは、瞳孔径も同時に計測することができる。Webユーザの瞳孔径を計測することにより、ユーザにとってそのサイトが魅力的であるかとうかを手にとるように知ることができるのである。
アイカメラや瞳孔径、さらに脳波計測などは生理指標と呼ばれ、デザインやユーザビリティの評価には非常に有効であることが知られている。こうした生理指標は、被験者がコントロールすることが難しいため(瞳孔を任意に拡大、縮小することは不可能!)、信頼性が高い。また少数の被験者でも、有効なデータが得られるなどの特長がある。何より、被験者がガラス張りになることが大きなメリットである。
図4:生理計測のメリットとデメリット
4.Webユーザは短気で自分勝手!?
こうした生理指標を使った研究例から、Webユーザの情報処理特性がわかってきた。まず、Webユーザの視覚情報処理は非常に短時間で行われているということである。
人が外界を見る場合には、「ちらっと見る」や、「じっくり何度も見る」というレベルの差がある。これは、ひとつの注視点の長さを測ることで推察することができる。通常、われわれが店頭で商品を探すような場合は、200~500ミリ秒、長いと1秒程度の注視が観察される。これに対して、Webユーザの場合には100~200ミリ秒程度。長い注視はほとんど見られない。また、ひとつの視対象への注視はほとんどが1回である。つまり、Webユーザは情報を読み飛ばすように、きわめて短時間で画面を見ているのである。
Webユーザがサイトの表示に待てる時間は8秒であるという「8秒ルール」説もあったが、ユーザがサイトを評価し、使いやすいか判断する時間はきわめて短時間であるということは、多くの実験データが傍証している。つまり、「じっくり時間をかけなければ見られない情報」はほとんどがスキップされてしまう。トップページにFlashや動画を置いているページがあるが、こうした情報はスキップされる確率が高い。短気なユーザに対して、「じっくり見る」ことが必要な情報は邪魔なのである。
図5:実験風景「Free View」
こう書くと、凝ったデザインやコンテンツは無用なのかという反論がありそうだが、重要なのはその使い方である。トップページでもっとも必要なのは、「サイトへの入り口」としての機能である。どのような情報がサイト内に存在しているかを「短時間」に教えるために、テキストベースの情報を短時間の注視でも理解できるようにしておくことが大切なのである。また、Webユーザはいくつかのサイトを比較検討している場合には特に、短時間の注視ですべてを判断する。その意味では、ユーザは自分勝手なのである。
ユーザが、サイトの情報を「じっくり見る」のは、他サイトとの比較検討を終え、そのページに対する明確な興味をもったときである。それが可能なのは、おのずとトップページではなく下層のページになるだろう。ユーザが「じっくり見る」態勢でないときに、凝ったデザインを押し付けるのは無意味なのである。
5.ユーザを逃がすサイトになっていないか
ここまで書いたように、ユーザの短気で自分勝手な方略に耐えるためには、まずはシンプルなデザインで、より効率的に情報を伝達する必要がある。短い時間で多くの情報を処理するためには、画像情報よりもテキストが適している。GUIの普及のせいで、何でも画像にすれば理解しやすいと思われている傾向があるが、これは大きな間違いである。
アイコンが効果的なのはいくつかの限定された情報だけであり、画像と意味が直結するものは非常に少ない。トップページに商品の画像だけ並べてあって、カーソルをそこに持っていかないと説明が現れないようなページを見かけることがあるが、そんなことをしている間にユーザはどこかへ逃げてしまう。一般的に、使いやすいと評価されているサイトを見ればわかるとおり、テキスト情報をうまくレイアウトし、8秒間で勝負できるシンプルなデザインになっていることがユーザを逃がさない秘訣である。
人間の情報処理は巧妙なようでいて、基本的な特徴はかなり共通している。ここまでの話も個人差があるだろうと思われるかたも多いだろうが、実験をしてみると個人差は意外に小さい。あなたのつくったサイトも、一度アイカメラで実験をしてみてはどうだろう。見てほしかった情報が、ユーザの目にまったく入っていないということがないように。
※アイカメラを用いたWebページの評価のお申し込みは、著者までご相談ください。

(『web creators』2004年12月号 vol.36(発行:(株)エムディエヌコーポレーション)より、著者、出版社の許可を得て転載)

鴻巣 努(こうのす つとむ)
千葉工業大学 社会システム科学部専任講師、慶應義塾大学 総合政策学部非常勤講師、情報処理教育室講師
1994年慶應義塾大学環境情報学部卒業、1996年同政策・メディア研究科修士課程修了、1999年同博士課程修了。同年千葉工業大学工学部プロジェクトマネジメント学科助手、2001年千葉工業大学社会システム科学部プロジェクトマネジメント学科専任講師。慶應義塾大学講師、国立木更津工業高等専門学校情報工学科講師、千葉大学大学院自然科学研究科講師、成蹊大学大学院工学研究科講師を兼任。
専門は視覚人間工学、ヒューマンインタフェース、認知心理学、社会心理学。
Webサイト: http://www.konosu-lab.net/
e-mail: konosu@pm.it-chiba.ac.jp

メールマガジン「てらこや」で更新情報をキャッチ!

「てらこや」は、「学び」を改めて見直すきっかけとなるようなさまざまな情報の提供を目的に発行している無料メールマガジンです。慶應義塾の社会人教育機関である慶應丸の内シティキャンパス(慶應MCC)が毎月発行しています(原則第2火曜日)。