Création Site Web Algérie logo

Les microinteractions se multiplient : comment les concevoir en 2023

Les micro-interactions ne sont pas un nouveau concept dans la conception UX, mais elles deviennent de plus en plus impressionnantes. Nous parlons de micro-interactions ici à Design Shack depuis un certain temps, car elles sont essentielles au succès global des projets Web.

Les micro-interactions sont ces petits détails qui transforment une expérience utilisateur ordinaire en quelque chose de plus mémorable et engageant. Les petites choses qui surprennent et ravissent, ajoutant une belle couche UX à votre application ou site Web.

Voici un aperçu de la façon dont les concepteurs utilisent les microinteractions en 2021 avec des exemples de la façon dont cette technique de conception s’est développée.

conception pour la fonction

microinteractions en ux

Animation + explication.

Laissez cette phrase simple se répéter dans votre esprit lorsque vous commencez à réfléchir à la meilleure façon de concevoir une micro-interaction. Chacun de ces petits commits de site Web devrait faire ces choses.

L’animation est un point de plaisir qui attire les utilisateurs dans l’élément. L’explication les aide à comprendre à quoi sert le bouton, l’interrupteur ou l’icône et comment l’utiliser.

Chaque micro-interaction fournit une série d’informations sous forme de microsecondes :

  • Déclencheur : quand la microinteraction commence ou pourquoi elle commence
  • Règles : qu’est-ce qui fait que l’action/interaction fonctionne et comment cela fonctionne
  • Feedback – comment vous savez que votre action avec l’objet a réussi grâce à un signal quelconque
  • Boucles et modes : combien de temps dure l’interaction jusqu’à ce qu’elle soit réinitialisée pour un utilisateur spécifique

Allez voir l’exemple de basculement entre les modes clair/sombre ci-dessus. L’interrupteur glisse et fait exactement ce que vous attendez sans trop de tracas. Il a une animation simple qui explique exactement ce qui se passera si vous actionnez l’interrupteur. C’est une microinteraction solide en action.

Amuse-toi

microinteractions en ux

Une microinteraction devrait être amusante. Ce sont des éléments accrocheurs qui peuvent aider à guider les utilisateurs à travers la conception avec une touche de quelque chose de moderne et peut-être inattendu.

Le site d’Aurélia Durand regorge de petites interactions étonnamment sympathiques. Le pointeur est une petite main qui se déplace pour cliquer sur les zones appropriées, survoler le menu et obtenir une explosion de points colorés pour encourager l’action, les illustrations principales changent et s’animent également dans le cadre des micro-interactions dans le jeu. état de défilement .

montrer sa personnalité

microinteractions en ux

L’une des micro-interactions les plus sous-estimées avec laquelle vous entrez probablement en contact tout le temps est la barre de fonctions de réaction de Facebook. (Facebook ajoute également quelques micro-interactions astucieuses au logo mobile de temps en temps.)

Voici pourquoi celui-ci fonctionne. Lorsque vous cliquez ou appuyez et maintenez enfoncé, chaque petit emoji semble prendre vie, affichant une véritable expression émotionnelle parmi laquelle vous pouvez choisir. Cela semble plus personnel et plus authentique qu’un simple clic sur l’icône bleue classique du pouce levé.

Ces petits éléments ont également des états flottants qui vous indiquent ce que signifie chaque emoji/icône. Ces informations supplémentaires rendent la micro-interaction plus utile et donnent à tout utilisateur les outils nécessaires pour faire le bon choix lorsqu’il choisit ce qu’il pense d’une publication sur les réseaux sociaux.

Cette couche supplémentaire d’informations peut être particulièrement importante si vous ajoutez un nouvel emoji ou une nouvelle icône, comme le câlin « care » qui est devenu une partie de la barre de fonctionnalités à la mi-2020.

Une animation subtile peut être efficace

microinteractions en ux

