En
Contactez-nous
Contact

©️️ Globalia, 2022. Tous droits réservés.  Politique de confidentialité.

Ergonomie : Améliorer la navigation et le design web

Pour de nombreuses entreprises œuvrant en ligne, la préoccupation principale est d’obtenir de la visibilité, d’être trouvées et vues. Rejoindre son public devient ainsi l'étape sur laquelle ces entreprises concentrent leurs efforts sur le web.

Toutefois, attirer des visiteurs sur son site est une chose. Les engager et réussir à les convertir en sont d’autres. Dépenser une fortune pour attirer un visiteur n’est pas nécessairement gage de succès. Il faut être capable de lui fournir une information à la fois désirable et claire, et la partager efficacement avec lui. Au final, il s'agit de s’assurer que son expérience sur le site soit agréable et, à cette fin, l’ergonomie joue un rôle prépondérant.

optimiser-ergonomie-site-web

L’ergonomie 101

L’ergonomie web a pour objectif d’améliorer l’interaction entre les utilisateurs et un site Internet. Celle-ci doit être centrée sur les besoins et les attentes des visiteurs potentiels, tout en demeurant en adéquation avec les normes du web.

Parmi les différents volets de l’ergonomie, la navigation est l'un des plus importants. Celle-ci doit être mise au service des propriétaires du site et offrir un système de commandes cohérent au visiteur, lui permettant de facilement parcourir l’information qu’il espère trouver sur le site.

5 bonnes pratiques en termes de navigation web

Parcourons ensemble différentes pratiques en termes de navigation que vous devriez appliquer sur votre site afin d'améliorer l'expérience de navigation.

1. Une navigation par menu

Tout comme nous sommes habitués à trouver des panneaux aux bords des routes pour faciliter notre navigation physique, les visiteurs d’un site web s’attendent à trouver un moyen facile d’être orientés et de naviguer à travers les différentes pages de contenu existant sur votre site. Au fil du temps, la barre de menu s’est imposée comme un outil indispensable à notre orientation en ligne.

Si vous possédez une quantité limitée de contenu, un unique menu principal est nécessaire et doit se situer en haut des pages. Dans certains cas, un menu secondaire latéral peut être pertinent afin de faciliter la navigation d’un visiteur dans une section particulière d’un site (par exemple, à travers la gamme de produits ou de services offerte ou une zone de membre). D’où l’importance d’avoir soigneusement mené la réflexion sur le classement et l’organisation de votre contenu au préalable.

2. Une navigation commune

Afin d’optimiser l’expérience utilisateur sur un site, il faut travailler à éliminer les frictions que le processus peut créer. Une navigation mal pensée peut créer des frustrations chez le visiteur et amener à l’abandon de la tâche qu’il tentait d’accomplir. Il pourrait même éventuellement quitter le site.

Simons.ca - Pied de page
Le pied de page du site de Simons offre de nombreuses informations utiles aux clients acheter leurs produits et s'orienter rapidement.

Ainsi, faciliter sa navigation en utilisant des éléments communs à l’ensemble des pages permet de le mettre en confiance. Afin d’en tirer profit, on va utiliser des zones qui vont se retrouver sur la plupart des pages du site comme le haut de page, le pied de page ou encore des barres latérales.

On va pouvoir utiliser ces zones pour y mettre de l’information utile au visiteur dont il pourrait avoir besoin en tout temps. Dans le pied de page, il est important d’insérer les éléments comme votre adresse physique si vous êtes une boutique, vos présences sur les réseaux sociaux, les conditions légales ou encore la zone carrières. Dans le haut de page, on s’attend à retrouver le logo de l’entreprise lié à la page d’accueil, la barre de recherche ou encore le panier d’achat si vous vendez en ligne.

Vos visiteurs vont avoir le réflexe de les retrouver à ses endroits, donc pour ne pas les déstabiliser il est important de ne pas les surprendre et s’assurer de respecter ces pratiques web devenues standards.

3. Une navigation dynamique

Qui n’a jamais quitté un site, car il était incapable de comprendre où il était rendu? Dans la même continuité d’idée que la pratique précédente visant à réduire les frustrations sur le site, la navigation doit être sensible aux actions de l’utilisateur, lui indiquant où il est rendu sur le site.

