Meilleure UX grâce aux micro-interactions

Lors de la conception d'un produit, il existe de nombreuses façons d'améliorer l'expérience utilisateur, notamment la définition de personnalités, une architecture d'informations bien structurée et un contenu rédigé avec soin. Mais une fois que cette structure de haut niveau est définie, la création de plaisir pour un utilisateur vient dans les détails de conception d' interaction plus petits.

Ces détails, connus sous le nom de microinteractions , sont des moments individuels du produit conçus pour accomplir une seule tâche tout en améliorant le flux naturel du produit. Glisser vers le haut pour actualiser les données, aimer le contenu ou modifier un paramètre sont toutes des micro-interactions. Ils peuvent également inclure des animations d'interface utilisateur simples, par exemple, la façon dont un menu glisse lorsqu'il est tapé ou qu'une carte glisse hors de l'écran lorsqu'elle est glissée.

Souvent, les micro-interactions ne sont même pas consciemment remarquées par l'utilisateur, mais leurs détails subtils rendent le produit plus agréable et plus facile à utiliser , et donc améliorent son expérience utilisateur.

Avantages des microinteractions

Les micro-interactions et l'animation de l'interface utilisateur sont si cruciales qu'elles peuvent faire ou défaire un design - ou comme l'a dit Charles Eames, célèbre dans le design de meubles et l'architecture :

Les détails ne sont pas les détails. Ils font le dessin.

Certains avantages clés de l'incorporation de microinteractions dans un produit sont :

• Créer un effet émotionnel positif sur l'utilisateur grâce à des interactions plus fluides avec l'interface utilisateur
• Fournir un retour immédiat à l'utilisateur en fonction des actions qu'il a entreprises
• Guider l'utilisateur à travers une application de manière plus fluide et intuitive
• Encourager les utilisateurs à interagir avec une application en répondant à une notification ou lors du partage de contenu
• Prévenir les erreurs des utilisateurs

Meilleures pratiques de conception de microinteraction

Maintenant que nous avons établi une définition et un contexte autour de ce que font les microinteractions, et donné un exemple de la façon dont elles améliorent l'expérience utilisateur, discutons des meilleures pratiques pour créer des microinteractions.

Identifier et comprendre le problème de l'utilisateur

La première règle de toute conception d'expérience utilisateur est de découvrir et de comprendre les problèmes des utilisateurs. Il n'en va pas autrement pour les microinteractions. La meilleure façon de comprendre ce dont l'utilisateur a besoin est de mener des enquêtes ou des entretiens, ou d'observer le comportement par le biais de recherches sur les utilisateurs. Le designer de Toptal, Ivan Annikov, approfondit la compréhension des besoins des utilisateurs dans son article, "Going Guerrilla: Affordable UX Research Tips And Alternatives".

Gardez les microinteractions naturelles

L'objectif est de combler le fossé entre l'utilisateur et un produit de manière intuitive et naturelle, évitez donc les animations étranges qui prennent trop de temps à se charger ou qui peuvent distraire l'utilisateur. Au lieu de cela, créez des conceptions qui s'intègrent parfaitement au produit. La subtilité est la clé des microinteractions. Ne laissez pas l'utilisateur perplexe et pensant : « Qu'est-ce que c'était ? »

Tester et itérer les résultats des tests utilisateur

Même les concepteurs expérimentés obtiennent rarement des conceptions parfaitement correctes du premier coup. C'est pourquoi l'utilisation d'un processus de test utilisateur et de conception itérative est un moyen simple de réduire les défauts d'utilisabilité avant le lancement du produit.

Au cours de la phase de test utilisateur, les micro-interactions sont testées et analysées pour leur convivialité et révisées lors de la phase de conception suivante. Ce processus est répété jusqu'à ce que les problèmes d'utilisabilité et les points faibles soient corrigés.

Suivez la structure des microinteractions

Selon Dan Saffer, Sr. Staff Product Designer chez Twitter et auteur de « Microinteractions : Designing with Details », il existe quatre parties d'une microinteraction.

