勝つナビゲーションメニューのアイデアとインスピレーションをデザインする

Webサイトのナビゲーションメニューは、通りの道路標識やショッピングモールの階層ディレクトリのようなものです。. 自分がどこにいるのかを最初に知らずに目的地にたどり着くことはできません. 実生活と同じように、Webデザインのナビゲーションは非常に重要であり、Webサイトのユーザビリティやユーザエクスペリエンスにおいて大きな役割を果たします。.

今日では、面白くて独創的で珍しいデザインのナビゲーションメニューがたくさんあります。しかし、Webサイトでの効果的なナビゲーションはどうでしょうか。 それはどのように見えるべきですか?

今日は、Webデザインにおけるナビゲーションの重要性についての観察と知識を共有したいと思います。私はあなたがあなたのウェブサイトのナビゲーションとユーザビリティを改善するためにあなたが使うことができるいくつかの簡単なヒントを明らかにします。次のデザインを計画する方法についてのアイデアを提供するための効果的なナビゲーションメニューの例もいくつかあります。.

情報アーキテクチャ

ナビゲーション計画は情報アーキテクチャから始めるべきです。座っていることが重要です ウェブサイトの情報アーキテクチャについてのブレインストーム. Webサイトで提供されている機能の種類、最も重要な機能、および情報階層の下位レベルに配置できるものを特定する必要があります。.

情報アーキテクチャ 機能、ユーザーのニーズ、サイトマップ、テストおよびワイヤフレーム. 情報アーキテクチャの詳細については、Cameron Chapmanの記事「Information Architecture 101：Techniques and Best Practices」を参照してください。.

ユーザー対応テクノロジの使用

Flash、JavaScript、jQueryなど、ナビゲーションバーを構築する際にWebサイトのナビゲーションへのアクセスを妨げる危険性があるものを使用しないでください。または、少なくともそれらが適切に機能低下することを確認してください。.

詳細については JavaScriptの優雅な劣化, CSSとJavascriptのための10の便利なフォールバックメソッドについてのこの記事をチェックしてください。.

簡単でわかりやすい用語を使用する

使うほうがいい 簡単でわかりやすく理解しやすい用語 あなたのナビゲーションメニューのために業界だけの用語に従うことよりも。把握するのに1秒か2秒以上かかるリンクは、おそらく使用には不向きです。.

ユーザーがリンクをクリックしてそのリンクが何をもたらすのかを把握する必要がある場合、これはあなたの訪問者にとって悪いユーザーエクスペリエンスの一因となります。.

例

Larissa NessのWebサイトのナビゲーションメニューの用語は、理解が容易で一般的なものです。彼らはすでにこのようなメニューの経験を持っているので、ユーザーはそれを混乱させないでしょう.

これは、一般的な用語が使用されている、明確で明確なWebサイトナビゲーションメニューのもう1つの良い例です。.

クリエイティブエージェンシーEighty8Fourは「ショールーム」という用語を使用していますが、これは訪問者を混乱させることがあります。この用語はポートフォリオや仕事を意味するかもしれませんが、それは明確ではありませんし、訪問者はそれをチェックアウトするためにクリックする以外に選択肢がありません.

ナビゲーションデザインを標準化する

同じナビゲーションモデルを使用する すべてのページに一貫したデザインがなければ、ユーザーは実際には自分が別のWebサイトにいると思うかもしれないので、それは非常に重要です。ユーザーが迷子になることなくあなたのウェブサイトを簡単に移動できるように、必ず同じナビゲーションモデルを使用してください。.

ブルーグ, 以下に示すように、すべてのサブページで同じままのシンプルでクリーンなナビゲーションデザインを使用しています。唯一の違いは、訪問者が現在いるページを示すカラーインジケータです。.

あなたがどこにいるのかを示す

常に自分がどこにいるのかをユーザーに知らせることが重要です。あなたはこれを行うことができます リンクの背景、ページ名の色を変更する または テキストを太字にする ナビゲーションメニューで他とは異なるようにする.

オースティンイーストサイダーズ ユーザーがいるページを示すために異なる色と背景を使用します。このインディケータは微妙なデザイン変更としても使えます。例えば 別のナビゲーションの背景 他のメニュー項目が深くなっているという感覚を生み出す.

メディア手術 開いているサブページのインジケータとしてより暗い色を使用します。シンプルだが効果的.

Web規約を使用する

それは使いやすく直感的なウェブサイトナビゲーションについてのすべてです。 Web規約により、設計者は自分のデザインを簡単に回避できます。ほとんどのユーザーはホームページに戻るためにウェブサイトのロゴをクリックするでしょう、それでそれをするためにあなたのロゴをデザインしてください.

そうでなければ, 新しいことを学ぶために時間を費やすようにしている あるいはある場合には、彼らが一般に受け入れられているナビゲーション規範であると期待するものを提供しないことによってそれらを不便にする。.

あなたはここでWeb規約についてもっと学ぶことができます：

10 Webデザイン規約
Webデザインホイールを再発明しないでください
Web規約を使用した設計

デザインを注入 今日最も使用されているWeb規約の1つに合うロゴを左上隅に配置します。.

アダムス作成 最も一般的なWeb規約の1つを使用します - ロゴはWebサイトの左上隅に配置され、ホームページへのリンクがあります。.

それをテストしなさい：第三者を巻き込みなさい

以前にインターネットを使用したことのある人とあなたのナビゲーションデザインを常にテストしてください。あなたはそれをテストするために設計プロセスと関係がない人を連れて行きたいかもしれません. 彼らがナビゲートするとき彼らの好みを観察しなさい あなたのサイトを通して、彼らが彼らが探していたページを見つけるのにかかる時間を分析してください。.

より正確に, より多くの人々を巻き込み、データを収集し、それを分析して要約する より良いフィット感のために。必要に応じてテスト後の調査を行います。このテストを実行しないと、予期しないアイデアや入力が検出される可能性があります。.