Sur un site web, les micro-interactions sont déclenchées à la suite d’une action réalisée par l’internaute.

Les objectifs sont multiples, mais de manière générale elles participent à l’amélioration de l’expérience utilisateur et apportent un brin de créativité.

Aujourd’hui, je vous aie préparé un petit condensé de micro-interactions surprenantes et très bien utilisées.

California Academy of Sciences et son questionnaire interactif

Utiliser les micro-interactions dans un questionnaire, c’est LA bonne idée pour pousser les utilisateurs à répondre à toutes les questions.

N’hésitez pas à varier vos questions et les façons d’y répondre.

Le contenu interactif est plus que tendance !

Visiter le questionnaire de California Academy of Sciences

Un coming soon décalé

Pour faire patienter vos visiteurs rien de mieux qu’un petit jeux.

Ici, attrapez l’élément de votre choix et repoussez les objets alentours. Certes il n’y a pas vraiment d’utilité dans cette micro-interaction, mais je suis certaine qu’elle vous a distraite quelques secondes 😉

Visiter la page Coming Soon

Femme et Fierce : une explosion de bisous

Comment rendre une session de shopping sur internet encore plus interactive ? Ce site e-commerce propose une navigation originale et pleine de surprises lorsque vous passez votre souris sur les différents produits.

Des bisous, des sucettes, des rouges à lèvres ou encore un joli regard : faites le plein de douceur !

Visiter le site de Femme et Fierce

Les micro-interactions musicales de Synesthesia

Qui a dit que les micro-interaction devaient rester silencieuses ? Il est possible d’ajouter du son à votre site web suite à une action de l’utilisateur.

C’est une bonne alternative à la bande sonore continue : si l’internaute ne veut pas de son, il ne réalise tout simplement pas l’action qui le déclenche.

Visiter le site de Synesthesia

Une fermeture de page revisitée chez North2

Faire preuve de créativité est une chose, mais toucher au design d’éléments standards n’est pas toujours conseillé. Le bouton pour fermer une page ou une pop-up par exemple ne devrait jamais être modifié, au risque de dégrader considérablement l’expérience utilisateur.

L’agence North2 a toutefois réussi le pari d’ajouter sa touche de créativité sans pour autant nuire à la compréhension de ce bouton.

Visiter le site de North2

Plastic et son curseur aimanté

Sur le site de cette agence digitale la micro-interaction se trouve sur votre curseur.

L’effet est intéressant : lorsque vous vous rapprochez des éléments de navigation aux quatre coins de votre écran, votre curseur semble aimanté, voire coller. Cette animation est quelque peu incitative, car n’arrivant pas à vous sortir de la zone vous êtes tenté de cliquer.

Visiter le site de Plastic

Le jeu de cartes de The Cool Club

Les micro-interactions peuvent aider à la découverte du produit. Sur ce site e-commerce, vous pouvez sortir des cartes du paquet pour voir à quoi elles ressemblent.

En fait cela est malin car l’utilisateur ne risque pas de se tromper lors de son achat : il sait exactement à quoi ressemble le contenu du paquet. Dommage toutefois que cette micro-interaction ne soit pas disponible pour tous les jeux proposés.

Visiter le site de The Cool Club

Quand les illustrations prennent vie sur Genesis

Il existe une multitude de façons pour ajouter du mouvement à des illustrations, mais la micro-interaction est sans doute la plus efficace.

Lorsque vous scrollez, c’est toute une histoire qui prend vie autour du contenu. Un storytelling original et captivant qui vous pousse à descendre jusqu’au bas de la page.

Visiter le site Genesis

Les petits coeurs du Café Noir

Voilà une autre micro-interaction inspirante pour votre site e-commerce : remerciez votre utilisateur en lui envoyant des coeurs lorsqu’il ajoute un produit dans son panier.

Ce genre d’animation est idéale pour renvoyer une image positive de votre marque et développer une bonne relation avec vos clients.

Visiter le site du Café Noir

La surprise de Jonny

Terminons notre petite sélection (et oui déjà…) par le portfolio de Jonny. Ici je ne vous dévoile pas la micro-interaction, je vous laisse la découvrir par vous-même.

Un petit indice pour vous aider : il suffit d’un clic… 🙂

Visiter le portfolio de Jonny