1. Déclencheur — Un déclencheur initie les microinteractions. Un type de déclencheur est un interrupteur à bascule qui active et désactive une fonctionnalité.
2. Règles — Une règle détermine comment une micro-interaction répond à un déclencheur et définit ce qui se passe pendant l'interaction. Par exemple, une application de lampe de poche utilise un bouton comme déclencheur qui allume et éteint la lumière.
3. Rétroaction — La rétroaction indique à l'utilisateur ce qui se passe pendant la microinteraction. Un exemple de commentaires est un formulaire d'inscription avec validation en ligne : une couleur de bordure devient verte si le champ est rempli correctement et devient rouge si quelque chose est incorrect. De cette façon, l'utilisateur sait instantanément que quelque chose est bien ou mal.
4. Boucles et modes — Les boucles et les modes définissent les méta-règles de la microinteraction et comment la microinteraction change lorsqu'elle est utilisée à plusieurs reprises. Par exemple, dans le commerce électronique, un bouton "Acheter maintenant" peut se transformer en "Acheter un autre" lorsque l'utilisateur a déjà acheté l'article.

Déconstruire la conception de la microinteraction

Pour montrer le processus de réflexion derrière la conception des microinteractions, déconstruisons une microinteraction par Google : la microinteraction de suggestion de nom de fichier dans Google Docs.

Cette micro-interaction prend la première ligne d'un document et suggère ce morceau de texte comme nom du document, ce qui rend le processus de création de nom plus intuitif.

Le processus de conception d'une micro-interaction est le même que pour n'importe quelle tâche de conception : identifier le problème de l'utilisateur et le résoudre. Tout en gardant à l'esprit les meilleures pratiques précédentes, commençons par identifier le problème.

Le problème de l'utilisateur

Un moyen simple et intuitif de garder les documents organisés consiste simplement à les nommer de manière descriptive. Dans la plupart des éditeurs de texte, le champ "Nommez votre document" reste vide, même s'il y a de fortes chances que le nom du fichier soit éventuellement corrélé avec le contenu du document. C'est un processus qui mérite d'être abordé avec une microinteraction.

La solution de Google

Google Docs gère cela de deux manières, selon les choix de l'utilisateur : 1) Les utilisateurs peuvent cliquer dans le champ du nom et modifier le nom du document immédiatement avant de saisir du contenu, et remplacer "Document sans titre" par le nom de leur choix, ou 2 ) Une fois qu'un utilisateur a saisi la première ligne de texte, Google la remplit automatiquement en tant que nom du document. L'utilisateur peut le conserver tel quel ou le modifier.

Examinons les détails :

Déclencheurs

Il peut y avoir quelques déclencheurs possibles pour nommer le document, en utilisant la fonction de menu Fichier> Enregistrer sous , ou en appuyant sur cmd + s sur un Mac ( ctrl + s sous Windows) sur le clavier comme dans les applications de bureau. Mais aucun d'entre eux ne tire parti de la nature interactive du Web et n'améliore pas particulièrement le flux d'utilisateurs.

Au lieu de cela, le déclencheur principal de Google Docs consiste simplement à cliquer sur le champ du nom du document. L'état de survol sur le champ affiche une info-bulle "Renommer". Le déclencheur secondaire est File > Rename , qui met en surbrillance le champ de saisie du nom.

Des règles

Les règles définissent ce qui se passe après avoir cliqué sur le déclencheur. Dans ce cas, la première ligne de texte apparaîtra comme le nom du document. Mais que se passe-t-il si l'utilisateur ne souhaite pas que la première ligne de texte soit le nom ? Lorsque l'utilisateur clique sur le champ de saisie du nom, tout le texte est sélectionné et sera supprimé avec n'importe quelle frappe, ce qui permet à l'utilisateur de créer facilement un nouveau nom.

Retour d'information

Changer la couleur de la bordure du champ de saisie est un modèle d'interaction courant, et c'est ce que Google Docs utilise ici pour donner à l'utilisateur un retour immédiat.

Boucles et modes

L'utilisateur a réussi à créer le nom du document et le déclencheur reste en place avec une différence essentielle : le document a maintenant été nommé.