LaPresse.ca - Fil d'Ariane
Le fil d'Ariane sur le site de La Presse nous permet de facilement savoir que nous sommes dans la section Sports - Hockey du site.

Le fil d’Ariane est ainsi un très bon élément de navigation à intégrer sur votre site. Il indique le cheminement de l’utilisateur lui montrant dans quelle section du site il se trouve et lui permettant même de facilement passer à une autre des sections parents de la page actuelle visionnée. Coup double : diminution des frictions et aide à la navigation.

4. Une navigation balisée

De la même manière que nos empreintes de pas laissées après notre passage en forêt peuvent nous aider à nous orienter, car nous sommes déjà passés par là, faciliter l’exploration d’un site par un visiteur en lui indiquant par où il est déjà passé dans sa navigation est une excellente pratique. Cela contribue à optimiser son temps, que ce soit en l’aidant à retourner quelque part plus facilement ou à l’inverse en lui évitant d’y retourner.

Afin d’aider le visiteur, les moyens technologiques existent pour lui indiquer les endroits qu’il a déjà visités. Les boutons et liens peuvent être indiqués comme ayant déjà été cliqués. Une pratique commune veut que l’on en change la couleur des liens qui ont été visités lors de la dernière session de navigation. Un exemple très connu est celui du moteur de recherche Google qui passe les liens ayant été visités de bleu à violet.

5. Une navigation sans fin

Lorsque vos visiteurs arrivent sur votre site, comme nous l’avons mentionné plus tôt, les engager est l'une des clés du succès. Ceci n’est pas aisé et la qualité du contenu que vous produisez y est pour beaucoup.

Toutefois, la navigation doit vous aider à mettre ce contenu de l’avant et orienté le visiteur vers la tâche que l’on désire le voir accomplir. Ainsi, on va éviter de créer des impasses sur le site en s’assurant que les pages du site contiennent un moyen simple de retourner à la page d’accueil et de revenir en arrière.

Également, on va s’assurer de posséder des appels à l’action sur chaque page pour que le visiteur continue d’interagir avec le site. Cela peut prendre plusieurs formes : des invitations à télécharger un document, lire un article connexe, consulter une autre page de service, visualiser des produits reliés, contacter un vendeur. Les appels à l’action vont vous aider à canaliser les visiteurs et par la même occasion les faire avancer dans le processus de conversion, tout en leur évitant de se retrouver dans une impasse.

5 bonnes pratiques en matière de design web

Passons ensemble à travers cinq pratiques qui devraient être mises en œuvre sur votre site afin d’améliorer le design et ainsi optimiser l’expérience de l’utilisateur.

1. Un design standardisé

Cela fait maintenant de nombreuses années que les gens naviguent sur le web et plus de 2 milliards d’individus y sont connectés à travers le monde. Inconsciemment, nous avons collectivement développé des comportements ainsi que des habitudes en ligne. Avec le temps, une standardisation a donc eu lieu.

Comme nous en avons déjà discuté dans l’article portant sur la navigation, il est important de diminuer les frictions à travers l’expérience de l’utilisateur en ligne et éviter de créer de l’incertitude. Ainsi, certains éléments doivent être standardisés, car les visiteurs s’attendant à les retrouver sur votre site. Cela leur évite d’être perdus, n’arrivant pas à trouver quelque chose ou de se retrouver désemparés en face d’une commande ne réagissant pas comme elle le devrait.

Afin d'éviter que cela ne se produise, utiliser des icônes intuitifs parlant à tout le monde: la zone de recherche est généralement une barre pour taper ce que l’on cherche associée à un icône de loupe, le panier d’achats par un panier d’épicerie, une flèche pointant vers le bas à côté d’un texte indique un menu déroulant, etc.

exemple d'outil de recherche sur le site d'agileDSS
Exemple de design d'un outil de recherche sur le site de notre client agileDSS

Placer des éléments à leur emplacement standard: un menu de navigation est attendu en haut de page sous le logo de l’entreprise, un titre de page au sommet d’un article, la gestion des langues en haut à droite, etc. En naviguant sur le web vous allez retrouver l'ensemble de ces éléments communs.

