Les petits détails qui font la différence

Pour celles et ceux qui ne le savent pas, l’ergonomie est une discipline sérieuse, elle ne peut (en théorie) être pratiquée que par des professionnels diplômés et aptes à perpétuer la tradition de rigueur scientifique. Mieux : l’ergonomie est une science, elle se fonde sur des publications de référence, par exemple les critères ergonomiques de Scapin et Bastien (guidage, charge de travail, contrôle explicite, adaptabilité, gestion des erreurs, homogénéité et cohérence, signifiance des codes et dénominations…).

OK très bien… mais cette rigueur scientifique ne doit pas vous faire oublier que les sujets de test sont des êtres humains : imprévisibles, faillibles et dont le comportement est dicté par des émotions. Il serait donc fort dommage de ne pas prendre en compte cette dimension émotionnelle et de ne pas essayer de séduire les utilisateurs avec des petites attentions. D’ailleurs, le proverbe dit : « Le diable est dans les détails« .

Ainsi, lorsque vous videz votre boite de réception dans Gmail, l’interface affiche le message suivant : « Si vous cherchez des choses à lire, allez donc sur Google News« . Non seulement cela permet de briser la monotonie d’une liste vide, mais c’est également une petite attention envers les utilisateurs, une sorte de clin d’oeil qui ne mange pas de pain.

Dans cette optique, l’excellent blog Little Big Details nous propose une sélection de petits détails que l’on ne trouve pas dans les manuels d’ergonomie, mais qui font le bonheur des utilisateurs qui les remarquent :

  • Le panier d’Amazon n’affiche le lien « Remove » que quand la quantité est fixée à 0 ;

    Le panier d’Amazon
  • Le bouton d’achat de Coda est animé pour indiquer la progression du traitement de la commande ;

    Le bouton de commande de Coda
  • Etsy vous demande « Talking to yourself again » si vous essayez de vous envoyer un message ;

    Le rappel de Etsy
  • L’heure locale est affichée sur la page de contact de Harvest ;

    Les horaires de Harvest
  • Il est possible de mettre un 11/10 au film Spinal Tap sur IMDB ;

    La notation de Spinal Tap sur IMDB
  • Des touches « fantômes » sont accessibles sur le clavier virtuel de l’iPad ;

    Les touches fantômes du clavier virtuel de l’iPad
  • La planisphère de l’horloge de Mac OS X suit la saison ;

    Les saisons représentées sur la planisphère de Mac OS X
  • L’émoticône par défaut de Skype fait la tronche si vous choisissez d’écrire en Comic Sans ;

    Les émoticônes de Skype
  • Le message change de « 29 years old » à « 30 years young » dans le formulaire de création de compte de Tumblr ;

    Le formulaire de création de Tumblr
  • L’intitulé du bouton par refuser la nouvelle version de Vimeo est « I hate change« .

    Le message de basculement à l’ancienne version de Vimeo

Nous sommes bien d’accord que ces petits détails ne sont visibles que par une minuscule minorité d’utilisateurs, ils n’ont quasiment aucun impact sur le C.A. ou la rentabilité de ces sociétés, mais ils participent activement à construire l’identité d’une marque. C’est ce genre de petits détails qui prouvent que derrière un service en ligne, il y a des êtres humains qui ont également une sensibilité.

Personnellement j’adore, et vous ?

12 commentaires pour “Les petits détails qui font la différence”

  1. Posté par Jeremie Guilbert a dit : le

    Yes les détails sont importants ! Pas mal de bons trucs également sur ce site : http://littlebigdetails.com

  2. Posté par Anne-Sophie a dit : le

    Je suis d’accord que ces petits détails sont des enrichissements de l’interface, mais peut-on toujours parler d’ergonomie ? Je suis d’accord pour les liens « Remove » d’Amazon par exemple (qui simplifie l’interface en n’affichant le bouton que quand nécessaire) ou le bouton de commande de Coda (qui apporte un feedback sur la progression de la commande), mais selon moi, l’émoticone de Skype, le old/young de Tumblr ou le 11/10 de IMDB ne sont pas à proprement parler des améliorations de l’interface pour améliorer l’utilisation. Je me trompe peut-être dans la terminologie des mots, et je ne trouve pas forcément de termes plus adaptés, mais ces derniers exemples sont plus selon moi des détails clins d’oeils qui vont séduire l’utilisateur qu’un réel apport en ergonomie. En poussant un peu, je pourrais presque dire que ce sont plutôt des éléments de marketing pour paraître fun / proche de l’utilisateur – à l’image des tendances actuelles où l’on va tutoyer l’utilisateur, utiliser un langage moins formel…

  3. Posté par Christophe Cussigh-Denis a dit : le

    Aarron Walter aborde ce point dans son livre « Design émotionnel », dont je conseille vivement la lecture si cette thématique vous intéresse.

  4. Posté par Anne-Sophie a dit : le

    Effectivement, ça m’intéresse. Je prends bonne note, merci.

  5. Posté par Frédéric Cavazza a dit : le

    @ Anne-Sophie > Tout à fait, ces détails ne peuvent être assimilés à des améliorations ergonomiques, et surtout pas à du marketing (je t’invite à consulter la définition du marketing dans Wikipedia). Je pense ne pas me tromper en disant que ces détails participent à améliorer l’expérience de l’utilisateur et à démontrer la volonté de la marque de soigner ses utilisateurs / clients. Ni plus, ni moins.

  6. Posté par Boris Delormas a dit : le

    Super billet, merci Frédéric !

    Pour le lien « Remove » d’Amazon, je reste un peu dubitatif. Il m’arrive régulièrement sur des sites de vente en ligne de sélectionner des produits et de les supprimer par la suite (changement d’avis en cours de panier, vérification des prix de port en fonction du panier…).
    Certains diraient même que dans un panier, un produit à 0 quantité devrait être automatiquement être « Removed ».

    D’où la difficulté de l’UX !

  7. Posté par Sylvain Guéguen a dit : le

    Je suis fan de ce genre d’exemples également. C’est la marque d’une interface vraiment aboutie : ergonomique et conviviale. De l’ergonomie sans convivialité c’est s’occupé que d’une des parties de notre cerveau ;)

  8. Posté par Les articles publiés sur mes autres blogs en juin 2012 « FredCavazza.net FredCavazza.net a dit : le

    […] Les petits détails qui font la différence […]

  9. Posté par Hugo Lepetit a dit : le

    Certains détails sont mêmes destinés aux « geeks » uniquement et ne sont visibles que dans le code source des sites.
    Ici sur le site du framework CSS et JS Bootstrap de Twitter, l’introduction dans les commentaires d’un même fort populaire sur 9gag.com
    ou l’on remplace « the » par le mot fraçais « le ».

    A propos de détails également, on ne peut pas rentrer de site web au format que l’on veut quand on poste … ( les formats monsite.fr ou http://www.monsite.fr ne marchent pas )

  10. Posté par Hugo Lepetit a dit : le

    Il fallait comprendre www [point] monsite [point] fr dans mon précédent poste, ce genre d’url sont à priori transformées automatiquement.
    Le site affilié à twitter est ici : http://twitter.github.com/bootstrap

  11. Posté par Stéfan a dit : le

    Excellent le 11/10 pour Spinal Tap sur IMBD !

  12. Posté par lereferenceur a dit : le

    Oui ca peut etre sympa, mais quand on parle d’ergonomie en general ceci n’est que les finitions. L’ergonomie d’un site web, telephone, tablette, etc..ce n’est pas ca au depart. On va dire que ceci ne sont que les petits +

    Si je suis perdu sur le site Amazon, je m’en fou de leur bouton remove…