En juin 1833, un mot étrange paraît dans le journal français Le Figaro . Inventé par le physicien belge Joseph Plateau, le « phénakistiscope » était (et est toujours ! ) un appareil qui, lorsqu'il est tourné par un utilisateur humain, transforme des images statiques en images animées…
Cela a fait sensation parmi le public du XIXe siècle, à qui l'illusion du mouvement devait ressembler à de la pure magie.
Les gens ont afflué pour découvrir la technologie, et les phénakistiscopes ont rapidement été produits et vendus dans le commerce en grand nombre.
Non seulement le phénakistiscope a capturé l'imagination du public à part entière, mais il a précipité une vague de fascination du public pour le mouvement qui, lentement mais sûrement, conduirait à ce que nous appelons maintenant l'animation et les graphiques animés.
Bien sûr, le mouvement lui-même était le principal attrait. Mais le fait que l'utilisateur humain contrôlait ce mouvement devait également avoir joué son rôle.
En tant qu'espèce, les humains adorent jouer et interagir. L'idée que nos commentaires manipulent le monde qui nous entoure fait partie intégrante de notre curiosité innée.
Et c'est drôle parce que exactement le même principe s'applique à un phénomène nouveau et fascinant dans le monde de la conception Web :l'essor de la microinteraction.
Qu'est-ce qu'une micro-interaction ?
Essentiellement – un peu comme le phénakistoscope – une microinteraction est un moment d'interaction animée entre un utilisateur et un site web. Ils peuvent être si subtils que vous les remarquez à peine, mais ces petites animations transforment des actions fades et banales en moments délicieux et mémorables.
Pensez au « pouce levé » animé lorsque vous aimez une publication sur Facebook. Ou l'animation "secouer" lorsque vous entrez votre mot de passe de manière incorrecte.
Tout comme le phénakistoscope :nous manipulons quelque chose de « statique » et nous nous émerveillons lorsqu'il prend vie grâce au mouvement.
Dans cet article, nous allons présenter 15 exemples étonnants pour vous inspirer. Vérifiez-les !
1. Compteur de vitesse (test de vitesse)
Speedtest est un outil simple mais puissant qui, même s'il ne remporte aucun prix pour la création de noms, offre certainement le service auquel vous vous attendez !
Le test de votre vitesse Internet peut prendre de quelques secondes à quelques minutes, il est donc important que l'utilisateur sache que quelque chose se passe une fois qu'il a commencé le test.
Cette micro-interaction comporte un "compteur de vitesse" qui montre comment se déroule le test de vitesse, ainsi qu'une sorte de barre de progression en haut de l'écran qui visualise le temps restant. Finalement, le résultat s'affiche une fois le test terminé.
Cette micro-interaction donne à l'utilisateur un aperçu de la technicité qui se passe dans les coulisses, et est percutante, mémorable et engageante. L'alternative - qui pourrait être un écran "Veuillez patienter" suivi d'un numéro à l'écran après environ une minute - serait clairement loin d'être aussi impressionnante. Les gens pourraient en fait supposer à tort que rien ne se passe et partir avant la fin du test.
2. Verrouiller l'écran (RememBear)
Si vous êtes le genre de personne qui doit envoyer des rappels de mot de passe chaque fois que vous vous connectez à chaque site que vous utilisez, vous pourriez probablement utiliser un outil comme RememBear !
Il s'agit d'une application qui stocke vos mots de passe et les remplit automatiquement pour vous. C'est une application assez simple, mais le véritable différenciateur est l'impressionnante image de marque - comme vous vous en doutez avec le composant "Ours" dans le nom, ils sont fortement marqués autour d'une jolie mascotte d'ours.
Vous devez vous souvenir d'un seul mot de passe pour vous connecter à RememBear et accéder à toutes vos autres informations de connexion. La connexion est généralement une expérience assez banale - mais RememBear le rend super amusant en demandant à la mascotte de l'ours de vous regarder entrer. Il devient rouge si vous vous trompez – et vert lorsque vous vous connectez correctement. Cela rend l'ensemble du processus beaucoup plus percutant.
3. Configurateur de voiture (Porsche)
Soyons honnêtes; une Porsche n'est pas une voiture ordinaire. Et en concevoir un ne devrait pas être une expérience ordinaire !
Le Porsche Car Configurator est un outil en ligne qui vous permet de créer votre Porsche parfaite, y compris le style, la couleur, les types de jantes et plus encore. Au fur et à mesure que vous apportez des ajustements et des modifications à votre véhicule, la voiture change en fait pour refléter vos choix et les mises à jour des prix en temps réel.
4. Balayage (HongSeon Kim)
Cet exemple suivant est un concept créé par l'illustrateur coréen HongSeon Kim et partagé sur Dribbble. Le concept de "swipe" utilise la parallaxe pour faire du "swipe" une expérience beaucoup plus intéressante et dynamique.
Il est démontré dans le contexte d'une application de voyage, où l'utilisateur peut "faire glisser" la destination sur l'écran, puis cliquer pour développer celle qui l'intéresse. Mais ce concept fonctionnerait bien sur tout> application où le balayage est requis.
5. Saisie semi-automatique (Google)
À bien des égards, Google s'est ressemblé et s'est senti très similaire pendant des années.
Les changements apportés à leur image de marque et à la conception de leur site Web ont été graduels, lents et réguliers. Il est souvent difficile de remarquer ces changements au fur et à mesure qu'ils se produisent, car ils sont si subtils.
Mais un changement important a été l'ajout de recherches suggérées. Au fur et à mesure que l'utilisateur saisit sa requête de recherche, Google anticipe - sur la base des termes de recherche habituels - ce que l'utilisateur est susceptible de rechercher et propose une gamme de suggestions. L'utilisateur peut simplement cliquer ou faire défiler jusqu'à celui qu'il souhaite.
Non seulement cela permet de gagner du temps lors de la saisie de termes de recherche complets, mais cela donne également un aperçu de ce que les autres personnes recherchent autour d'un sujet particulier. Cela peut inciter les utilisateurs à effectuer plus recherches, trouver plus contenu - et, en fin de compte, obtenez plus valeur des services Google.
6. Bouton Soumettre (Cameron Sagey/Vincit Californie)
Le bouton "Soumettre" est le point final logique de tout formulaire en ligne. Nous avons trouvé cette offre du designer Cameron Sagey sur Dribbble, et cela montre comment même l'expérience la plus banale - cliquer sur "soumettre" - peut être transformée en un moment mémorable.
Cet exemple utilise le mot "Lancer" au lieu de "Soumettre" - et l'accompagne d'une icône de fusée amusante dessinée au trait qui jaillit du bouton lorsque l'utilisateur clique dessus. Enfin, le bouton se ferme avec une icône "coche" sur fond noir pour indiquer que le formulaire a bien été envoyé. Cela signifie que l'utilisateur ne se demande pas si cela a réellement fonctionné. À tous égards, c'est un bel exemple !
7. Réactions Facebook (Seth Eckert – Dribbble)
Les "j'aime" ont toujours été un élément central de l'expérience Facebook. Mais en février 2016, la chaîne de médias sociaux a introduit une nouvelle série de "réactions" qui permettaient aux gens d'exprimer différentes émotions au contenu qu'ils voyaient - "comme" était toujours là mais était rejoint par l'amour, le rire, le choc, la tristesse et la colère. .
Les animations ici sont si subtiles que vous ne les avez peut-être même pas remarquées, mais chaque fois que vous réagissez à une publication sur Facebook, vous verrez une animation pour chaque type de réaction…
Ceci est suivi d'une animation plus petite basée sur la réaction que vous choisissez, telle qu'elle apparaît sur le message.
C'est vraiment puissant parce que la fonction consiste à exprimer des émotions. L'animation de chaque icône accentue vraiment ce sentiment - permettant à l'utilisateur d'exprimer sa réaction d'une manière légèrement plus viscérale et significative.
8. Tirez pour rafraîchir (Srikant Shetty/Hike)
À l'ère des actualités et du contenu en temps réel, nous nous retrouvons certainement plus que jamais à utiliser la fonction "Actualiser" ! Qu'il s'agisse de pages d'actualités, de flux de médias sociaux ou de nos forums préférés, nous voulons le contenu le plus récent et le plus performant, ce qui signifie souvent rafraîchir la page.
Bien sûr, "rafraîchir" signifiait que la page entière se fermait et se rechargeait à partir de zéro. De nos jours, il y a beaucoup plus de place pour des solutions créatives comme l'exemple ci-dessous. Ceci est un autre concept de Dribbble, créé par Srikant Shetty chez Hike.
Lorsque l'utilisateur fait glisser vers le bas pour actualiser la page, il obtient une animation sympa et amusante basée sur un autocollant Hike.
Selon les propres mots du designer, "Cela contribue à ajouter un moment de plaisir et également à améliorer la découverte de ces autocollants dans Hike. ”
9. Actions de balayage des e-mails (Emmanuelle Bories)
Le courrier électronique et le mobile sont deux des tendances dominantes de la technologie en ligne aujourd'hui. Mais ils ne jouent pas toujours très bien ensemble. L'organisation d'une boîte de réception mobile peut encore être étonnamment pénible.
Cette micro-interaction, partagée par Emmanuelle Bories sur Dribbble, offre une manière différente et beaucoup plus agréable d'organiser une boîte de réception mobile - en utilisant le "swipe" de l'utilisateur pour lui permettre de spécifier comment un e-mail doit être traité. Un balayage court et un relâchement leur permettent de marquer un e-mail comme lu, tandis qu'ils peuvent "répéter" un e-mail avec un balayage plus long.
10. Partage social (Tom Bird)
Les partages sociaux sont un outil extrêmement important pour amplifier la portée du contenu. Alors, bien sûr, rendre les choses plus faciles et plus agréable de partager du contenu ne peut être qu'une bonne chose !
Cet exemple de Tom Bird sur Dribbble est une manière intéressante d'utiliser les micro-interactions pour améliorer l'expérience de partage.
Ici, lorsque l'utilisateur appuie sur "Partager", les icônes de Facebook, Twitter et LinkedIn "se déploient" dans une sorte de roue. L'utilisateur clique sur l'un des canaux et le contenu est rapidement et facilement partagé. C'est rapide, fluide et amusant.
11. Téléchargement (Aaron Iker)
Le chargement et le téléchargement - selon la taille du fichier - ne sont pas des processus immédiats. Il est donc important de donner à l'utilisateur une idée de l'état d'avancement des choses et du temps qu'il reste. Il n'y a rien de particulièrement nouveau à ce sujet, mais les micro-interactions vous permettent certainement d'offrir cette expérience d'une manière beaucoup plus élégante et astucieuse.
Découvrez ce concept, créé par Aaron Iker sur Dribbble. Lors du téléchargement, nous pouvons voir une ligne de progression s'animer de gauche à droite. Lorsque l'utilisateur appuie sur pause, cette ligne est grisée et tombe au bas de la fenêtre, et les lignes qui composent l'icône "pause" tournent et se transforment en une icône "reprendre". Reprendre le téléchargement fait remonter la ligne, lui redonne sa couleur et continue sa progression de gauche à droite. Lorsque le téléchargement est terminé, la ligne se transforme à nouveau en coche.
12. Ajouter au panier (sans fil)
Threadless est un site Web de commerce électronique qui vend des t-shirts et des vêtements, avec des créations de sa communauté d'artistes. Ils vendent une large gamme de designs différents - mais ont également leur propre marque clairement définie, qui est amusante, moderne et jeune.
Cette marque forte se combine avec des micro-interactions pour créer une expérience vraiment agréable lorsque vous achetez un produit. Lorsque l'utilisateur clique sur "Ajouter au panier", une fenêtre contextuelle apparaît, mettant en vedette un personnage mignon "Cart" qui se lèche les lèvres et annonce "1 article délicieux ajouté à mon ventre carty !"
Dans un espace concurrentiel comme le marché des t-shirts et des vêtements, c'est un excellent moyen de se démarquer et de laisser une impression durable sur le client.
13. Bouton de téléchargement (Gal Shir)
Nous avons déjà évoqué le fait que les téléchargements ont vraiment besoin d'indicateurs de progression pour s'assurer que l'utilisateur sait combien de temps cela prendra. Historiquement, cela ressemblait un peu à ça…
Mais voici une prise vraiment fraîche et unique - c'est un autre concept de Dribbble, créé par Gal Shir.
Lorsque l'utilisateur appuie sur le bouton "Télécharger", la flèche s'inverse, puis redescend en parachute sur terre, atteignant la terre ferme lorsque le téléchargement atteint 100 %.
14. Écran d'échec (Netguru/Hive)
Ce n'est jamais idéal quand quelque chose ne fonctionne pas. Mais, quand c'est le fait arriver, il est important que les marques aient le contrôle et limitent les dégâts. Les micro-interactions peuvent être un excellent moyen de transformer un négatif en positif, comme l'illustre la plate-forme de productivité Hive.
Chaque fois que quelque chose ne va pas sur Hive, les utilisateurs voient une animation accompagnée du message "Oups… quelque chose s'est mal passé " et l'instruction "Tirez vers le haut pour actualiser. '
15. Mettez en avant et partagez (Johny Vino)
Nous avons déjà évoqué la valeur du partage social - mais que se passe-t-il si vous ne voulez pas partager l'intégralité de l'article, juste un extrait ? Il existe des moyens de le faire, mais c'est généralement assez peu inspirant. Le modèle classique de « partage » peut rédiger une publication sociale qui comprend le texte brut, plus une balise @via et l'URL.
Mais une grande partie du succès sur les réseaux sociaux se résume aujourd'hui aux visuels. Ce concept, créé et partagé par Johny Vino sur Dribbble, est une solution beaucoup plus visuelle. Mettez simplement en surbrillance le texte que vous souhaitez partager, puis sélectionnez "Partager" dans le menu élégant et animé. Cela générera ensuite une image pour accompagner votre partage, avec une barre d'outils en bas de l'écran pour vous permettre de sélectionner la bonne image.
Merci d'avoir lu
Comme vous pouvez le voir dans ces exemples, les micro-interactions sont un excellent moyen d'utiliser le mouvement pour créer des expériences profondes, percutantes et mémorables pour les utilisateurs tout au long de leur parcours en ligne :chargements, téléchargements, ajouts aux paniers, écrans d'échec et tout le reste !
Êtes-vous intéressé à obtenir vos propres Microinteractions? Consultez notre page Microinteractions pour plus d'informations sur notre service - et pour vous inspirer !