Comment concevoir des microinteractions à un robinet

Les microinteractions sont la "sauce secrète". qui font briller les applications et les sites Web pour les utilisateurs. Ces petits détails facilitent le réglage d’une alarme, l’appui sur un bouton ou une meilleure compréhension du fonctionnement d’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 avec un seul appui sur un écran de mobile. Malgré la petite nature de l'interaction, d'où? Micro ,? la valeur est immense pour les utilisateurs à mesure que ces engagements s'intègrent davantage à l'activité quotidienne.

Comment concevez-vous des microinteractions en un clic qui raviront les utilisateurs? Voici quelques idées.

Animer un bouton

Vous souvenez-vous de la première fois où vous avez remarqué Facebook comme dans Messenger? Vous avez tapé le? Pouce levé? l'icône et il a grandi dans la boîte à la personne avec qui vous discutiez. Cela vous a-t-il fait sourire? Est-ce que ce petit mouvement vous a donné un peu de plaisir?

Une simple animation, avant que vous appuyiez dessus pour l'encourager ou après que vous effleuriez l'écran pour montrer que la microinteraction fonctionne, est un moyen infaillible de créer quelque chose que les utilisateurs veulent toucher. De petites animations fournissent des informations sur ce qui se passe afin que les utilisateurs se sentent à l'aise et confiants quant à leurs rôles dans la boucle de rétroaction.
Ne pas
L'animation doit être aussi simple que la microinteraction elle-même. Gardez les mouvements simples et fluides et rapides pour commencer et terminer. Ajouter une note sur IMDb suit ce principe. survolez la note et voyez rapidement le nombre d'étoiles à ajouter à chaque déplacement. Tapez pour cliquer pour terminer et confirmer l'action.

Fournir des options

C'est une leçon sur l'expérience utilisateur qui remonte à l'école primaire et aux lettres d'amour de la maternelle. M'aimez-vous? Cochez oui ou non.

On peut concevoir d'excellentes microinteractions en utilisant ce même concept. Donnez aux utilisateurs deux choix rapides. Appuyez sur pour lancer (ou arrêter) une action; appuyez sur pour basculer. Les utilisateurs veulent faire des choix et maîtriser les 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 vous assurer que les utilisateurs interagissent avec votre microinteraction? Le résultat devrait être immédiat. Le résultat souhaité devrait:

  • Arriver avec un seul robinet
  • Fournir l'action souhaitée dans un délai de 0,1 seconde

L’immédiateté des micro-interactions est essentielle à leur succès. Parce que la nature de ces éléments est petite, tout retard dans l’action gênera les utilisateurs. (Imaginez à quel point il serait frustrant de mettre trois alarmes en sourdine ou s'il y avait un délai de 2 secondes pour mettre la sonnerie en sourdine lors d'un appel au cours d'une réunion.)

Le basculement rapide entre un semblable (ou différent) ou suivre sur Instagram est un exemple parfait. C'est à quelle vitesse votre microinteraction devrait être.

Conception pour la répétition

L'une des caractéristiques de la microinteraction par rapport à d'autres éléments interactifs de votre interface utilisateur est leur utilisation répétée. Les microinteractions ne sont généralement pas conçues pour un usage unique. (Combien de fois avez-vous appuyé sur le bouton Instagram en forme de cœur au cours de la dernière heure?)

Concevez pour cette action répétitive, mais l'action ne doit pas ressembler à un mouvement répétitif. Bien que cela puisse sembler beaucoup à prendre en compte, cela dépend de 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.

L'utilisation de modèles utilisateur, d'animations et de styles d'icônes communément acceptés vous aidera à concevoir vos micro-interactions. Ne réinventez pas la roue ici; Facilitez la tâche des utilisateurs en une seule pression, sans avoir à se gratter la tête pour le faire.

Rendez-le lisible et lisible

Voici l'étape qui est trop souvent oubliée - les instructions contenues dans les micro-interactions doivent être lisibles et relatable.

Lisible fait référence à tout texte ou instruction relatif à la microinteraction. Les mots doivent être faciles à voir et à numériser. Du point de vue de la conception, il est essentiel de choisir une bonne police de caractères et de veiller à ce qu'il y ait suffisamment d'espace autour des mots et qu'il y ait beaucoup de contraste entre les lettres et l'arrière-plan. Éloignez-vous des polices condensées, minces ou de nouveauté difficiles à lire en un coup d'œil.

Relatable fait référence à un texte qui se lit de la même façon que les gens parlent. Un langage peu commun ou une formulation maladroite doivent être évités. Les instructions contenues dans les champs de formulaire qui disparaissent lorsque l'utilisateur commence à taper constituent un excellent exemple. Cela est particulièrement vrai lorsque le libellé utilise une tonalité ou une voix que l'utilisateur attend de la marque ou du site Web avec lequel il interagit.

Focus sur les détails

Une microinteraction est l’un des nombreux détails de conception qui composeront votre interface. Vous devez faire particulièrement attention à chacun d'entre eux.

Les microinteractions doivent faire partie intégrante de la conception globale. Mais vous devez aussi penser à ces minuscules actions. Des choix de couleurs à la taille des éléments avec lesquels un utilisateur doit interagir, ces détails inciteront les utilisateurs à agir ou amèneront les utilisateurs à abandonner la conception pour autre chose.

Comme vous le feriez pour 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, de manière à ce que les actions soient cohérentes tout au long de la conception et faciles à rechercher et à utiliser pour 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 y a juste trop de conceptions qui sont trop difficiles à utiliser. Vous pourriez penser que c'est cool, mais les utilisateurs ne le feront pas. 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 ponctuelles sont si importantes.Comment savoir si votre conception est assez simple? Il nécessite une structure définie avec une boucle de rétroaction pour les actions, des instructions et des éléments visuels simples, ainsi qu'un message clairement communiqué et facile à comprendre.

Ne pas arrêter de se développer

La conception de microinteractions 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 veulent exploiter.

Rester sur la bonne voie avec l'évolution des micro-interactions revient aux bases que Dan Saffer a définies pour la première fois. (Il a également écrit l'un des ouvrages les plus connus 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 de fonctionnement de l'interaction, une boucle de rétroaction afin que l'utilisateur sache Il s'est passé quelque chose, ainsi que des boucles et des modes qui dictent le fonctionnement des interactions futures ou la suite des événements. Gardez cela à l'esprit et vous serez sur la voie du succès de la microinteraction.

Conclusion

Il y a beaucoup d'éléments à concevoir pour quelque chose d'aussi petit. Alors, ne pensez pas que vous pouvez créer une microinteraction en cinq minutes et passer à autre chose. Concevoir une microinteraction nécessite une attention et une planification particulières.

Rappelez-vous que les meilleures micro-interactions fonctionnent généralement avec un seul robinet et sont des éléments auxquels les utilisateurs ne pensent même pas à s’engager, bien qu’ils le fassent régulièrement.