ナビゲーションに一貫性がないサイトを改善する4つのアプローチ

ページごとにナビゲーションの位置、見た目、順序、ラベルが変化すると、道標としての機能が失われ、ユーザーを混乱させます。ナビゲーションのルールが明確になるように設計して、サイト内で一貫性が保たれるようにしましょう。

この記事では全9章の書籍から、第4章「ナビゲーション設計」のナビゲーションに一貫性がないサイトの改善ポイント、4-3「ナビゲーションに一貫性がない」の内容をお届けします。

一貫性がないと予測できない

ユーザーは、ナビゲーションを使ってサイト内のページを次々渡り歩くことがあります。ナビゲーションに一貫性がないと、ナビゲーションを見つけられなかったり、違うものに思えたりして混乱し、スムーズな回遊が難しくなります。

ページごとにナビゲーションの位置が変わる

ページごとにナビゲーションの位置が変わると、サイト内を回遊したいユーザーは、ページを移動するたびにナビゲーションを探さなければなりません。また、画面を拡大しているユーザーやスクリーンリーダーのユーザーは、ナビゲーションを読み飛ばしてコンテンツを読み始めようとします。ナビゲーションの位置がページごとに異なると、同じ操作では読み飛ばせないことがあり、非常に不便になります。

ページごとにナビゲーションの位置が変わる例。利用するときに都度探す必要があり、スクリーンリーダーのユーザーは読み飛ばすことが難しくなる。

ページごとにナビゲーションのスタイルが変わる

ナビゲーションの位置やラベル、リンク先が同じでも、見た目が変われば異なるもののように見えます。ひとつのサイト内にスタイルの異なるナビゲーションがあると、ユーザーは違うサイトに来たものと思って混乱してしまいます。

特に、サイト内で展開するマイクロサイトや、運営部署が違うカテゴリに移動した際などに、ナビゲーションのデザインが異なるケースが見られます。色や大きさが同じでも、アイコンなどの装飾の有無や補足文の有無といった細かい差異があると、やはり異なるもののように見えることがあります。

ナビゲーションのスタイルがページごとに変わる例。似て非なるデザインが繰り返し出てくると、同じナビゲーションであると認識しづらく、混乱を招く。

ラベルが一貫していない

同じコンテンツを指していても、ナビゲーションのラベルがページによって微妙に異なっていることがあります。ラベルが全く異なれば別物に見えますし、わずかに異なれば、同一のものか異なるものなのかがわからなくなって混乱します。特に、スクリーンリーダーのユーザーは、見た目やレイアウトを頼りにして同一のナビゲーションだと判断することができないため、ラベルが少し違うだけで全くの別物のように伝わることがあります。

ナビゲーションのラベルがページによって異なっている例。同じものを指しているのか、違うものを指すのか判断できなくなり、混乱を招く。

理由なく中身が増減したり、順番が変わる

ナビゲーション項目がページごとに増減したり、順番が入れ替わったりすると、複数のページを見て回ったときに混乱します。特に、画面を拡大しているユーザーやスクリーンリーダーのユーザーは、情報の一覧性が低く、ナビゲーションの変化に気づきにくいため、より混乱が生じやすくなります。

ページによってナビゲーションの項目が増減したり、順番が入れ替わっている例。項目を切り替えながらの閲覧ができなくなり、混乱の原因になる。

なお、サブメニューが展開したり、ナビゲーションの中身が階層によって変化するような場合もありますが、その挙動が一貫していれば問題ありません。一貫したルールがあれば、ユーザーはその挙動を予想できるからです。

ルールと仕組みで一貫性を保つ

明確なナビゲーションのルールを設計し、ガイドラインを用意してナビゲーションの一貫性を保ちます。また、テンプレートにナビゲーションを含めたり、CMSなどで自動生成する仕組みを用意することも効果的です。

ナビゲーションのルールをテンプレート化し、一貫性の考え方をガイドラインに盛り込んだ例。ガイドラインに沿って制作すれば一貫性を保つことができる。

ナビゲーションルールを設計する

ナビゲーションルールを検討する際は、まず大枠のルールから決めていきます。ヘッダ、フッタ、コンテンツエリアなどのエリアのルールを定義し、グローバルナビゲーション、ローカルナビゲーション、パンくずリストなどの有無やルールを決めていきます。ナビゲーションの項目の設計については、「4-1 分類や並び順がわかりづらい」を参考にしてください。

同時に、通常のナビゲーションのルールが適用されない、例外のケースも明確にします。たとえば、送信フォームでは、ユーザーを作業に集中させるため、ナビゲーションを消すことがあります。他にも、トップページ、サイト内検索、お問い合わせ、サイトマップ、404 Not Foundページなどは、通常と異なるルールを適用することがあります。また、広告からのランディングページ、商品プロモーションの特設サイトなどでは、あえて別のサイトのように見せることもあります。別サイトとして見せる場合、違うサイトだと明確にわかるように、はっきりと違いがわかるナビゲーションを用意しましょう。

テンプレートを設計する

ナビゲーションのルールを定義したら、実際にそのナビゲーションを含むテンプレートを用意します。ページ作成時にテンプレートを利用すれば、テンプレートに含まれるナビゲーションのルールも徹底できます。制作を複数の会社で分業する場合も、テンプレートを使えば実装面も含めて一貫性を保てます。

テンプレートからプロトタイプを簡単に作れるというメリットもあります。テンプレートにコンテンツを流し込めば、それだけでナビゲーションが機能するプロトタイプとして利用できます。既存のコンテンツと行き来するユーザーの動線を実際に確認しながらコンテンツを検討することが可能になります。

複数のテンプレートが必要になることもあります。ナビゲーションのパターンが複数あったり、例外が定義されている場合は、それぞれのパターンに沿ったテンプレートを用意しましょう。

ガイドラインを定義する

テンプレートを用意しても、誤用されたり、独自解釈による拡張が行われてしまうと、一貫性が失われます。テンプレートを適切に利用できるようにするために、使い方のガイドラインを用意し、文書化しましょう。ガイドラインにはナビゲーションのルールのほか、テンプレートの使い方なども記載します。テンプレートが複数ある場合は、それぞれをどのページに適用するのかも明記しましょう。予想される誤用については、あらかじめNG集をまとめておくと良いでしょう。

CMSでナビゲーションを管理する

CMSで自動的にナビゲーションを生成すれば、ルールを徹底でき、人為的なミスも回避することができます。手間がかかり間違えやすいところは機械に任せ、コンテンツに注力できる状況を整えましょう。

ただし、機械で生成するということは、融通が利きにくいということでもあります。必要なはずの機能がCMSの制約で実現できなくなってしまっては、本末転倒です。CMSの選定の際に、必要なナビゲーションが実現できるかどうかを確認しておきましょう。「3-6 CMSの導入で失敗する」も参照してください。

CMSでサイト構造を管理し、ナビゲーションを自動出力する例。機械的に生成すればルールを徹底でき、人為ミスも防げる。