Tableau comparatif de produits : attributs, mise en page et mobile

Un tableau comparatif de produits place deux à cinq produits côte à côte, en général avec les produits en colonnes et les attributs en lignes, pour qu'un client puisse peser les caractéristiques sans ouvrir chaque fiche produit. Il a sa place sur les pages catégorie, les fiches produits et les guides d'achat, pour les produits que l'on choisit sur plusieurs attributs mesurables à la fois : ordinateurs portables, perceuses, vélos électriques, machines à café, matelas.

Les études d'utilisabilité s'accordent sur les règles de mise en page. Affiche cinq produits au maximum (souvent deux seulement sur téléphone), regroupe les lignes, garde le nom des produits visible pendant que le client fait défiler, et permets-lui de masquer les lignes où tous les produits ont la même valeur (Nielsen Norman Group, Baymard Institute). La règle qui fait échouer la plupart des tableaux relève pourtant des données : chaque cellule a besoin d'une valeur, dans la même unité et le même format, pour chaque produit. Ce guide explique où placer un tableau, quels attributs comparer par catégorie, les règles de mise en page et les modèles pour mobile, et les données d'attributs qui doivent exister avant que tout cela fonctionne.

Trois endroits où un tableau comparatif mérite sa place

Il existe deux types de tableaux comparatifs. Un tableau statique compare des produits choisis à l'avance ; un tableau dynamique permet aux clients de cocher une case Comparer dans la liste de produits et de construire le leur. L'article de 2024 de Kate Moran et Taylor Dykes pour Nielsen Norman Group recommande les tableaux statiques pour les petits ensembles et les tableaux dynamiques pour les grands catalogues, et note que la plupart des tableaux dynamiques n'acceptent que trois ou quatre articles (NN/g).

