Débutez la conversation ~ Licence : Contenu sous licence Creative Commons : attribution - pas d’utilisation commerciale - partage dans les mêmes conditions

11 astuces concrètes pour améliorer l’ergonomie générale de votre site web.

Si vous êtes sur ce site, c’est que vous utilisez internet. Surprenant n’est-ce pas ! 😄

Rassurez-vous, c’est la seule porte ouverte que je vais enfoncer dans cet article.

Que vous soyez internaute depuis une semaine, un mois, un an ou 10 ans, en ouvrant un site, en quelques secondes, vous vous en faites une opinion, positive ou négative.

« J’adore ce site », « je déteste ce site », « ce site met des plombes à charger », « je ne comprends pas comment fonctionne ce site  », « ce site est bien foutu », « ce site est mal foutu »

Combien de fois par jour vous faites-vous ces réflexions ? Ces observations sont également celles que se font les internautes qui visitent votre site web.

La perception est l’un des 5 piliers du modèle VPTCS. Si vous ne connaissez pas encore ce modèle, je vous invite vivement à lire cet article, car il fera gagner votre site en efficacité.

Dans le modèle VPTCS, la perception fait référence à l’ergonomie de votre site, son graphisme ou encore sa navigation. En d’autre termes, à l’utilisabilité de celui-ci.

Cet article vous donne quelques points à analyser pour vous assurer que l’image que renvoie votre site web soit la plus positive possible.

Pour d’autres astuces, liées à la perception ou non, je vous conseille la checklist Qualité web d’Opquast. Je me base notamment sur celle-ci (mais pas que) pour réaliser mes audits de site internet.

Astuces pour améliorer la navigation dans votre site web

Simplifiez votre menu

Le menu est la pierre angulaire de votre site. Sans menu, il est très compliqué de découvrir votre contenu.

Faire un menu efficace n’est pas simple : il faut que l’internaute comprenne comment est organisé le site, sans trop mettre d’informations.

Par exemple, sur ce site, c’est la catastrophe :

Il y a beaucoup trop d’éléments et le menu n’est pas structuré, ce qui rend la navigation contre-intuitive.

Pendant mes études, j’ai appris qu’un menu ne devait pas dépasser 7 éléments consécutifs. Je ne sais pas si cette règle est toujours valable, mais je trouve que c’est un chiffre cohérent.

Sur ce site, le nombre d’éléments du menu est quasiment identique à celui du site de La Gorgue, mais la navigation est claire et intuitive car le menu est bien structuré. Les différents éléments sont regroupés en fonction de leur objectif : vendre ou proposer des services complémentaires.

Il peut aussi être tentant de masquer votre menu ou de multiplier les points de navigation pour gagner de la place et proposer une interface plus épurée.

Par exemple, la plateforme Freebee, à force de vouloir épurer son interface, a rendu la navigation très complexe.

Source : tableau de bord de Freebe

Il y a en effet 3 menus différents, tous masqués. Lorsque je dois effectuer une action peu ordinaire, ne sachant jamais dans quel menu aller, je perds un temps important à trouver le bon lien de navigation. Ce qui est très frustrant.

Autre problème : le menu principal est composé uniquement de pictogrammes. Si certains sont clairs, comme la maison pour le retour à l’accueil, d’autres le sont moins. Par exemple, le dernier pictogramme représente un drapeau. Il faut survoler pour comprendre que cet élément de menu renvoi vers une page permettant de préparer sa déclaration URSSAF…

Une autre tendance est de masquer le menu derrière un pictogramme qu’on appelle « hamburger ». Ce type de présentation a été popularisé par l’essor des smartphones où, faute de place, il était nécessaire de revoir les règles de navigation. Si son usage peut être pertinent sur un smartphone (bien que souvent remis en cause par les expert·es en ergonomies), son usage est à proscrire sur les versions « bureau » de vos sites.

Dans ces deux exemples, les menus sont masqués rendant la navigation peu intuitive :

En outre, dans l’exemple du site Singulier, le menu est situé à l’opposé du logo, ce qui le rend peu visible sur les grands écrans et oblige l’internaute à faire un déplacement à la souris important pour passer de l’un à l’autre.

Proposez un fil d’Ariane

Le fil d’Ariane aux internautes et aux moteurs de recherche de trouver leur chemin dans votre site et de comprendre l’organisation de celui-ci.

Dans l’idéal, il est structuré de la façon suivante : Accueil > Nom de la rubrique > (Nom de la sous-rubrique, le cas échéant) > Page.

Exemple de fil d’Ariane :

Si votre site utilise WordPress comme système de gestion de contenu, l’ajout d’un fil d’Ariane n’est pas compliqué, mais nécessite de copier/coller un morceau de code dans un fichier. Il est donc recommandé de passer par quelqu’un de techniquement compétent pour faire la manipulation.

À noter que si vous utilisez des extensions comme SEOPress ou Yoast SEO pour optimiser votre site pour le référencement, ces deux extensions vous proposent d’intégrer un fil d’Ariane optimisé pour le référencement de votre site dans les moteurs de recherche :

Si vous n’utilisez aucune de ces extensions, vous pouvez utiliser l’extension Breadcrumb NavXT (en cours de traduction en français).

Votre site utilise une autre technologie que WordPress ? Le plus simple est de rapprocher de la personne ou de l’agence qui gère votre site pour savoir comment faire.

Permettez le retour à l’accueil depuis l’ensemble des pages

Cette bonne pratique est globalement bien respectée sur les sites que j’ai l’occasion d’auditer, mais il est toujours bon de la rappeler.

Afin de permettre à l’internaute de revenir sur la page d’accueil en cas de désorientation, un lien vers celle-ci devra être fait sur l’ensemble des pages de votre site.

Dans l’immense majorité des cas, ce lien se fait sur le logo et/ou dans le fil d’Ariane. Il peut aussi être présent dans le menu.

Réservez le soulignement aux liens

De nombreux sites internet utilisent le soulignement comme un outil de mise en page, afin de donner de l’importance à un contenu (au même titre que le gras ou l’italique).

Il n’est pas recommandé de procéder de la sorte car cela crée de la confusion chez l’internaute qui s’attend à trouver un lien. Il ou elle va donc cliquer inutilement et, lorsqu’il ou elle sera en présence d’un véritable lien, risque de ne pas le voir ou cliquer dessus.

Il est également fortement recommandé de différencier les liens visuellement des autres contenus afin de permettre une identification rapide de ces derniers.

Dans l’exemple ci-dessous (tiré d’une newsletter), le soulignement incite à cliquer sur le texte Personal branding, alors que ce n’est pas un lien :

Source : newsletter de Christopher Piton

Différenciez liens internes et externes

Les liens internes sont ceux qui permettent à l’internaute d’accéder à une autre page de votre site web. À l’inverse, les liens externes renvoient vers un site tiers.

Afin d’avertir l’internaute du fait qu’il va quitter le site, il est recommandé de différencier les deux types de liens.

Cela peut être dans le libellé du lien (ex : ceci est un lien (ouverture dans un nouvel onglet)) ou grâce à une astuce graphique comme c’est le cas sur ce site.

Il est également d’usage d’ouvrir les liens externes dans un nouvel onglet alors que les liens internes doivent être ouverts dans le même onglet de navigateur.

Enfin, si vous renvoyez vers un contenu dans une autre langue, il est recommandé de le préciser afin que l’internaute décide, en fonction de la langue, de cliquer ou non.

Ce sont des petits détails qui évitent des clics inutiles à l’internaute et renforcent sa sympathie envers votre site web.

Voici un exemple, issu de mon article sur les critères qui comptent pour être visible sur Google. Vous y trouvez :

  • Un lien externe, vers un contenu en anglais
  • Un lien interne

Rendez votre site intégralement navigable au clavier

Que ce soit pour raisons médicales ou simplement pour gagner du temps, nombreux sont les internautes qui peuvent être amenés à utiliser votre site au clavier.

Il est donc important de leur offrir une expérience utilisateur optimale.

Pour cela, il faut que la navigation au clavier ne soit pas désactivée et surtout qu’elle se fasse dans un ordre logique et prévisible.

Par exemple, je ne dois pas en une tabulation passer du menu principal, situé en haut de page, au menu secondaire situé en bas de page.

Il est également important d’avoir un élément visuel qui indique où est le focus (le lien « Aide » dans l’exemple ci-dessous) :

Pour vous rendre compte de comment votre site est perçu en naviguant au clavier, rien de plus simple :

  • Chargez une page de votre site,
  • Appuyez sur la touche TAB de votre clavier pour naviguer dans la page et voyez si vous arrivez à vous repérer,
  • Si vous tombez sur un lien, appuyez sur Entrée pour remplacer le clic de la souris.

Astuces pour améliorer la perception générale de votre site web

Indiquez les dates dans un format explicite

Si vous avez un blog ou une rubrique « Actualité », vous affichez sûrement la date de publication et/ou de mise à jour de chaque article.

Si ce n’est pas le cas, vous devriez car cela permet de s’assurer de la fraîcheur (et donc de l’obsolescence potentielle) de vos contenus.

Regardez ces trois exemples :

Chacun affiche une date dans un format différent :

  • La version longue, avec le mois écrit en toute lettre (image 1),
  • La version courte, avec le mois écrit sous forme de chiffres (image 2),
  • La version non traduite, avec la date en anglais (image 3).

D’après vous laquelle est la plus facile à lire et permet le moins de méprise ?

Lorsque vous écrivez la date au format jour/mois/année, selon la date il peut être aisé de confondre avec le format mois/jour/année utilisé par en anglais.

