ホームページ >ウェブフロントエンド >htmlチュートリアル >Web ナビゲーションメニュー設計の 10 の原則

Web ナビゲーションメニュー設計の 10 の原則

巴扎黑オリジナル: 2017-06-27 09:15:592345ブラウズ

ウェブサイトのナビゲーションメニューは、ユーザーがウェブページを読んだ後にウェブサイトの他の部分についてさらに学ぶための最も重要な指標であり、ユーザーを維持するために重要です。ナビゲーションメニューをデザインするにはさまざまな方法があり、すべての Web サイトには独自のナビゲーションメニューが必要です。優れたナビゲーションメニューをデザインするには、デザイナーは従来の制限を打ち破って創造性を表現する必要があります。 Web サイトのナビゲーションは、サイトの使いやすさを決定する主な要素の 1 つです。訪問者が探しているものを簡単かつ楽に見つけることができれば、サイトから離れるのではなく、サイトに留まる可能性が高くなります。効果的なナビゲーションは、Web サイトのページビューを増やし、ユーザーエクスペリエンスを向上させ、さらには売上と利益を増加させるのに役立ちます。

ヒント: ナビゲーションバーメニューを設計するための一般的なプロトタイピングツール: Axure、Mockplus、UXPin、Sketch

優れたナビゲーションメニューを設計することはそれほど難しくありませんが、それでも次の重要なポイントをマスターする必要があります:

1. 見つけやすい

ナビゲーションテキストには、本文と同じ色、フォント、サイズを使用しないでください。ナビゲーションテキストは目立つように表示される必要があります。メニューボタンには、ハイコントラストの色と明確なテキストを使用します。ユーザーが見つけやすいように、ナビゲーション領域は一定のサイズに保つ必要があります。ナビゲーションの場所は、ページの上部、左側などの通常の場所を使用する必要があります。

2. シンプル

シンプルで使いやすく、利用可能な情報と探している情報をどこで見つけられるかをユーザーがすぐに確認できるようにする必要があります。ユーザーは、方法を学ぶことなく、Web サイトがどのように機能するかを予測できる必要があります。彼らが何をすべきかを考える必要があるなら、あなたは彼らを失っています。ユーザーが小さな逆三角形をクリックして 2 番目のメニューを展開することは避けてください (まったく見つからない可能性があります)。

3. クリック可能

すべてのナビゲーション要素がクリック可能であることを確認します。ナビゲーションで複数のカテゴリを使用する場合、すべてのタイトル要素はクリック可能なリンクである必要があります。ドロップダウンメニューがあっても、サブカテゴリリンクをクリックするのは訪問者の自然な傾向である可能性があります。これをばかげているとは思わないでください。Web サイトによっては、クリックしてもナビゲーションにジャンプできないことがよくあります。

4. 一貫性

すべてのページで同じナビゲーションパターンを使用するようにしてください。一貫したデザインがないと、ユーザーは別の Web サイトにいると思う可能性があるため、これは非常に重要です。ユーザーが迷うことなくサイトに簡単にアクセスできるように、必ず同じナビゲーションパターンを使用してください。

5. 明確にする

メニューのテキストは明確にする必要があり、シンプルで明確な用語を使用し、ここでのテキストの意味をユーザーに考えさせず、テキストは短く、説明的で焦点を絞ったものにしてください。リンクをクリックする前にテキストの意味を考えるのに 5 秒以上かかると、ユーザーエクスペリエンスが低下します。

6. シンプルにしてください

垂直ナビゲーションにはさらに項目を追加できますが、メインメニューに項目が多すぎる必要はありません。ユーザーの注意をそらすことになります。一般に、8 項目を超えないようにすることが最善です。

7. インタラクション

フィードバックはあらゆるインタラクションにとって重要です。ユーザーがメニュー項目をクリックまたはマウスオーバーしたときは、次に何をするかについての指示を必ず提供してください。あらゆる操作についてユーザーにタイムリーなフィードバックを提供すると、ユーザーはナビゲーションをクリックする意欲が高まります。リンクのテキストの色や背景色を変更したり、太字にしたりすることで、他のコンテンツと異なるリンクを作成できます。

8. 並べ替え

Web サイトが提供する主な機能と、最も重要なものを重要度の順にメインナビゲーションに配置する必要があります。セカンダリナビゲーションに配置されます。

9. スタイル

ミニマリズムは依然として Web デザインのトレンドです。ユニークなビジュアルスタイルはメニューをクールに見せますが、Web サイト全体の全体的なデザインと一致するようにしてください。

10. アクセシビリティ

ウェブサイトのアクセシビリティは、ウェブサイトの品質を測る上で常に重要な基準です。多くの機能を使用したい場合は、障害を持つ人々にフレンドリーであることを確認してください。クールなCSSテクニックの紹介など、画面読み上げ技術との互換性なども考慮してください。

以下はナビゲーションデザインのチェックリストです。次の表に従ってナビゲーションメニューを確認できます:

1. ページ上でナビゲーションの位置を簡単に見つけることができます

2. マウスを使用するだけです。ただし、ナビゲーションメニュー全体はマウスのクリックで操作できます

3. すべてのメニュー項目は通常どおりクリックしてジャンプできます

4. ナビゲーションテキストは短く明確です

5.ウェブサイト全体で使用されるナビゲーションメニューは 1 つだけです

6. マウスを対応するメニュー項目の上に移動すると、対応する項目が強調表示されます

7。 8. ナビゲーションメニュー項目は重要な順に並べられています並べ替え

9. ナビゲーションスタイルは Web サイト全体のスタイルと一致しています

10. ナビゲーションメニュー項目はスクリーンリーダーで正しく認識できます

美しいナビゲーションメニューとそのスタイルを備えた 6 つの異なる Web サイトを紹介します。デザイン方法はそれぞれ異なりますので、そこからインスピレーションを得て、独自の特徴を備えたナビゲーションメニューをデザインしていただければ幸いです。ヒント: 次のナビゲーションメニューを 1 つずつクリックすると、ブラウザ上でどのように機能するかを確認できます。

使用されるプロトタイピングツールは、Axure、Mockplus、UXPin、Sketch です。