ウェブサイトのナビゲーションバー

Hi, Tog

私は今仕事で、大規模なウェブサイトの再構成を行っています。このサイトは主に二つの使われ方をされています。

1. 参考情報として
2. 構造化されたチュートリアルとして

問題は、どうやってナビゲーションバーを実装するかです。これには二つの機能を持たせなければなりません：

1. ユーザが今どこにいるのかを明確に示す
2. 行きたい所へすばやく移動させる

ユーザはスペックの低いものから高いものまで様々な PC を使用しており、その多くは解像度640×480の14インチスクリーンを使用していると思われます。そのためグラフィック的にはあまり広い面積を使うことができません。

とにかく、やるべきことは何でしょうか？ このサイトは4レベルの階層からできているので、以下のような方法が考えられます：

1. “メインメニュー”バーから各第一階層のセクションにリンクする（テキストリンクで実装）。現在見ているセクションを識別するためにそのリンクを違う色にする。
2. useit.com で紹介されている Nielsen 博士の方法を使い、水平に並んだナビゲーションからユーザが辿った階層を自由に戻れるようにする。しかし同階層の別ページへ直接移動することはできない。
3. 階層を下がる毎に新たなナビゲーションが追加されるような複数階層に渡るナビゲーションバーで、同階層の別ページへも、上の階層へも直接移動できるようにする。これも以下のようにテキストリンクで実装する：
   
   
   
   これによってさらに自由度が上がります。けれどこれを実装するのは手間がかかるし、スクリーンのスペースを多く消費してしまうのです。

何か他にアイデアや選択肢があるでしょうか？ どんなことでも構いません。私は大学の HCI コースでこの手のことをたくさんやりました。しかし膨大な情報を含むサイトをスペックの低いマシンを使用しているユーザが利用する時、これはとても難しい問題になります。

Cheers,
Stu

ひとまずこのディスカッションのために、このサイトには深い階層が必要であり、それを利用するのは平均的なユーザで、彼らはこのサイトを時々訪れるものと仮定しておこう。（もし私がこのプロジェクトに助言するとすれば、まず本当に4階層も必要なのかをもう一度検討し、実際のユーザはどういった人たちなのかを正確に把握するように言うだろう。）

ナビゲーションバーは、コンピュータの上級者に対して第一の役割を果たす：ある地点Aからある地点Bまで迅速に移動させること。第二はより重要で平均的なユーザに対する役割である：ユーザに地図を提供すること。Stu の三つの方法について、地図としての機能から考えてみよう。その1、メインメニューはサイトのメンタルモデルを形成するのを助ける。これは例えれば一枚の紙に描かれた全国地図のようなもので、主要な街だけが配置されており、そこには道路や小さな街は描かれていないといった感じだ。

その2である Jakob の方法は、シンプルでコンパクトなところが特長だ。これは例えればヘンゼルとグレーテルのパン屑の地図であるが、いつまでも無くならないパン屑である（あなたのシステムの信頼性に依存するが）。うまく実装すれば、コンピュータの上級者にはとても便利なものになる。

Stu の方法その3は最も理想的なものだ。ユーザは自分が今どこにいるのか、どこから来たのか、そして次の場所へどうやって行くのかが分かる。メンタルモデルを形成する必要もなくユーザの学習にも役立つので、ユーザビリティは向上する。

この方法では、Stu も指摘しているとおり、多くの画面スペースを消費してしまう。そこで基本的なコンセプトはそのままに、グラフィックデザイナーに努力してもらって、主に天地の長さを縮める方向で4つか5つのバリエーションを作成してもらうとよい。例えば、第一階層を示す要素を左の方に縦に並べて、それに続く要素は下にぶらさがるのではなくその隣でページの一番上から始まるようにする。デザイン的に完璧ではないが、かなりコンパクトになるだろう。

「ウェブデザインの憂鬱」でも書いたとおり、このような地図は HTML エディタのベンダや プロバイダによってサイト管理システムの一部に組み込まれるべきだと思っている。ウェブマスターは用意されたスタイルやデザインの中から選ぶだけで、あとは自動的に生成されるとよい。これが省スペースで分かりやすい機能として標準化されれば、ウェブサイト毎に異なるデザインにユーザが戸惑うこともなくなる。現時点ではまだ実現されていないが、それほど時間はかからないはずだ。それまでの間、Stu、君の向かっている方向は正しいだろう。

- Tog