グリーディーナビゲーション(Greedy Navigation)とは、「画面幅に合わせてメニュー項目数を動的に変化させるナビゲーション」のことです。
ナビゲーションのメニュー項目が現在の画面幅で表示しきれない場合、はみ出した項目を「詳細▼」、「more▼」や「ハンバーガーメニュー」にまとめて表示します。日本語に直訳すると「欲張りなナビゲーション」という意味であり、できるだけ多くの項目を表示できるよう「複数段階にあわせて切り替える」のが特徴です。
グリーディーナビゲーションを利用するときの3つのポイント
グリーディナビゲーションは様々なWebサイトで利用されており、以下のようなところを抑えておくとよいでしょう。
(1) メニュー項目の重要度にあわせて表示を切り替える
BBCのWebサイトでは、重要度の高いニュースやスポーツなどの項目は常に表示し、画面が狭くなると重要度の低い項目から[More▼]のドロップダウンに収められます。グリーディーナビゲーションの基本形です。
(2) 最も強調したい項目は常に固定
UXロンドンのWebサイトです。一般的なグリーディーナビゲーションとは異なりますが、項目の優先度を配慮したナビゲーションです。画面が狭くなると、最も強調したい項目の「TICKETS」は右側に固定し、その他のナビゲーションを2段目に折り返して表示します。
(3) 詳細項目に辿りやすく
ガーディアンのWebサイトでは、ジャンルを表すスポーツ、フットボール、政治などのメニュー項目を動的に表示し、右端には「all sections(全てのセクション)」のラベルで詳細項目に辿りやすくなっています。
https://www.theguardian.com/international
操作して欲しいメニューを隠しすぎないように
スマートフォン向けのデザインでハンバーガーメニューが流行り、あらゆるところで採用されました。FacebookやSpotifyなどでもが採用され、すべてのメニューをハンバーガーメニューに収めていましたが、現在ではメニューをできるだけ見せるように変更されました。すべてのナビゲーションをハンバーガーメニューに収めることは、シンプルにまとめられる一方で、操作できることに気づけない問題がありました。ナビゲーションは、ユーザーが目的の情報にたどり着くための重要な要素であることを忘れてはなりません。
ナビゲーションは、単にページを遷移するためのリンクという役割だけでなく、ユーザーが瞬時にWebサイトの全体像を把握し、目的の情報を得られるように進むべき方向を伝えることも重要です。特に、はじめてWebサイトに訪れるユーザーにとって重要な情報です。
ハンバーガーメニューは、小さなアイコンをクリックしなければ具体的なナビゲーションを確認できません。私たちは、ユーザーにコンテンツを隠す ことによって生じるユーザビリティの悪影響を理解する必要があります。
表示すべきメニュー項目と隠す項目は、ユーザのニーズやその文脈によって様々です。例えば、Uberのアプリケーションでは、ユーザーがメイン操作に集中できるよう、メインで使用しない項目をあえて隠す工夫も施されています。よく考えられたナビゲーションは、ユーザーのニーズやその文脈を適切に配慮されています。あなたのWebサイトではどのようなナビゲーションが望ましいでしょうか。
