情報考学　Passion For The Future

Webデザイン：ナビゲーションと目の動き

夜の会合で話が盛り上がり、終了後、キノトロープの生田社長とD4DRの藤元社長（元フロントラインドットジェイピー）と3人で銀座で飲む。（生田社長、ご馳走様でした）。お二人とは、以前より面識はあったのだけれど、腰を落ち着けてお話しするのははじめて。時間がもったいないと思うくらい濃い話が続く。めったにない機会なので私もしゃべりすぎるくらいしゃべった。あっというまの数時間。Web制作とeビジネスの世界で著名なお二人とノリノリの情報交換会ができて、とてもとても楽しかった。勉強になった。

生田さんから、キノトロープではWeb制作のクオリティを高めるためにWebユーザビリティテストを導入しているという話を聞く。Webサイト納品の前に、Webに詳しくない、サンプルユーザにWebを使わせてみて、何パーセントくらいが、目的のコンテンツをみつけたり、欲しい商品を買ったりすることができるかを試す。ユーザの操作している姿や画面をビデオに記録して分析したりもするようだ。

このテストによって、Webクリエイタのユーザビリティへの思い込みが排除され、ナビゲーションがきちんとしたWebが完成する。プロの作り手からみると、ユーザの動きには、「なんでそんな簡単な操作がわからないの？」と驚くこともあるそうだ。キノトロープといえばWeb制作の老舗一流どころとして有名なわけであるが、逆にプロであることが、普通の人の感覚を見えなくしてしまうことがあるらしく、特に気をつけているという。

3人とも「ネットはもう普通の人たちのものだから、普通の感性を私たちも見極めないといけないですね」という結論でお開きとなった。

この話を聞いたときに思い浮かんだのが98年の米国の研究「Banner Blindness」だ。これは今でも有効な話だと思う。

・Banner Blindness: Web Searchers Often Miss "Obvious" Links
（バナー盲目効果：Web探索者はしばしば「分かりやすい」リンクを見逃す）
http://www.internettg.org/newsletter/dec98/banner_blindness.html

Web制作者は、商品をオススメのページへのリンクや、「購入する」だとか「会員登録する」、「こちらをクリック」といった「重要な」リンクに、大きく派手な色の目立つ視覚表現を割り当てがちだ。階層的に奥にある「ホットトピック」ページのショートカットを積極的に、トップページに表示したりもする。Webデザイン上、常識に近いこの手法だが、必ずしも効果があるとは限らない、というのがこの論文である。

この研究では、まず、重要なリンクをバナー広告のような表現で、ナビゲーションメニューの上に配置した場合の効果をユーザテストで計測した。（実験対象は毎日Webを使うようなユーザ中心）。

その結果、

・派手なイメージは広告と誤解されてしまう
・ユーザは通常のナビゲーションリンクを探すことが多い
・ナビゲーションリンクのグループ（メニュー）と離して強調リンクを置くとユーザは機能を認知できない

などといった原因で、この形式での重要なリンクの表現は効果がないと結論された。

次の実験では、18個のリンクからなる、カテゴリ選択メニューのあるトップページから、ユーザにaという本を探すように指示した。ここでは、「aという本はCのカテゴリにあります」という文字の、大小のテキストや画像のリンク（広告風とそうでないもの）を表示した場合の効果を計測した。

こちらも、どの表現をしても、ユーザは通常のメニューで目的の情報をたどって探す方が多く、ホットトピックへのショートカットは見逃されてしまうという傾向が見られた。

この研究は２つの実験から得られた制作者へのアドバイスとして、誘導したい重要なリンクを他のリンクから目立つように離しておいたり、派手な色使いをすると、逆にユーザからは見えなくなってしまう、と注意している。

改善案として、通常のメニューの中で、強調したいリンクを2重に表示したり、重要なリンクの背景色だけを変えるなどの表現手法の方が有効である、と実例を見せながら述べている。目的を持ってWebを見るヘビーユーザは、オススメショートカットなど無視してしまうという傾向は、この実験から5年以上経過した現在も通用するだろう。それよりはメニュー機能の枠の中で強調した方が、機能を認知させやすいのだ。

ユーザテストが制作者の思い込みのとおりに行かなかったケースといえる。

時代は進んで、海外では、視線の動きに注目したWebユーザビリティの研究やツールがいくつかある。メガネ上のセンサーをつけたユーザに、Webをテストしてもらい、目の焦点の動きから、注意がどう動くか、結果としてどのリンクをクリックしたかを詳細に分析できる。

・EyeTracking.com
http://www.eyetracking.com/

米国大手ITニュースサイトCNETのナビゲーション分析。その結果と改善の説明がサイトに掲載されている。

・EyeTools
http://eyetracking.stanford.edu/

広告の注目率の分析。

このようなツールがあれば、論より証拠である。実際に何パーセントのユーザがWebのパーツのどこにどの程度の注目をおいて、リンクをクリックして行くかが一目瞭然になる。

Posted by daiya at 2003年11月19日 23:59