Petit tour d’horizon pour la déclinaison des produits

Certains produits se déclinent, via plusieurs critères.

L’exemple classique  : les habits, avec la déclinaison par taille et par couleur.

Déjà, avant tout, on peut choisir de faire autant de produit que déclinaison.

Avantage : on aura du référencement naturel sur chaque déclinaison (polo rose par exemple).

Gros inconvénient : les pages catégories seront surchargé par des listes de produits très semblables…

Donc, bien souvent, il est plus intéressant de créer une fiche produit configurable.

La redoute fait plutôt simple pour traiter cette fonction : elle affiche une liste déroulante pour chaque type de déclinaison.

C’est basique, et ça a fait ses preuves ;).

Juste, dommage quand même d’afficher une liste quand il n’y a qu’une valeur :

On donne l’impression à l’internaute qu’il va avoir le choix, alors qu’en fait, non ;).

La limite d’une telle présentation est qu’on ne présente pas graphiquement les choix des différentes couleurs.

Cette copie d’écran vient du site Nars.

Il s’agit de choisir une couleur de rouge à lèvre, et le choix est ici forcément fondamental, et très large.

Ici, les couleurs sont en fait regroupées par matières, sous forme d’onglets.

Bon, c’est bien tout ça, mais une information importante par rapport à ce choix de la déclinaison, c’est la disponibilité du produit.

Et oui, le stock varie pour chaque déclinaison du produit.

Décathlon (dans son site d’achat avec retrait en magasin) n’aide pas l’internaute sur ce sujet. Je voulais acheter le kit pour jouer au ping pong chez soi, et bien j’ai du essayer chaque couleur, une à une, pour savoir si le produit était disponible :

On peut répondre à ce problème soit en retirant de la liste les déclinaisons indisponibles, soit en insérant le texte de disponibilité, pour chaque ligne de la liste.

Pour voir comment traiter toutes ces fontions, allons voir sur Amazon :

Ici, on a bien un produit qui se décline en couleur et en taille.

Les différentes déclinaisons sont affichées en clair sur la page. Gros avantage : l’internaute voit d’un coup d’œil les choix à sa disposition.

De plus, cette présentation permet d’afficher de manière très synthétique la disponibilité des produits.

Exemple : dans la copie d’écran ci-dessus, j’ai cliqué sur une déclinaison couleur (la première, qui est mise en valeur), et en temps réel, l’affichage des tailles est mis à jour : les tailles non disponibles apparaissent de manière atténuées.

Cette mise en forme est, comme souvent chez Amazon, réalisée de manière dynamique : la zone qui affiche les tailles change de hauteur en fonction de la largeur de la fenêtre.

Bon, ce qui est plus étonnant, pour Amazon, c’est que cette mise en forme n’est pas utilisée partout.

Pourquoi pour cette chaussure les déclinaisons en taille sont elles affichées sous forme de liste déroulante ?

Une hypothèse : le mode d’affichage bascule d’un mode à l’autre en fonction du nombre de déclinaisons.

Une autre hypothèse : chez amazon également il reste des zones de progrès ;).