• Pages catégorie : une case Comparer sur chaque carte produit et une barre de comparaison fixe qui ouvre le tableau. C'est la version dynamique, utile dans les catégories qui comptent des dizaines de produits similaires, comme les perceuses sans fil ou les aspirateurs robots.
• Fiches produits : un court bloc « comparer avec des articles similaires » sous les caractéristiques, avec le produit consulté dans la première colonne et deux ou trois alternatives à côté. Il garde sur ton site les clients qui hésitent entre plusieurs modèles ; le guide de la fiche produit montre où il se place parmi les autres sections.
• Guides d'achat et pages de gamme : un tableau statique d'une ligne de produits (modèle d'entrée, intermédiaire et haut de gamme) qui explique ce que le supplément de prix apporte. Ici, tu choisis les lignes et tu peux ajouter un court verdict par colonne.

Les achats où comparer aide, et ceux où cela gêne

NN/g associe les tableaux comparatifs aux décisions compensatoires : le client arbitre entre plusieurs attributs, par exemple plus de couple contre plus de poids, ou une plus grosse batterie contre un prix plus élevé. Ce sont ces décisions que les tableaux servent le mieux. Le même article déconseille les tableaux quand les articles ne s'excluent pas mutuellement, quand ils sont bon marché et simples, ou quand ils sont difficiles à comparer sur des faits ; les achats esthétiques comme les vêtements et les meubles n'en ont généralement pas besoin (NN/g).

Un test rapide : si les filtres d'une catégorie sont surtout des nombres et des fonctions oui/non (puissance, capacité, dimensions, « passe au lave-vaisselle »), un tableau aidera. S'il s'agit surtout de style, de couleur et de motif, investis plutôt dans les images et les informations de taille.

Attributs à comparer pour huit catégories de produits

Les lignes d'un tableau comparatif doivent être les attributs entre lesquels les acheteurs arbitrent, pas tous les champs dont tu disposes. NN/g met précisément en garde contre le fait de déverser toutes les métadonnées disponibles dans le tableau. Voici des lignes de départ raisonnables par catégorie, avec l'unité ou le format de valeur dont chacune a besoin :

Deux schémas reviennent dans tout le tableau. D'abord, la moitié des lignes sont des nombres avec une unité, et ils ne se trient et ne se comparent bien que si l'unité est identique pour chaque produit. Ensuite, les autres sont des listes contrôlées ou des valeurs oui/non, qui ne restent comparables que si tout le monde écrit « moteur pédalier » de la même façon. Ce sont des questions de modélisation des attributs avant d'être des questions de design ; la puissance des attributs produits approfondit cette modélisation.

Un exemple de tableau comparatif construit à partir des données d'attributs

Voici un exemple concret : trois perceuses sans fil 18 V fictives, issues d'une même gamme, comparées sur les attributs du tableau ci-dessus. Le bloc ci-dessous est triable, donc les produits sont ici en lignes ; sur une boutique, tu le tournerais en général pour mettre les produits en colonnes.

Plusieurs choix font fonctionner ce tableau, et chacun est une décision sur les données :

• Les unités vont dans l'en-tête de colonne, pas dans les cellules. Les cellules contiennent des nombres simples, donc un tri par couple range 40, 60 et 90 dans l'ordre. Une cellule « 60Nm » à côté d'une cellule « 60 Nm max. » se trie comme du texte.
• Une seule définition par attribut. « Poids avec batterie » est un autre attribut que « poids (outil nu) ». Les fournisseurs mélangent les deux, et un tableau qui les mélange fait paraître la perceuse compacte plus lourde ou plus légère qu'elle ne l'est.
• Les booléens : Oui ou Non, jamais une cellule vide. Une cellule vide dans la ligne sans charbon se lirait comme « non » pour certains clients et « inconnu » pour d'autres.
• Les lignes identiques sont aussi une information, mais pas dans la vue par défaut. Les trois sont en 18 V, ce qui compte pour la compatibilité des batteries. Affiche-la dans le tableau complet et masque-la quand le client passe aux différences uniquement.

Règles de mise en page issues des tests de Baymard et de Nielsen Norman Group

L'article de Baymard sur les outils de comparaison, signé Edward Scott (octobre 2022), liste quatre améliorations tirées de ses tests d'utilisabilité : permettre de retirer les attributs identiques entre produits, regrouper les attributs en catégories, garder les en-têtes de colonnes visibles pendant le défilement, et marquer les lignes par des séparateurs ou une alternance de fond (Baymard). Parmi les façons d'ordonner les attributs, le regroupement en catégories a donné les meilleurs résultats auprès des participants. NN/g ajoute quelques règles :

1. Produits en colonnes, attributs en lignes, avec les libellés d'attributs à gauche et le nom des produits en haut. C'est la convention à laquelle les clients s'attendent.
2. Cinq produits au maximum. Les ensembles plus grands demandent d'abord des filtres, pour que les clients réduisent la liste avant de comparer.
3. Des en-têtes produits fixes avec le nom, une vignette et le prix, pour que personne ne remonte vérifier quelle colonne correspond à quoi. Baymard a constaté que cela supprime complètement le problème.
4. Un interrupteur « différences uniquement », comme le bouton Highlight Differences que NN/g montre chez Best Buy. Si tu ne peux pas masquer de lignes, mets plutôt en évidence les cellules qui diffèrent.
5. Des cellules au texte court, idéalement sans phrases complètes, avec un alignement cohérent. Les nombres alignés à droite ou centrés, le texte aligné à gauche.
6. Explique le jargon sur place : une infobulle sur « moteur sans charbon » ou « Wh » qui dit ce que cela change pour l'acheteur.
7. Une version synthétique avec cinq ou six lignes clés, plus un lien ou un bouton vers le tableau complet des caractéristiques.

Les tableaux comparatifs sur un écran de téléphone

NN/g note qu'il faudra peut-être réduire le tableau à deux produits sur téléphone, donc le tableau mobile a besoin de son propre modèle (NN/g). Le plus courant : une première colonne fixe avec les libellés d'attributs, deux colonnes produits, et un en-tête produit qui reste en haut pendant que le client fait défiler les lignes. Laisse le client choisir quels deux produits sont affichés plutôt que de lui imposer un défilement horizontal sur quatre colonnes.

Si une vraie vue côte à côte ne tient pas, NN/g suggère de transformer les produits en onglets, en acceptant que la comparaison devienne plus difficile. N'applique pas la limite du téléphone au desktop : un client sur ordinateur qui a la place pour quatre produits doit pouvoir en comparer quatre. Et garde l'interrupteur « différences uniquement » sur mobile, où chaque ligne masquée évite un défilement.

Unités, formats de valeur et cellules vides

NN/g considère le contenu comme le principal problème des tableaux comparatifs : un attribut manquant pour certains des produits comparés n'a guère sa place dans le tableau. En pratique, les problèmes de données se répartissent en quatre groupes, et chacun se corrige dans le modèle d'attributs plutôt que dans le template. Le guide des unités de mesure détaille la partie unités.

• Unités mélangées. Trois fournisseurs envoient la capacité de batterie sous la forme « 2Ah », « 2000 mAh » et « 2.0 Ah ». Stocke un seul nombre dans une seule unité (2,0, unité Ah) et laisse le template afficher le symbole.
• Valeurs non contrôlées. « Mid-drive », « middenmotor », « moteur central » et « Mid » sont une seule et même valeur. Une liste fixe de valeurs autorisées par attribut, le genre de données de référence qu'un catalogue doit gouverner, les garde identiques entre produits et entre langues.
• Des définitions différentes derrière un même libellé. Poids avec ou sans batterie, rendement par couche ou par pot, autonomie en mode éco ou turbo. Écris la définition dans le nom de l'attribut ou dans son texte d'aide, et refuse les valeurs fournisseurs qui utilisent l'autre.
• Cellules vides. Décide de ce que signifie un manque et affiche-le : « Non » quand la fonction est absente, « Non précisé » quand le fournisseur ne l'a pas indiqué. Ne laisse jamais une cellule vide, et considère un nombre élevé de « Non précisé » comme le signal qu'il faut compléter l'attribut avant d'afficher la ligne.

Les taux de remplissage décident quelles lignes peuvent entrer dans un tableau. Prenons une catégorie de perceuses fictive où « couple max. » est renseigné pour 96 % des produits et « niveau sonore » pour 38 % : le premier est une ligne de comparaison, le second est un chantier. Fais cette vérification par catégorie avant de concevoir le tableau, car le template ne peut pas corriger une valeur manquante.

Données structurées pour les pages de comparaison : ce que propose schema.org

Ni Google ni schema.org n'ont de type de données structurées conçu pour les tableaux comparatifs. La galerie de recherche de Google liste 25 fonctionnalités de données structurées, comme Product, Review snippet et Breadcrumb, et aucune n'est destinée aux comparaisons (Google Search Central, page mise à jour le 16 octobre 2026). Schema.org n'a qu'un type générique Table, « a table on a Web page » (un tableau sur une page web), qui ne fait pas partie des fonctionnalités de résultats enrichis de Google. Balise chaque fiche produit avec les données structurées Product comme d'habitude, et construis la comparaison elle-même comme un simple tableau HTML : un élément table, une ligne d'en-tête avec des cellules th pour les produits, et des cellules th avec scope="row" pour les libellés d'attributs.

Ce balisage sémantique aide davantage les utilisateurs de lecteurs d'écran que n'importe quel schéma : ils entendent l'attribut et le produit pour chaque cellule. Évite d'afficher le tableau sous forme de grille d'éléments div ou d'image, et ne colle pas de contenu de comparaison dans un balisage FAQ ou avis pour courir après les résultats enrichis.

Où Magento, Shopify, Lightspeed et WooCommerce stockent les attributs comparables

Chaque plateforme stocke les lignes quelque part ; seules certaines affichent une comparaison pour toi.

• Magento (Adobe Commerce) : Product Compare intégré. Chaque attribut a un réglage Comparable on Storefront ; mets-le sur Yes pour inclure l'attribut dans la comparaison (Adobe Experience League). Les mêmes Storefront Properties contiennent Use in Layered Navigation pour les filtres.
• Shopify : les caractéristiques se trouvent en général dans des champs méta, que le thème ou une appli lit pour construire un bloc de comparaison. Les champs méta typés (nombre avec unité, texte sur une seule ligne issu d'une liste) gardent les valeurs comparables ; le guide des champs méta Shopify présente les types.
• Lightspeed eCom (C-Series) : des spécifications, regroupées par type de produit et plafonnées à 50 selon la page des limites de Lightspeed, que le thème affiche sur la fiche produit.
• WooCommerce : des attributs produits, globaux ou propres au produit ; la comparaison vient du thème ou d'un plugin.

Le point commun : la plateforme stocke une valeur par attribut et par produit, et la comparaison est une vue sur ces valeurs. Si les valeurs sont incohérentes dans la boutique, la comparaison l'est aussi, quelle que soit l'appli qui l'affiche.

Alimenter les tableaux comparatifs depuis le modèle d'attributs d'un PIM

WISEPIM n'affiche pas de tableaux comparatifs sur ta boutique ; c'est ton thème, ton appli ou ta plateforme qui s'en charge. Ce qu'il fournit, ce sont les données d'attributs structurées qui les alimentent. Dans WISEPIM, chaque attribut a un type (nombre, décimal, booléen, sélection ou sélection multiple par exemple), un groupe, les catégories auxquelles il s'applique et, en option, un jeu de codes d'unités pour les nombres ou un jeu d'options de valeurs autorisées pour les sélections, comme le décrit la page sur la gestion des attributs. L'enrichissement AI peut compléter les valeurs d'attributs manquantes à partir des titres et descriptions du produit, et la liste des attributs affiche le taux de remplissage de chaque attribut pour que tu voies quelles lignes sont prêtes.

Ces attributs partent par les connexions dans le format propre à chaque plateforme : champs méta sur Shopify, attributs sur Magento, spécifications sur Lightspeed eCom. Feed Hub peut aussi publier un flux JSON-LD schema.org Product qui liste les valeurs d'attributs visibles en additionalProperty, pour les équipes qui construisent des pages de comparaison ou d'autres outils à partir d'un flux. Le guide de standardisation des attributs explique comment nettoyer des valeurs arrivées de façon incohérente.