Sur une page produit mobile, les acheteurs doivent comprendre le produit, choisir une option valide et voir comment l'acheter. Une page qui s'adapte simplement à l'écran peut encore rendre ces tâches difficiles. Auditez le parcours réel plutôt que de vérifier uniquement si le thème se dit réactif.
Mobile Professional Framework fournit une présentation mobile/tablette configurable pour OpenCart, avec un contrôle sur les sections et la visibilité des modules. Que vous utilisiez cette approche ou un thème principal réactif, vérifiez le contenu exact des produits et les contrôles livrés aux visiteurs mobiles.
Commencez par des produits représentatifs
Choisissez un produit simple, un produit avec plusieurs options, un article indisponible et un avec une longue description ou un tableau de spécifications. Testez un téléphone en orientation portrait et un appareil plus large. L'émulation de navigateur est utile pour les vérifications de mise en page, mais les tests sur appareil réel révèlent le comportement du clavier, du tactile et du chrome de navigateur que les captures d'écran manquent.
Pour chaque produit, notez les trois faits qu'un acheteur doit comprendre avant d'acheter : ce que c'est, combien coûte la version sélectionnée et si cette version est disponible. Ces faits doivent rester clairs sans ouvrir plusieurs onglets non liés ou faire défiler un grand bloc promotionnel.
Comparez le contenu mobile et de bureau
Examinez les titres, descriptions, spécifications des produits, noms d'options, images et données structurées. Cacher des modules décoratifs peut simplifier une mise en page mobile ; supprimer des informations essentielles sur le produit peut créer une expérience incomplète. Vérifiez que la présentation mobile conserve le contenu dont les clients et les moteurs de recherche ont besoin.
Utiliser Guide de Google sur l'indexation mobile-first lors de l'examen des différences entre les présentations. Si votre configuration change les URL ou le rendu en fonction de l'appareil, incluez ces différences dans l'examen technique plutôt que de supposer qu'une mise en page mobile distincte est automatiquement équivalente.
Rendez les choix de produits compréhensibles
Sélectionnez chaque type d'option que votre boutique utilise : texte, liste, image, date ou une combinaison. Gardez la sélection actuelle visible et distinguez les valeurs non disponibles des valeurs non sélectionnées. Affichez les changements de prix suffisamment clairement pour que l'acheteur puisse comprendre le total résultant.
Un échantillon de couleur doit avoir une étiquette significative, et un choix de taille ne doit pas dépendre d'une petite image. Testez que la zone d'options peut être défilée sans sélection involontaire. Notre guide d'image d'option couvre la présentation, tandis que le guide de combinaison-stock couvre l'identité des stocks.
Regardez la page pendant son chargement
Utilisez une connexion plus lente et observez quand le texte, les images et les contrôles apparaissent. Une grande image pousse-t-elle le bouton d'achat juste au moment où quelqu'un appuie ? Un changement de police déplace-t-il les contrôles d'option ? Réservez des dimensions raisonnables pour les images et évitez de faire des widgets non essentiels une condition préalable à l'apparition des informations sur le produit.
| Vérifier | Preuve utile |
|---|---|
| Stabilité de la mise en page | Enregistrer quel élément se déplace et ce qui se charge immédiatement avant |
| Livraison d'image | Comparez les dimensions téléchargées avec la taille affichée |
| Préparation à l'interaction | Notez quand les options et le bouton d'ajout au panier répondent de manière fiable |
| Obstruction | Vérifiez les contrôles de cookies, les widgets de chat et les barres collantes ensemble |
Suivez le chemin du produit au panier
- Choisissez une configuration de produit valide et une quantité.
- Ajoutez-le au panier et vérifiez que le message de confirmation est visible.
- Ouvrez le panier et confirmez les valeurs sélectionnées, la quantité et le prix.
- Retournez au produit et vérifiez que la navigation reste compréhensible.
- Répétez avec une configuration indisponible et une quantité excessive.
Ne testez pas le bouton ajouter au panier isolément. Son état de chargement environnant, la confirmation et l'action suivante déterminent si les acheteurs comprennent ce qui s'est passé. Continuez dans le liste de contrôle de paiement mobile lorsque le parcours produit-vers-panier fonctionne.
Prioriser les changements par la tâche qu'ils affectent
Corriger les problèmes qui empêchent la compréhension, la sélection ou l'achat avant de peaufiner les espacements mineurs. Conservez un cas de test reproductible pour chaque correction et répétez-le après les mises à jour de thème ou de module. Utilisez des mesures de performance et le comportement des clients ensemble, avec des conditions de test cohérentes, plutôt que de présenter un seul score de laboratoire comme preuve que chaque page produit mobile fonctionne bien.