92,6 % des utilisateurs disent que le design du site et les visuels sont les facteurs principaux de l’action d’achat, d'après la dernière infographie de Voucher Cloud. Mais qu’en est-il des abandons à cause des problèmes d’affichage ? Mettez-vous deux minutes dans la peau d’un·e internaute. Vous êtes tranquillement en train de naviguer sur un site, à la recherche d’un vélo tout neuf pour profiter du beau temps afin de faire de grandes balades, quand soudain… un gros bug fait que toutes les photos des vélos sont superposées les unes sur les autres, ce qui rend l’affichage illisible. Ou alors, vous avez flashé sur le vélo de vos rêves, mais vous ne trouvez nulle part le bouton qui permet de l’ajouter au panier. C’est quand même un obstacle très important, non ? Et c’est donc tout là que se trouve l’intérêt de réaliser régulièrement des tests de non régression graphique.
Les tests de comparaison graphique, ou tests visuels (oui, tant de déclinaisons différentes pour une seule et même chose), permettent de vérifier que le site ou l’application mobile s’affiche correctement pour tous les utilisateurs. En gros, cela consiste à s’assurer que chaque élément (boutons, textes, photos, images…) d’une même page apparaît au bon endroit, à la bonne taille/couleur/forme, etc. On parle de comparaison ou de non régression car ces tests sont utilisés pour contrôler que le site ou l’application mobile ressemble à sa version précédente au pixel près (pixel perfect) et sa conformité légale/juridique.
Les tests de comparaison graphique font partie des tests qui peuvent être facilement automatisés avec les technologies actuelles. Mais comment ça marche ? Dans le cadre de l’automatisation des tests, cela consiste à générer, analyser et comparer des captures d’écran prises lors de l’exécution des scénarios, pour détecter si des éléments ont changé ou bougé au niveau visuel. Grâce à la configuration d’un pourcentage de tolérance autorisé, la solution évalue la similitude entre l’image de référence et l’image de l’exécution en cours.
Un simple changement de couleur non souhaité dans un bouton, un décalage dans la mise en page ou encore une différence dans une police de caractère suffit à faire tomber le scénario de test de comparaison graphique en échec. Nous pouvons également prendre l’exemple d’un client de Mr Suricate pour lequel les avis clients ne s’affichaient plus et le test de comparaison graphique a permis de détecter ce bug.
Qui plus est, les tests de non régression (TNR) graphique permettent également de vérifier les affichages légaux obligatoires dans certains pays (USA et pays asiatiques notamment) pour être en conformité.
Et pourquoi pas ? Certes, la réponse est un peu facile et ce n’est pas ça qui va alimenter cet article, n’est-ce pas ? En réalité, les raisons de faire des tests visuels ne manquent pas.
Pour commencer, on pourrait invoquer la même raison que celle de faire des tests de non régression (TNR) tout court. Dès lors qu’il y a une modification, une mise à jour de l’interface, il est important de vérifier que cela n’en a pas perturbé le design ou l’ergonomie. Et au niveau visuel, il y a souvent des remaniements ou améliorations. De plus, avec la multiplication des systèmes d'exploitation, des navigateurs web, des devices, il devient crucial de s'assurer que l'interface utilisateur s’affiche correctement sur chacune des possibilités.
Mais alors, pourquoi ne pas juste faire des tests de non régression (TNR) fonctionnelle ? Parce qu’ils ne couvrent généralement pas les aspects visuels du site ou de l’application mobile. Un site peut avoir un affichage cassé et pourtant être fonctionnel, à part si les objets disparaissent, un automate pourra ainsi très bien réaliser un scénario fonctionnel sur une interface non conforme. Les tests de non régression graphique permettent donc de combler ces lacunes et de détecter ainsi les potentiels bugs visuels qui passeraient inaperçus avec des tests fonctionnels.
Cela dit, s’il ne devait y avoir qu’une seule bonne raison de faire des tests de comparaison graphique, c’est celle de garantir la meilleure expérience utilisateur possible. Comme nous le disions au tout début de cet article (et ça ne fait pas de mal de le répéter), 92,6 % des utilisateurs déclarent que le design du site et les visuels sont les facteurs principaux de l’action d’achat. A contrario, ils ne laissent passer aucun bug visuel. Il en suffit d’un pour les dissuader d’acheter ou leur faire abandonner le site ou l’application mobile et entraîner ainsi une perte d’activité et d’image. Et la seule manière d’éviter ces bugs est de réaliser des tests de non régression graphique le plus souvent possible.
Un dernier argument ? Pas de soucis. En livrant un site ou une application sans bug visuel, vous vous assurez un produit de qualité supérieure, et cela contribue non seulement à renforcer votre crédibilité et la confiance des utilisateurs envers votre entreprise, mais aussi, de ce fait, votre image de marque.
Avez-vous compris ce qu’étaient les tests de comparaison graphique / non régression graphique / tests visuels ? En faisiez-vous avant ? Et si non, cet article vous a-t-il convaincu d’en faire ? N’hésitez pas à nous faire part de vos retours en commentaires !