cover-article-fiche-produit

Comment optimiser la sélection des tailles et des couleurs sur les fiches produits mobile ?

Nous continuons notre série d’articles pour optimiser vos fiches produit sur mobile. Dans le dernier article, nous nous étions intéressés à la présentation des produits. Dans cet article, nous nous concentrons sur les attributs du produit : la taille et la couleur.

S’il est relativement facile de choisir une couleur ou une taille sur desktop, cela devient beaucoup plus compliqué sur mobile. Une des principales difficultés est l’actionnabilité de la fiche produit sur mobile. En effet, quelle UX choisir pour permettre aux utilisateurs de facilement changer la couleur du produit ou sa taille ?

C’est précisément ce que nous avons cherché à déterminer. Découvrez les bonnes pratiques, statistiques clés et témoignages d’utilisateurs pour optimiser cette dimension de votre fiche mobile.

Quelle interface adopter pour changer la couleur des produits ?

Le changement de couleur ne s’applique pas à tous les produits, mais il concerne la majorité des secteurs (un choix de peinture sur un site de bricolage, la couleur d’un smartphone pour l’électronique…). Si on regarde les acteurs du top 50 m-commerce en France (l’étude menée par Tapbuy sur les parcours d’achat mobile des 50 plus gros e-commerçants en France), on constate qu’il existe différents systèmes pour changer la couleur des produits.

Les pastilles de couleurs

pastille-couleur-fiche-produit-vertbaudet
Vertbaudet, testé sur Iphone 6

Ce système est utilisé par 24% des acteurs du top 50 m-commerce dont 53% sur le secteur de la mode. D’après les tests que nous avons effectués, c’est le système le plus efficace pour les utilisateurs. La raison est simple : il est à la fois instinctif (donc directement compréhensible pour les utilisateurs) et simple d’utilisation. Les utilisateurs sélectionnent la couleur du produit via une pastille située en-dessous et l’image est uploadée avec la couleur sélectionnée.

Si vous adoptez ce système, il existe 5 règles à bien respecter :

1. Mettre à jour la couleur

Quand l’utilisateur appuie sur la pastille de couleur, le produit doit immédiatement être mis à jour avec la couleur sélectionnée. Les tests que nous avons réalisés nous ont permis de constater qu’il existait une réelle différence dans les temps de chargement des photos, en fonction des e-commerçants. Ce petit détail permet néanmoins d’améliorer considérablement l’expérience utilisateur. De plus, la sélection des couleurs doit être proche de l’image pour que l’utilisateur puisse constater le changement d’image.

2. Proposer la bonne couleur

palette-bonne-couleur
La Redoute, testé sur Iphone 6

La couleur de la pastille doit correspondre précisément à la couleur du produit pour éviter une éventuelle déception de la part des utilisateurs. Il faut donc une palette de couleur assez large (rose poudrée, beige ivoire…). Une alternative éventuelle est de présenter la texture plutôt que la couleur (par exemple pour un jean).

3. Ecrire la couleur sélectionnée en toute lettre

palette-couleur-texte
Etam, testé sur Iphone 6

Il est toujours utile de rappeler le nom de la couleur pour bien conforter les utilisateurs dans leurs choix.

4. Mettre en avant la pastille sélectionnée.
L’utilisateur doit pouvoir comprendre quelle pastille est sélectionnée par défaut. Pour cela, le système utilisé change en fonction des retailers : souligner la pastille, utiliser un contour différent…

5. Montrer l’indisponibilité d’une couleur

pastille-couleur-fiche-produit-sephora
Sephora, testé sur Iphone 6

Il peut arriver qu’un produit avec une couleur particulière ne soit plus en stock. Il faut que l’utilisateur puisse directement comprendre quelles couleurs sont indisponibles. Vous pouvez pour cela barrer les couleurs indisponibles par exemple.

Témoignage utilisateur avec Etam

pastille-fiche-produit-etam
Etam, testé sur Iphone 6

L’avis des utilisateurs :

perso-1Jeanne, 32 ans

“La sélection des couleurs est vraiment facile, je peux cliquer sur la pastille avec la couleur qui m’intéresse, et l’image du produit se met directement à jour. Ils rappellent quand même la couleur sélectionnée, comme ça on est sûr de pas se tromper !”

Le menu déroulant

Les menus déroulants pour la sélection de la couleur sont utilisés par 18% des acteurs du top m-commerce en France. Les utilisateurs reprochent à ce système d’être moins précis que les pastilles de couleurs et moins facile d’utilisation. Il existe deux types de menus déroulants.

