有名サイト、かってに解析！

「早稲田大学」をエキスパートレビュー！（続き）

「早稲田大学」の水平展開ナビゲーションが使いづらい理由とは？

第37回、第38回で記事にした「ユニクロ」のトップページ（図7）や、他のメガドロップダウン式メニューの画面（図8）をご覧いただきたい。これらの例では、他の階層のメニューに戻ってしまったり、別のものを選択してしまったりする誤りは相対的に低いと思われる。

さてこの両者の使い勝手の溝がどこにあるのかおわかりだろうか。

図7：「ユニクロ」のプルダウンメニューで第2階層の「トップス」を選択した画面

図8：「Action Envelope」のメガドロップダウンメニューで、グローバルナビゲーションの「PAPER」を選択した画面

プルダウンメニューの原則として、下の階層のメニュー表示が始まる場所は、選択された上の階層の直下となっている。そう考えるとどこがおかしいのかがわかる。「早稲田大学」の右に展開していくメニューは、第3階層の項目表示が必ず、メインビジュアルの上部から始まっていること。これが問題なのだ。

下の階層の表示開始位置が問題だ

言葉で言われてもピンとこないだろう。図9を見てほしい。第2階層が「Q&A」なら、第3階層のメニュー表示開始場所は、現在の場所（赤枠で囲んだ部分）ではなく、ポインタを真横に移動した場所から始めるべきだ（黄色枠で囲んだ場所）。

図9：第3階層のあるべき表示位置

こうすれば図6の2アクションは、少なくとも1つの項目では1アクションになるし、それ以外の項目選択する場合も、マウスは最小移動で済むようになる。そして図5でも説明したように、さらに第2階層と第3階層の間延びを無くせば、マウスの移動による項目選択の混乱も大分減ると思われる。

筆者はページをHTMLやCSS、JavaScript、Flashなどでいちから作った経験はないので、どういう制約があるのか知るよしもないが、このインターフェースの造りからすると、階層型で横展開していくナビゲーションの表示範囲を、

メインビジュアルの中に納めなければいけないという制約
第2階層の横表示の幅は固定にしなければならないという制約

この2つの制約があるために、その範囲内で工夫したのだろう。もしそうでなければ、スクロールバーを使ったりする必要もなく、メインビジュアルの外にまで表示していいはずだ。この階層型メニューを利用しているときは、上位階層のメニューさえ見えていれば、他のコンテンツが下に隠れてもまったく問題ないので、もしメインビジュアルの中で表示しなければいけない技術的制約がないのであれば、ただちに変更すべきナビゲーションのように思う。

なぜかリンクが張られていない第2階層

もう1つ、ナビゲーションで不思議な部分があった。それはこの3階層のメニューの第2階層だけが、そこでクリックをしても反応がないことだ。

どういうことかというと、第1階層の「受験生の方へ」などはクリックすると該当ページに飛ぶし、一番右の第3階層も該当のページに飛ぶのだが、第2階層は、クリックしてもどこのページにも移動しない。リンクが張られていない。どうやら第2階層はURL構造の階層ではなく、ナビゲーション上だけの論理的な階層のようだ。

あと、トップページの右上部分にはサイト内検索もあり、「交通アクセス」「サイトマップ」なども配置してある。「Language」だけは、マウスオーバーするだけで、自然にメニューが下りてくるという動きがある。これは他と動きが違うのだが、余計にワンクリックさせることなく言語を切り替えられるので、これでよい感じがする。「お問合わせ」のページは、電話番号、メールアドレスなども代表、各部門すべて詳細にあり、出し惜しみ感もなく好感が持てる。

今回はここまでとしたい。またしてもトップページの話が長くなってしまったが、トップページに、検索からも相当の割合で流入があると思われる場合は、トップページの使い勝手はかなり重要だ。次回は、本題の一般入試の内容とオープンキャンパス日程を確認していこう。

◇◇◇

さて、この連載では、