Les tableaux comparatifs, on en retrouve presque sur tous les sites commerciaux. Ils sont le plus souvent utilisés pour comparer différentes offres commerciales: plans d’hébergement, offres d’abonnements à un service web, offres packagées de sites Internet, etc.
Pour mettre en évidence les différences entre chacune des offres, il est fréquent d’utiliser des icônes de deux types:
- des icônes de couleur verte – représentant le plus souvent un bouton de validation – pour préciser les fonctionnalités disponibles
- des icônes de couleur rouge – une croix, ou parfois rien du tout – pour les fonctionnalités non incluses dans l’offre
Voici par exemple un tableau extrait du site d’Expression Engine présentant les différentes éditions de l’application et ses fonctionnalités et prix respectifs:
Tableau comparatif sur le site d'Expression Engine
C’est clair, simple et parfaitement explicite. Bref, rien à redire.
Voyons maintenant un autre exemple. En surfant sur le site de Salesforce – un fournisseur de solutions de CRM, je suis arrivé sur la page présentant la plateforme Force, avec son inévitable tableau comparatif. Le voici donc:
Tableau comparatif sur le site Salesforce
Vous ne trouvez pas qu’il y a quelque chose qui cloche ? Si je vous avais demandé de choisir au 1er coup d’oeil l’offre la plus complète, laquelle auriez-vous choisi ?
En réalité, les icônes en rouge symbolisent les services inclus, tandis que les icônes de couleur verte signalent un service disponibles moyennant un supplément. Bref, c’est plutôt déstabilisant. Les couleurs vont à l’encontre des pratiques habituelles, il y a donc un fort risque que l’information soit mal interprétée. Même si les formes des icônes sont correctes, on a réellement l’impression que c’est la 1ère offre la plus complète. Et du coup, la deuxième offre ne paraît pas très engageante.
Je me suis donc prêté au jeu du redesign. J’ai pris le parti d’utiliser les icônes vertes classiques pour les services inclus, et un symbôle de couleur neutre (ni rouge, ni vert donc) pour les services additionnels. Voici le résultat:
Proposition de redesign du tableau comparatif de Salesforce
Ce n’est probablement pas parfait, mais ça semble déjà un peu plus clair, non ?
En tout cas, je suis étonné qu’une erreur comme celle-ci soit passée inaperçue, surtout pour une entreprise de cette importance. Ce genre de détails peut vraiment faire toute la différence.
Pour terminer sur le sujet, je vous propose deux articles où vous pourrez piocher quelques bonne pratiques concernant le design de tableaux de comparaison de prix, et ainsi éviter ce genre d’erreurs: