Auditer une fiche produit mode sur mobile

Définir un point de départ reproductible

Notez l’URL, le produit et la variante, le marché, la langue, l’appareil, la version du navigateur, la date et les conditions de connexion. Incluez un produit standard, un article soldé et un article avec des tailles épuisées. Examinez une première visite et une visite récurrente, avec les fenêtres de consentement et autres superpositions. L’émulation couvre les largeurs d’écran ; utilisez un téléphone réel pour le tactile, le clavier et le comportement du navigateur. Retirez les données personnelles des éléments partagés.

Vérifier l’offre avant l’action d’achat

Le visiteur identifie-t-il sans ambiguïté le produit, la couleur choisie, le prix actuel et les conditions de promotion ? Vérifiez la lisibilité, le zoom des images, la composition, l’entretien et les informations de livraison et de retour du marché choisi. Comparez la promesse publicitaire ou de collection avec la page d’arrivée. Vérifiez les affirmations de livraison et de disponibilité à la source. Les barres fixes et fenêtres de consentement ou de promotion ne doivent pas masquer l’information essentielle ni l’action suivante.

Suivre les changements de taille et de variante

Sélectionnez une taille disponible, changez de couleur puis revenez à la variante initiale. Vérifiez la cohérence du prix, de l’image, de la disponibilité et de la sélection affichée. Une taille épuisée doit être identifiable autrement que par la couleur. Ouvrez et fermez le guide des tailles, puis vérifiez que le choix est conservé. Consultez le guide dédié à la taille et à la coupe pour définir les mesures et étudier les problèmes de coupe ; cet audit vérifie que le parcours fonctionne comme prévu.

Vérifier le passage au panier

Essayez l’ajout sans sélection obligatoire, puis avec un article valide. Vérifiez le message d’erreur, l’état de chargement et la ligne réelle du panier : SKU, taille, couleur, quantité et prix. Un second appui ne doit pas créer discrètement un doublon involontaire. Testez la modification de quantité, la suppression et le retour au produit. Examinez les erreurs réseau : une animation ne prouve pas la réussite de l’ajout. Utilisez un environnement de test approuvé pour les commandes et paiements.

Examiner les obstacles d’accès et d’interaction

Testez l’ordre au clavier, le focus visible, les libellés, le zoom et la fermeture des dialogues sans perdre sa position. Les erreurs doivent expliquer comment poursuivre. WCAG 2.2 prévoit des cibles d’au moins 24 par 24 pixels CSS avec des exceptions définies, notamment l’espacement ; des commandes principales plus grandes peuvent être plus confortables. Examinez ensemble critères applicables, contraste et technologies d’assistance. Une courte checklist mobile ne constitue pas un audit complet de conformité.

Source : W3C : taille et espacement des cibles ↗

Distinguer les mesures de vitesse de la décision

Utilisez les mesures de laboratoire pour diagnostiquer le chargement, le délai d’interaction et les décalages visuels, puis comparez-les aux données disponibles des visiteurs réels. Pour de bons Core Web Vitals, Google fixe les seuils à 2,5 secondes maximum pour LCP, 200 millisecondes pour INP et 0,1 pour CLS, au 75e percentile, en séparant mobile et ordinateur. Notez le périmètre URL ou origine et la période de mesure. En l’absence de données terrain, le résultat reste inconnu : il ne peut pas être considéré comme conforme. Un score de laboratoire ne prouve pas un gain de conversion.

Source : Google : Core Web Vitals ↗

Passer à la pratique

1. Consigner le périmètre, l’état, les étapes de reproduction et les éléments observés.
2. Distinguer blocages confirmés, informations manquantes et hypothèses.
3. Prioriser selon l’impact, la portée et la solidité des preuves ; désigner un responsable.
4. Rédiger les critères de validation et retester le scénario initial.
5. Utiliser le plan de test A/B pour les améliorations incertaines, avec des garde-fous après achat.