レスポンシブヘッダーでのナビゲーションメニューの配置のベストプラクティス
が常にビューポートの全幅を占めるレスポンシブヘッダーがあると仮定します（ https：// mailchimp。 com ）、このヘッダーにナビゲーションメニューを配置するために従うべきベストプラクティスはありますか？
さらに具体的には、ナビゲーションメニューとロゴの間に画面サイズに応じて可変量の空白があるため、ナビゲーションメニューに常にビューポートの右側（画像のように）をハグさせるのは悪い考えでしょうか？
通常、左から右の言語では、ほとんどの固定は画面の左上部分で発生します。ユーザーがページを下にスキャンすると、ユーザーの注意は「F」パターンを形成する傾向があります。
https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/
したがって、コアナビゲーション要素を左上に配置することは、かなり安全な方法です。
ここで考慮すべき1つのポイントは、ワイドスクリーンモニターのポイントです。コアナビゲーションが中央のコンテンツコンテナー（最大幅が1200ピクセル以下であることが多い）の側面ではなく、ビューポートの左端または右端に固定されている場合、問題が発生する可能性があります。
ワイドスクリーンまたは4Kモニターでは、これが問題になる可能性があります。画面が広くなるにつれて、ナビゲーションはページ上のコンテンツからますます切断されます。ユーザーは、コンテンツとナビゲーションの間を移動するために、カーソルをさらに移動する必要があります。これは、多くの場合、より大きな不正確さと無駄な相互作用につながる可能性があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
詳細については、この背後にあるメカニズムを説明するフィッツの法則をご覧ください。 https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design
Stackexchangeサイトは従うべき良い例です。上部ナビゲーション「ラッパー」の背景は画面の幅全体に及びますが、ナビゲーションリンク自体は、最大幅1060pxの中央コンテナー要素内に含まれています。視覚的には、これは上記のフィッツの法則によって提示された問題を軽減しながら、ナビゲーションの重要性を強化するのに役立ちます。
中央に最大幅のメインコンテンツがあると想定すると、多くのサイトで一般的な全幅の背景色要素内に最大幅のヘッダーコンテンツが中央に配置されますの方が視覚的に楽しいかもしれません。
Stack Exchangeは幅が広い場合にのみ反応し、幅が狭い場合には反応しませんが、空白が最小幅のポイントまで折りたたまれ、その後に他のメニューレイアウトが必要になることを想像してください。
ここ はヘッダーに関する良い記事です：
私はあなたの質問に答えます：
「人々は最初にサイトにアクセスするとき、特定のパターンをたどります。ニールセン（...）によれば、私たちはWebサイトの上部と、コンテンツ領域の主要な要素を簡単にスキャンする左側から最も焦点を当てています。」
「効果的なナビゲーションメニューの鍵は、シンプルに保つことです。コンテンツカテゴリの数やリンクする必要のあるページの数に関係なく、ユーザーにあまり質問しないでください。」
ショート：
- 常にナビゲーションバーを上部に配置し（人々はナビゲーションのためにページの上部を見る傾向があります）、重要なものを左側に配置します。
- シンプルに保つ-「（...）ページに何を表示したいか。たとえば、ページで圧縮されたものを読みたいのか、それとも間隔が空いているものを読みたいのか？」 ホワイトスペースの別の良いサイトはこちらです
そこで、「ログイン」を「サイト」に切り替えて、ユーザーが最初に目にするのは、サイトが提供するものになるようにします。