Le monde de l’UX / UI est peut-être un aspect plus passionnant du développement logiciel car il implique des stratégies axées sur le client et offre de nombreuses opportunités aux concepteurs et aux développeurs d’utiliser leur côté créatif, ce qui pour certains est une pause bienvenue dans le codage constant et le resserrement des nombres. .
Les micro-interactions sont l’un de ces phénomènes intéressants. Dans cet article, nous couvrirons la signification, les avantages, les meilleures pratiques, des exemples et des conseils sur la création de micro-interactions utilisables en webdesign pour offrir une expérience utilisateur agréable.
Que sont les micro-interactions ?
Ce sont les interactions entre l’utilisateur et le site Web / l’application pour accomplir une tâche spécifique ou pour évoquer un engagement client particulier. Ce sont les actions quotidiennes que les utilisateurs effectuent sur un site Web ou une application. Voici quelques exemples courants:
- Connectez-vous / Inscrivez-vous pop-ups
- Like, boutons cœurs (y compris les émoticônes)
- Swipe vers la gauche ou la droite
- Mini barres de défilement
- Barres de progression
- Pour voir quelqu’un en train de taper…
- Doodles animés
- Compteurs de vitesse
- Pousser et tirer les boutons verticalement
- Partages sociaux
- Conceptions de chargement de page créatives
- Effets de tapotement
- Faites défiler pour une vue plus grande
- Téléchargement / actualisation des icônes
- L’erreur retentit
- Options de remplissage automatique
Et ce ne sont que quelques-uns parmi des centaines de types de micro-interactions.
Quel est le but de développer des micro-interactions ?
- Aider les utilisateurs à naviguer dans l’application ou à saisir leurs informations
- Offrez-leur une expérience positive et rafraîchissante
- Offrez-leur un moyen de fournir des commentaires
- Facilitez leur voyage vers l’appel à l’action
- Offrez de la fluidité et des fonctionnalités intuitives pour maintenir un flux d’événements simple
- Pour les ravir et renforcer la confiance dans le produit numérique
- Pour réaliser une action ciblée souhaitée par l’utilisateur
- Pour informer l’utilisateur de l’état exact de son action / action de l’application
- Ils donnent des conseils et dirigent l’attention de l’utilisateur
Voici notre guide étape par étape pour créer des micro-interactions engageantes et utiles.
Il y a quatre composants aux micro-interactions:
Déclencheur
Il s’agit d’un événement manuel (initié par l’utilisateur) ou généré par le système (initié par le système) qui démarre la micro-interaction. Par exemple, lorsqu’un utilisateur clique sur un bouton, une invite ou lorsque le système démarre automatiquement une micro-interaction lorsque certains critères pour lancer une action sont remplis.
Les règles
Les déclencheurs engagent les règles. Les règles déterminent ce qui se passe une fois qu’un déclencheur est généré. Par exemple, «à quelle page / action aller ensuite?», «Que faut-il faire et qu’est-ce qui devrait être restreint?», «Quelle devrait être la séquence des deux prochaines actions?», Et d’autres décisions.
Retour
La rétroaction se produit lorsque l’utilisateur est informé par le système de ce qui se passe (par le biais du son, des images ou du texte) afin que l’utilisateur puisse attendre que les résultats soient produits ou essayer une action différente.
Boucles / Modes
Cela fait référence aux méta-règles des micro-interactions, comme dans ce qu’il faut faire lorsque les conditions changent parmi les options et où l’interaction doit être dirigée en cas de variables. Il décide de la durée de l’interaction et si elle se répète ou si elle change au fil du temps et quelle alerte donner à l’utilisateur dans ce contexte spécifique.
Comment concevoir les meilleures micro-interactions ?
Pour créer des micro-interactions engageantes en UX design, les développeurs web doivent suivre les principaux principes / pratiques qui laissent l’utilisateur satisfait et réussi dans l’action qu’il souhaite accomplir. Utilisez les conseils ci-dessous.
- Définir le but de chaque micro-interaction
Tout d’abord, vous devez être clair sur la raison pour laquelle vous concevez une micro-interaction particulière et quelle est la pertinence pour l’utilisateur et l’application. Il n’est pas nécessaire de passer à une nouvelle tendance simplement parce qu’elle est populaire, mais peut-être distrayante ou inutile pour votre projet particulier. Demandez-vous: «Pourquoi un utilisateur s’engagerait-il dans une micro-interaction spécifique et est-ce que cela aide l’utilisateur ?
- Rester simple
« Less is more... » Il ne devrait pas y avoir de micro-interactions inutiles qui pourraient distraire l’utilisateur et détourner son attention dans le mauvais sens. Ils ne doivent pas se sentir épuisés ou maltraités lorsqu’ils utilisent votre application / site Web. Il ne s’agit pas de vous le développeur, il s’agit d’eux les l’utilisateurs.
- Analyser et améliorer
Effectuez des tests sur vos micro-interactions pour avoir une idée de ce qui fonctionne et de ce qui ne fonctionne pas. Vous pouvez obtenir les premiers commentaires de votre MVP ou en obtenant des contributions au sein de l’équipe dans un premier temps.
Différents paramètres pour mesurer la convivialité de vos micro-interactions peuvent être les suivants :
- Le nombre d’utilisateurs qui réalisent l’intégralité de la micro-interaction
- Le temps qu’il faut pour terminer chaque interaction
- Les points auxquels les utilisateurs abandonnent les micro-interactions
- Les raisons pour lesquelles ils ne s’engagent dans aucune micro-interaction
- Combien d’erreurs se produisent à différents stades des micro-interactions
- Le nombre d’étapes (le plus petit, le mieux)
- Si le langage des micro-interactions est compréhensible pour les utilisateurs
- Les premières et dernières impressions de l’utilisateur sur les micro-interactions
- Si cela les a aidés à atteindre leurs objectifs dans le laps de temps prévu
- Une combinaison de données qualitatives et quantitatives peut aider les développeurs à recueillir des informations vitales sur les domaines où ils doivent améliorer la convivialité et comment.
- Concevez-les pour qu’elles s’intègrent
Les micro-interactions doivent être conçues de manière à se démarquer légèrement pour que l’utilisateur les remarque, mais qu’elles soient esthétiquement alignées sur l’apparence et le flux globaux du site Web ou de l’application. Ils ne doivent pas être trop bruyants ou gênants pour la vue. Ils doivent également rester constants dans leur conception, c’est-à-dire qu’ils ne doivent pas être très différents les uns des autres à moins que le but ne leur impose d’être conçus comme tels.
- Ne confondez pas les animations avec les micro-interactions
Les micro-interactions ne sont utilisées que pour des actions spécifiques / ciblées, tandis que les animations peuvent être utilisées ailleurs dans n’importe quelle autre partie de l’application / du site Web à des fins de conception esthétique ou visuelle.
Cela dit, vous pouvez toujours inclure peu d’effet de mouvement ou de transition dans vos micro-interactions tant qu’ils ne distraient pas l’utilisateur. Quelques exemples sont une micro barre de progression animée, des icônes de chargement comme un sablier, des mascottes animées, etc., qui permettent à l’utilisateur de connaître l’état de sa demande.
Gardez la taille de vos micro-interactions responsive en fonction des différentes tailles d’écran sur lesquelles votre application fonctionnera, telles que différentes tailles d’écran mobiles, ordinateurs de bureau et tablettes ou appareils pliables / portables. Les utilisateurs sur une taille d’écran plus petite ne devraient pas avoir à plisser les yeux pour pouvoir visualiser les micro-interactions.
Contrôle utilisateur
En fin de compte, l’utilisateur doit avoir le contrôle sur la façon dont il souhaite interagir avec votre site Web ou votre application. Si vous forcez une micro-interaction quand tout ce qu’ils souhaiterons faire est d’extraire des informations spécifiques ou simplement de naviguer, elles vont être désactivées par les utilisateurs.
A voir aussi dans la même thématique :
Dans le même temps, les micro-interactions doivent être suffisamment intuitives pour suggérer différentes options ou les pousser dans la bonne direction lorsque l’utilisateur est sur le point de faire une erreur, de saisir des informations erronées dans le mauvais onglet ou de sauter quelque chose de nécessaire. Si votre micro-interaction est plus grande en taille et en étapes, restez simple et directe afin que les utilisateurs ne quittent pas à mi-chemin.
Utilisez du texte pour souligner l’importance d’une micro-interaction, cependant, gardez-la concise et factuelle, pas prêcheuse ou arrogante.
Alignement de la marque
Chaque micro-interaction doit être cohérente avec les couleurs, l’image, la langue et la tonalité de la marque afin qu’elles ne semblent pas avoir été empruntées ailleurs.
Surtout, amusez-vous à créer des micro-interactions et créez-les du point de vue de l’utilisateur. Si l’utilisateur trouve votre micro-interaction digne d’engagement, elle est considérée comme un succès.
