Emplacement de la connexion / inscription par rapport à la barre de navigation du site Web
Quand il s'agit de concevoir l'en-tête d'un site Web, il est très courant d'avoir quelque chose comme ceci:
Ici, nous avons:
- [GAUCHE] Logo
- [DROITE] Menu de navigation principal
- [EN HAUT À DROITE] Liens d'inscription et de connexion
Cependant il n'est toujours pas inhabituel de trouver des sites comme celui-ci, où la zone de connexion/inscription est juste à droite, après les principaux liens de navigation.
(source: positionly.com )
(Remarque: oubliez le formulaire d'inscription dans la page d'accueil; je ne parle que du menu de navigation dans la barre supérieure)
Alors que le deuxième exemple de Shopify fait des efforts pour mettre en évidence les différents objectifs de ces zones en utilisant une couleur plus foncée/plus claire, je ne comprends pas vraiment si ces deux approches sont simplement une question de préférence ou s'il y a un processus d'évolution entre les deux.
Quelles sont, selon vous, les meilleures pratiques à suivre lors de la conception d'un en-tête et de l'affichage d'un menu de navigation principal et de l'appel à l'action Inscription/Connexion?
Question: la connexion/inscription doit-elle apparaître avant ou après la barre de navigation?
(question clarifiée par OP)
En bref: si c'est dans ce coin en haut à droite, alors cela n'a pas beaucoup d'importance.
Voici pourquoi:
Les consoles en haut à droite sont rarement perçues par les utilisateurs, car le F-Pattern montre que les utilisateurs scannent rarement ce coin à moins qu'ils ne recherchent spécifiquement quelque chose.
Par conséquent, si vous souhaitez attirer l'attention de l'utilisateur sur l'inscription/la connexion, envisagez un autre emplacement plus visible ou des indices plus accrocheurs (couleurs vives, gros boutons, etc.) pour ce faire.
Si vous n'avez pas besoin d'attirer l'attention des utilisateurs sur l'inscription/la connexion, je pense que vous pouvez optimiser en toute sécurité pour d'autres objectifs UX tels que la disposition de la grille et la simplicité.
En général, la façon dont j'ai vu cette décision se concrétiser:
Si la barre de navigation est courte (par exemple Shopify), l'inscription/connexion est placée en ligne avec la barre de navigation, car elle permet un alignement de la grille plus clair et plus simple et réduit l'encombrement à l'écran.
Si la barre de navigation est longue (par exemple, Optimizely), l'inscription/la connexion est placée dans un autre emplacement (où elle peut être atténuée) parce que les concepteurs veulent éviter d'envelopper la barre de navigation pour des mises en page réactives.
Habituellement, le n ° 1 est préféré au n ° 2, mais les contraintes le rendent parfois peu pratique.
J'espère que ça aide (cette fois-ci)
Question: Optimizely vs mise en page d'inscription Shopify?
(réponse originale)
Il n'y a pas de meilleure pratique ici.
La meilleure approche dépend de vos objectifs UX.
Pour le site Web Shopify, le principal appel à l'action sur la page est le formulaire d'inscription en bas. La légende noire, le bouton vert et la zone de texte bleu délimitée et ciblée attirent tous les regards sur le formulaire d'inscription. Il est donc probable que les inscriptions soient l'un des (ou les) objectifs prioritaires de leur page d'accueil.
Pour le site Web Optimizely, vous n'avez montré que la barre de navigation et non la page complète, il est donc difficile de dire s'il y a un appel à l'action .... Mais indépendamment, l'inscription semble claire ne pas être l'objectif principal de la page afin qu'ils puissent avoir d'autres objectifs UX tels que l'éducation de l'utilisateur au produit, ou fournir un chemin guidé vers un appel de vente plutôt qu'une inscription.
Pour votre site, je vous suggère de déterminer ce qui est important pour vous avant de déterminer l'emplacement de l'inscription. Le placement a un coût, donc si vous êtes tenté d'utiliser la mise en page Shopify pour encourager les inscriptions, souvenez-vous que cela se fait au détriment de l'utilisation de cet immobilier précieux pour atteindre un autre objectif UX.
J'espère que cela pourra aider
Il s'agit d'une question de type "cela dépend de la complexité".
À la fin de la journée, vous souhaitez consacrer juste assez de biens immobiliers pour votre navigation persistante et faciles à comprendre pour vos utilisateurs. Plus enlèvera de l'espace à votre contenu principal, moins sera trop déroutant à utiliser.
Pour un site avec une structure de navigation relativement simple (par exemple Shopify). Vous pouvez vous en sortir avec une seule barre de navigation et utiliser uniquement la couleur et la barre de séparation pour désigner différents groupes d'éléments.
Pour un site plus complexe, sa subdivision en 2 barres permet un regroupement plus clair des éléments similaires. Optimise considère la notification de nouvelles fonctionnalités comme étant importante à avoir en haut. Il est donc logique d'avoir 2 sections. Puisque vous avez déjà 2 sections, il est naturellement logique de diviser vos liens plus clairement en utilisant l'espace au lieu du séparateur et de la couleur.
Regardons un autre exemple. Supposons que votre navigation supérieure inclut également la recherche en plus des liens et de la connexion. Il y a maintenant beaucoup trop de choses pour tenir dans 1 barre. Vous le diviserez naturellement en 2.