はじめに
Webサイトのナビゲーションに関しては、以前から、目的ページを開くのに必要なクリック回数を少なくすることが重視されてきました。けれどもそれは、ナビゲーションの本来の目的、つまり「簡単に分かりやすく情報を見つけられる」ということに結びつくとは限りません。また、Webサイトが大きくなるにつれ、ドロップダウンメニューやツリービューなどの従来のナビゲーション制御は、実用的ではなくなってきます。インターネットが高速になり、画面の解像度も上がった現在、開発者は新しいスタイルのナビゲーションを導入できます。
この記事では、新しいスタイルのナビゲーションの1つである「インクリメンタルナビゲーション」を取り上げます。このナビゲーションを実装するため、私はカスタマイズ可能なフレームワーク「Theseus」を作成しました。Theseusは、内部的にはASP.NETのSiteMapクラスと構成済みサイトマッププロバイダを使って、インクリメンタルナビゲーションを実装します。このフレームワークは記事の冒頭のリンクからダウンロードできます。
まずは、インクリメンタルナビゲーションの概要を説明し、次にTheseusを使ったWebサイトへの実装手順を説明します。では、早速始めましょう。
インクリメンタルナビゲーションの利点
最近のWebサイトではインクリメンタルナビゲーションを使っているものが増えています。この方式のナビゲーションでは、ユーザーは情報を求めていくつかの軽いページをクリックしていくことになります。クリックするたびに、小規模ながらすぐに見て分かる変化がナビゲーションユーザーインターフェース上に現れます。従来のドロップダウンメニューと異なり、クリック後に選べる項目は情報階層の次のレベルに限られます。また、階層構造における「現在位置情報」（パンくずリストなど）も明示されます。これは、現在のノードにたどり着くまでに通ってきた経路のことです。現在位置情報が示されていると、そこへ来るまでの道筋が分かり、それを逆に戻ることもできます。これは人間の思考の流れと同じなので、ユーザーにとって直観的で分かりやすいものに感じられます。これによって、要求ごとにレンダリングされるマークアップも少なくなります。
これに対し、ドロップダウンメニューでは、ユーザーは事前にはわからない階層構造を意識することを強いられます。またドロップダウンメニューでは、利用可能な選択肢が常に表示される状態にあり、レンダリングされるマークアップが大きい割に、現在位置情報はほとんど表示されません。その結果、情報の階層構造が多重化されればされるほど、ユーザーにとってストレスとなり、どんどん分かりにくくなります。ユーザーにそんな負担をかけるわけにはいきません。
インクリメンタルナビゲーションの実例
実際に使われているインクリメンタルナビゲーションの例として、The Encephalitis Society（脳炎協会）のWebサイトを見てみましょう。このサイトでは、何百ページもの情報を最大5層の階層に分類しています。サイトの訪問者は、脳炎（脳に大きな疾患をもたらす病気）の患者から医療関係者までさまざまです。そのため、整然として分かりやすいナビゲーションがこのWebサイトの使いやすさの要となります。
このWebサイトのナビゲーションは、主に次の3つの要素で構成されています。
- サイトタブ
- セクションメニュー
- サイドメニュー
この3つの要素を次の画面図に示します。
サイトタブは、ページ上部に並ぶ［Home］、［Information］、［The Society］などのタブです。サイトタブを選択すると、そのタブに対応する初期ページが表示されます。また、選択したサイトタブが強調表示され、セクションメニューに下位要素が表示されます。次の画面図は、［Information］タブを選択した後のナビゲーションUIを示しています。［Information］タブが選択されていることは、サイトタブの背景色と前景色の違いで分かります。
ここからさらに下位のページに移動するには、セクションメニュー内のリンク（［The Illness］、［Recovery and Rehabilitation］など）をクリックします。セクションメニュー内のリンクをクリックすると、新しいページが表示され、選択したリンクの文字が太字になります（次の画面図を参照）。また、選択したセクションメニュー項目の下位要素がサイドメニューに表示されます。
サイドメニューには、選択したセクションメニュー項目に含まれる、残りのすべてのサイトマップノードが表示されます。次の画面図は、サイドメニューの［What is Encephalitis］を展開してその下位項目［Causes of Encephalitis］をクリックした状態です。これによって、脳炎の原因に関するページが表示されています。ナビゲーションUIで現在位置情報がはっきり分かる点に注目してください。文字の色と太字書式から、現在［Causes of Encephalitis］ページを表示中であること、このページの上位要素が［What is Encephalitis］であり、その上位要素は［The Illness］、その上が［Information］セクションであることが、はっきりと分かります。
インクリメンタルナビゲーションを使用すると、パンくずリストコントロール（ASP.NETのSiteMapPathコントロール）を使う必要がなくなります。現在位置情報が分かりやすい形で示されていて、そのページに到達する経路がはっきり分かるからです。ユーザーは階層構造を意識しなくても、直観的に簡単にサイト内を移動できます。
先に進む前に、The Encephalitis SocietyのWebサイトにアクセスし、このナビゲーションシステムの使いやすさを実感してみてください。見た目からはわからないかもしれませんが、このThe Encephalitis SocietyのWebサイトは、ASP.NETのサイトマップシステムとナビゲーション用Webコントロール群を使用しています。このサイトのナビゲーション構造は、Web.sitemapファイルに定義されています。サイトタブとセクションメニューはASP.NETのMenuコントロールで、サイドメニューはASP.NETのTreeViewコントロールで実装されています。