À ce stade, l'utilisateur peut ne vouloir modifier que quelques lettres ou ajouter une date au nom, plutôt que de modifier tout le nom qu'il a précédemment défini. Dans ce cas, contrairement à la règle précédente, la règle de surbrillance du nom complet du document est désactivée.

Résultat

Après avoir défini le problème et mis l'accent sur les quatre parties d'une microinteraction, le résultat est une expérience plus naturelle et conviviale. La solution de dénomination de fichiers Google Docs aide l'utilisateur à rester organisé avec des fichiers correctement nommés et simplifie le processus de dénomination des documents.

Microinteractions en action : exemples concrets

Réorganiser une liste de tâches

Les rappels Apple iOS aident les utilisateurs à rester organisés et à éliminer plusieurs étapes en leur permettant d'appuyer, de maintenir et de faire glisser un élément de la liste pour changer sa place dans l'ordre de la liste.

Réagir aux publications sur les réseaux sociaux

« Aimer » le contenu en cliquant sur un bouton ou une icône de pouce vers le haut est devenu un modèle de conception UX courant dans de nombreuses applications et sites Web. Facebook s'est appuyé sur cette interaction en ajoutant plusieurs options au-delà du "j'aime" grâce à une micro-interaction subtile.

Mise en surbrillance du texte de marque

Dans la plupart des navigateurs, il est possible de remplacer la couleur de sélection de texte par défaut. IKEA utilise ce motif d'interaction pour ajouter un détail de marque subtil en mettant en évidence le texte dans ses couleurs emblématiques jaune et bleu.

Partage de votre position

Google Hangouts suppose que l'un des moments où un utilisateur peut souhaiter partager sa position est lorsque quelqu'un envoie un SMS "Où es-tu?"

Lorsque l'utilisateur visualise ce message, un bouton "Partager votre position" apparaît comme une option contextuelle. Ils peuvent ensuite appuyer sur ce bouton pour envoyer automatiquement une carte de leur emplacement à l'autre utilisateur.

Glisser pour sélectionner

Les micro-interactions peuvent être utilisées pour répondre à des questions simples par oui ou par non dans une application. Tinder le fait en faisant glisser l'utilisateur vers la gauche ou vers la droite (non/oui) selon qu'il aime ou n'aime pas sa correspondance possible.

Extension de la recherche

L'application Google Inbox regroupe non seulement intelligemment les e-mails avec des groupes, mais elle est également conçue pour permettre la recherche vocale ou choisir parmi les contacts les plus récents en un seul clic.

Ajout rapide des coordonnées d'un ami

SeatGeek simplifie le processus de remplissage de formulaire en remplissant automatiquement les informations des contacts d'un utilisateur en appuyant simplement sur un bouton "Ajouter à partir des contacts".

En savoir plus sur les microinteractions

Les micro-interactions sont un élément clé de l'amélioration de l'expérience utilisateur, et de nombreuses ressources sont disponibles pour en savoir plus à leur sujet, dont quelques-unes sont répertoriées ci-dessous.

Pour en savoir plus sur les microinteractions en général, visitez Microinteractions, le site Web créé en complément du livre mentionné précédemment "Microinteractions : Designing with Details" de Dan Saffer. Sur le site, vous trouverez des explications détaillées sur les microinteractions ainsi que des informations sur l'origine de microinteractions bien connues, telles que la correction automatique, la saisie semi-automatique et le copier-coller. Le premier chapitre du livre est également disponible en téléchargement gratuit.

Pour vous inspirer de la microinteraction, visitez Little Big Details, une collection organisée de microinteractions dans les produits numériques. Il montre des exemples de la façon dont des entreprises comme Apple, Trello et Stack Overflow implémentent des micro-interactions et des animations d'interface utilisateur.

Pour savoir comment créer des microinteractions dans Framer, lisez Toptal Designer, l'article de Wojciech Dobry, Tutoriel Framer : 7 microinteractions simples pour améliorer vos prototypes.

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Les principes de conception et leur importance
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Explorer les principes de conception de la Gestalt
• Adobe XD vs Sketch - Quel outil UX vous convient le mieux ?
• Les 10 livrables UX utilisés par les meilleurs designers