みなさんは、「グローバルナビゲーション」と呼ばれるものをご存じでしょうか?
WEBサイトにおいて、どのページに行っても、共通して表示されるナビゲーションリンクの事ですが、このグローバルナビゲーションに設定する項目によって、WEBサイトの構造も大きく左右されると言っても過言ではありません。
そんなUI設計において重要なファクターとなるグローバルナビゲーションですが、WEBサイトの性質によって様々な種類があります。
今回は、その中から代表的な4種類をご紹介します。
サービス・商品別
商品別やサービスの種類別に分類したパターンです。
提供する商品数の多いECサイトや、サービス情報が多岐にわたるで企業サイトで、よく使用される分類方法です。
▼Appleの公式サイト。提供商品の種類別にナビゲーションが設けられています。
ユーザー種類/ユーザー目的別
訪問するユーザーのタイプや、目的別に分類する方法です。
学校や病院・自治体など、様々なユーザーの利用が予想されるサイトに多いのが、このタイプです。
ユーザーや利用目的によって、提供する情報の種類が違う場合には、この分類方法が適しています。
▼東京医科大学WEBサイト。「受験生の方へ」「在校生の方へ」「卒業生の方へ」と、ユーザータイプ別にナビゲーションを分類しています。
▼SHARPのWEBサイト。「個人向け製品」と「法人向け製品」など、ユーザータイプ別の分類をしています。
よく使われる機能別
ユーザーがよく使用する機能別にナビゲーションを配置する方法です。
WEBサービス、アプリに使用されるのが、このパターンです。
▼mixiのホーム画面。機能別に分類されていて、どのページにいてもすぐに自分の使いたいページに遷移できます。
情報の種類別
同じ種類の情報ごとに分類したのが、このパターンです。
コーポレートサイトやポータルサイトで、この方法が用いられます。
▼auのwebサイト
(おまけ)ドロップダウンメニュー
グローバルナビゲーションにオンマウスすると、表示されるのがドロップダウンメニュー。選択したカテゴリを更に細分化した、下層カテゴリを表示します。
取扱い商品数が膨大なサイトによく使われます。
こうしてナビゲーションを細分化することで、ユーザーは目的のページまで、最短でたどり着くことが出来るのです。
ドロップダウンメニューをオンマウスすると、さらに下層ページが表示される、「メガドロップダウンメニュー」も存在します。
▼住友商事コーポレートサイト。ドロップダウンした項目をオンマウスすると、更に横にメニューが展開されます。
▼富士ゼロックス株式会社のメガドロップダウンメニュー。階層構造をわかりやすくし、サイトマップ化して表示しています。
いかがでしょうか?
WEBサイトの目的や、ユーザーニーズ、情報の種類など、様々なことを見極めることが大事だとわかりましたね。
訪問したユーザーを、適切な情報へ誘導するために、グローバルナビゲーションを効果的に設定しましょう。
WEBサイト設計の際は、是非参考にしてみてください。