Webサイトのナビゲーションバーに関連するログイン/サインアップの配置
Webサイトのヘッダーをデザインする場合、次のようなものが一般的です。
ここにあります：
- [左]ロゴ
- [右]メインナビゲーションメニュー
- [右上]サインアップとログインのリンク
ただしメインナビゲーションリンクの後のログイン/サインアップ領域が右側にあるこのようなWebサイトを見つけることは、それほど珍しいことではありません。
（ソース： positionly.com ）
（注：ホームページのサインアップフォームについては忘れてください。私は単にトップバーのナビゲーションメニューについて話しているだけです）
Shopifyの2番目の例は、暗い/明るい色を使用してこれらの領域のいくつかのさまざまな目的を強調するための努力を行っていますが、これらの2つのアプローチが好みの問題か、両者の間には進化の過程があります。
また、ヘッダーをデザインし、メインのナビゲーションメニューとアクションへのサインアップ/ログインの呼び出しを表示する必要がある場合、ベストプラクティスについてどう思いますか？
質問：ナビゲーションバーの前または後にログイン/サインアップを表示する必要がありますか？
（OPによって明確化された質問）
つまり、それがその右上隅にある場合、それはそれほど重要ではありません。
理由は次のとおりです。
F-Pattern は、ユーザーが具体的に何かを探している場合を除いて、そのコーナーをスキャンすることがほとんどないことを示しているため、右上のコンソールがユーザーに知覚されることはほとんどありません。
したがって、サインアップ/ログインにユーザーの注意を引きたい場合は、これを実現するために、さらに目立つ配置または目立つ手がかり（明るい色、大きなボタンなど）を検討してください。
サインアップ/ログインにユーザーの注意を引く必要がない場合は、グリッドレイアウトやシンプルさなど、他のUXの目標に合わせて安全に最適化できると思います。
一般に、私がこの決定を行った方法は次のとおりです。
ナビゲーションバーが短い場合（Shopifyなど）、サインアップ/ログインはナビゲーションバーにインラインで配置されます。これにより、グリッドの配置がより明確で単純になり、画面上の乱雑さが減少します。
ナビゲーションバーが長い場合（Optimizelyなど）、デザイナーはレスポンシブレイアウトでナビゲーションバーを折り返さないようにするため、サインアップ/ログインが別の場所（強調されていない場所）に配置されます。
通常は＃2が＃2よりも優先されますが、制約により非現実的な場合があります。
それが役に立てば幸い（今回は）
質問：OptimizelyとShopifyのサインアップレイアウト？
（元の回答）
ここにはベストプラクティスはありません。
最善の方法は、UXの目標によって異なります。
Shopify Webサイトの場合、ページの主な行動を促すフレーズは、下部にあるサインアップフォームです。黒の吹き出し、緑のボタン、青の輪郭が描かれたフォーカスされたテキストボックスはすべて、申し込みフォームに目を向けます。したがって、登録は彼らのホームページの（または）優先目標の1つである可能性があります。
Optimizely Webサイトでは、ページ全体ではなく、ナビゲーションバーのみを表示しているため、行動を促すフレーズがあるかどうかを判断するのは困難です。しかし、いずれにしても、サインアップは明確に見えます notをページの主な焦点とすることで、ユーザーに製品を紹介したり、サインアップではなくセールスコールへのガイドパスを提供したりするなど、他のUX目標を設定できます。
あなたのサイトでは、サインアップの配置を決定する前に、あなたにとって何が重要かを理解することをお勧めします。配置にはコストがかかるため、Shopifyレイアウトを使用してサインアップを促そうとする場合は、価値のある不動産を使用して他のUX目標を達成するためのコストがかかることに注意してください。
それが役に立てば幸い
これは「複雑さに依存する」タイプの質問です。
結局のところ、永続的なナビゲーションのために、ユーザーが理解しやすいだけの十分な場所を用意したいとします。それ以上の場合は、プライマリコンテンツからスペースを取り除き、それ以下の場合は使用するには混乱しすぎます。
ナビゲーション構造が比較的単純なサイト（Shopifyなど）の場合。単一のバーナビゲーションを使用して、色と仕切りバーのみを使用してアイテムの異なるグループを示すことができます。
より複雑なサイトの場合、2つのバーに分割すると、類似したアイテムがより明確にグループ化されます。 Optimizelyは、新機能の通知を最上位に置くことが重要であると見なします。したがって、2つのセクションを持つことは理にかなっています。すでに2つのセクションがあるため、ディバイダーとカラーの代わりにスペースを使用してリンクをより明確に分割することは当然のことです。
別の例を見てみましょう。トップナビゲーションに、リンクとログインの他に検索も含まれているとします。 1小節に収まらないほど多すぎます。自然に2に分割されます。