Design de site e-commerce page par page : de l’accueil au paiement

Le design de site e-commerce suit le parcours du client dans la boutique

Le design de site e-commerce se juge plus facilement page par page, dans l’ordre où le client les rencontre : accueil ou résultat de recherche, liste de catégorie, fiche produit, panier, paiement, confirmation. Chaque page a une mission, et une belle boutique peut échouer à n’importe quelle étape. Baymard Institute, un groupe de recherche qui teste des boutiques en ligne avec de vrais utilisateurs, juge médiocres l’accueil et la navigation par catégories du site moyen parmi les plus gros chiffres d’affaires américains et européens. Dans son banc d’essai, 76 % des sites ont un résultat médiocre ou pire.

L’accueil a une mission étroite. Il montre d’un coup d’œil ce que vend la boutique, ouvre les catégories principales, propose la recherche et énonce les conditions de livraison et de retour. Beaucoup de clients ne le voient jamais : recherche et publicités les envoient directement vers une catégorie ou un produit.

Navigation, arborescence des catégories et recherche interne d’une boutique

Les noms de catégories doivent reprendre les mots des clients, et le client doit toujours voir où il se trouve. Le banc d’essai mobile 2026 de Baymard a constaté que 94 % des sites mobiles ne signalent pas la rubrique courante dans la navigation principale. Il a aussi constaté que 42 % ne proposent pas d’option « Tout voir » à chaque niveau du catalogue. Un fil d’Ariane et un lien « Tout voir » en haut de chaque catégorie comblent ces lacunes.

La recherche est la deuxième porte d’entrée. Dans les tests de Baymard, 34 % des utilisateurs ont cherché des choses qui ne sont pas des produits, comme la politique de retour, alors que 15 % des sites évalués ne gèrent pas ces requêtes élémentaires. Sur mobile, 27 % des sites n’ont pas de bouton de validation à côté du champ de recherche et 28 % ne donnent aucune suggestion utile pour un mot presque bien orthographié.

Pages de catégorie et listes de produits : filtres, tri et vignettes

La liste de produits est l’endroit où les boutiques perdent des gens sans bruit. L’étude de Baymard sur les listes a relevé un abandon de 67–90 % sur les sites dont la liste est d’une utilisabilité médiocre, contre 17–33 % sur ceux dotés d’outils un peu meilleurs. Son banc d’essai 2025 range 58 % des sites sur ordinateur et 78 % des sites mobiles au niveau médiocre ou pire.

Regroupez les déclinaisons de couleur et de taille d’un même produit en un seul élément de liste, ce que 42 % des sites ne font pas, et affichez trois vignettes ou plus par élément, ce que 80 % ne font pas. Proposez les quatre types de tri que les utilisateurs cherchaient dans les tests, prix, note des utilisateurs, meilleures ventes et nouveautés ; 69 % des sites en omettent au moins un.

Google Search Central couvre le côté technique. Son guide de pagination indique que les robots de Google ne cliquent pas sur les boutons : un « charger plus » ou un défilement infini exige donc de vrais liens vers des pages numérotées, chacune avec sa propre URL, comme ?page=2. Il conseille de garder hors de l’index les listes filtrées ou retriées, avec noindex ou des règles robots.txt.

Design de la fiche produit : images, déclinaisons, prix et retours

La fiche produit répond à ce que le client demanderait à un vendeur dans un magasin physique. Le dernier banc d’essai de Baymard sur les fiches produit constate que seuls 48 % des principaux sites sur ordinateur et 38 % des sites mobiles atteignent un niveau correct ou bon. Dans les tests, 42 % des utilisateurs ont essayé de juger la taille d’un produit d’après les photos, ce qui est difficile sans image à l’échelle. Et 23 % des sites n’ont aucune photo portée par un modèle.

Les déclinaisons doivent se choisir avec des boutons, or 57 % des sites n’en utilisent pas pour choisir la taille. Le prix, le stock et le bouton d’achat vont dans un même bloc, avec une estimation du coût total livraison comprise, que 67 % des sites ne donnent pas. Les options, le coût et le délai de livraison dépendent de la destination et de l’adresse exacte : demandez donc un code postal ou un pays et affichez une date. La recherche de Baymard sur le paiement relève 48 % de sites qui affichent une vitesse au lieu d’une date de livraison.

Les informations de retour doivent figurer sur la fiche produit elle-même. Dans une étude de Baymard auprès de 1 032 répondants, 60 % ont dit chercher la politique de retour à cet endroit, mais 44 % des sites ne l’affichent ni ne la lient. Le guide d’URL de Google demande que chaque déclinaison ait sa propre adresse, comme /t-shirt/green ou /t-shirt?color=green.

Design du paiement : achat en invité, champs du formulaire et coût total

Le paiement est la partie la plus étudiée du design de site e-commerce, parce que ses pertes se comptent facilement. La liste de 50 études de Baymard donne un taux moyen documenté d’abandon de panier de 70,22 %. Si l’on met de côté ceux qui ne faisaient que regarder, les principales raisons sont les frais supplémentaires (40 %), la livraison lente (20 %), la méfiance envers le site pour les données de carte (19 %), l’obligation de créer un compte (18 %) et un paiement trop long (17 %). Encore 12 % n’ont pas pu voir le coût total dès le départ.