Alors que certaines micro-interactions sont plus explosives, beaucoup sont des changements subtils qui peuvent passer presque inaperçus.

Une bonne microinteraction devrait être presque invisible. Vous ne devriez pas avoir à y penser ou à vous demander pourquoi il est là ou comment interagir avec lui. UX Magazine l’a décrit ainsi : « Assurez-vous que les micro-animations ne vous semblent pas gênantes ou ennuyeuses. Les actions courantes et mineures nécessitent une réponse modeste. Des actions occasionnelles et plus importantes nécessitent une réponse forte.

Un bon exemple de cela est la micro-interaction qui accompagne de nombreuses icônes de hamburger ou des menus contextuels.

Lucid Reality Labs a une icône à double ligne (coin supérieur droit) qui se transforme en une seule ligne, puis « X » lorsque le menu s’ouvre. Animé l’autre lorsque le « x » est cliqué pour fermer. C’est tellement simple qu’on le voit à peine.

Il y a aussi une interaction secondaire avec le cube au centre de l’écran. Vous pouvez cliquer sur l’exemple pour voir comment fonctionne cette superposition de microinteraction.

Conception en harmonie avec le contenu

microinteractions en ux

Chaque micro-interaction doit vivre en harmonie avec le contenu qui l’accompagne.

Vous ne concevez pas dans une bulle, alors ne laissez pas le facteur cool d’une idée ou de quelque chose que vous avez créé prendre le pas sur le placement et le timing avec la conception globale.

Les micro-interactions dans la chronologie Comment parler aux enfants blancs du racisme, ci-dessus, sont simples et entièrement intégrées au reste de la conception. Ils contiennent un niveau de détail qui rend le déplacement dans la version numérique de ce livre un plaisir.

Chaque micro-interaction de la chronologie comprend une icône qui correspond au contenu de la page à laquelle elle se rapporte et un titre pour le contenu. Il est agrandi à une taille permettant de jeter un coup d’œil à l’œuvre d’art et le mouvement simple est attrayant.

La mise en page est également remplie d’autres animations charmantes telles que les retournements de page (simples et flip) qui font de cette mise en page entière quelque chose dans laquelle vous voudrez plonger.

Utiliser des éléments tactiles

microinteractions en ux

Pensez à la façon dont certains des outils que vous utilisez chaque jour agissent lorsque vous interagissez avec eux.

  • L’haptique de votre Apple Watch lorsque vous touchez un bouton
  • Le doux ping d’une notification sur votre téléphone
  • Points d’écoute lorsque vous parlez à Siri ou à un autre appareil
  • Le doux bourdonnement pour marquer chaque kilomètre pendant votre marche ou votre course
  • La tonalité lorsque vos écouteurs se connectent au Bluetooth

Tous ces éléments qui fusionnent numérique et réalité font partie d’une plus grande expérience tactile qui unit les espaces. Les micro-interactions sont un excellent moyen de le faire.

Vous pouvez utiliser:

  • Sentir
  • Rêve
  • Progrès
  • Rebond
  • pouls ou bourdonnement

Il y a tellement de façons d’y parvenir. La chose commune est qu’ils ont l’air et se sentent réels. Ils font moins partie de l’écran que de votre monde physique (ou du moins prétendent l’être).

conclusion

Les micro-interactions ont commencé à prendre de l’ampleur vers 2013 lorsque Dan Saffer a écrit pour la première fois à leur sujet dans son livre. Les quatre composants que vous avez décrits ensuite sont toujours un élément clé de ces petites interactions de site Web : activation, règle, rétroaction, boucles et modes.

Vous pouvez voir ces éléments communs dans presque toutes les microinteractions si vous regardez attentivement.

Nous aimerions également voir plus d’exemples de microinteractions ordonnées. S’il vous plaît partagez-les avec nous et assurez-vous de me taguer, ainsi que Design Shack, sur Twitter.

Laisser un commentaire

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