前回までは概念的な話が中心でしたが、今回以降は、より具体的なデザインの話題に入ります。サイト全体のレイアウトやデザインを決めていく中で重要な要素にナビゲーションがあります。ユーザーが現在位置を知る、目的地までの経路を知る、あるいは操作に迷った場合に戻る方法を探す。このようなユーザーが迷わずにサイト内を移動するための道案内となる要素すべてがナビゲーションに含まれます。

ユーザビリティのよいサイトのポイントに「学習性」があります。

初めて訪れるユーザーがすぐにそのサイトの閲覧方法や操作を覚えることができる。あるいは、リピーターが最初に訪れたときとは異なる目的のページに行こうとする場合に、以前に覚えたことを手掛かりとしてよりすばやく操作できる。そのようなサイトは「学習性がよい」ということになります。

すべてのサイトがすべて同じ構成とメニューであれば、ユーザーは一度学習すれば済むといった極論もありますが、他サイトと異なるデザインこそが、そのサイトの個性として重要です。世界的に見れば日本のサイトは近年横並びのデザインが増えて、おもしろくないといわれているほどです。

サイトの個性と学習性を両立させるためには、そのサイト独自のメニューレイアウトやデザインに工夫を凝らすとしても、このメニューをクリックすると次はこのような画面遷移が必ず起こる、というようにサイト独自の規則性を設け、サイト内ではその規則を厳守することが大切です。

大規模サイトの場合など、部門ごとにサブサイトがあり、トップページからのメインサイトとそれぞれのサブサイトで、まったくナビゲーションが異なることがありますが、基本となるナビゲーション要素を統一するなど、全体を通じた規則性を意識するようにしてください。

どんなにわかりやすく考慮したサイトでも、多くの人は少なくとも最初に操作する際にはどこかで戸惑い、ミスしがちです。

このとき、ひとつ前の操作やページに戻ることができることも肝心ですが、不慣れなユーザーの場合は、ともかく最初に戻って、一から操作し直す場合もよくあります。また、検索エンジンから特定のページにいきなりたどりついたユーザーなどは、自分がなんというサイトのどこにいるのかもまったく見当がつきません。どちらのユーザーのためも、まず、どのページからでもトップページに行く方法だけは明確にしておく必要があります。

一般的に各ページの左上などにサイトロゴを設け、ロゴをクリックするとトップページに戻ることができる仕組みが設けられています。しかし、初心者やシニアユーザーなどは、「サイトロゴがトップページへのリンク」ということをまだ学習していませんので、ロゴだけでは立ち往生してしまいます。

「ホーム」といったテキストリンクやボタンを各ページ上部に配置するなどし、ロゴクリック以外の方法でもトップページに行けるようにするのが親切です。また、サブサイトが存在する場合は、サブサイトから全体のトップページに戻るナビゲーションも各ページに付けておくほうがよいでしょう。

「迷ったらトップページ」の次に大切なのが、ユーザーに現在位置を知らせることです。ナビゲーションメニューは現在位置のみ反転表示にするなど、ほかのメニューとの違いを明確に表し、各ページの内容を端的に示す見出しを定位置に配置することがまず基本でしょう。

さらに、title要素に現在のページのタイトルだけではなく、上部階層やサイト名までも入れ、「現在ページ名｜上部階層名｜サイト名」のようにすると、検索エンジンの検索結果にもそのタイトルが表示される場合が多いので、サイト内に入ったユーザーだけでなく、検索結果リストを見ただけのユーザーにもサイトと内容がわかりやすくなります。

「パンくずリスト」でサイトのホームから現在位置までの経路を示す手法もよく使われます。この場合は「ホーム＞上部階層名＞現在ページ名」のような左から右への流れになります。

title要素を下位の階層から上位へとあえて逆順で示すのは、ページをブラウザのブックマークに入れた場合など、内容の手掛かりになるページタイトルを最初に目につく左にし、そのほかの部分を右にする方がわかりやすいからです。

また、パンくずリストという概念も、ある程度ネットに慣れたユーザーでないと理解していないので、あくまでも補助手段とし、パンくずリストを見落としても戻れるナビゲーションも必ず用意してください。