グローバルナビゲーションはプライマリー表示であるべきか?

グローバルナビゲーションは、ウェブサイト全体を網羅するナビゲーション機能として、重要な意味を持ちます。多くのサイトでは、サイト共通ヘッダーに表示され、サイト内のどのページにいても容易にアクセスできるようになっています。

しかし大規模なサイト (来訪するユーザーのゴールが多種多様で、その利用文脈の中でサイト内の別カテゴリーのコンテンツに遷移するというシナリオがあまり考えられないサイト) では、グローバルナビゲーションが必要とされるシーンというのは、そう多くないかもしれません。以下、いくつか例を挙げてみます。

このような稀な動線のために、サイト内の各ページ上部の一等地に、プライマリーなナビゲーション表示としてグローバルナビゲーションを配置するのが、ユーザーのためになるのだろうか?という問題提起です。

ユーザー行動シナリオを基にナビゲーション機能を設計する

グローバルナビゲーションはプライマリーなナビゲーション表示であるべき、というのはもしかしたら固定観念かもしれません。ユーザーはどんなゴール (目的) を持ってどう情報をつまんでゆく (サイト内を回遊する) のか、その文脈に沿って考えた場合どのスコープのナビゲーションメニューが提示されているとユーザーに喜ばれるのか、を考えてみましょう。

場合によっては、サイト全体を網羅したグローバルナビゲーションよりも、閲覧中のコンテンツが属しているカテゴリーをスコープにした、限定的なナビゲーション (カテゴリーメニュー、ローカルナビゲーションなどと呼ばれるもの) をプライマリーな表示にしたほうが、ユーザー行動にとって有用かもしれません。実際、たとえば Amazon は、グローバルナビゲーションに相当する多種多様な商品カテゴリーを「カテゴリー」という一言の中に折り畳んでいて、実質的には、(開いているページの) 商品カテゴリーをスコープにしたナビゲーションをプライマリー表示としています。

Amazon のナビゲーション表示。この例では「Kindle ストア」カテゴリーのローカルメニューがプライマリーなナビゲーションとして表示されている。
Amazon のナビゲーション表示

モバイルファーストでシビアに優先度を付ける

ウェブ閲覧が PC ブラウザ (画面サイズが比較的大きく、横長のビューポートにページが表示される) に限定されていた時代は、サイト共通ヘッダーにグローバルナビゲーション、サイドバーにローカルナビゲーション...とスコープの異なる複数のナビゲーション機能を同時表示することが普通でした。

グローバルナビゲーション (サイト共通ヘッダー) とローカルナビゲーション (サイドバー) の同時表示

しかし、モバイルファーストで画面設計するとなると、このように複数のナビゲーションを同時に表示するのは無理があります。小さな画面ではサイドバーの存在がメインのコンテンツ領域 (幅) を圧迫しますし、かといって複数のナビゲーションを縦積みにすると、限られた画面サイズに対してオプション (ナビゲーションメニューによってもたらされる選択肢) が過多に見えてしまったり、それぞれのナビゲーションの意味合いが視覚的にわかりにくい恐れがあります。

スマートフォンでの複数ナビゲーションの同時表示

「あれもこれも」情報提示するのではなく、ターゲットユーザーのゴール達成に寄与する機能に優先度を付けるという姿勢で考えると、ローカルナビゲーション (カテゴリーメニュー) をプライマリー表示にして、グローバルナビゲーションはセカンダリーなナビゲーション表示にする、というのは少なからず合理的と言えそうです。あまり使われないグローバルナビゲーションは、たとえばハンバーガーアイコンで折り畳みメニューにしたり、ビッグフッターでページ下部に提示したりする、などが考えられるでしょう。グローバルナビゲーションの各メニューが下位階層を持つ場合、むしろビッグフッターのほうが階層の展開表示がしやすい、という利点もあります。

ローカルナビゲーション (カテゴリーメニュー) のプライマリー表示

そしてもしこのようなナビゲーションシステムが、スマートフォンなどでユーザビリティ上の問題なく使えるようであれば、それを PC 表示においても適用するのも (メインコンテンツエリアを広く確保する、デバイス横断的に UI の一貫性を高める、といった意味で) 有効かもしれません。

関連情報への導線は?

ナビゲーション機能には一般的に、ユーザーに対して関連する情報への導線を提供するという重要な役割もあります。この機能がグローバルナビゲーションにないと、いわゆる「横渡り」がしにくいのでは?という意見もあろうかと思います。たとえば、以下のようなケースです。

これらは尊重すべき重要なユーザー行動と言えますが、グローバルナビゲーションに全面的に頼るよりは、メインコンテンツ内で、ユーザーにとって自然な文脈で誘導することを考えたいものです。ユーザーのゴールや利用文脈から期待されるページ間移動を予測し、その移動を後押しする導線設計を (グローバルナビゲーションよりも目に付きやすい形で) 提供するようにしましょう。

サイトのアバウトネスの表現は?

グローバルナビゲーションの存在意義には、サイト全体のアバウトネスを表現する、という側面もあります。サイト内のどのページにいたとしても、ユーザーに対して「このサイトはどんなサイトで、何ができるのか」という手がかりを提供するのです。

グローバルナビゲーションをプライマリーに表示しない場合、以下のような方法で、ユーザーにアバウトネスを伝えることを担保するとよいでしょう。


あらゆるウェブサイトに等しく当てはまる総じてベストなやりかた、とは言えないかもしれませんが、サイトの規模が大きくコンテンツが多様であるがゆえに、グローバルナビゲーションのスコープが広すぎて各ページの閲覧文脈とフィットしない (かえって情報ノイズをもたらしてしまう) 恐れがある場合、上記のように検討してみることは一考の価値はあるかと思います。

記事を共有

Twitter に投稿 Facebook に投稿 はてなブックマークに投稿 Pocket に追加