効果的なナビゲーションを設計する5つの大切なポイント

Post on:2012年4月3日

Positon -ポジション

ナビゲーションをページのどこに配置するかは、非常に重要です。
ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。
こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮している仕組みを見つけることが大切です。

ナビゲーションは可能な限り、直観的に理解することが容易なように設計してください。
ナビゲーションのポジションとしては、ユーザーの期待を満たすべくページの上部、あるいは左部に配置し、決して目立たない場所には置かないようにします。

最上部

Twitter developers

クリーンなナビゲーションをページの最上部に配置しています。このポジションはユーザーの期待を満たしているだけでなく、ページをスクロールしても常に上部に表示されています。

ヘッダとコンテンツの間

Ngen works

クラシックなナビゲーションをヘッダとコンテンツの間に配置しています。デザインに対角線を使用したトリッキーなものですが、ユーザーがページを見た際、必ずナビゲーションを見つけることができるでしょう。

左部

Divwrap

ページの左部に配置されたナビゲーションです。ホワイトスペースを充分に使用しており、ナビゲーションは際立って見えます。

Simplicity -シンプル

ユーザーにとって有益なナビゲーションとはシンプルにしておくことです。カテゴリをいくつもっていようが、たくさんのページのリンクを必要としていても、多くのことを要求しないようにします。これはウェブサイトの複雑さによって、デザイン全体のもっとも慎重を要する部分でもあります。
ナビゲーションのデザインを決める前に、サイトの情報設計を確実にしてください。

ナビゲーションはユーザーにとって意味をなす方法でコンテンツの項目をまとめ、カテゴリを定義するようにします。

ミニマルデザイン

Apple

ミニマルデザインの典型的なナビゲーションです。非常に美しく、そして明確で、コンテンツのカテゴリからユーザーの気をそらすことはありません。

カテゴリを絞る

BBC

このサイトはニュースサイトで膨大な数のコンテンツがありますが、ナビゲーションには人気の高いカテゴリだけ表示し、有意義なカテゴリの中に全ての情報を含めることに成功しています。人気の高くないものはメニュー項目の下で見つけることができます。

タブ

Filament group

タブ型のナビゲーションもユーザーに分かりやすいです。ここではユーザーが探しているコンテンツを見つけられるようタブにまとめています。

Wording -ワーディング

サイトの情報設計が完了し、すべてのコンテンツが論理的に構造化された後、言葉を選んで文言を決めることは効果的なナビゲーションにする上で重要な役割を担います。ナビゲーションの各アイテムの文言は、ユーザーが理解できる言葉を使うようにします。あまりクリエイティブすぎるカテゴリは、ユーザーには難しいものです。
シンプルで、そして的を得た言葉を使ってください。

標準的な文言

Threadbird

各アイテムの文言を標準的にすることは、ユーザーに非常に分かりやすいものです。ユーザーはそこに何があるか容易に想像できるでしょう。

コンテクスト

Epic

文言に補足するようなコンテクストを加えるのも一つの手です。例えば「Working」とあるアイテムに「What we are working on」とすると、より明確になります。

パーソナル

Games for her by you

これは標準的ではない文言を使った例で、ユーザーの立場にたった文言を使用しています。ナビゲーションは明確であるだけではなく、ユーザーの立場にたって考えることが非常に重要です。

Color -カラー

カラーはナビゲーションをより効果的にし、そして使いやすくします。例えば、アクティブなアイテムを強調したり、コンテンツのカテゴリごとにカラーを与えたりします。カラーをうまく使うことでユーザーはエリアを識別し、認識することができるでしょう。
また、ナビゲーションのカラーをうまく使うことでサイトのデザインの一部としても重要なポイントとなります。

ハイライト

A modern eden

アクティブなアイテム、そしてホバー時にカラーで強調されるナビゲーションです。これらのハイライトはユーザーがどこにいるのか、他にどんなオプションがあるのかビジュアル的に明確なフィードバックをします。

カテゴリ

CSS-Tricks

カテゴリに対してカラーを与えたナビゲーションです。ユーザーがそのページを訪問すると、そのカテゴリのカラーになります。こういったカラースキームは非常に明確で、魅力的でもあります。

一体感

Appstorm

サイトのデザインとマッチしたナビゲーションです。大きいアイコンと目立つ場所に配置されているので、ユーザーがナビゲーションを見つけることが非常に容易です。エフェクトはホバー時にカテゴリのカラーになり、カテゴリが変わるとカラースキームも変化します。

Icons -アイコン

最後ですが決して軽く扱ってはいけないアイコンです。アイコンをナビゲーションに使うことでより有用にし、見た目にも楽しくなります。また、文字だけのリンクと比べて、アイコンはビジュアル的でユーザーの記憶にも残りやすいものです。カテゴリごとに特徴的なアイコンを使うことで、ユーザーにカテゴリを認識させ、より効率的にサイトをチェックすることができます。

アイコンをナビゲーションに使うときは、明確で意味を持つアイコンを選択し、サイトのデザインとマッチするようにします。