Le secret du design UX qui tue : tout est dans les microinteractions
Publié: 2016-11-13Le design est dans les détails.
L'autre jour, j'ai composé un message pour une vieille amie qui n'était pas facile à écrire car c'était un message pour exprimer mes condoléances pour la perte de sa mère. Nous nous étions parlé au téléphone quelques fois plus tôt dans la semaine, mais je voulais lui envoyer un message rapide sur l'application Facebook Messenger pour lui faire savoir que je pensais à elle. J'ai fini de composer le message et j'ai décidé d'ajouter un petit "cœur" à la fin.
Ce simple acte de tapoter le cœur a fini par se transformer en une délicieuse explosion de cœurs rouges flottants sur l'écran de mon téléphone, qui était également accompagnée de quelques effets sonores idiots. Ce moment dans le temps, bien que court et fugace, m'a apporté quelques secondes de surprise et de joie pendant une période difficile.
C'est ce qui est arrivé à mon écran après avoir appuyé sur le cœur rouge.
Ces petits détails, également appelés microinteractions, peuvent rendre l'expérience entre un utilisateur et un appareil/produit plus amusante, facile, efficace et humaine. Souvent, nous ne remarquons même pas ces micro-interactions.
Ils sont astucieusement subtils et parfois presque invisibles ; mais, ils peuvent faire d'un produit quelque chose qu'un utilisateur aime, plutôt que quelque chose qu'il se sent tiède.
En d'autres termes, les micro-interactions ont le potentiel de combler comme par magie le fossé entre l'utilisateur et la technologie grâce à une connexion émotionnelle et humaine, tout en les encourageant à revenir pour en savoir plus.
Que sont les microinteractions ?
Les micro-interactions sont basées sur l'accomplissement d'un moment ou d'une tâche unique en offrant une expérience agréable et des commentaires utiles aux utilisateurs. Ces micro-moments sont ce qui guide finalement un utilisateur à travers un flux de manière intuitive et efficace.
Dan Saffer, auteur du livre "Microinteractions" et vice-président des produits pour Mayfield Robotics , définit les microinteractions comme "des moments de produit contenus qui tournent autour d'un seul cas d'utilisation - ils ont une tâche principale. Chaque fois que vous modifiez un paramètre, synchronisez vos données ou vos appareils, définissez une alarme, choisissez un mot de passe, connectez-vous, définissez un message d'état, ou ajoutez quelque chose à vos favoris ou « J'aime », vous vous engagez dans une micro-interaction. Ils sont partout : dans les appareils que nous transportons, les appareils de notre maison, les applications sur nos téléphones et ordinateurs de bureau, même intégrés dans les environnements dans lesquels nous vivons et travaillons. La plupart des appareils et certaines applications sont entièrement construits autour d'une microinteraction.
Selon Saffer, les microinteractions sont bonnes pour :
- Accomplir une seule tâche et une seule tâche.
- Interagir avec une seule donnée, comme la température ou la notation d'une chanson.
- Contrôler un processus en cours, comme le volume d'une chanson sur Spotify
réglage d'un paramètre. - Afficher ou créer un petit élément de contenu, comme un statut sur Facebook
activer ou désactiver une fonctionnalité ou une fonction.
Pourquoi intégrer des micro-interactions dans vos conceptions ?
- Ils aident à encourager les utilisateurs à interagir avec votre site, qu'il s'agisse de cliquer sur un bouton, de partager du contenu ou de répondre à un message ou à une notification.
- Ils donnent aux utilisateurs un retour immédiat.
- Ils aident les utilisateurs à naviguer sur le site.
- Ils aident à guider les utilisateurs à travers le flux de manière intuitive et simple.
Saffer décrit les quatre parties des microinteractions comme un déclencheur, des règles, une rétroaction, des boucles et des modes. Plongeons un peu plus dans la signification de chacune de ces étapes.
Gâchette
Le déclencheur est ce qui initie une interaction. C'est un signal, visuel ou autre, qui encourage un utilisateur à agir. Un déclencheur peut être le flottement d'une icône pour encourager un utilisateur à appuyer ou à cliquer dessus. Le bouton bleu qui flotte en haut de votre flux Twitter et qui indique « nouveaux tweets » avec une flèche pointant vers le haut vous incite à cliquer dessus pour voir tous les nouveaux tweets qui ont été publiés depuis votre absence.
Certains des meilleurs déclencheurs sont ceux qui anticipent réellement les besoins d'un utilisateur sans qu'il ait à énoncer ses besoins . Cela nécessite que le concepteur collecte des recherches sur les utilisateurs et des données comportementales pour aider à prévoir quels seront les besoins de l'utilisateur et concevoir les déclencheurs en conséquence.
Règles
Le déclencheur s'engage avec les règles. Ces règles définissent ce qui se passe pendant l'interaction. Les règles doivent sembler naturelles à accomplir pour un utilisateur et elles existent pour aider à minimiser les erreurs. Un bon exemple de cela est que si vous essayez d'envoyer un e-mail via Gmail sans entrer de ligne d'objet, Gmail vous informera que votre "e-mail n'a pas de ligne d'objet" vous demandant si vous souhaitez toujours l'envoyer.
Recommandé pour vous:
Comment Metaverse va transformer l'industrie automobile indienne
Que signifie la disposition anti-profit pour les startups indiennes ?
Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...
Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...
Les startups indiennes prennent des raccourcis à la recherche de financement
La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...
Retour d'information
Les commentaires sont basés sur les règles et donnent aux utilisateurs des informations sur ce qui se passe à ce moment précis. J'apprécie particulièrement les commentaires que je reçois sur les formulaires conçus en pensant à l'utilisateur. L'intégration de la validation en ligne dans votre conception dans le bon contexte peut être très utile pour l'utilisateur.
Par exemple, lors de la saisie d'un nom d'utilisateur, si je vois une coche verte, je sais que je peux continuer à remplir le champ du mot de passe. Je ne peux pas vous dire combien de fois je remplis les champs du nom d'utilisateur et du mot de passe, j'appuie sur Soumettre et on me dit en rouge que le nom d'utilisateur ou le mot de passe sont incorrects.
Le problème avec cette situation est que je n'ai absolument aucune idée du champ ou de la lettre qui est incorrect . Si je peux apporter les modifications appropriées en cours de route, cela rend l'ensemble du processus beaucoup plus facile. Ces petites coches vertes, aussi insignifiantes qu'elles puissent paraître, font toute la différence dans la façon dont un utilisateur se sent pendant et après le processus de remplissage du formulaire et ont le potentiel d'entraîner des taux de remplissage plus élevés.
Le formulaire d'inscription Twitter est un excellent exemple simple de la façon dont la validation en ligne doit être utilisée. Les coches apparaissent sur le côté droit du champ du formulaire lorsque je termine l'action. Le message d'erreur rouge s'avère également utile en m'indiquant ce que je dois faire pour remplir correctement le formulaire.
L'application de voyage Hopper utilise également les microinteractions à bon escient. Après avoir entré les dates et les destinations sur lesquelles je souhaite en savoir plus, le mignon petit lapin sautille pendant que l'application "réfléchit" et tire des résultats que je peux voir. Personne n'aime attendre. Cependant, voir le lapin sauter apporte un peu de plaisir à cette courte expérience d'attente, tout en permettant à l'utilisateur de savoir que quelque chose se passe réellement et que les résultats seront bientôt affichés.
Boucles et modes
Les boucles et les modes déterminent les méta-règles plus larges de l'interaction. Si une microinteraction est utilisée à plusieurs reprises, il est important de considérer comment les interactions changent en conséquence. Réfléchissez à la façon dont cette interaction s'adapte en fonction du comportement de l'utilisateur. Quelle est la différence entre la microinteraction la première fois qu'elle est utilisée par rapport à la 7ème fois ?
Essayez de créer des boucles qui s'adaptent au fil du temps, rendant l'expérience plus riche à chaque fois qu'ils interagissent avec. La fonctionnalité On This Day Memories de Facebook est un excellent exemple de la façon de créer des expériences qui s'adaptent à chaque fois qu'il est engagé.
La majorité des utilisateurs de Facebook consultent leurs fils d'actualité plusieurs fois par jour. Avoir une fonctionnalité qui, à l'occasion, affiche une mise à jour de statut ou une image d'il y a 4 ans peut avoir un effet émotionnel (espérons-le positif) sur l'utilisateur. Il est possible que cette microinteraction particulière ait un effet négatif. Par exemple, montrer un ancien message qui peut rendre l'utilisateur triste ou stressé a des conséquences négatives imprévues. Je suggère à Facebook de chercher comment empêcher ces expériences négatives de se produire.
Éléments à garder à l'esprit lors de la conception de microinteractions
Ne surconcevez pas . Les micro-interactions ne doivent pas sembler étranges ou prendre trop de temps à charger. Ils doivent servir un objectif tout en s'intégrant parfaitement à votre conception globale.
La première fois que quelqu'un expérimente la microinteraction, il ne devrait pas ressentir la même chose que lorsqu'il l'utilise la 10e fois ou la 100e fois. Rendre les microinteractions adaptables au contexte. S'il s'agit de la première fois d'un utilisateur, des flèches l'aident à naviguer dans l'application. Donnez-leur la possibilité de ne plus afficher ce message, afin qu'il ne devienne pas ennuyeux à l'avenir.
Cela m'amène au troisième conseil. Ne partez pas de rien . Comprenez vos utilisateurs, leurs motivations et le contexte en effectuant des recherches sur les utilisateurs. Les informations que vous recueillez vous donneront les informations dont vous avez besoin pour rendre votre décision plus efficace et utilisable. S'ils sont là pour la 20e fois, déterminez leurs motivations et leurs objectifs et créez des micro-interactions en fonction de vos découvertes.
N'oubliez pas que l'objectif est que ces interactions soient subtiles et efficaces. Assurez-vous que le style de la micro-interaction correspond naturellement au style de la conception globale de votre interface. Les interactions ne doivent pas sembler déplacées ou déroutantes et les micro-interactions doivent être liées à la conception globale de l'application.
6 exemples de microinteractions bien faites
Surprise sur votre manche
J'ai entendu quelqu'un décrire avoir la même chemise à manches longues douce et confortable pendant des années. Un jour, alors qu'elle courait sur un sentier ombragé bordé d'arbres portant la même chemise à manches longues, la coureuse a décrit avoir froid et tiré le tissu supplémentaire, destiné aux jours froids pour se couvrir les mains, pour retourner les hauts sur ses mains. Le tissu en dessous a révélé la déclaration "tu es aimé".
Ces mots, secrètement imprimés à l'endroit exact du tissu, ont été cachés pour être montrés lors de tels moments surprenant ceux qui le portent avec un micro-moment de plaisir .
Emojis lâches
Le site Web Little Big Details propose de très bons exemples de microinteractions. L'un de ceux qu'ils présentent est lorsque vous recherchez un emoji dans Slack et que l'emoji que vous recherchez n'existe pas, l'emoji "pleurer" est proposé en option. Au lieu que l'utilisateur s'énerve lorsqu'il ne trouve pas ce qu'il veut, l'emoji "pleurer" l'amuse .
Google Translate
Lorsque vous appuyez sur le bouton "écouter" pour la deuxième fois sur Google Translate, il répète la traduction à une vitesse plus lente en supposant que vous ayez besoin d'un peu plus de temps pour comprendre ce qu'il dit.
Mode nuit sur Google Maps
J'ai toujours adoré la façon dont l'arrière-plan de l'application Google Maps devient noir en fonction de l'heure. Le mode nuit est destiné à aider à la vision nocturne et à la sécurité et est entièrement automatique.
Fais-moi pulser
Consultez ce site Make Me Pulse pour une expérience interactive vraiment délicieuse. L'utilisation de micro-interactions ( barres de progression, sons, couleurs ) aide à guider les utilisateurs tout au long du flux à travers des déclencheurs, des règles, des commentaires et des boucles.
Barres de défilement
Même la petite barre de défilement grise sur le côté droit de cette page est un exemple merveilleux et simple de la façon dont une micro-interaction peut être utile et efficace, vous permettant en tant que lecteur de savoir combien de matériel il reste à lire de cet article.
J'espère que cet article vous inspirera pour commencer à incorporer des micro-interactions dans vos conceptions. Ils ont le potentiel de transformer l'expérience de vos utilisateurs avec votre conception de simplement correcte en quelque chose de vraiment mémorable.
[Ce message est apparu pour la première fois sur Proto.io et a été reproduit avec permission.]