Navigation utilitaire Influence sur la conception de l'expérience utilisateur

Pour concevoir une navigation efficace et conviviale, nous devons non seulement réfléchir à la manière de grouper notre contenu dans des menus bien structurés pour permettre aux utilisateurs de trouver facilement ce qu'ils veulent, mais aussi comment concevoir les outils nécessaires pour interagir avec le site

La navigation qui n'est pas strictement liée au contenu et qui aide les utilisateurs à effectuer différentes actions est appelée navigation utilitaire, et c'est un aspect moins largement discuté mais extrêmement important de la conception d'expérience utilisateur. Les barres de recherche, les formulaires de connexion et d'inscription, les boutons d'abonnement, de partage et d'impression, les paniers d'achat, les menus contextuels et les outils permettant aux utilisateurs de changer de langue ou de taille de police sont des exemples typiques de navigation utilitaire..

Leur conception n’est pas aussi facile qu’il semble à première vue, c’est il faut réfléchir pour savoir quels éléments sont nécessaires, où les placer et comment les afficher pour que nos visiteurs puissent les trouver rapidement et comprendre leur fonctionnement.

Impact de la navigation utilitaire sur l'UX

Lorsque nous concevons la navigation par utilitaires, nous devons décider de la manière dont nous voulons que nos utilisateurs interagissent avec notre site. Nous devons leur fournir un structure d'interaction qui correspond à nos objectifs commerciaux, guide les utilisateurs tout au long du parcours client, leur donne des options faciles à comprendre et leur procure une expérience utilisateur agréable.

Tout d'abord, ils doivent pouvoir effectuer rapidement les actions souhaitées. Si nous leur permettons de le faire, la satisfaction de la clientèle augmentera et les utilisateurs satisfaits auront tendance à consacrer plus de temps et plus d’argent aux sites Web..

La page d'accueil d'AirBnB suit ce principe UX et son menu principal ne contient que des outils utilitaires. Ce n'est pas une solution habituelle, mais si nous examinons le taux de croissance incroyable d'AirBnB, c'est le choix idéal pour eux..

Les 4 principaux éléments du menu sont destinés aux 4 personnalités principales qui visitent généralement le site d’AirBnB: les personnes souhaitant devenir hôte (“Devenir hôte”), les personnes souhaitant résoudre un problème survenu pendant leur utilisation du service (“Aidez-moi”), nouveaux et anciens utilisateurs (“S'inscrire” et “S'identifier”). La page d'accueil d'AirBnB axée sur les services publics contient également une barre de recherche rapide qui constitue un outil essentiel sur un site Web de location de logements..

Deuxièmement, les utilisateurs n'ont pas besoin d'utilitaires superflus, car trop d'encombrement distrait l'attention et réduit la concentration. Quels outils sont nécessaires dans notre navigation utilitaire et quels ne dépendent pas de la nature de notre site. Par exemple, il peut être utile d'inclure une vue d'impression sur un blog ou un site d'actualités, mais la même fonctionnalité peut constituer une distraction inutile sur un forum ou un site de média social..

Washington Post, par exemple, affiche la navigation des utilitaires sur ses pages de publication uniques différemment de celle de la page d'accueil. De cette façon, les utilisateurs ne rencontrent que des outils utilitaires pertinents et ne sont pas harcelés par des options qu'ils ne voudraient pas utiliser de toute façon..

Il existe trois éléments de navigation utiles que les visiteurs peuvent utiliser pour l’ensemble du site. Ceux-ci sont intelligemment inclus dans la barre supérieure fixe (outil de recherche, “Se connecter”, et “Souscrire”), mais les utilisateurs n'ont pas à réfléchir aux options liées aux publications uniques telles que “Liste de lecture” quand ils parcourent la page d'accueil ou l'une des pages de catégorie.

Troisièmement, les utilisateurs doivent comprendre rapidement ce qu'ils peuvent faire sur notre site. Les visiteurs ne savent pas nécessairement ce qu'ils veulent, nous devons donc toujours leur fournir des informations sur les options dont ils disposent..

Si vous regardez la capture d'écran ci-dessous, vous constaterez que The New York Times informe les utilisateurs de la disponibilité de 3 éditions différentes: américain, International, et chinois, et leur permet également de basculer rapidement entre les trois. Cet excellent exemple de navigation intelligente dans les utilitaires montre aux utilisateurs des options moins évidentes qu'ils ne trouveraient probablement pas par eux-mêmes, de manière élégante et non obstructive.