2. Un design clair

La première impression est souvent la dernière sur Internet. Partez avec un apriori positif en rendant votre design attirant. Bien que tous les goûts soient dans la nature, quelques règles élémentaires doivent être respectées.

Afin de projeter une image cohérente, assurez-vous d’agencer efficacement les couleurs que vous employez. Votre design doit aussi servir à refléter votre image corporative. Si vous disposez d’une charte graphique pour votre entreprise, vous devez déjà avoir réfléchi à cela. Une couleur principale doit émerger. Celle-ci pourra être utilisée pour mettre de l’avant les éléments importants du design ou encore les appels à l’action par exemple. Ensuite le reste du design doit être constitué des autres couleurs plus neutres de la charte graphique. À défaut, utiliser des dégradés ou déclinaisons de la couleur principale peut toujours faire l’affaire.

De manière connexe, il faut s’assurer d’avoir un contraste global suffisant entre les éléments. Principalement, entre les éléments au premier plan et ceux en arrière-plan. Pour cela, évitez d’employer des arrière-plans complexes.

3. Un design lisible

Bien que des extensions sur les navigateurs web permettent de zoomer sur les pages web, il est toujours bon de penser dès le départ à disposer d’un design qui intégrera le texte de manière lisible.

Pour cela, prévoyez des zones de texte qui sont clairement délimitées. Comme nous l’avons vu, différents éléments de navigation doivent s’intégrer à votre design. En plus d’être fonctionnels, ceux-ci peuvent vous aider à limiter la zone principale de texte notamment la barre latérale, le pied de page ou encore le menu secondaire. L’emploi d’images et de boutons va également aider à définir les zones grâce à la verticalité et l’horizontalité qu’ils dégagent.

Toujours dans l’optique d’obtenir un design clair, il est important d’obtenir un contraste suffisant entre le texte et le fond pour une meilleure lisibilité du texte.

Finalement, dans une fenêtre de taille standard de navigation, on s’attend à ce que le texte des articles soit facile à lire. On va considérer que 17 mots par ligne devraient être la moyenne à viser. Plus et le tout semblera chargé, moins et cela semblera vide.

4. Un design organisé

Un design ne semblant pas avoir de structure demeure un manque de respect pour son visiteur et surtout quelque chose de perturbant, car ne facilitant pas la recherche d’informations ni le passage à l’action.

Lorsque vous concevez vos pages, celles-ci devraient être basées sur une grille sous-jacente, avec des éléments et des widgets alignés horizontalement et verticalement afin de projeter une image cohérente et surtout de pouvoir se reproduire facilement de page en page. Au final, le site demeure un tout uni et sans surprise pour le visiteur.

Également, pour aider l’utilisateur, le design ainsi que la mise en page doivent visuellement posséder un « point de départ », lui permettant de comprendre ce qu’il doit faire maintenant, mais également sur ce qu’il doit faire ensuite grâce au placement approprié d’éléments l’appelant à prendre action ou à continuer vers du nouveau contenu par exemple.

5. Un design au service de votre contenu

Chaque design a pour vocation de mettre de l’avant le contenu du site. Il doit soutenir le message que l’on désire transmettre et aider à l’exploration de l’information qui y est reliée.

En conséquence, sur toutes les pages du site, l’information la plus importante doit être placée au-dessus de la ligne de flottaison (« above the fold »), c’est-à-dire dans la zone visible sans avoir besoin de descendre sur la page. Si l’on prend en considération ce point essentiel, le design doit s’adapter pour être peu chargé en haut de page pour ne pas distraire le visiteur.

Pour résumer, oui un design doit être attirant, mais ce n'est pas tout, il doit aussi être fonctionnel avant tout. Malheureusement, c’est souvent ce que les gens oublient lors de la réalisation de leur site. Une réflexion ergonomique doit être posée au préalable. Plusieurs règles doivent être respectées afin d’arriver à un design cohérent et possédant une organisation qui facilite la lecture et l’expérience de l’utilisateur. Si vous pensez que votre design n'est pas optimisé, découvrez comment nos solutions en ergonomie et utilisabilité pourraient vous aider.