Le placement de navigation non conventionnel nuira-t-il à votre site Web?

En pesant les sept principales fonctionnalités d'un site Web, 94% des gens conviennent que la «navigation facile» est la caractéristique la plus importante. Comment le placement de la navigation entre-t-il en jeu?

Même si ce sont le contenu, l'inventaire de produits ou les informations sur les services qui attirent les gens vers votre site Web, ce sont souvent les principales fonctionnalités de votre site qui font ou défont l'expérience. [19659003] Selon une enquête Clutch sur les fonctionnalités du site Web que les gens apprécient le plus l'écrasante majorité des gens apprécient la navigation plus que toute autre chose:

La navigation étant si appréciée, il est probablement prudent de supposer que les concepteurs Web devraient simplement s'en tenir à la navigation traditionnelle motifs.

Voyons ce que les données ont à dire sur le placement de navigation non conventionnelle.

Quel est le placement idéal pour la navigation de votre site Web?

Tant que la navigation contient les pages principales du site Web, elle est bien organisée et correctement étiqueté, est-ce même important où il apparaît sur le site Web?

Honnêtement, c'est le cas. Parce qu'un site Web placé dans un endroit non conventionnel peut affecter:

• La vitesse et la facilité de navigation
• La découvrabilité du contenu
• La difficulté de la tâche

Et tout cela peut conduire à des taux de conversion inférieurs et une plus grande insatisfaction.

Ici Il existe quatre façons différentes dont un menu de site Web mal placé peut nuire à l'expérience des visiteurs:

Lorsque nous parlons de menus «cachés», ce dont nous parlons dans ce contexte, ce sont des menus de hamburgers.

Maintenant, il y a une très bonne raison pour laquelle le menu hamburger a été créé à l'époque. Les concepteurs avaient besoin d'un meilleur moyen de présenter la navigation sur des sites Web réactifs. Et cette mesure d’économie d’espace leur a permis de le faire.

Voici le problème: alors que la conception mobile d’abord occupe une place de choix, certains concepteurs Web ont compris que la conception du site Web mobile devait être traduite sur un ordinateur de bureau. Le menu des hamburgers est l'une des fonctionnalités qui a fait bouger les choses.

Selon les recherches du Nielsen Norman Group cela pose de gros problèmes aux sites Web et à leurs visiteurs.

Dans son étude, il a comparé trois types de navigation différents:

Navigation cachée comme celle du site Web Balenciaga dans le coin supérieur droit:

Navigation combinée où des pages ou des catégories populaires sont présentes, mais un bouton hamburger avec un menu plus large, comme Fast Company a:

Navigation visible comme celui Small Business Trends utilise où toutes les principales catégories / pages sont visibles dans l'en-tête:

Voici les résultats de l'étude:

Le menu caché (hamburger) a donné les pires performances sur chaque métrique. Et, vraiment, ce que ces données nous disent, c'est que leur conception rend les tâches critiques de découverte de contenu très difficiles. Non seulement cela, mais si le menu (même s'il ne s'agit que d'un mini-menu) n'est pas visible, les gens ne pensent pas vraiment à interagir avec lui.

Le verdict:
Pur et simple . N'utilisez pas le menu hamburger comme seul appareil de navigation sur le bureau.

Si vous avez un grand référentiel de contenu ou d'éléments, utilisez le menu principal dans l'en-tête pour afficher les pages ou catégories les plus populaires et utiles et masquer le reste sous le menu hamburger. La combinaison des deux éléments de navigation vous aidera en fait à créer un menu principal plus concis et utile.

2. Disposition de navigation horizontale ou verticale

La recherche sur le suivi oculaire nous a montré à maintes reprises que le bord gauche de la page est l'endroit où les visiteurs concentrent la majorité de leur attention. Alors, est-ce que cela signifie qu'une navigation verticale alignée à gauche fonctionnerait mieux que la navigation horizontale conventionnelle?

C'est quelque chose que le Nielsen Norman Group a également exploré . L'étude visait à déterminer où les yeux des visiteurs passaient le plus de temps sur une page Web.

Voici ce qu'elle a trouvé:

Remarquez le poids du côté gauche du graphique est. NNG a constaté que 80% de toutes les fixations sur une page Web avaient lieu sur la moitié gauche de l'écran.

Il attribue le pourcentage le plus bas dans la région de 0 à 192 pixels à l'une des deux choses suivantes: soit l'espace blanc qui remplit généralement le rail gauche ou l'utilisation occasionnelle d'une navigation alignée à gauche.

Maintenant, ce n'est pas parce que la navigation verticale se trouve dans un endroit moins visible que le reste du contenu sur le côté gauche d'une page il ne sera pas utilisé. Ce n’est pas comme si les visiteurs passaient la majorité de leur temps dans la navigation. Si c'était le cas, vous auriez un problème aussi grave que si vous ne l'utilisiez pas du tout.

Nous devons donc prendre du recul et regarder les choses d'une autre manière.

Le verdict:
Il y a un certain nombre de raisons pour lesquelles je pense qu'une navigation verticale pourrait être aussi efficace qu'une navigation horizontale:

• Les yeux des visiteurs sont automatiquement attirés vers le côté gauche de la page, donc il a gagné Ce ne sera pas difficile à trouver.
• Les navigations verticales sont toujours visibles, donc il y aura moins de problèmes de découverte et d'utilisation.
• Les utilisateurs sont plus que familiers et à l'aise avec les menus alignés à gauche dans les applications Web. être assez facile à trouver sur un site Web.

Il y a juste une chose que je suggérerais. Jetez un œil à la navigation Mohegan Sun :

La navigation verticale semble bonne en l'état. Cependant, chaque fois qu'un de ces menus déroulants est ouvert, il force un défilement à apparaître:

En raison de la quantité de contenu stocké dans ce menu, les visiteurs devront faire défiler pour tout trouver. Non seulement cela est ennuyeux, mais cela peut causer de la confusion et de la frustration lorsqu'ils essaient de faire défiler la page vers le bas pour voir le menu défiler à la place, ou vice versa.

Donc, si votre site Web n'a pas un simple, unique- au niveau de la structure du site, la navigation verticale n'est pas une bonne idée.

3. Navigation de haut en bas sur les sites mobiles et les PWA

Nous avons déjà vu que le menu hamburger n'est pas une bonne option pour les sites Web de bureau. Mais qu'en est-il du mobile?

L'étude que nous avons examinée précédemment du Nielsen Norman Group a analysé comment le menu de hamburgers fonctionnait également sur mobile. Cependant, comme il n'est pas courant d'afficher un menu visible sur un mobile, il ne pouvait analyser que les résultats entre la navigation combo et cachée.

Sans surprise, la conception de navigation combinée a donné les meilleurs résultats:

Cependant, je ne

Arturas Leonovas suggère un autre modèle de navigation dans cet article pour Smashing Magazine . Il présente un argument convaincant en faveur de la navigation visible du bas par opposition à tout type de navigation alignée en haut.

Voici pourquoi:

Chaque année, les smartphones gagnent en taille. Selon Statista la grande majorité des smartphones expédiés / vendus dans les années à venir seront entre 5,5 "et 7":

Leonovas fait valoir que, à mesure que les écrans de smartphone augmentent, la zone du pouce que nous avons utilisée pour concevoir car n'est plus applicable. Voici à quoi il ressemble maintenant:

Remarquez comment l'en-tête est dans la région «Oubliez ça». Ainsi, cela rendrait la navigation sur l'application Web progressive Lancome par exemple, impossible à atteindre avec une seule main:

Plutôt que d'espérer que les visiteurs ne craignent pas de faire cette impossible accès en haut de la page, il existe une autre option.

Le verdict:
Leonovas suggère qu'une navigation par le bas est la meilleure option. D'après les données, il a raison.

Mais il ne s'agit pas simplement de déplacer l'icône du hamburger en bas au centre ou en bas à droite de la page (ce que font certains sites). Au lieu de cela, il s'agit de créer une navigation visible de la même manière que les applications mobiles et certaines PWA le font.

Sephora en a un excellent exemple:

La barre supérieure contient désormais la barre de recherche, le lien Aime (liste de souhaits) et le panier. On peut soutenir qu'il s'agit d'éléments secondaires par rapport aux principaux éléments de navigation pour:

• Accueil
• Boutique
• Offres
• Moi (profil et paramètres)
• Communauté
• Magasins

Et quand "Boutique" est cliqué, les principales catégories apparaissent en bas de page:

Encore une fois, cela fonctionne bien pour garder le contenu principal plus près de la nouvelle zone du pouce.

Cela dit, vous ne le faites pas. doivent suivre cette voie si cela n'a pas de sens pour votre site. Vous pouvez toujours placer les onglets principaux dans la barre inférieure, puis stocker des pages ou des fonctionnalités secondaires sous un menu hamburger dans le coin supérieur droit. La façon dont vous le concevez dépend de vous, mais le principe de base reste le même:

Facilitez la navigation des visiteurs dans les endroits les plus populaires du site mobile en plaçant ces liens dans la barre inférieure.

Le dernier type de placement dont nous devons parler est de savoir si le menu doit exister uniquement en haut du site comme il le fait pour Redfin :

Ou s'il doit être corrigé (c'est-à-dire collant) comme Trulia est:

Il y a certainement des gens qui croient que les menus collants sont une perte d'espace et font un site Web semble plus encombrant que nécessaire. Mais certaines études montrent qu'il est très utile de garder le menu toujours présent pour les visiteurs.

Dans ce résumé de Convert.com Milosz Krasinski de Chilli Fruit Web Consulting déclare que: [19659128] «Les menus collants sont 22% plus rapides à naviguer et encouragent la conversion grâce à la commodité.»

Jeff Moriaty de Moriarty's Gem Art a également des données pour étayer sa prise en charge des menus collants:

ont fait pas mal de tests sur notre site Web, l'un étant le menu. Avec le menu collant, le principal domaine dans lequel nous avons vu une amélioration des performances était nos taux de rebond et les pages vues par session. Nos taux de rebond ont en fait diminué et nous sommes passés d'une moyenne de 1,5 page par session à plus de 3 pages . Cela était particulièrement vrai pour les visiteurs mobiles, d'où provient 70% de notre trafic. »

Ensuite, vous avez Sandra Hurley de Hayden Girls qui explique comment un menu collant a contribué à la performance du site:

« Avant le lancement de notre site Web , nous avons fait plusieurs itérations et les avons testées. 85% des utilisateurs ont convenu que devoir faire défiler vers le haut pour pouvoir accéder au menu et changer de catégorie de produits était un gros problème et les a désactivés pour continuer l'expérience d'achat. »

Même si esthétiquement, il peut sembler qu'un menu collant alourdit un site, cela pourrait ne pas être le cas aux yeux de vos visiteurs, surtout si leur principale préoccupation est la commodité et la rapidité.

The Verdict: [19659052] À moins que vous ne construisiez un petit site Web (avec moins de 10 pages) et que chaque page compte moins de 1 000 mots, vous ne devriez vraiment pas utiliser une navigation non collante.

Pensez à combien de temps les gens sont prêts à attendre pour que vos pages Web se chargent. Il ne faut que trois secondes environ avant que votre site Web commence à perdre des visiteurs.

Mais ce n'est pas seulement une page à chargement lent qui leur donnera l'impression que vous perdez leur temps. Une navigation qui nécessite un défilement après un défilement après un défilement pour le retrouver peut également vous coûter cher.

Conclusion

Comme nous l'avons vu ici aujourd'hui, il n'y a pas de moyen facile de savoir si un emplacement non conventionnel nuira à votre navigation . C'est un peu mélangé.

Cela dépend vraiment de la durée d'un modèle de navigation (ce qui augmente le confort des visiteurs avec lui) ainsi que de la façon dont nos appareils changent et, par conséquent, obligent nos conceptions à changer également

Cela dit, il existe de nombreuses données qui nous disent ce qui volera avec les visiteurs et ce qui ne le sera pas. Mais si vous avez encore des doutes, A / B testing un emplacement de navigation non conventionnel sur votre site ne serait pas une mauvaise idée. De cette façon, vous pouvez savoir avec certitude si le nouveau modèle de conception sera rentable.