Trouver le meilleur endroit

Il existe des emplacements types pour la navigation entre utilitaires où les utilisateurs recherchent intuitivement ces outils, comme c'est ce à quoi ils sont habitués sur la majorité des sites Web. Briser les conventions de conception Web est considéré comme une mauvaise pratique d’expérience utilisateur. C’est particulièrement vrai pour la navigation utilitaire qui, dans la plupart des cas, est davantage une question de convivialité que de créativité..

La navigation utilitaire étant secondaire à la navigation basée sur le contenu de la plupart des sites Web, elle est souvent placée dans des zones moins visibles mais toujours visibles. Cela signifie généralement le (1) coin supérieur droit des sites Web et la (2) partie inférieure du pied de page. Ses une bonne idée de suivre ces conventions, comme ce sont les endroits où la plupart des utilisateurs recherchent d'abord des outils utilitaires.

Comme vous pouvez le voir ci-dessous, Reuters a positionné la plupart de ses outils utilitaires dans ces deux zones typiques: le coin supérieur droit du site et la partie inférieure du pied de page en dessous de la navigation basée sur le contenu. La solution unique ici est le pied de page supplémentaire fixe avec 2 éléments utilitaires que les concepteurs ont considérés comme les plus importants: “Connexion ou Inscription” et “Dernières nouvelles de My Wire”.

Il est intéressant de noter que la zone de navigation supplémentaire est toujours placée dans une sorte de pied de page où les utilisateurs recherchent normalement des outils similaires. Les concepteurs de Reuters ont donc créatif en quelque sorte mais toujours suivi les conventions de conception Web pour maintenir la convivialité.

Construire une structure logique

Regrouper les outils utilitaires dans une structure logique est essentiel si nous voulons construire un site avec un taux de conversion élevé. Cela peut être un défi même si nous ne souhaitons pas offrir aux utilisateurs de nombreuses options, mais Amazon pousse la complexité de la navigation des utilitaires à un niveau supérieur. Amazon a un utilitaire de navigation incroyablement compliqué avec de nombreuses options, mais si nous utilisons régulièrement Amazon, il ne semble pas si. C'est la magie du design intelligent.

Ils ont non seulement placé la navigation utilitaire dans le coin supérieur droit où les utilisateurs s’attendent à la trouver, mais ils l’ont également divisée en 3 groupes principaux: (1) une barre de recherche, (2) des informations relatives à l’utilisateur (sous la barre de recherche). ), et (3) actions que les utilisateurs peuvent effectuer sur le site.

C'est intelligent parce que, grâce aux repères visuels tels que le panier d'achat ou l'icône de recherche, les clients peuvent décider en un clin d'œil du groupe qu'ils souhaitent utiliser et, dès lors, ils peuvent ignorer les deux autres. Il n'y a qu'un seul groupe (“Ton compte”, “Essayez Prime”, “Panier”, et “Liste de souhaits”) dont les sous-menus sont également structurés logiquement et les différents groupes de sous-menus sont divisés par des séparateurs discrets mais visibles pour aider les utilisateurs à trouver rapidement ce qu'ils veulent.

Créer une conception visuelle efficace

La conception visuelle de la navigation utilitaire efficace doit suivre le célèbre principe KISS (Keep It Simple, Stupid). Il est recommandé de fournir des icônes avec des étiquettes de texte, de faire en sorte que les contrôles ressemblent à des contrôles et d'insister visuellement sur les actions les plus importantes. Il peut également être judicieux de distinguer les navigateurs utilitaires des navigateurs basés sur le contenu en utilisant une conception légèrement différente..

Vous trouverez deux excellents exemples de conception visuelle efficace sur les sites Web de Walmart et d'Etsy. Les concepteurs ont placé la navigation utilitaire au sommet des deux sites et l'ont mise en évidence avec des couleurs différentes du reste de la navigation, Walmart avec un arrière-plan bleu et Etsy avec des polices bleues..

Les deux sites souligner les actions les plus importantes des utilisateurs avec différents éléments de conception visuelle, Walmart utilise le jaune pour les boutons de recherche et de connexion, tandis qu'Etsy attribue une bordure bleue discrète au bouton de connexion et comprend une icône de panier d'achats grise au-dessus du menu Panier..

C’est le seul endroit où Etsy utilise une icône dans son menu d’utilitaires, alors que Walmart affiche une icône à côté de chaque élément, sans oublier d’inclure les étiquettes de texte nécessaires juste à côté des icônes..