Le thème est « mobile friendly ». PageSpeed est au vert. Quelqu’un a même ajouté un bouton d’ajout au panier flottant. Et pourtant, la session sur téléphone meurt toujours à mi-chemin, perdue dans un mur de restes de la version bureau – bandeau promo, bannière de cookies, logos de confiance, un paragraphe SEO, puis une minuscule photo du produit. Ce n’est pas une page produit mobile. C’est une mise en page de bureau entassée sur un écran étroit et vendue comme de l’optimisation.
Google indexe et classe déjà principalement à partir de la version mobile de vos pages. Si le parcours d’achat ne fonctionne que sur un grand écran, vous n’y êtes pas « presque » – vous mesurez le mauvais écran. La carte d’accompagnement sur le contenu d’une fiche produit couvre la liste complète de ce qui doit s’y trouver ; cet article traite de l’ordre dans lequel ces blocs atterrissent lorsque l’écran fait 390 pixels de large.
Une page produit mobile est un problème d’empilement, pas un problème de style.
« Optimisé mobile » signifie généralement que la page bureau fait toujours la loi
Le CSS responsive fait s’empiler les colonnes. Il ne décide pas de ce qui mérite le premier défilement du pouce. Les thèmes conservent l’ordre des modules du bureau. Les applications continuent de s’injecter là où elles l’ont toujours fait. Personne n’a rien reséquencé – le téléphone ne fait que compresser la même séquence jusqu’à ce que l’ajout au panier se retrouve sous trois blocs qui ne servent pas à acheter.
Le symptôme est ennuyeux et répétitif. Ouvrez le produit en direct sur votre propre téléphone – pas l’aperçu du back-office, la vraie URL avec chaque module chargé. Si vous devez faire défiler du chrome avant de pouvoir nommer le produit, lire le prix qui correspondait à la publicité ou appuyer sur Ajouter au panier, la mise en page est toujours pensée pour le bureau en premier. Les scores de vitesse ne corrigeront pas l’ordre.
Ce qu’une page produit mobile doit faire sur le premier écran
Une page produit mobile a une seule mission sur le premier écran : permettre à quelqu’un de décider et d’agir. Pas de « ressentir la marque ». Pas de « voir tous les signaux de confiance ». Décider et agir.
Sur ce premier écran, ne protégez que ce qui débloque l’achat :
- Identité. Le nom et une image principale claire – assez grande pour que l’objet soit évident sans avoir à zoomer en pinçant.
- Un prix qui correspond au clic. Si la publicité ou l’annonce disait 47,90 €, le premier écran ne peut pas cacher un chiffre différent derrière un accordéon fermé.
- Les options critiques pour l’achat. La taille, la couleur, le pack – tout ce qui doit être choisi avant que l’ajout au panier ne fonctionne. Des étiquettes qu’un inconnu peut décoder ; les codes fournisseurs et « Taille1 / Taille2 » brûlent un espace et des clics précieux. C’est le même problème d’UX avec le jargon produit, mais en plus bruyant sur un téléphone.
- Une action d’achat principale accessible. Un vrai Ajouter au panier (ou Acheter), pas un élément collant décoratif qui couvre le bouton fonctionnel et ne fait rien d’utile.
- Une indication honnête sur le stock ou la livraison quand cela modifie la décision – expédié en 2 jours, fabriqué sur commande, fret lourd. Pas un roman sur vos politiques.
Tout le reste attend en dessous. Les avis, la description longue, les produits associés, l’histoire de la marque – utiles plus tard, fatals quand ils poussent les contrôles d’achat hors du premier écran.
Le dépotoir du bureau : ce qui vole généralement le premier écran
Nous continuons de voir la même pile sur les téléphones en direct. Sur un catalogue que nous avons audité, cinq bandes fixes se trouvaient au-dessus du nom du produit – et deux d’entre elles disaient la même chose. Les suspects habituels :
- Du chrome avant le produit. Barre promo + annonce + avis sur les cookies + « téléchargez notre application » – quatre bandes avant même que l’image ne se charge. L’acheteur est venu pour un produit, pas pour un panneau d’affichage.
- Du papier peint de confiance au-dessus de la compréhension. Une rangée de logos de paiement et de sécurité avant le prix ou la photo. Un chrome nerveux ne remplace pas un produit clair.
- Une dissertation SEO sous le titre. Deux cents mots d’introduction riches en mots-clés copiés du modèle de bureau, de sorte que le prix et les options commencent sous la ligne de flottaison sur chaque téléphone. Ce texte a été écrit pour Google, pas pour la personne qui tient le téléphone – et Google le lit très bien depuis le bas de la page.
- Des ventes croisées avant l’ajout au panier. Des carrousels « Vous aimerez aussi » qui se battent pour la zone du pouce alors que le SKU principal n’a toujours pas de taille sélectionnée.
- Une galerie qui dévore la fenêtre d’affichage. D’énormes miniatures ou un curseur qui nécessite trois balayages avant que le prix n’apparaisse – très bien sur un bureau, impoli sur un téléphone.
- Une interface collante qui ment. Une barre flottante qui couvre le véritable ajout au panier, ou un bouton collant qui est désactivé sans erreur parce qu’une option est vide. L’aperçu semblait propre ; la page en direct avec les modules ne l’était pas.
Rien de tout cela ne nécessite un budget de refonte. Il faut que quelqu’un admette que l’ordre du bureau a survécu au « projet mobile ».
Réorganisez avant de reconstruire
Choisissez la page produit mobile qui génère du trafic et des peu de conversions. Ouvrez-la sur un vrai téléphone. Faites une capture d’écran du premier écran. Ensuite, notez chaque bloc visible de haut en bas – barres, image, titre, prix, modules, boutons. Marquez chaque bloc comme critique pour l’achat ou bruit.
Si le bruit se trouve au-dessus de ce qui est critique pour l’achat, déplacez-le ou supprimez-le. Les positions du thème et les hooks de modules en premier : dans PrestaShop, c’est l’ordre des hooks sur la page produit, dans Shopify l’ordre des sections dans l’éditeur de thème, dans WooCommerce ce que le constructeur de pages a empilé. N’achetez pas une autre application « UX mobile » tant que la pile existante n’est pas honnête. Une refonte qui conserve le même ordre de modules ne fait que redessiner le dépotoir.
Les pages catégories ont un travail différent – l’orientation au-dessus d’une grille – alors ne volez pas de correctifs là-bas ; si la page de liste est un désordre, commencez par le contenu de la page catégorie e-commerce. Cet audit reste sur une seule URL de produit.
Après l’ajout au panier : ce qui mérite encore sa place
Une fois le parcours d’achat intact, le reste de la page peut justifier sa présence : spécifications, entretien, coupe, FAQ qui tue une vraie objection, comparaison avec des SKU frères. Sur une page produit mobile, ces blocs doivent se situer après le parcours de décision – et non l’interrompre. Même règle que pour la carte complète de la fiche produit de l’article d’accompagnement, mais découpée pour un écran de la taille d’un pouce.
Notes sur les plateformes sans sermon sur les CMS
PrestaShop, Shopify, WooCommerce – même mode de défaillance. L’aperçu du back-office n’est pas la vitrine en direct. Les applications et les modules s’injectent tardivement : outils de cookies, ventes incitatives, chat, barres de notification. Auditez sur un vrai téléphone après un rafraîchissement complet, déconnecté – sur le téléphone Android de milieu de gamme que vos clients portent réellement, pas sur un flagship connecté au Wi-Fi du bureau.
Les boutiques multilingues reçoivent une blessure supplémentaire. Les titres et descriptions courtes en FR/DE/PL sont souvent plus longs que le brouillon en anglais. Sur un bureau, vous haussez les épaules. Sur une page produit mobile, la chaîne plus longue pousse le prix et l’ajout au panier vers le bas d’un autre demi-écran. Traduisez le sens, puis réduisez la longueur pour le téléphone – ne vous contentez pas de traduire.
Si les réponses manquent, corrigez cela d’abord
Réorganiser ne sauvera pas une page qui ne répond jamais à ce que c’est, ce que ça coûte ou quand ça arrive. Corrigez d’abord ces réponses d’achat sur la fiche produit complète. Si elles existent et que le téléphone les enterre toujours sous des restes de bureau, votre page produit mobile n’a pas besoin d’un autre badge d’optimisation – elle a besoin d’une pile plus courte.