Mon profil sur Goodreads

Vous l’aurez deviné: pourquoi trouve t-on un bouton «add as a friend» sur son propre profil ? La question se pose également pour les liens d’envoi de message et de comparaison de livres.

Voyant cela, je n’ai eu qu’une envie: tenter de devenir mon propre ami! (c’est mon droit, non ?). Je n’ai pas été déçu du résultat:

Message d'erreur après avoir cliqué sur «add as a friend»

Mince alors. On me propose un chouette bouton avec une belle affordance, et ensuite on me reproche d’avoir essayé de cliquer dessus. C’est fort, non ?

Tentons donc de résoudre cette situation. Si je regarde du côté du livre «Ergonomie Web» d’Amélie Boucher, je trouve un paragraphe intitulé L’internaute ne doit pas faire d’erreur. Extrait:

La première recommandation pour optimiser la gestion des erreurs sur votre site est de tout faire pour empêcher que vos internautes en commettent.

En l’occurrence, la solution tient du bon sens. Au lieu de prévoir des messages d’erreurs me reprochant mon incompétence (ce qui au passage est terriblement frustrant), il suffisait de ne pas afficher ce bouton quand on est sur son propre profil. Ce serait bien plus simple, et surtout, bien plus respectueux pour un utilisateur comme moi qui aime cliquer sur tout ce qui bouge.

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:

• Pricing tables: examples and best practices (Smashing Magazine)
• Pricing tables: 46 examples (Elements of Design)