Les menus déroulants customisés

menu-deroulant-couleur-fiche-produit-kiabi
Kiabi, testé sur Iphone 6

Le système est simple, l’utilisateur clique sur le bouton “couleur” et se voit proposer un menu déroulant où il peut cliquer pour sélectionner la couleur. Des pastilles de couleur peuvent s’ajouter pour compléter ce système. Il est proposé par 8% du top 50 m-commerce en France.

Les menus déroulants natifs

menu-deroulant-couleur-fiche-produit-conforama
Conforama, testé sur Iphone 6

Il s’agit des menus déroulants par défaut présents sur iOS ou Android. En utilisant ce type de menu déroulant, il est impossible de rajouter des pastilles de couleurs, les utilisateurs ont seulement le nom de la couleur par écrit. Il est utilisé par 10% du top 50 m-commerce en France.

L’avis des utilisateurs :

perso-2Cédric, 36 ans

“Je ne suis pas un grand fan de ce système car en terme de couleurs on n’est jamais vraiment sûr. Par exemple du bleu, est-ce que c’est du bleu marine ? Du bleu clair ?”

Les photos du produit

Ce système est utilisé par 18% du top 50 m-commerce et consiste à présenter les différentes couleurs d’un même produit via les photos du produit. Cela se présente la plupart du temps de la manière suivante : la photo principale d’un produit prend toute la largeur de l’écran, et en dessous, des mini-photos du produit dans les différentes couleurs sont affichées. L’utilisateur a simplement à sélectionner le produit dans la couleur qu’il veut.

photos-couleur-fiche-produit-adidas
Adidas, testé sur Iphone 6

Ce type de système, contrairement au précédent, a l’avantage de montrer clairement la couleur du produit. En revanche, les miniatures ne sont pas toujours bien visibles sur smartphone, l’utilisateur a donc parfois du mal à distinguer la couleur exacte du produit.  

Les suggestions de produit

photos-couleur-fiche-produit-fnac
Fnac, testé sur Iphone 6

Ce système est utilisé par 12% des acteurs du top 50. Néanmoins, c’est le système le moins optimal selon les tests utilisateurs que nous avons réalisés. L’utilisateur peut voir le produit dans d’autres couleurs via la section suggestion de produits similaires située en bas de la fiche produit. Pour les utilisateurs, cela consiste finalement à cliquer sur une autre fiche produit. Ce système présente plusieurs inconvénients d’après nos tests :

La place. Il oblige les utilisateurs à scroller pour changer de produit, contrairement aux autres systèmes qui permettent de le faire directement depuis le haut de la fiche produit.

La compréhension. Les utilisateurs ne comprennent pas forcément qu’il existe plusieurs couleurs du même produit.

La lisibilité. Il n’y a pas de vue d’ensemble des différentes couleurs, contrairement au système des pastilles par exemple. Les utilisateurs ne peuvent donc pas savoir directement les couleurs disponibles pour un même produit.

Concernant le reste du top 50 m-commerce : 18% n’utilisent aucun système (ils ne font aucun lien entre un produit d’une couleur A et le même produit d’une couleur B), 4% ne sont pas concernés par les attributs de couleur pour leurs produits et 6% utilisent des systèmes propres.

Comment gérer le changement de taille des produits ?

Tout comme la couleur, la sélection des tailles ne s’applique pas à l’ensemble des produits, et dépend majoritairement des secteurs. On note deux grands types de système :

Les pastilles de taille

taille-pastille-fiche-produit-etam-hm
Etam à gauche, H et M à droite, testés sur Iphone 6

Cela fonctionne de la même manière que pour le choix des couleurs. Les utilisateurs choisissent une pastille où la taille est écrite. Il faut alors bien faire attention à la bonne déclinaison couleur taille s’ils utilisent aussi un système de pastille à couleur :

Adapter la taille à la couleur. Si l’utilisateur est initialement sur la couleur A, et qu’il choisit la couleur B par la suite, les tailles disponibles doivent uniquement concerner le produit avec la couleur B.

palette-couleur-taille-la-redoute
La Redoute, testé sur Iphone 6

Exemple : Anne arrive sur une fiche produit avec une robe rouge La Redoute. Lorsqu’elle change de couleur pour sélectionner la bleu, la taille indisponible 50/52 lui est clairement signalée.

Adapter la couleur à la taille. A l’inverse, si l’utilisateur est sur une taille A, et qu’il choisit une taille B par la suite, les couleurs disponibles doivent uniquement concerner la taille B.

palette-taille-couleur-la-redoute
La Redoute, testé sur Iphone 6

Exemple : Anne arrive sur une fiche produit avec une robe rouge La Redoute. Elle sélectionne la taille 50/52. La pastille de couleur bleu n’est pas barrée ou grisée, ce qui incite Anne à penser que la robe est disponible en bleu pour la taille 50/52. Déception lorsqu’elle clique sur la pastille bleu, la taille n’est en fait pas disponible…

Ce système de pastille est utilisé par 14% du top 50 m-commerce.

Les menus déroulants

Il s’agit du même système que pour la sélection des couleurs. Ils sont utilisés par 52% du top 50 m-commerce. On retrouve ici les deux types de déclinaisons possibles :

Menu déroulant customisé

menu-deroulant-taille-fiche-produit-kiabi
Kiabi, testé sur Iphone 6

Les menus déroulants customisés sont utilisés par 24% du top 50 m-commerce. Ils ne sont cependant pas tous égaux en fonction des retailers. La clé pour bien les réussir est de faciliter au maximum la sélection pour l’utilisateur (taille suffisamment grande, espace large entre les tailles).

Menu déroulant natif

menu-deroulant-taille-fiche-produit-adidas
Adidas, testé sur Iphone 6

Ils sont utilisés par 28% du top 50 m-commerce. Ils ont l’avantage d’être standardisés, donc les utilisateurs sont habitués à ce système.

Les systèmes alternatifs

Parmi le top 50 m-commerce, nous avons trouvé 6% des e-commerçants qui utilisent un autre type de système. Prenons par exemple Amazon et Showroomprive.com.

Le système de liste d’Amazon

selection-taille-fiche-produit-amazon
Amazon, testé sur Iphone 6

Sur les fiches produits d’Amazon, lorsque l’utilisateur veut choisir sa taille, on le renvoie vers une pop-in. Sur celle-ci, il peut sélectionner la taille qu’il veut via un système de liste avec des boutons radio (c’est-à-dire une seule case cochable à chaque fois). Le système est relativement clair et simple d’utilisation selon les utilisateurs interrogés.

Le système de sélecteur de Showroomprive.com

selection-taille-fiche-produit-showroomprive
Showroomprive.com, testé sur Iphone 6

Sur les fiches produits de Showroomprive.com, les utilisateurs voient apparaître une pop-up pour sélectionner la taille qu’il leur faut. Ils doivent alors utiliser un système de sélecteur via des + et des – pour choisir la bonne taille. Ce système n’est pas du tout optimal selon les utilisateurs interrogés (si une personne fait du 45 et atterrit sur la pointure 36 par défaut, cela rajoute 9 clics inutiles et lui fait perdre du temps).

Concernant le reste du top 50 m-commerce : 8% n’utilisent aucun système (ils ne font aucun lien entre un produit d’une taille A et le même produit d’une taille B), 20% ne sont pas concernés par les attributs de taille pour leurs produits.

Ne pas oublier un guide des tailles

guide-taille-mango-nike
Mango à gauche, Nike à droite, testés sur Iphone 6

Il est important de proposer un guide des tailles à vos utilisateurs (valable seulement pour le secteur de la mode) afin qu’ils puissent choisir sereinement leurs produits. Dans la majorité des cas, les e-commerçants insèrent la mention “guide des tailles” à proximité de la sélection des tailles. Ensuite, l’utilisateur est soit redirigé vers une nouvelle page, soit une pop-up s’affiche. Cependant, l’une des meilleures expériences proposées aux utilisateurs est celle de La Redoute : l’utilisateur entre son poids et sa taille puis répond à un certain nombre de questions afin de déterminer la bonne taille.

la-redoute-selection-tailles
La Redoute, testé sur Iphone 6

Attention cependant à conserver une expérience adaptée au mobile. Si vous utilisez un tableau des tailles, adaptez le pour le mobile par exemple.

guide-taille-nike
Nike, testé sur Iphone 6

Le guide des tailles de Nike n’est pas responsive ce qui oblige l’utilisateur à zoomer pour accéder aux informations.

En résumé : faciliter la sélection et la compréhension

Utilisez un système :

  • Où les couleurs et les tailles des produits sont suffisamment distinctes et visibles
  • Où les utilisateurs peuvent facilement sélectionner les attributs désirés
  • Où l’expérience est responsive du début à la fin