delisigns

Le blog d'un webdesigner et intégrateur HTML/CSS freelance

Archive pour la catégorie ‘Ergonomie web’

Un bouton à éviter sur Goodreads

5 commentaires

En ce moment, je parcoure les réseaux sociaux dédiés aux livres. J’adore Last.FM et je me demandais si je pourrais trouver un équivalent pour les livres. J’en suis donc venu à tester Goodreads, le service le plus réputé dans le domaine. J’ai donc ouvert un compte. Mais en consultant mon profil fraichement créé, il y a un bouton qui m’a rapidement intrigué:

Mon profil sur Goodreads

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»

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.

Publié le 18 novembre 2009

5 commentaires

Posté dans Ergonomie web

Mots-clés:

Un tableau comparatif peu engageant sur Salesforce

laisser un commentaire

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:

pricing_expressionengine

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

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

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:

Publié le 3 juillet 2009

laisser un commentaire

Posté dans Ergonomie web