Comment concevoir des microinteractions en une touche
Les microinteractions sont la «sauce secrète» qui fait briller les applications et les sites Web pour les utilisateurs. Ces petits détails permettent de régler facilement une alarme, d'appuyer sur un bouton ou simplement de mieux comprendre comment travailler avec un produit numérique.
Le secret est que les meilleures micro-interactions sont des éléments auxquels l'utilisateur ne pense probablement même pas. Ils se produisent en un instant - souvent en un seul clic sur un écran mobile. Malgré la petite nature de l'interaction, donc «micro», la valeur est immense pour les utilisateurs à mesure que ces engagements s'intègrent davantage à l'activité quotidienne.
Comment concevez-vous des micro-interactions en un clic qui raviront les utilisateurs? Voici quelques idées.
Explorez Envato Elements
Animer un bouton
Vous souvenez-vous de la première fois que vous avez remarqué Facebook comme dans Messenger? Vous avez tapé sur l'icône «pouce en l'air» et elle s'est développée dans la boîte à la personne avec laquelle vous discutiez. Cela vous a-t-il fait sourire? Est-ce que ce petit mouvement vous a fait un peu plaisir?
Une animation simple, avant le tapotement pour l'encourager ou après le tapotement pour montrer que la microinteraction fonctionne est un moyen infaillible de créer quelque chose que les utilisateurs veulent tapoter. De petites animations fournissent des informations sur ce qui se passe afin que les utilisateurs se sentent à l'aise et confiants quant à leur rôle dans la boucle de rétroaction.
Ne le fais pas
L'animation doit être aussi simple que la micro-interaction elle-même. Gardez des mouvements simples et fluides et rapides pour démarrer et terminer. L'ajout d'une note sur IMDb suit ce principe; survolez la note et voyez rapidement le nombre d'étoiles à ajouter lorsque vous vous déplacez sur chacune. Appuyez pour cliquer pour terminer et confirmer l'action.
Fournir des options
C'est une leçon d'UX qui remonte aux lettres d'amour de l'école primaire et de la maternelle. M'aimez-vous? Cochez oui ou non.
De grandes micro-interactions peuvent être conçues en utilisant ce même concept. Donnez aux utilisateurs deux choix rapides. Appuyez pour lancer (ou arrêter) une action; appuyez pour basculer. Les utilisateurs veulent faire des choix et se sentir en contrôle des expériences numériques, mais ils ne veulent pas s'embourber avec plusieurs écrans pour y arriver.
Créer une action immédiate
La meilleure façon de garantir que les utilisateurs interagissent avec votre micro-interaction? Le résultat doit être immédiat. Le résultat souhaité doit:
- Arrive avec un seul robinet
- Fournissez l'action souhaitée en 0, 1 seconde
L'immédiateté des micro-interactions est essentielle à leur succès. Étant donné que la nature de ces éléments est petite, tout retard dans l'action gênera les utilisateurs. (Imaginez à quel point ce serait frustrant s'il fallait trois coups pour désactiver une alarme ou s'il y avait un délai de 2 secondes pour couper la sonnerie d'un appel pendant une réunion.)
Le basculement rapide entre un semblable (ou différent) ou un suivi sur Instagram est un exemple parfait. C'est à quelle vitesse devrait être votre micro-interaction.
Conception pour la répétition
L'une des choses qui différencie la micro-interaction de certains autres éléments interactifs de votre interface utilisateur est qu'ils seront utilisés à maintes reprises. Les microinteractions ne sont généralement pas conçues pour une utilisation unique. (Combien de fois avez-vous appuyé sur le bouton en forme de cœur d'Instagram au cours de la dernière heure?)
Concevez cette action répétitive, mais l'action ne devrait pas ressembler à un mouvement répétitif. Bien que cela puisse sembler beaucoup à prendre, cela se résume à la nature intuitive du robinet. Est-ce évident et naturel? Si un utilisateur n'a pas à penser à une action, il ne la trouvera jamais répétitive à exécuter.
L'utilisation de modèles utilisateur, d'animations et de styles d'icônes généralement acceptés vous aidera à concevoir vos micro-interactions. Ne réinventez pas la roue ici; permettent aux utilisateurs de terminer facilement les tâches en un seul clic, et sans avoir à se gratter la tête sur la façon de le faire.
Rendez-le lisible et fiable
Voici l'étape qui est trop souvent oubliée - les instructions à l'intérieur des micro-interactions doivent être lisibles et relatables.
Lisible fait référence à tout texte ou instruction en ce qui concerne la micro-interaction. Les mots doivent être faciles à voir et à numériser. Du point de vue de la conception, il est essentiel de sélectionner une bonne police et de s'assurer qu'il y a suffisamment d'espace autour des mots et beaucoup de contraste entre les lettres et l'arrière-plan. Éloignez-vous des polices condensées, fines ou de nouveauté qui ne sont pas faciles à lire en un coup d'œil.
Relatif fait référence à un texte qui se lit de la même manière que les gens parlent. Un langage peu courant ou une formulation maladroite doivent être évités. Les instructions à l'intérieur des champs de formulaire qui disparaissent au fur et à mesure qu'un utilisateur commence à taper est un excellent exemple. Cela est particulièrement vrai lorsque le libellé utilise un ton ou une voix que l'utilisateur attend de la marque ou du site Web avec lequel il interagit.
Focus sur les détails
Une micro-interaction est l'un des nombreux détails de conception qui composeront votre interface. Vous devez faire particulièrement attention à chacun d'eux.
Les micro-interactions devraient faire partie de la conception globale. Mais vous devez également penser à ces minuscules actions d'une autre manière. Des choix de couleurs à la taille des éléments avec lesquels un utilisateur doit interagir, ces détails encourageront l'action ou inciteront les utilisateurs à abandonner le design pour autre chose.
Comme vous le feriez avec tout autre élément de conception, créez un ensemble de règles de style et de conception pour les micro-interactions dans une application ou un site Web afin que les actions soient cohérentes tout au long de la conception et faciles à trouver et à interagir avec les utilisateurs. Plus l'élément - ou l'interaction - est petit, plus les détails deviennent importants.
Rester simple
Le dire un million de fois ne suffit pas - restez simple. Il existe tout simplement trop de modèles trop difficiles à utiliser. Vous pourriez penser que c'est cool, mais pas les utilisateurs. Ils aiment la prévisibilité, la cohérence et la simplicité.
Plus il est facile d'interagir avec quelque chose, plus les utilisateurs sont susceptibles d'appuyer sur un bouton. C'est pourquoi les actions en un clic sont si importantes. Comment savez-vous si votre conception est assez simple? Il a besoin d'une structure définie avec une boucle de rétroaction pour les actions, des instructions et des visuels simples, et un message qui est communiqué clairement et est facile à comprendre.
N'arrêtez pas de développer
La conception de micro-interactions est un processus évolutif. Parce que c'est un nouveau concept, il change tout le temps. Il existe de nouvelles idées et de nouvelles façons de créer quelque chose que les utilisateurs souhaitent exploiter.
Rester sur la bonne voie avec l'évolution des micro-interactions remonte aux bases que Dan Saffer a d'abord définies. (Il a également écrit l'un des livres les plus fiables sur le sujet, «Microinteractions: concevoir avec des détails».) Les microinteractions incluent un processus en quatre étapes commençant par une action de déclenchement, des règles pour le fonctionnement de l'interaction, une boucle de rétroaction pour que l'utilisateur sache quelque chose s'est produit et des boucles et des modes qui dictent comment les futures interactions fonctionneront ou ce qui vient ensuite. Gardez cela à l'esprit et vous serez sur la voie du succès de la micro-interaction.
Conclusion
Il y a beaucoup de pièces pour concevoir quelque chose d'aussi petit. Donc, ne pensez pas que vous pouvez créer une micro-interaction en cinq minutes et continuer. La conception d'une micro-interaction nécessite une attention et une planification particulières.
N'oubliez pas que les meilleures micro-interactions fonctionnent généralement avec un seul robinet et sont des éléments avec lesquels les utilisateurs ne pensent même pas à s'engager, bien qu'ils le fassent régulièrement.
