Dans certains tests, tu auras l'option de signaler des bogues visuels. Les bogues visuels se rapportent aux interfaces utilisateur graphiques des sites web ou applications, par exemple:
Problèmes de structure de mise en page tels que des textes/éléments mal alignés
Un problème de Design Adaptatif, par exemple un élément est affiché sur un appareil mobile mais pas sur un autre
Des textes/éléments se chevauchent involontairement
Des textes/éléments sont coupés
Tout ce qui peut être corrigé dans les fichiers HTML ou CSS
Problèmes répétitifs
Quand un problème visuel se produit de manière répétitive, il ne peut être soumis qu'une seule fois, même si chaque occurrence peut avoir une URL, un lien, une image, etc. différents. C'est aussi le cas si les occurrences sont sur la même page ou sur des pages différentes. Ce rapport de bogue unique doit indiquer que d'autres URL, liens, images, etc. sont aussi concernés.
Les rapports de bogues individuels pour chaque occurrence du problème ne doivent pas être soumis et seront rejetés. Le client n'a besoin que d'une seule référence pour être informé du problème visuel. Il enquêtera sur le problème et le résoudra pour toutes les occurrences.
Exemples:
Certains éléments montrent le même problème graphique, par exemple du texte ou des images plus grands que leurs boîtes.
Les champs de saisie ne sont pas assez grands pour contenir leurs textes par défaut qui ne sont, par conséquent, pas complètement visibles.
Des teasers chevauchent involontairement d'autres éléments.
Élévation vers un bogue fonctionnel
Dès qu'un bogue visuel empêche une fonctionnalité, il doit être signalé comme un bogue fonctionnel, même si ce n'est pas la fonction elle-même qui est défectueuse.
Si la fonctionnalité peut être atteinte intuitivement et facilement via un chemin ou une option différente. Dans ce cas, les utilisateurs ne sont de facto pas empêchés d'utiliser la fonctionnalité, donc le problème ne peut pas être soumis comme un bogue fonctionnel. Cela reste un problème visuel.
Documentation des problèmes visuels
Les rapports visuels doivent contenir des captures d'écran. Un enregistrement d'écran supplémentaire pourrait être requis si une action cause un problème visuel. Pour plus d'informations sur comment les rapports de bogue doivent être documentés, visite notre article Exigences pour les Rapports de Bogue.
Contenu de Site Web Adaptatif vs. Non-Adaptatif : Les Bogues Visuels Cachés
Les bogues adaptatifs pourraient te rendre perplexe quant à leur catégorisation entre bogues de contenu et visuels: problèmes créés par le design adaptatif du site web.
Ces problèmes sont moins perceptibles lors de la navigation rapide sur le site web jusqu'à ce que soudain, nous trouvions une page avec toutes les informations nécessaires mais affichées de manière maladroite. Si c'est le cas, nous pourrions laisser passer – et rater la soumission d'un bogue !
Exemple de Cas
Lors du test de design adaptatif, tu pourrais rencontrer une situation où une page s'affiche parfaitement sur un smartphone (comme une page "Genres d'Émissions TV et Films Populaires"), mais lors de la navigation vers une page de catégorie (comme "COMÉDIE"), le contenu devient difficilement visible parce que les éléments sont trop petits.
Comment Identifier
Cherche des mises à l'échelle incohérentes entre les pages
Vérifie si le texte devient illisible sur ta taille d'écran
Remarque si les éléments de navigation deviennent trop petits pour être tapés
Observe l'apparition de défilement horizontal sur certaines pages mais pas d'autres
Test Adaptatif En Ligne Gratuit
Le Google Chrome Lighthouse (anciennement connu sous le nom de Google Mobile Friendly Test) peut être une aide précieuse pour s'assurer que les pages web sont optimisées pour les appareils mobiles. Cet outil peut aider les testeurs à identifier tout problème visuel sur les pages web en évaluant les facteurs d'utilisabilité mobile tels que la taille de police, les cibles de tap, et la configuration de viewport (section SEO). Si tu rencontres un bogue visuel, cet outil pourrait t'aider à déterminer si la cause racine est l'adaptabilité de la page. Contrairement au précédent Google Mobile-Friendly Test, qui était exécuté sur un site web séparé, Google Chrome Lighthouse doit être ajouté au navigateur Google Chrome et exécuté directement sur le site web testé. Le processus d'installation et le tutoriel détaillé sont disponibles ici.