Les tests de Baymard montrent qu’un paiement idéal peut compter 12–14 éléments de formulaire, alors que le paiement américain moyen en affiche 23,48 par défaut. L’achat en invité doit être l’option la plus visible, et 62 % des sites n’y parviennent pas. Signalez à la fois les champs obligatoires et facultatifs, car 32 % des participants ont manqué un champ obligatoire quand seuls les champs facultatifs étaient indiqués. Si vous demandez un numéro de téléphone, dites pourquoi : plus de 70 % des acheteurs interrogés hésitent à le donner.

Beaucoup de paiements échouent sur les messages d’erreur. Baymard compte 94 % de sites sans messages adaptatifs, ceux qui nomment le vrai problème, par exemple un numéro de téléphone trop court. Une saisie d’adresse assistée attrape les fautes de frappe avant qu’un colis ne s’égare, et 54 % des sites mobiles n’en ont pas. Baymard estime que la grande boutique moyenne pourrait gagner 35,26 % de taux de conversion grâce au seul design du paiement.

Panier, compte client, pages de confiance et messages après la commande

Le panier montre chaque article avec sa déclinaison et son image, un réglage de quantité, l’estimation de livraison et le total. Baymard constate que 97 % des sites n’utilisent pas de boutons pour modifier la quantité, ce qui provoque des erreurs : le client tape 2 à côté du 1 par défaut et obtient 21. Dans les tests, des règles de mot de passe strictes ont causé jusqu’à 19 % d’abandon au paiement chez les titulaires d’un compte existant.

La confiance vient de pages simples et faciles à trouver : livraison, retours, paiement, contact et identité du vendeur. Dans l’enquête de Baymard, 13 % des acheteurs sont partis à cause d’une politique de retour insatisfaisante. Le droit de la consommation, qui diffère selon les pays, fixe ce qu’une boutique doit divulguer ; faites relire ces pages par un juriste dans chaque marché. La page de confirmation et les e-mails reprennent ensuite le numéro de commande, les articles, le total, l’adresse et la date prévue, avec des liens vers le suivi et les retours.

Mobile, Core Web Vitals et règles d’accessibilité pour les boutiques

Concevez d’abord pour le téléphone. Baymard note que le mobile représente souvent 50 % du trafic sur de nombreux sites e-commerce, et son banc d’essai 2026 juge 75 % des sites mobiles seulement moyens. Les consignes de web.dev, chez Google, fixent de bons Core Web Vitals à un Largest Contentful Paint de 2,5 secondes au plus, un Interaction to Next Paint de 200 millisecondes ou moins et un Cumulative Layout Shift de 0,1 ou moins. Ils sont mesurés au 75e centile des chargements de page, séparément pour mobile et ordinateur.

Le W3C a publié WCAG 2.2 comme Recommandation le 5 octobre 2023, et plusieurs nouveaux critères concernent directement les boutiques. Target Size (Minimum) demande des cibles de pointeur d’au moins 24 sur 24 pixels CSS, avec des exceptions. Redundant Entry précise que les données déjà saisies dans un même processus doivent être préremplies ou proposées au choix, comme une adresse de facturation. Accessible Authentication exclut une connexion qui repose sur un test de fonction cognitive, comme se souvenir d’un mot de passe, sauf s’il existe une alternative ou un mécanisme d’aide.

Dans l’UE, la Commission européenne range le commerce électronique parmi les services couverts par l’Acte européen sur l’accessibilité. La Commission irlandaise de la concurrence et de la protection des consommateurs, autorité de contrôle du commerce électronique dans ce pays, indique que la loi est entrée en vigueur le 28 juin 2025. Le résumé de Wikipédia décrit une exemption pour les microentreprises qui fournissent des services : moins de 10 personnes et un chiffre d’affaires ou un total de bilan ne dépassant pas 2 millions d’euros. Les règles du Royaume-Uni, des États-Unis ou du Golfe diffèrent ; faites vérifier votre cas par un spécialiste pour chaque marché.

Thème prêt à l’emploi ou design sur mesure, et ce qu’il faut préparer pour le brief

Un thème prêt à l’emploi convient à un petit catalogue de produits courants et à un budget serré, puisque le panier et le paiement fonctionnent déjà. Un design sur mesure se justifie quand le catalogue demande ses propres filtres, une aide au choix de taille ou une configuration, ou quand la marque doit se distinguer. Préparez le catalogue avec déclinaisons et attributs de filtre, plusieurs photos par produit dont une à l’échelle, et les politiques, avec la livraison écrite par destination.

VITON13 Studio conçoit cela comme un projet à périmètre fixe couvrant les parcours de catalogue, un système de fiche produit et les flux de paiement. La page du service l’affiche à partir de $113 avec l’aide de l’IA ou à partir de $173 en travail humain, en 6–10 jours ouvrés et avec 2 tours de révision. Le périmètre est confirmé par écrit avant le début du travail. Avec le catalogue, les photos et les politiques prêts, un bon design de site e-commerce part de vraies pages plutôt que de questions ouvertes.