Inspiration pour créer de délicieuses micro-interactions sur votre site

Atterrir sur un excellent site WordPress, c'est comme trouver de l'argent que vous avez oublié lorsque vous atteignez l'intérieur de votre poche. C'est inattendu, mais familier. Il se charge rapidement, a l'air incroyable et peut complètement égayer votre journée.

Toute l'expérience est incroyablement bien pensée. Vous ne commencez même pas à griffonner des idées sur la façon dont vous pouvez implémenter ce type d'UX dans votre propre site avant d'avoir au moins cinq pages de profondeur.

« La différence entre un site solide et un site incroyable réside dans les détails. ”

La fonctionnalité est importante, mais le véritable différenciateur entre les sites Web décents est le travail effectué sur les petits aspects qui catapultent l'expérience utilisateur au niveau supérieur.

Entrez : les microinteractions.

Une microinteraction est l'accomplissement d'une seule tâche. Appuyez sur snooze sur l'alarme. En cliquant sur j'aime sur Facebook. Passer à la chanson suivante sur Spotify.

L'humble microinteraction ne ressemble pas beaucoup à la surface. C'est simple, discret et complètement explicite. Mais c'est cette petite interaction presque invisible qui fait passer un site Web d'une simple fonctionnalité à une convivialité époustouflante.

Si vous voulez que votre site WordPress aille au-delà des attentes, les petites touches sont extrêmement importantes. Ils sont ce qui élève vraiment un design solide au niveau qui inspire des soupirs de plaisir délirants.

Décomposer les microinteractions

Une microinteraction est composée de quatre parties distinctes : le déclencheur, les règles, la rétroaction, les boucles et les modes.

1. Le déclencheur

Le déclencheur est la partie réelle et physique qui déclenche l'expérience. Il peut être manuel, comme un bouton de connexion, ou automatique, comme une fenêtre contextuelle de sortie.

Les déclencheurs automatiques du système améliorent un peu plus l'expérience de l'utilisateur en adaptant l'interaction à ses préférences et à ses actions passées. Ainsi, si vous avez visité un site plusieurs fois et téléchargé des types de contenu spécifiques, vous pourriez obtenir un type de popup complètement différent de celui de quelqu'un qui y atterrit pour la première fois.

2. Les règles

Les règles définissent la portée de l'interaction et déterminent comment tout cela fonctionne. Ils doivent être invisibles pour l'utilisateur et se dérouler strictement dans les coulisses.

3. La rétroaction

Le feedback est ce que l'utilisateur voit réellement. C'est la barre au-dessus d'un formulaire d'inscription vous indiquant qu'il reste 50% ou le dessin animé de chargement lorsque vous vous connectez pour accéder au contenu fermé.

4. Boucles

La boucle dicte la longueur de la microinteraction. Il détermine s'il a une fin distincte ou continue.

Le vrai pouvoir des microinteractions

Les micro-interactions créent un sentiment de continuité. Un sens de l'attention. Ils rendent un site moins intimidant et permettent clairement à l'utilisateur de savoir ce qui se passe à un moment donné.

La plupart d'entre nous deviennent un peu anxieux face à l'inconnu. Lorsque nous allons sur une page particulière, c'est généralement avec un objectif en tête, comme lire un article de blog, s'inscrire à un nouveau produit ou télécharger une excellente ressource. Et si ça ne marche pas comme on s'y attend, c'est super frustrant.

Les micro-interactions aident à ajouter une touche personnelle à la méconnaissance imminente. Ils permettent à vos utilisateurs de savoir qu'ils sont sur la bonne voie, qu'ils vont arriver exactement là où ils veulent être.

Quelques délicieuses micro-interactions

Les types spécifiques de micro-interactions que vous incluez dans votre site Web dépendent de l'objectif de votre site. Pourquoi les gens sont-ils là et comment pouvez-vous leur faciliter la tâche ?

Ce qui fonctionne le mieux dépend de votre marque, de votre produit, de votre public et de vos préférences stylistiques.

Jetons un coup d'œil à quelques sites WordPress qui font basculer les microinteractions pour leur public !

Cliquer ou ne pas cliquer

Blue Cadet est un site Web très médiatisé qui utilise des micro-interactions pour intégrer l'expérience et ajouter du texte sans interrompre le flux de la page.

Vous pouvez faire défiler les vidéos et lorsque vous survolez l'une d'entre elles, le titre de la pièce fait un petit mouvement pour indiquer que vous pouvez cliquer dessus.

C'est un moyen simple mais efficace de faire fonctionner vos médias pour vous et de créer un intérêt visuel.

La barre de défilement presque là

Les formulaires en ligne peuvent être assez frustrants. Vous passez des années à remplir soigneusement toutes vos informations pour cliquer sur soumettre et vous rendre compte qu'il reste trois pages à faire.

La barre de défilement en haut vous permet de savoir exactement combien vous avez fait et combien il vous reste à terminer.

Cela fonctionne très bien pour les formulaires plus longs qu'une page, mais c'est aussi incroyablement efficace pour les formulaires d'une seule page comme celui ci-dessus.

En matière de microinteractions, moins c'est plus

Il est facile de se laisser emporter par la création d'une expérience utilisateur incroyable. Vous voulez que votre site Web soit spécial et attire l'attention de toutes les bonnes manières.

Parfois, malgré nos meilleures intentions, nous nous laissons emporter et, dans notre désir de faire quelque chose de super intuitif, créons des interactions inutilement complexes.

L'ajout d'animations aux micro-interactions peut être incroyablement efficace, mais assurez-vous que cela ne nuit pas à l'ambiance générale et à la fonctionnalité de votre site.

Et, ils doivent correspondre à votre récit.

Quelle est l'histoire que vous racontez à travers votre site WordPress ? Quelle est l'expérience de l'utilisateur ?

De délicieuses micro-interactions enrichissent le récit. Ils ajoutent à l'histoire sans interrompre le flux.

Des micro-interactions bien conçues résistent à l'épreuve du temps. Vous voulez que les utilisateurs le trouvent tout aussi intéressant la 50e fois qu'ils visitent votre site que la première fois.

Ravi de l'utilisateur

"Les micro-interactions les plus agréables aident l'utilisateur à se sentir complètement chez lui. ”

Dans un monde idéal, toutes les pages se chargeront à des vitesses qui ne peuvent pas être capturées par l'œil humain et tout fonctionnera toujours. Mais en réalité, même les meilleurs sites Web rencontrent parfois des problèmes. Les problèmes ne sont peut-être même pas de votre côté - il peut s'agir de la connexion Internet de l'utilisateur, de son appareil particulier ou de tout autre nombre de facteurs externes.

Les micro-interactions sont idéales pour reconnaître ces situations et ajouter une touche de légèreté lorsque les choses tournent mal. Ils diminuent la frustration et créent une transition en douceur d'une action à l'autre.

Lorsque les utilisateurs arrivent sur votre site, vous voulez qu'ils aient l'impression d'y être déjà allés. Comme l'expérience est accueillante. Comme ils sont recherchés et vous êtes personnellement ravi qu'ils soient là.

Les micro-interactions sont votre chance de montrer le côté fantaisiste, humain et réfléchi de votre marque en montrant que vous avez réfléchi à ce qui est important pour l'utilisateur et que vous l'avez parfaitement livré.