Web サイトのユーザビリティを高めるための基本的な要件は、優れたナビゲーション デザインです。
この記事では、コミュニティ内の優れたWeb ナビゲーション デザイン ケースに基づいて、Web ナビゲーション デザインの 10 のスキルを要約します。
https://js.design/community?category=search&search=%E5%AF%BC%E8%88%AA%E8%AE%BE%E8%AE%A1&source=csdn&plan=yscsdn9051. Web ページのナビゲーション計画を実行する
Web メニュー ナビゲーションを設計する場合、開始点は Web サイトの機能と表示される情報の階層を理解することです。初期の Web サイトのメニューは、さまざまなレベルの情報を示す図またはスプレッドシートとして表示される「サイト マップ」と呼ばれることがよくありました。サイトマップの作成方法に正しい方法も間違っている方法もありません。ユーザーフレンドリーなものにすることができます。
2. Web ページのメイン ナビゲーションをクリアします
プライマリ ナビゲーションはサイト全体で目立つようにし、一貫性を持たせる必要があります。通常、メイン メニューはページの上部の中央に配置されるか、ページの左右に配置されます。メイン メニューは通常、ユーザーの目を引き付けるために他のすべてのコンテンツと比較されるようにデザインされています。
3. ホームページに戻るための Web ページ識別リンクを設定します。
ロゴは通常、左上隅または上部に配置され、ホームページに戻るリンクとしても知られています。ホーム ページが他のすべてのページと接続する中心領域であることは誰もが知っています。したがって、ホームページにすばやく簡単に戻る方法をユーザーに必ず知らせてください。Web サイトのロゴをホームページに戻るボタンとして使用すると、ブランド アイデンティティの確立にも役立ちます。
4. Web ページの大きなページ フッター デザインを実装します。
通常、このスペースはプライバシーと法的リンクのために予約されていますが、電子メールのサインアップ フィールド、アドレスの詳細、ソーシャル リンクの表示もかなり標準になっています。ユーザーが探しているものを見つけるためにフッター リンクをスクロールする必要がある場合、AI はおそらく正常に機能しません。それでも、フッターは多くの訪問者にとって最後の目的地であることが多く、コンテンツの多いサイトや支払い方法が重要な小売サイトでよく使用されます。大きなフッターの Web ナビゲーション デザインは、下部でナビゲートしたいユーザーに便利なリンクを提供するだけでなく、フレーム レイアウトのデザイン要素としても機能します。
5. 現在の場所を示す Web ナビゲーション デザイン
メニューがハイライト表示されたり、ブレッドクラムが表示されたり、メインのバナー画像にページ タイトルが表示されたりしても、素晴らしいエクスペリエンスです。現在の場所はシンプルかつ簡単なので、ユーザーが混乱する余地はありません。
6. メガメニューを使用した Web ナビゲーションのデザイン
メガ メニューは、通常、グローバル ナビゲーション バーからドロップダウンまたは飛び出してくる大きなナビゲーション パネルです。すべての Web サイトに適しているわけではありませんが、うまく機能すれば、ユーザーに優れたナビゲーション エクスペリエンスを提供できます。メガ メニューの主な利点は、複数のオプションを同時に表示できることです。メガ メニューは、非常に大規模なカテゴリ リストを持つ小売サイトに適しています。メニューには、一部の製品の主要なカテゴリがシンプルかつ明確に表示されるだけでなく、特定の製品の内訳も表示されます。ドロップダウン メニューには多くのオプションが含まれていますが、明確な階層とレイアウトにより、ユーザーはこの情報を理解しやすくなり、全体的なデザインはシンプルでクリーンでエレガントです。
7. わかりやすい Web ナビゲーション ラベルを使用する
業界固有のサイトの場合は、ユーザーが用語を理解していることを確認してください。たとえば、店舗エリアに「マーケットプレイス」というラベルが付いている場合、ユーザーは理解しにくいと感じ、理解するのに 1 秒以上かかるリンクはユーザー エクスペリエンスを損なうことになります。どのタブがメイン ナビゲーションに適しているかを確認したい場合は、A/B テストを実行できます。一般に、メイン ナビゲーションはシンプルで理解しやすいものにすることが最善です。パーソナライズを追加したい場合は、ポップアップや通知を試してみることができます。
8. 検索機能を追加したWebナビゲーションデザイン
Web サイトが複雑な場合、検索バーを追加すると、ユーザーがカスタム Web デザインを簡単にナビゲートできるようになります。ページ数が多すぎる場合、または 1 ページに含まれるコンテンツが多すぎる場合、Web サイト検索をメニューに追加すると、ユーザーはキーワードやトピックを検索してエクスペリエンスを向上させることができます。
9. レスポンシブ Web ナビゲーション デザインを採用する
レスポンシブ Web ナビゲーション デザインを使用すると、Web サイトをあらゆるデバイスに適応させることができ、多くの場合、「ハンバーガー メニュー」のコンパクトなナビゲーション スタイルが使用されます。ハンバーガーのアイコンは、わずかに離れた 3 本の水平線で構成されており、主要な要素を分解すると、2 つのバンズと中央の肉が得られます。ハンバーガー メニューは、スペースを取らずにモバイル デバイスのナビゲーションとして使用でき、その基本的な機能はスワイプ、スワイプ、またはポップアップです。ハンバーガー メニューをデザインするときは、ユーザーが操作方法について混乱しないように、メニュー レベルを明確にデザインすることが非常に重要です。
10. Web ナビゲーションを修正しました
固定ナビゲーション Web ナビゲーションのデザインは、基本的に Web サイトのメニューが所定の位置にロックされ、ユーザーがページを下にスクロールしてもメニューが消えないようになっています。デザインとナビゲーションへの適合性に応じて、どの Web サイトでも固定メニューをオンにすることができます。