BLOG X2i

L'actualité Magento et e-commerce vue par X2i

Usage des micro-interactions en e-commerce

9 juin 2016 - Publié par Pierre - UX / Expérience utilisateur

Micro-interactions e-commerce UX
Micro-interactions, transitions, animations : autant de termes pour désigner des comportements front-office pas mal utilisés depuis quelques temps. Voyons dans quelle mesure ces « little big details » peuvent apporter de la valeur à l’expérience client et optimiser le parcours utilisateur en e-commerce.




Vraie tendance UX/UI du moment, notamment poussée par l’expérience proposée sur des applications mobiles, les micro-interactions ne datent pourtant pas d’hier. Luc Wrobleswki (Product Director chez Google et Expert UX) évoquait par exemple le sujet en Mai 2013 suite à la conférence UX Lisbonne. Nous pouvons aussi nous remémorer ces interfaces Web en Flash, il y a quelques années, où les interactions et transitions étaient déjà bien présentes.

Aujourd’hui, les micro-interactions sont un volet de la démarche centrée-utilisateur et l’un des 3 principes de l’approche « Material Design » prônée par Google.

Micro-interaction e-commerce material design

Mais qu’est-ce qu’une micro-interaction ? Très simplement, il s’agit d’un élément autonome ou d’une partie intégrante d’une page, qui accomplit une seule et unique tâche. Un exemple ? Le clic « J’aime » sur une activité Facebook de votre Timeline qui produit un « pouce en l’air » qui rebondit et se colore en bleu.

Il s’agit de petits détails qui apportent un vrai plus au niveau de l’interface (on parle ainsi de « little big details ») et de l’expérience utilisateur.

Quels avantages pour l’utilisateur final et l’e-commerçant ?

  • Améliorer l’expérience utilisateur
  • Diminuer l’attente perçue lors du chargement d’éléments
  • Développer la perception globale de l’utilisateur vis-à-vis du site e-commerce, et donc jouer sur ses probabilités d’achat (taux de conversion)

En e-commerce, l’efficacité d’une interface est primordiale d’un point de vue conversion et référencement : il convient donc d’injecter des micro-interactions de manière intelligente et modérée, sans pénaliser le parcours client, les performances et les temps de chargement.

Des micro-interactions pour quels devices ?

Les micro-interactions se sont surtout développées sur les mobiles et tablettes, au travers des apps. Ces devices n’intègrent pas de roll-over mais la taille de l’écran impose justement de travailler sur des fonctionnalités front malines, puis la fonctionnalité de « touch » dope et facilite leur usage. On pense naturellement à l’ouverture d’un menu « burger » sur mobile par exemple.

Mais le desktop n’est pas en reste puisqu’il propose une marge de manœuvre sans doute plus importante : taille d’écran et roll-over en plus, mais fonctionnalités « touch » en moins.

Fournir un feedback direct

Premier usage des micro-interactions : le fait de fournir une information directe à l’utilisateur en fonction d’une action qu’il doit ou vient de réaliser :

  • Aide à la saisie d’un formulaire avec un picto qui va passer du rouge au vert dès que le formatage du champ est validé
  • Effet au clic sur un bouton (voir ces différents exemples)
  • Prise en compte d’un chargement au clic sur un bouton (voir ces différents exemples)
  • Suppression d’un produit au sein de la wishlist ou du panier :
Micro-intéractions - Sélectionner un produit - Barthelemy Chalvet

Sélectionner un produit par Barthelemy Chalvet

 

  • Changement de la couleur d’un article au sein de la fiche produit :
Micro-intéractions Changement de couleur d'un article par Christophe Kerebel

Changement de couleur d’un article par Christophe Kerebel

 

  • Ajout au panier :
Micro-intéractions : Ajout au panier - Virgil Pana

Ajout au panier – Virgil Pana

 

  • Aide à la saisie des infos CB au sein du tunnel de commande :
Micro-intéractions : Aide au paiement par Ramakrishna V

