情報考学　Passion For The Future

Webデザイン：使いやすいメニューの作り方と魔法の数

今日はデジタルハリウッドのWebプロデュース本科で、何度目かの、ネットリサーチや情報処理についての3時間の講義をさせてもらった。Webのビジネスに関わるプロデューサ候補生に情報の収集と整理、分析と文書化の各フェイズにおける理論、ノウハウとツールを紹介していくものだ。（私はこのレクチャーをパッケージ化しているので企業研修向けに使いたい方がいたらお問い合わせください、と少しスケベ心を出してみる）。

今日のBlogはそのテーマでWebと情報について続けて、考えてみたい。また米国マイクロソフトリサーチの面白い論文を発見したからだ。

・Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval
（Webデザイン：情報検索のための記憶と構造と匂いのむすびつき）
http://research.microsoft.com/users/marycz/chi981.htm

Webサイトのナビゲーションメニューについての研究である。HTMLの本質であるハイパーリンクは階層構造でWebページ間の移動をナビゲーションする。ナビゲーションのビジュアルな表現が、ここでいう「メニュー」である。限られたサイズのWebページの平面の上で、メニューはそう大きな面積を占有してしまうわけにはいかない。また、サイト内にあるすべてのページへのリンクをトップページに表示してしまったら、ユーザは情報の迷路に迷ってしまう。

この論文は、「たくさんのページを抱えるサイトを運営する管理者はどうメニューを作ったら良いのか？」という質問に対する一つの回答を与える。

この実験では512ページのWebページを、効果的にナビゲーションするための実験を行った。

メニューの選択肢の数とサイトの構造を表現するのに次のような式を使っている。

2*2

上の表現はトップページに2つの要素のメニューがあって2階層目にさらに、2つのメニューがあるという意味だ。実験ではさらに数の大きな、以下の3つの構造を使った。

8x8x8　トップページに８つの選択肢、2階層、3階層目も8つの選択肢、
32x16　トップページに32の選択肢、2階層目に16の選択肢
16x32　トップページに16の選択肢、2階層目に36の選択肢

この3つの構造を持つWebを実際にユーザに使わせて、探している情報を見つけるまでの時間を計測し、ユーザには実験後に使いやすいものはどれだったかを投票させた。各メニューには自分のいる位置を、いわゆるパン屑ナビゲーションとして表示した（例　「ニュース：スポーツ：サッカー」）。

投票の結果は以下のとおりとなった。

また、どんな点が評価されているかはこの表で分かる。

この研究者たちは認知と反応速度に関する詳細な分析と合わせて、メニューにおける深さと広さのトレードオフ（depth/breadth tradeoffs）という法則を発見した。メニューの選択肢の数と、階層構造の深さは、比率が崩れるとユーザを迷わせてしまう、バランスが大切だ、という法則である。具体的には、ページ数が十分に多いときには、8*8*8のメニューは作ってはいけない。32*16や16*32のメニューを作れということだ。

視覚探索の能力と記憶範囲の能力の二つが関係がある要素である。視覚探索とはメニューから目が必要な情報を瞬時に見つける能力、記憶範囲の能力とは今自分は何を探していて階層上のどの位置にいるのかを覚えておく能力である。

8*8*8のメニューを作ろうとするとトップページのカテゴリ名は、どうしても一般的な名称を使わざるを得ない。スポーツのディレクトリであれば「球技」「武道」「陸上」などにあたる。これよりはいきなり「サッカー」「野球」「100メートル走」という細かいカテゴリ名を表示した方が効果があるのだ。人間の視覚探索能力は32や16くらいのメニューなら必要な情報を瞬時に判別できる。

あまりに一般的な名称から目的情報を探そうとすると、クリックしているうちに目的を忘れてしまうことがある。8*8*8の構造は、今自分がどこにいるのかも迷いやすくなる。ヒトが情報の範囲を記憶しておく能力を超えてしまうわけである。

実験の結果、8*8*8では視覚探索と範囲記憶の能力の相乗効果が出ないことが判明し、残りのふたつではうまく機能することが数値として判明した。

以前、このBlogでも触れたジョージミラーの記憶のマジックナンバー7±2についてはこの研究者たちも考察している。8*8*8という構造を設定したのは8がマジックナンバーであるからだったろう。しかし、今回のケースではメニューの数を単純に8にしたからといって選びやすくなるわけではないことが分かった。（この論文もミラー説を否定しているわけではない）。

むろん、メニューの使いやすさはこれらの要素で決まるわけではない。この研究者たちは情報の匂い（Scents of Information）という言葉を使っているが、メニューを見てその奥に何がありそうかの匂いをメニューのカテゴリ名が漂わせることも大切だ。メニューの配置や修飾の仕方といったレイアウトデザインの重要性にも触れている。（詳しくは原文参照）

ちなみにYAHOO!のトップページのカテゴリ表示数は、この記事の執筆時点では約70。最終的に何ページをデータベース化しているか知らないが、分母を考えるとこのくらいが適当なのかもしれない。他のサイトも調べてみると面白いことが分かるかもしれない。後日、ここで日本のWebのメニュー調査をやってみようかなと思う。

参考情報：
・情報検索のカギは「匂い」（Scents of Informationについて）
http://www.hotwired.co.jp/news/news/technology/story/20010611302.html
情報の匂いに関する最新の動向ニュース

・ウェブ認知ウォークスルーによるウェブサイトユーザビリティの評価
http://staff.aist.go.jp/kitajima.muneo/Japanese/PAPERS(J)/CWWJ.pdf
Webのナビゲーションリンクとカテゴリ名の意味などを深く考察した論文。

Posted by daiya at 2003年11月15日 23:59 | TrackBack