# Dix décisions de design e-commerce qui augmentent mesurablement la conversion > Pas « mettez plus d'espace blanc », pas « testez la couleur de votre bouton ». Les choix précis de hiérarchie visuelle, de photographie, de typographie et de mobile qui font vraiment bouger la conversion sur de vraies boutiques. Ryan Badger - 3 novembre 2024 - 7 min de lecture ## Les décisions de design qui font vraiment bouger la conversion Les articles sur le design se rangent généralement dans deux camps. « Utilisez beaucoup d'espace blanc ! » (trop vague) ou « Testez en A/B 47 couleurs de bouton » (trop fin). Ni l'un ni l'autre n'aide quelqu'un qui regarde sa boutique en se demandant pourquoi elle convertit à 1,3 %. Cet article porte sur les décisions de design visuel précises qui font bouger mesurablement la conversion des boutiques en ligne. Pas le goût. Pas l'esthétique de la marque. Les choix de mise en page, de hiérarchie, de couleur et de typographie qui aident les gens à acheter ou qui leur barrent la route. ## 1. Hiérarchie visuelle : l'élément le plus important doit avoir l'air le plus important La plupart des boutiques donnent le même poids visuel à tout ce qui figure sur la fiche produit : texte courant en 16 px, prix en 18 px, titres en 18 px. Tous les éléments se font concurrence ; aucun ne l'emporte. L'œil n'a pas de point d'entrée. La solution : ce sur quoi vous voulez qu'on clique doit être l'élément le plus grand et le plus contrasté de la page. - Titre du produit : 28 à 36 px - Prix : 20 à 24 px, en gras, clairement délimité - Bouton Ajouter au panier : pleine largeur sur mobile, l'élément visuellement le plus lourd de la page - Descriptions, listes de caractéristiques, infos de livraison : 14 à 16 px, plus discrets Quand vous regardez votre fiche produit à 2,5 m (8 pieds) de distance (oui, littéralement, reculez), pouvez-vous dire quelle est l'action principale ? Si toute la page ressemble à une soupe grise, votre hiérarchie est cassée. ## 2. De l'espace blanc autour de l'appel à l'action, pas partout « Utilisez plus d'espace blanc » est brandi comme un conseil de design universel. Ce qui compte vraiment, c'est l'espace blanc autour des boutons et des éléments clés, pas l'espace blanc pour lui-même. - Au moins 40 à 60 px de marge autour de la zone Ajouter au panier - Un prix qui occupe son propre espace dégagé, sans être serré contre d'autres textes - Des images de produit qui ont de l'air (pas bord à bord sans marge) Resserrez tout le reste (avis, infos de livraison, produits associés). C'est secondaire. La zone de l'appel à l'action l'emporte en étant la seule à respirer. ## 3. Une photographie produit cohérente bat une « meilleure » photographie produit Un catalogue de 50 produits dont les photos sont toutes légèrement différentes (arrière-plans, éclairages, niveaux de zoom différents) fait amateur. Un catalogue où chaque photo a le même angle, le même éclairage, le même cadrage, le même fond, fait professionnel. C'est un problème de volume, pas de qualité. Vos 5 meilleures ventes peuvent avoir des visuels d'en-tête soignés. Tout le reste doit être photographié à l'identique, même si c'est un peu moins glamour. L'incohérence évoque « petite boutique peu fiable » plus que ne le fait une qualité moindre. Règle pratique : - Photo principale : fond blanc ou uni, centrée, même cadrage dans tout le catalogue - Photos secondaires : mise en situation / en usage, ton cohérent - Toutes les photos au même format et à la même résolution ## 4. Le contraste de l'appel à l'action, pas sa couleur « Les boutons orange convertissent X % de plus que les verts ! » On voit souvent cette affirmation prétendument testée. Prise isolément, c'est absurde. Ce qui compte, c'est le **contraste avec la page qui l'entoure**. Un bouton orange sur un site au thème orange est invisible. Un bouton bleu sur le même site est un phare. Choisissez la couleur qui contraste le plus avec la palette dominante de votre site. Si votre page est blanche + noire + beige, votre appel à l'action doit être la seule couleur qui n'apparaît pas ailleurs. Point secondaire : évitez les boutons fantômes (contour seul, sans remplissage) pour les appels à l'action principaux. Ils paraissent élégants mais testent mal en conversion, car ils signalent « secondaire » à l'œil. Utilisez un remplissage plein pour Ajouter au panier, Passer la commande, Acheter maintenant. ## 5. Taille du texte et longueur des lignes sur mobile La plupart des boutiques mobiles ont un texte trop petit et trop large. Les téléphones affichent le texte à une densité de pixels plus élevée ; ce qui fait 16 px sur ordinateur paraît petit sur mobile. Plancher typographique sur mobile : - Texte courant : 16 à 18 px minimum - Longueur de ligne : 40 à 60 caractères par ligne - Interligne : 1,4 à 1,6 fois la taille de la police - Boutons / zones tactiles : 44 px de hauteur minimum (recommandation d'accessibilité d'Apple) Si les visiteurs pincent l'écran pour zoomer sur vos descriptions de produits, votre texte est trop petit. Testez sur un vrai téléphone, à bout de bras, pas dans l'émulateur mobile du navigateur. ## 6. Un bouton Ajouter au panier fixe sur mobile Faites défiler une longue fiche produit sur mobile : le temps de lire la description, le bouton Ajouter au panier est 3 écrans plus haut. Les clients qui ont décidé d'acheter doivent remonter, ce qui fait baisser le taux de conversion. La solution : un bouton Ajouter au panier fixe qui flotte en bas de l'écran mobile dès que le bouton d'origine sort de l'écran. Un toucher, le panier s'ouvre, plus besoin de chercher en défilant. Sur ordinateur : le panier fixe devient facultatif (l'écran est plus grand). Sur mobile : non négociable. ## 7. Un visuel d'en-tête qui montre le résultat, pas le produit La plupart des bandeaux d'accueil montrent le produit, isolé, sur fond blanc. Parfait pour une photo de référence ; faux pour un bandeau d'accueil. Le bandeau doit communiquer « à quoi ressemble la vie avec ceci » en 2 secondes. Mieux : le produit en usage, en contexte, avec une personne ou un décor qui correspond à votre acheteur cible. - Soins de la peau : quelqu'un qui l'utilise, lumière du matin, salle de bain - Mobilier : la pièce dans une vraie pièce, habitée - Habillement : porté, en mouvement, pas sur mannequin - Alimentation / café : en préparation ou en dégustation, pas une photo de produit Le bandeau avec le produit en usage convertit mieux que celui avec le produit isolé, parce qu'il fait une plus grande part du travail d'imagination à la place de l'acheteur. Il peut se voir l'utiliser sans avoir à l'imaginer. ## 8. Des composants cohérents dans toute la boutique Un échec courant : les fiches produit utilisent un style de carte, les pages de catégorie un autre, l'accueil un troisième. Les clients sentent cette incohérence même s'ils ne savent pas la nommer. Une boutique inspire confiance quand les mêmes composants reviennent partout. Un petit système de design e-commerce, c'est : - Un seul composant de carte produit (utilisé dans les produits vedettes de l'accueil, les grilles de catégories, les produits associés, les résultats de recherche) - Un seul système de boutons (principal, secondaire, tertiaire ; seulement ces trois-là) - Un seul système de styles de titres (H1, H2, H3 ; appliqués de façon cohérente) - Une seule palette de couleurs (3 couleurs de marque au maximum, plus une échelle de gris) - Une seule échelle typographique (3 à 4 tailles au maximum) La plupart des boutiques font 15 variantes de chaque quand une seule suffirait. Moins de variantes = une apparence plus professionnelle. ## 9. Le premier écran est la publicité pour le défilement La zone visible au premier chargement (au-dessus de la ligne de flottaison) a une seule mission : donner envie de défiler. C'est tout. N'essayez pas de conclure la vente dès le premier écran. Ce qu'il faut au-dessus de la ligne de flottaison : - Pour qui c'est (en une ligne) - Ce qu'est le produit (visuellement, une bonne image) - Un appel à l'action clair (Ajouter au panier ou Acheter) - Un signal de confiance rassurant (note + nombre d'avis, ou citation de presse, ou client connu) Ce qu'il ne faut PAS au-dessus de la ligne de flottaison : - Plusieurs appels à l'action qui se disputent l'attention - Un carrousel d'accueil qui avance tout seul toutes les 3 secondes (tueur de conversion ; les clients se figent quand le contenu bouge) - Tous les avantages du produit - Des galeries de témoignages ## 10. Supprimez le carrousel de votre page d'accueil Lié au point précédent, mais il mérite le sien : les carrousels d'accueil sont morts. Les études montrent systématiquement que les diapositives qui tournent sont cliquées à 1-3 %, et que seule la première attire une attention significative. Choisissez le message que vous mettriez sur la première diapositive ; placez-le en bandeau statique. Abandonnez le reste. ## Ce que Shoprocket prend en charge La boutique thématique est livrée avec des modèles qui suivent déjà la hiérarchie visuelle, le contraste et les pratiques mobiles ci-dessus. Si vous utilisez le widget intégré sur votre propre site, vous contrôlez le design de la page qui l'entoure, mais : - Le **panier en tiroir** (et non en pleine page) est la valeur par défaut - Le **panier fixe sur mobile** est pris en charge - Des **images produit adaptatives** avec livraison automatique en WebP et bons formats d'image - Un **créateur de site avec plus de 40 thèmes** pour ne pas construire le système de design de zéro - Des **points d'accroche CSS personnalisés** pour adapter l'intégration à votre site ```
``` Ce que Shoprocket ne contrôle pas : vos visuels d'en-tête, la cohérence de votre photographie, vos textes, votre système de couleurs. À vous de les réussir ou de les rater. > **Astuce :** ouvrez votre boutique sur votre téléphone maintenant. Prenez une fiche produit. Voyez-vous Ajouter au panier sans faire défiler ? Le prix est-il clairement le deuxième élément le plus grand ? Pouvez-vous lire la description sans plisser les yeux ? Si la réponse à l'une de ces questions est non, c'est la première correction de design à faire. ## En bref - **Hiérarchie :** l'élément le plus important doit avoir l'air le plus important. Vérifiez avec le test des 2,5 m (8 pieds) - **De l'espace blanc autour de l'appel à l'action**, pas partout pour le principe - **La cohérence photographique** bat la qualité photographique. Un seul style dans tout le catalogue - **Contraste de l'appel à l'action, pas couleur.** La couleur au contraste le plus élevé face à la palette de votre page l'emporte - **Typographie mobile : texte courant de 16 px et plus, zones tactiles de 44 px et plus** - **Un bouton Ajouter au panier fixe sur mobile** n'est pas négociable - **Les visuels d'en-tête montrent des résultats** (produit en usage), pas un produit sur fond blanc - **Un petit système de design (3 couleurs, 4 tailles, 3 variantes de bouton)** fait plus professionnel que 15 variantes - **Le premier écran vend le défilement**, pas le produit. Un message clair, un appel à l'action - **Supprimez le carrousel d'accueil**. Le bandeau statique gagne [Démarrez un essai gratuit](https://app-v3.shoprocket.io/signup) si vous voulez une boutique thématique avec ces pratiques intégrées. 14 jours, sans carte. --- - HTML version: https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion - Language: Français (fr) - Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)