Aide au paiement par Ramakrishna V

 

  • Suivi des commandes et des livraisons au sein du compte client :
    Micro-interactions : Suivi des commandes par Ramotion

    Suivi des commandes par Ramotion

     

    Gérer des transitions entre les éléments

    Seconde application des micro-interactions : le fait de proposer des transitions entre des éléments de forme ou de nature différente, au sein d’un même environnement à savoir le site e-commerce. L’idée est d’atténuer voire de gommer totalement la rupture qu’il peut y avoir au sein d’un processus ou d’un chargement. L’expérience devient ainsi continue par le mouvement, la réorganisation ou la transformation des objets. Quelques exemples et illustrations ci-dessous :

  • Affichage d’images au chargement de la page (exemple avec le site V33, une réalisation Magento X2i)
  • Changement du mode d’affichage au sein d’un listing produits : les vignettes produits se ré-agencent de manière fluide et rapide
  • Chargement progressif de produits au sein de la page d’accueil ou d’un listing :
Micro-interactions : Chargement progressif par Virgil Pana

Chargement progressif par Virgil Pana

 

  • Affichage d’un menu ou d’un champ de recherche en accordéon :
    Micro-interactions : Champ de recherche en accordéon par Sebastiano Guerriero

    Champ de recherche en accordéon par Sebastiano Guerriero

     

  • Consultation et composition de looks :
Micro-interactions : Composition de looks par Fantasy Interactive

Composition de looks par Fantasy Interactive

 

Développer le design émotionnel

Dernier cas d’usage des micro-interactions, et peut-être celui qui nécessite le plus de travail niveau graphisme : le fait de développer la notion de design émotionnel. Sur un site e-commerce, le pari est d’essayer de rivaliser avec cette fameuse boutique physique dans laquelle on se sent bien (et qui donne forcément envie d’acheter) : une marque de baskets personnalisables qui me propose de toucher et de voir les matières avant de faire mon choix, une boulangerie avec une belle vitrine et des viennoiseries qui sentent bon dès l’entrée dans le magasin, etc.

L’idée est de créer un produit ou un site qui donne envie, sur lequel l’utilisateur se sente bien pour diverses raisons (bien-être, estime de soi, fun, etc.), et sur lequel il ait envie de revenir.

En e-commerce, l’utilisation de visuels, illustrations et de micro-interactions doit permettre de développer l’expérience client, et d’appuyer sur ce fameux critère d’émotion. Un parfait exemple ci-dessous avec une confirmation de commande et le lien avec la livraison :

Micro-interactions : Confirmation de commande par Saptarshi Prakash

Confirmation de commande par Saptarshi Prakash

 

Les règles à respecter

Comme évoqué en introduction, il est important que les micro-interactions n’engendrent pas de soucis de performances d’une part, mais aussi de soucis fonctionnels d’autre part. Pour cela, plusieurs règles à respecter lors de l’intégration front:
  • Utilisation d’une micro-interaction uniquement en réponse à un besoin fonctionnel tangible. Et attention à la sur-utilisation de comportements, qui nuit au final à l’expérience utilisateur
  • Réactivité de la micro-interaction (0.1 seconde)
  • Limitation de la durée d’une micro-interaction
  • Rendu en cohérence avec le besoin fonctionnel : on parle ici de continuité visuelle entre deux objets
  • Attention à la répétition d’une micro-interaction : « de l’habitude naît l’ennui », donc veillez à ce que l’animation ne devienne pas ennuyante au bout du 20ème affichage

Si vous souhaitez d’autres conseils webdesign pour améliorer l’expérience utilisateur et l’ergonomie de votre site e-commerce, n’hésitez pas à aller consulter nos autres articles UX / UI. Nos experts UX / e-marketing vous font part des bons usages pour optimiser interface utilisateur et parcours client afin d’augmenter votre taux de conversion.

A lire aussi

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Actualité

NEWSLETTER X2i

Recevez en exclusivité notre actualité par e-mail :
conseils, nouveautés Magento, événements e-commerce, livres blancs...