Close

Où nous trouver

Téléphone 01 40 28 24 40
Adresse 23 Bd Poissonnière, 75002 Paris
  • Twitter
  • Facebook
  • Pinterest
  • Linked In
Recevoir notre newsletter mensuelle

Nous vous écoutons

*Les champs marqués d’un astérisque sont obligatoires.
*Votre nom :
Votre entreprise :
*Votre email :
Votre n° de tel :
*Objet :
Commentaire :

Annuler

Contact

Microinteractions : pourquoi toute l’excellence d’un produit réside dans le détail

design émotionnel/ microinteraction/

Le bilan de l'année 2013 et la vision de l'année 2014

micro-interactions microinteractions

Aloun, directeur artistique chez Axance, fait le compte-rendu de l’ouvrage Microinteractions.

C’est dans le détail – tout autant que dans la qualité du service client – qu’on reconnaît un design de service haute-couture. A ce sujet, Microinteractions de Dan Saffer est un livre-clé du design d’interface qui offre une vision jusqu’auboutiste de la conception où le détail est roi.

microinteraction UX

“Details are not details, they make the product”. La citation du designer Charles Eames est le point d’entrée du discours de Dan Saffer, designer d’interaction et auteur de quatre livres sur le design, Microinteractions étant son dernier en date.

 

Qu’est-ce qu’une microinteraction ?

Voici quelques exemples concrets et célèbres de cette attention portée au détail :

– l’auto-complete de la barre de recherche Google nous suggère automatiquement des mots en fonction des premières lettres.

– Lorsque je clique dans un champ de mail, le clavier s’adapte (il me propose un @)

– Lorsque j’entre mon mot de passe dans dropbox, il m’indique la force de mon mot de passe

tumblr_ms6qbmOGyB1qea4hso1_500

– Chrome me propose “paste and go” quand je colle une adresse dans l’url puisque de toutes façons je vais probablement faire entrée par la suite.

tumblr_np4aa8ST9s1qea4hso1_540

“Une petite fonctionnalité qui ne fait qu’une seule chose”, voilà qui résume simplement le concept de microinteraction. Selon Saffer, ce sont bien ces détails, en apparence anodins, qui font toute la différence entre un bon produit et un produit excellent qui offre une expérience de qualité à son utilisateur :

 

Une petite vibration m’indique que mon téléphone a bien été verrouillé.

 

Je scrolle pour rafraîchir ma page, un petit loader apparaît.

 

 

Ce type d’interactions apparaît de plus en plus sur nos interfaces, au point qu’un tumblr, Little Big Details, se consacre au sujet et s’amuse à en référencer toutes les solutions ingénieuses qui ont pu être trouvées.

 

Un manuel de microinteractions aussi bien pratique que théorique

L’auteur détaille sa démarche de conception. La première étape c’est le trigger (“gâchette”), car c’est toujours l’utilisateur qui les déclenche. Le designer doit donc acquérir une compréhension profonde du parcours de son utilisateur et de ses actions. Il doit trouver le moment où il peut faciliter encore davantage le parcours. Elles sont au service de l’interaction, en veillant à faciliter l’utilisation du service et en le rendant agréable. Elles ne sont là que pour fluidifier son utilisation. Cette recherche du naturel et de l’invisibilité du détail est capitale, la barre de scroll qui suit le déplacement de l’utilisateur pour l’aider à se situer dans la page en est le meilleur exemple. Les microinteractions doivent cependant rester discrètes et servir le contenu sans cannibaliser l’attention :

Ce que vous recherchez à tout prix, c’est une impression de naturel, qui coule comme une évidence.

 

Dan Saffer résume en une infographie la méthode pour concevoir des microinteractions efficaces. La règle est toujours la même en ce qui concerne le design de service : tester, tester, tester.

Dan Saffer résume en une infographie comment concevoir des microinteractions efficaces. La règle est toujours la même pour le design de service : tester, tester, tester.

 

Le designer, un artisan minutieux

L’auteur considère la microinteraction comme l’illustration d’une philosophie : celle du travail bien fait, de l’attention portée aux détails, de l’observation de l’utilisateur, de l’inventivité.

Les microinteractions répondent à des problèmes de design, rencontrés quotidiennement par le concepteur de services, et demandent aussi bien de l’ingéniosité que de la créativité pour réussir à les rendre « invisibles » à l’utilisateur.

 

Ce niveau d’exigence en matière de conception ne se restreint pas au seul design d’interface. Le parallèle avec le milieu de la couture est intéressant. Dans ce domaine aussi, ce qui différencie un costume de qualité d’un costume quelconque, ce sont des détails invisibles : la matière du revers, la distance entre chaque point de couture, le léger chevauchement des boutons sur la manchette, l’angle du pantalon sur la chaussure…

micro interaction costume

Une utilisation subtile du design émotionnel

Ces détails sont cependant souvent vus comme un luxe et donc négligeables. Pourtant, une interface travaillée jusque dans ses moindres détails, ou qui possède des animations élégantes donnera toujours à l’utilisateur une sensation de sophistication. De ce sentiment de perfection apporté à l’interface, l’utilisateur ressent aussi une émotion insconciente de sécurité.

Les surprises induites par ces micro-interactions créent aussi chez l’utilisateur une sensation de découverte et d’amusement, bref un plaisir d’utilisation certain. L’interface devient alors un objet ludique et exploratoire. Ce soin perfectionniste, comme par exemple Zappos l’applique avec ses services après-vente, est un facteur différenciant pour les marques.

 

Au-delà du manuel clair et rapide à lire (150 pages), le livre de Dan Saffer apporte une réelle réflexion sur la qualité de conception attendue d’un designer. Même s’il n’échappe pas à l’aspect “catalogue”, l’auteur arrive à dégager une série de grandes règles pour améliorer son produit. Il reste donc une référence essentielle pour tous les concepteurs et serait même instructif pour grand nombre d’artisans.

>> Les origines de célèbres microinteractions (ENG)

Creuser le sujet

Une question ? Venez nous rencontrer !

Axance

23 Boulevard Poissonnière
75002 Paris
+33 1 40 28 24 40
contact@axance.fr

Equipe commerciale commercial@axance.fr

Envie d’ajouter votre talent à notre équipe ?

Rejoignez notre panel pour participer à des tests utilisateur

Mentions légales