FTS Talk #4 : Thomas R. vous donne les bases d’un bon audit de site web !
La santé, c’est important. Pour un site web comme pour n’importe qui. Et la santé, c’est avant tout une affaire d’attention. Pour repérer les symptômes, même les plus discrets, et examiner les problèmes suffisamment en détail pour établir un diagnostic et améliorer le système. En ce qui concerne le web, pas besoin d’avoir fait médecine pour réaliser un check-up complet de votre site. On vous explique comment !
Si vous nous suivez depuis longtemps, vous savez qu’on organise régulièrement des ateliers internes pour explorer en équipe des thématiques qui peuvent avoir un lien direct avec notre activité, ou pas. Ce sont les FTS Talks. L’idée, c’est plus de jouer sur les centres d’intérêt de chacun et sur la transversalité de nos métiers pour apprendre continuellement, et se lancer quelques défis. Parce que notre travail se nourrit d’ouverture d’esprit, de débats, de tests et de cohésion collective.
Cette fois, c’est à notre designer Thomas R. qu’on a confié un sujet qui touche chaque membre de l’équipe à un niveau différent, et qui méritait de prendre le temps de poser des bases communes : l’audit de site web. Il a donc dû se former à tous les aspects métier concernés, et avoir suffisamment confiance en son propos pour à son tour transmettre à toute l’équipe ce qu’il a appris. Ça fait partie des fondamentaux chez Fantassin : on apprend en permanence, et on apprend ensemble. Et comme c’est potentiellement intéressant pour tous ceux qui ont ou qui travaillent sur un site web, on s’est dit qu’on allait partager ça avec vous, et vous fournir une check-list complète de points à vérifier à la fin !
Pourquoi envisager un audit de site web ?
Les métiers du web sont en constante évolution, et des changements spectaculaires peuvent survenir brusquement. Les bouleversements peuvent être aussi rapides dans les usages et les attentes des visiteurs, et on peut se retrouver avec un site web obsolète avant d’avoir le début d’une prise de conscience.
Dans ce contexte, envisager un audit de site web, ça peut être une routine régulière, un moyen de vérifier que toutes les constantes sont au beau fixe, ou bien venir du triste constat que quelque chose ne fonctionne pas. D’une manifestation d’erreur flagrante ou d’un sentiment, d’une impression. Ou bien tout simplement de la volonté de tester autre chose, et d’aller chercher des indicateurs pour trouver la bonne direction.
Dans tous les cas, un audit vous place dans une logique d’amélioration, et signifie l’ouverture d’une réflexion aussi stratégique que technique : un bon audit doit vous permettre de vérifier si votre site est adapté à vos objectifs et vos besoins (et vous donner les pistes pour y parvenir si ce n’est pas le cas).
Les bases d’un audit web utile et sans concession !
Quand il a commencé sa présentation, on a bien vu que Thomas ne s’était pas contenté de son regard de designer, et qu’il avait fait ses recherches pour comprendre comment mener un travail d’audit avec suffisamment de profondeur pour ne rien oublier de fondamental.
L’importance des apparences et du design UX/UI
Le premier examen d’un site porte sur sa face visible, celle qui s’affiche sur les écrans. Parce que même si les apparences sont parfois trompeuses, elles restent un élément majeur de l’impression laissée au visiteur, et donc un facteur de satisfaction déterminant.
A l’heure actuelle, l’une des premières vérifications à réaliser, c’est l’adaptation des interfaces à tous les types d’écran. On ne peut plus passer à côté de la navigation sur mobile, qui représente désormais l’usage dominant. Un site web qui ne s’adapte pas aux petits formats d’écran est donc à revoir. Et même si ça paraît évident, on trouve encore de nombreux sites qui n’accordent pas le même soin ni les mêmes finitions à leurs versions mobiles.
L’audit est aussi l’occasion de vérifier que le design ne se résume pas à des considérations esthétiques : il intègre la prise en compte des attentes et des comportements du visiteur pour lui fournir une expérience satisfaisante. La navigation doit donc être claire et adaptée aux contenus du site, et répondre à certains principes comme les heuristiques de Jakob Nielsen pour guider l’utilisateur dans sa compréhension du site, lui fournir des indications sur les résultats de ses actions, et lui laisser aussi suffisamment de liberté pour une visite agréable (on peut parler ici de la façon de présenter son bandeau de cookies…).
C’est aussi le moment de réaliser son examen de conscience, et de considérer la présence volontaire ou involontaire de « dark patterns », ces petites manipulations qui jouent sur les biais cognitifs pour pousser le visiteur à adopter un comportement souhaité (≠ voulu), et à masquer le plus possible toutes les possibilités de faire autrement…
Penser l’accessibilité pour s’adresser à tous
A la frontière entre design et technique se trouve l’accessibilité : un ensemble de standards et de recommandations pour garantir que le site soit adapté à un public le plus large possible.
On parle ici de navigation au clavier, de compatibilité avec les assistants vocaux, de colorimétrie et de normes de contraste, de taille de texte et d’interligne, de longueur de ligne, de choix typographiques, de visibilité et de maniabilité des éléments cliquables, notamment sur mobile.
Ces éléments sont encore trop souvent perçus comme des contraintes, et il n’est pas rare que les audits révèlent quelques oublis dans ce domaine… qui rend pourtant service à tout le monde.
Mettre la technique au service des performances
La technique, c’est fantastique. Enfin, surtout quand elle est maîtrisée, et s’attache à optimiser toutes les composantes du site internet avec le même soin. Parce que la technique, c’est ce qui va définir les performances, la stabilité et la fiabilité du site.
On parle donc principalement de code et de gestion des ressources. La base, c’est de vérifier le respect de la sémantique HTML pour que la structure du site soit compréhensible par les navigateurs et les robots des moteurs de recherche. On regarde donc ce qu’on appelle le markup, c’est à dire les balises qui composent l’architecture du site, histoire de voir si chaque chose est à sa place, pour former un ensemble cohérent et léger en données.
C’est un peu la même démarche pour tous les autres langages qui vont faire fonctionner le site et définir son apparence : leur examen doit révéler un code le plus léger possible pour que les performances et la facilité de maintenance soient au diapason. On va donc faire la chasse à tous les éléments superflus, et notamment les librairies de composants (comme Bootstrap). Puis faire quelques tests simples, comme regarder si le site est lisible même quand on désactive le code JavaScript.
L’objectif de ces vérifications est simple : réduire les temps de chargement et garantir la compatibilité avec les navigateurs web. Pour le premier point, il y aura encore quelques points à inspecter : le poids des médias mis en ligne (photos, vidéos, etc..), et la chaîne de cables qui permet au site de s’afficher (hébergeur, serveur, CDN, etc…).
La sécurité pour maîtriser les accès
En ce qui concerne la sécurité d’un site, les erreurs se situent majoritairement entre la chaise et le clavier, ou peuvent aussi provenir d’un défaut d’attention sur des phases de configuration.
Par exemple, il est préférable d’éviter les configurations par défaut : une URL de connexion qu’on peut facilement deviner, ou un identifiant générique type « admin » pour ne citer qu’eux.
Après, il s’agit surtout d’avoir des mots de passes complexes, des systèmes de back-up du site, et d’ajouter des couches de protection si vous hébergez des données sensibles comme des informations de paiement.
L’épreuve du SEO pour faire briller son référencement
Le SEO, c’est un peu comme la politique pendant un repas de famille : tout le monde a une opinion, mais celle qui s’exprime fort n’est pas forcément la plus lumineuse. Au milieu des injonctions contradictoires, comment y voir clair dans l’univers impitoyable du SEO ?
On revient aux principes de bases. Aux certitudes. Les moteurs de recherche indexent des pages grâce à des robots qui passent leur temps à visiter des sites. Il faut donc commencer par vérifier que le site soit accessible et compréhensible par ces robots : on vérifie la présence de quelques petits fichiers pour les guider (robots.txt, sitemap XML…), et on reparle de markup HTML pour que la structure sémantique du site soit lisible et perçue comme cohérente par une machine. On regarde attentivement la liste et l’ordre des pages indexées, on est attentifs à la présence de liens morts ou de pages 404…
…et si une fois les vérifications purement techniques effectuées, il reste des choses à améliorer, il va falloir s’armer de patience et engager une démarche SEO complète sur le long-terme : audit de mots-clés, analyse de la concurrence sur les requêtes ciblées, optimisation du maillage interne des contenus du site, analyse des besoins en contenus spécifiques…
Des outils pour vérifier l’état de votre site
Un audit peut donc se faire à plusieurs niveau, mais heureusement, il existe un certain nombre d’outils plus ou moins gratuits qui permettent d’avoir rapidement un aperçu de la condition d’un site et des choses à améliorer.
Puisqu’on vient de parler de référencement, on ne peut pas passer à côté des outils mis à disposition par le leader du marché des moteurs de recherche : Google Search Console et Google Analytics, qui permettent une analyse très fine de toutes les données liées au référencement et au trafic de votre site.
Google met également à disposition des outils de tests de performance qui fournissent des diagnostics utiles de points à améliorer : Lighthouse et Page Speed Insights.
Enfin, Browserstack vous permet de tester l’affichage de votre site sur tous les navigateurs et sur n’importe quel appareil. Un moyen simple et immédiatement visible de vérifier le degré de compatibilité de votre site avec des configurations variées.
Mais c’est pas fini ! Comme on a envie que vous preniez soin de votre site, on vous a préparé spécialement une liste de 30 points à vérifier pour être sûrs que les constantes vitales de votre site se portent bien !
Télécharger la ressource :
Il y a un certain nombre d’éléments et de vérifications qu’on peut automatiser pour gagner du temps, et c’est pour ça qu’on a développé El Profesor, notre propre outil d’audit et de diagnostic sur les aspects techniques d’un site.
Application pratique sur le vêtement en ligne
Pour donner plus de poids à sa présentation, Thomas nous a présenté un cas pratique à étudier : Asos, l’un des poids lourd de la vente en ligne de vêtements et d’accessoires de mode.
On ne s’attardera pas sur les volets techniques, sécurité et SEO, vous vous doutez qu’on n’arrive pas à conquérir une place de leader sur un marché concurrentiel si ces aspects ne font pas l’objet d’une attention de tous les instants.
Du style dans l’interface
Logiquement, on s’est plutôt penché sur le design du site, et là aussi, le site peut compter sur des atouts de poids autant que sur des petits détails qui font la différence :
- des pages de présentation produit particulièrement claires (accès facile aux vignettes, vidéo du produit, guide de tailles, pas de zoom automatique sur les images…)
- des produits mis en avant de manière habile sur la page d’accueil (avec un équilibre média et texte)
- l’ouverture des menus lance un second niveau de navigation bien hiérarchisé avec à la fois des listings et de l’image
- des suggestions de produits en lien avec les produits visités précédemment
- un système de filtres qui réapparaît dès qu’il y a un mouvement sur la page
Des grains de sable dans la navigation
Pourtant, malgré sa stature et ses atouts, même un premier tour du propriétaire laisse entrevoir des pistes d’amélioration :
- Couleurs du menu trop en ton sur ton, en niveaux de gris et caractères blancs : les éléments ne ressortent pas assez pour une navigation aussi fournie, et n’ont pas une lisibilité optimale.
- La pagination des résultats sur le modèle « Charger plus d’éléments », qui quand on a plusieurs centaines de résultats floute les repères pour retrouver des produits
- Les listes de suggestions de produits qui proposent de les ajouter à une wishlist en cliquant sur un coeur, mais pas d’icône corbeille pour ne plus les voir apparaître. Cette possibilité permettrait pourtant d’affiner les suggestions.
Si même un examen sommaire d’un site de référence fait ressortir des points d’amélioration, c’est que chaque site peut et doit régulièrement se plier à l’exercice s’il veut rester performant.
Et votre site alors, il coche toutes les cases de notre fiche pratique ?