Il est donc recommandé d’utiliser la forme pleine : 24 août 2020 et non 24/08/2020 ou 08/24/20.

Cela ne prend pas beaucoup plus de place et évite de semer le doute dans l’esprit de l’internaute.

Expliquez les acronymes ou abréviations utilisées

Imaginez : vous arrivez sur un site web et le premier contenu que vous voyez est : « SEO : Augmentez votre CTR dans les SERP ! ».

Si vous travaillez dans le domaine du webmarketing il est probable que ces acronymes vous parlent. Si ce n’est pas le cas, il est fort probable que vous n’alliez pas plus loin et quittez le site immédiatement.

Que votre cible soit familière ou non de votre domaine d’activité, il est recommandé d’expliciter à minima la première occurrence soit directement dans le texte soit au survol.

Exemples :

En outre, cette bonne pratique a aussi une (petite) utilité pour votre référencement.

Vérifiez la lisibilité de vos contenus

Vous êtes sûrement déjà tombé sur un texte illisible car la couleur du texte, était trop proche de la couleur d’arrière plan.

Prenons l’exemple ce site :

Arrivez-vous à lire correctement le contenu ? Avez-vous vu qu’il y a un texte dans le champ du formulaire ? Pas facile à lire n’est-ce pas ?

Il est probable que ce formulaire n’engendre pas beaucoup d’inscription à la newsletter.

Il est important, vital même, que vos textes soient bien lisibles.

Il existe différents outils pour vous aider à tester vos contrastes.

Par exemple, les versions les plus récentes de WordPress vous alertent lorsque le contraste n’est pas suffisant. Voici d’autres outils que vous pouvez tester :

  • Color Review : l’interface n’est pas très intuitive au premier abord, mais une fois apprivoisé, l’outil est très puissant,
  • Tanaguru Contrast Finder : Contrairement à ce que laisse penser le nom, l’outil est français. L’avantage de cet outil, plus réservé à un public averti, est qu’il propose des couleurs alternatives.
  • Adobe Color : très utilisé par les graphistes pour trouver des combinaisons de couleurs, Adobe Color s’est doté d’outil d’accessibilité, et notamment un simulateur de daltonisme. Très utile !

Autre problème fréquent : le texte sur une image.

Prenons cet exemple :

Vous arrivez à lire le texte sur l’image ? Pas moi.

(je précise que je n’ai rien de personnel contre la ville de La Gorgue, que je ne connais pas, c’est juste que leur site présente de nombreux défauts 😄)

La solution dans ce cas est toute simple : appliquer un filtre sur l’image.

Dans l’exemple ci-dessous, l’image de gauche n’a pas de filtre : le texte est peu lisible. Dans l’image de droite, un filtre de couleur est appliqué, rendant le texte beaucoup plus lisible (cliquez sur les images pour les agrandir).

En jouant sur l’opacité du filtre, vous vous assurez que l’image reste visible, et le texte lisible.

N’affichez vos contenus que dans une seule langue

Prenons cet exemple :

Ce type de mélange français/anglais est assez fréquent sur les sites mal configurés et/ou conçus à la va-vite.

C’est un petit détail, mais qui, à mes yeux, peut me faire douter de votre professionnalisme et m’amener à aller voir ailleurs. C’est d’autant plus dommage si votre contenu est de qualité.

Dans cet autre exemple, nous avons un combo anglais/faux texte en latin/français.

Dans ce cas, il est probable que ce type de contenu s’affiche car le site n’est pas tout à fait finalisé et cela sera corrigé rapidement. Toutefois, le site étant accessible à tout le monde, il est probable que des internautes tombent sur cette page.

Encore une fois, c’est un détail qui peut vous décrédibiliser.

Respectez la législation sur le dépôt des cookies

C’est une des erreurs qui revient le plus souvent lorsque je réalise l’audit d’un site. Il faut dire que la gestion des cookies n’est pas quelque chose de simple.

D’autant que le contexte réglementaire est en pleine évolution, ce qui peut créer un flou. On peut tout de fois retenir 3 grandes obligations :

  • Informer les internautes que des cookies sont installés et leur finalité ;
  • Obtenir leur consentement, avec une durée de validité recommandée de 13 mois — ce qui induit le fait de ne pas déposer de cookies AVANT que l’internaute ait donné son consentement ;
  • Fournir aux internautes un moyen de les refuser.

Il y a plusieurs façons de respecter la législation, certaines étant plus faciles à mettre en place que d’autres. J’en donne quelques-unes dans mon article dédié aux cookies.

Vous souhaitez recevoir d’autres astuces pour améliorer votre site web ? Inscrivez-vous ci-dessous au Barboteur ⬇️

Débutez la conversation

Lancez ou participez à la discussion en laissant un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Consulter la politique de confidentialité (ouverture dans un nouvel onglet).

Retour en haut de page