on:2012年4月3日sponsorsユーザーが目的の情報を見つけ出せるよう効果的なナビゲーションを設計する5つのポイントを紹介します。Menus[ad#ad-2]下記は各ポイントを意訳したものです。-ポジションナビゲーションをページのどこに配置するかは、非常に重要です。ユーザーがページを見る際にある特定のパターンがあります。これは、ユーザーがページを走査する際、上部と左部に(Fの文字のように)フォーカスを合わせるというものです。いったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。サイトを見て、ユーザーに配慮している仕組みを見つけることが大切です。ナビゲーションは可能な限り、直観的に理解することが容易なように設計してください。ナビゲーションのポジションとしては、ユーザーの期待を満たすべくページの上部、あるいは左部に配置し、決して目立たない場所には置かないようにします。developersクリーンなナビゲーションをページの最上部に配置しています。このポジションはユーザーの期待を満たしているだけでなく、ページをスクロールしても常に上部に表示されています。worksクラシックなナビゲーションをヘッダとコンテンツの間に配置しています。デザインに対角線を使用したトリッキーなものですが、ユーザーがページを見た際、必ずナビゲーションを見つけることができるでしょう。左部Divwrapページの左部に配置されたナビゲーションです。ホワイトスペースを充分に使用しており、ナビゲーションは際立って見えます。-シンプルユーザーにとって有益なナビゲーションとはシンプルにしておくことです。カテゴリをいくつもっていようが、たくさんのページのリンクを必要としていても、多くのことを要求しないようにします。これはウェブサイトの複雑さによって、デザイン全体のもっとも慎重を要する部分でもあります。ナビゲーションのデザインを決める前に、サイトの情報設計を確実にしてください。ナビゲーションはユーザーにとって意味をなす方法でコンテンツの項目をまとめ、カテゴリを定義するようにします。ミニマルデザインAppleミニマルデザインの典型的なナビゲーションです。非常に美しく、そして明確で、コンテンツのカテゴリからユーザーの気をそらすことはありません。カテゴリを絞るBBCこのサイトはニュースサイトで膨大な数のコンテンツがありますが、ナビゲーションには人気の高いカテゴリだけ表示し、有意義なカテゴリの中に全ての情報を含めることに成功しています。人気の高くないものはメニュー項目の下で見つけることができます。groupタブ型のナビゲーションもユーザーに分かりやすいです。ここではユーザーが探しているコンテンツを見つけられるようタブにまとめています。-ワーディングサイトの情報設計が完了し、すべてのコンテンツが論理的に構造化された後、言葉を選んで文言を決めることは効果的なナビゲーションにする上で重要な役割を担います。ナビゲーションの各アイテムの文言は、ユーザーが理解できる言葉を使うようにします。クリエイティブすぎるカテゴリは、ユーザーには難しいものです。シンプルで、そして的を得た言葉を使ってください。標準的な文言Threadbird各アイテムの文言を標準的にすることは、ユーザーに非常に分かりやすいものです。ユーザーはそこに何があるか容易に想像できるでしょう。コンテクストEpic文言に補足するようなコンテクストを加えるのも一つの手です。on」とすると、より明確になります。youこれは標準的ではない文言を使った例で、ユーザーの立場にたった文言を使用しています。ナビゲーションは明確であるだけではなく、ユーザーの立場にたって考えることが非常に重要です。-カラーカラーはナビゲーションをより効果的にし、そして使いやすくします。アクティブなアイテムを強調したり、コンテンツのカテゴリごとにカラーを与えたりします。カラーをうまく使うことでユーザーはエリアを識別し、認識することができるでしょう。ナビゲーションのカラーをうまく使うことでサイトのデザインの一部としても重要なポイントとなります。edenアクティブなアイテム、そしてホバー時にカラーで強調されるナビゲーションです。これらのハイライトはユーザーがどこにいるのか、他にどんなオプションがあるのかビジュアル的に明確なフィードバックをします。カテゴリCSS-Tricksカテゴリに対してカラーを与えたナビゲーションです。ユーザーがそのページを訪問すると、そのカテゴリのカラーになります。いったカラースキームは非常に明確で、魅力的でもあります。一体感Appstormサイトのデザインとマッチしたナビゲーションです。大きいアイコンと目立つ場所に配置されているので、ユーザーがナビゲーションを見つけることが非常に容易です。エフェクトはホバー時にカテゴリのカラーになり、カテゴリが変わるとカラースキームも変化します。-アイコン最後ですが決して軽く扱ってはいけないアイコンです。アイコンをナビゲーションに使うことでより有用にし、見た目にも楽しくなります。文字だけのリンクと比べて、アイコンはビジュアル的でユーザーの記憶にも残りやすいものです。カテゴリごとに特徴的なアイコンを使うことで、ユーザーにカテゴリを認識させ、より効率的にサイトをチェックすることができます。アイコンをナビゲーションに使うときは、明確で意味を持つアイコンを選択し、サイトのデザインとマッチするようにします。designerアイコンを利用して、カテゴリをビジュアル化したナビゲーションです。アイコンはそれぞれ意味を持ち、カテゴリをあらわすものになっています。Labsウェブサイトのデザインに完全にマッチしたナビゲーションです。アイコンはナビゲーションに注意をひきつけるための助けになっています。パーソナリティTumblrカラフルで非常にビジュアル的で、有意義なアイコンを使ったナビゲーションです。アイコンはそれぞれ、ユーザーが実際に何をするのかを思い出せてくれるデザインになっています。