水平メニューは、おそらくWebデザインで最も人気のあるタイプのナビゲーションです。現在、ほとんどのサイトでは、ブラウジングを簡素化するためにこのタイプのメニューを使用しています。
それにもかかわらず、最新のWebデザインには、多くの種類の水平メニューがあります。特定の種類のサイトに使いやすさを提供するものもあれば、見た目が良く見えるものもあります。

この記事では、水平メニューの使いやすさを確保するために、さまざまなアプローチと実践に焦点を当て、効果の低いソリューションに注目します。また、開発者が将来のプロジェクトで水平メニューに取り組むのに役立ついくつかの傾向に注意を払います。

リンクには既知の名前を使用します。

ナビゲーションメニューの利便性と使いやすさから始めましょう。ユーザーが新しいサイトにアクセスすると、メニューは最初に意識的に注意を払うものの1つになります。この要素が適切に設計されている場合、ユーザーは自分の問題を解決するために彼に頼ります。ほとんどすべてのWebサイトには、ユーザーについて「期待される」特定のセクションがあります。たとえば、About Us、Services、Products、Contact Usなどです。
Webの性質上、必要なデータがすぐに見つからない場合、ユーザーは不明瞭なナビゲーションによる遅延に不満を感じます。

そのため、[About Us]ページへのリンクには、 [ About Us ]というタイトルを付けてください[ありがとう、Cap-約。 翻訳者]または「連絡先」、「サービス」または「当社のサービス」と呼ばれるサービスセクションへのリンク
メインメニュー項目に名前を付けるプロセスの過度の創造性は、ユーザーの利便性を損なう可能性があります。

インパルス開発
このサイトのメニューは、ナビゲーションに不必要な問題を引き起こしません

最も珍しい状況であっても、提供されるサービス（「私たちは何をするか」）でページに名前を付けないでください。また、連絡先ページを「私たちを見つける方法」と呼ぶ必要はありません。情報の検索では、ユーザーはなじみのある単語を見つけようとし、最初は知らないうちに、なじみのない、または理解できない単語やフレーズを避けます。

メジャーセクションとマイナーセクションを明確に識別する

サイトのどの部分がプライマリユーザーであり、どのユーザーが潜在的なユーザーにとって重要であるかを確認したら、サイトの使いやすさを向上させる階層メニュー構造を視覚的に作成できます。

重要なリンク（「サービス」、「連絡先」など）は、セカンダリリンクと明確に区別する必要があります。デザイナーの仕事は、可能であればすべてのナビゲーションリンクをこれらの2つのカテゴリに分け、それらの違いをユーザーに明確に示すことです。

いくつかの例を見てみましょう。

エドワーズ＆ハンプソン

Edwards＆Hampsonには、サイトのページ間を移動する主な手段である、優れた水平メニューがあります。ここに標準リンク（「About Us」、「Our Services」、「Products」）がありますが、このメニューには、ユーザーに関してそれほど「プライマリ」ではない他の多くのリンクがあります。しかし、それらは目に見えるほど重要です。

同様の例：

おいしく

DeliciouslyorkshireのWebサイト上の重要なセクション（「Home」、「About」、「News and events」、「Recipes」）につながるリンクは、セカンダリセクションと思われるもの（「Promotions」、「役に立つリンク」 "）。両方のタイプのリンクには、階層の兆候のないブックマークの外観があります。
実際、これらのリンクの一部がサイト訪問者にとってそれほど重要でない場合、階層を反映したセクションを設計するのが賢明な決定でしょう。もちろん、これらの企業はこのようにメニューを設計するのに十分な理由がある可能性があり、これは必ずしも悪い例ではありません;おそらく、これらは視覚的な階層の重要性を示す単なる例外です。

重要度の低いリンクをすぐに利用できるようにしつつ、階層を強調するサイトの例を2つ示します。

デザイナーのソファ
Designers Couchのメインメニューには重要なナビゲーションリンク（「Home」、「Gallery」、「Jobs」など）があり、同じメニューにはセカンダリリンクがありますが、視覚的な違いは保持されます（「Find a designer」、「参加する」）。

Jテイラーデザイン

ウェブサイトのデザイナーJ Taylor Designは、メインメニューの下に別の色、フォント、サイズを使用してセカンダリリンクを配置することにより、メインアイテムと依存アイテムの区別を強調しています。この例では、ユーザーはプライマリセクションとセカンダリセクションを区別しても問題は発生しません。

ユーザーアクションへのリンクを右側に配置する

ユーザーが登録できるサイト、または商品を購入するための「バスケット」がある商用サイトを開発している場合は、これらのセクションへのリンクをメニューの右側（または上部の右側の別の場所）に配置するとよいでしょう。 [たとえば、Habrが行ったように:) :)「右隅のロゴは左隅よりも45.9％優れている」などのシャーマニズムや超心理学はありません。ユーザーだけがこの配置に慣れています。

メインメニューのアクションリンクを視覚的に分離するサイトの例を次に示します。

ゼロ

シャリファイ

SharifyとXeroは、重要なリンクと同じメニューにアクションリンクを配置しますが、それらを右側のある距離に配置することで階層を保持します。

メニューの一部としての検索バー

シンプルさと使いやすさを向上させる別の方法は、メニューの一部として右側に検索を設定することです。検索は前述のすべての機能に類似しているため、特定のアプローチが必要です。
ユーザーがページの右側に検索ボックスなどのアクション指向の機能を表示することに慣れたら、可能であれば、サイトのこの部分に検索バー用のスペースを残します。

そのような検索配置のいくつかの例（前述のJ Taylor Designを含む）：

ウォシュテナウコミュニティカレッジ

ウエストコーストポピン

突然のドロップダウンメニューを避ける

ドロップダウンメニューは、リンクの山に対処する能力があるため、モダンなデザインでは非常に一般的です。ただし、マウスを置いたときにメニューが開くかどうかをユーザーに明確に通知する必要があります。これは、小さな下向きの三角形または矢印を使用して行うのが最適です。

このヒントに続くいくつかの例を考えてみましょう。

QN5音楽

キンダー・アクチュエル

残念ながら、すべてのサイトがドロップダウンメニューについてユーザーに通知するわけではありません。

webstudios

billoneil.com

さまざまなトレンドとスタイル

これらの例は必ずしも最良と見なされる必要はありませんが、独自の水平メニューを開発するときは、それらをよく見る必要があります。

[ここでは、ページが乱雑にならないように、画像のサムネイルのみを表示します。 翻訳者]：

監査役

おわりに

この記事で推奨される方法は非常に一般的であり、すべての場合に万能薬ではない可能性があります。ただし、これらのヒントに従うと、ユーザーは通常特定のスタイルに慣れるので、サイトへの訪問者はメニューとの混乱を避けることができ、その不当な違反はあなたの頭にたくさんの呪いをもたらします。

UPD：各画面にリンクが提供されます。

水平メニュー、いくつかのヒント