On parle d’effet wahou lorsque votre utilisateur est étonné par votre site, lorsque vous arrivez à le surprendre. Cela peut être par la surprise, mais aussi par l’admiration. Cela permettra à l’utilisateur de mieux se concentrer sur vos contenus et de donner plus de valeurs à ce que vous présentez.
.gif)
L’utilisateur se souviendra ensuite plus facilement de vous et percevra qui vous êtes à travers votre personnalité & branding unique. On peut comparer cela à la première impression que peut faire une personne en arrivant à une soirée. Et oui ! Cela peut faire toute la différence.
Oui, cela ne provoquera pas l’effet wahou, mais les animations simples sont la base d’un site internet animé. Cela intervient par exemple lorsque l’on passe la souris sur un bouton. L’inconscient de l’utilisateur est farfelu, il est admis que le manquement à cette règle peut avoir comme conséquence de faire oublier à l’utilisateur qu’il est sur le point de cliquer sur un bouton (l’animation d’un élément au survol permet à l’utilisateur de savoir qu’il peut cliquer dessus, cette technique a remplacé le changement du curseur qu’on peut observer sur certains navigateurs).
Il vous faudra donc pour cela vous rendre dans le selector de classe pour activer l’option « hover ». Cela signifie « lorsque la souris est dessus ». Vous êtes ensuite libre de choisir le paramètre que vous souhaitez modifier. L’importance étant que l’utilisateur note ce changement pour comprendre qu’il s’agit d’un élément cliquable.
N’oubliez pas d’ajouter une transition sur la classe initiale pour rendre l’effet plus « fluide ».
Cette technique est un gros avantage de Webflow. Il faut savoir que le type d’animation que je vais présenter est difficile à réaliser avec d’autres outils et qu’elle demande de vrais compétences si elle doit être réalisée avec du code (par exemple du code Javascript).
Sur Webflow ces animations sont très faciles à réaliser. Pour en créer une il faut se rendre dans le 4e onglet du panneau de gauche nommé « interaction ». À cet endroit, il faudra choisir si la chose que vous souhaitez animer est un élément du site ou la page entière. On parlera notamment de « trigger » c'est à dire l’élément ou page qui doit déclencher l’animation. Ce déclenchement peut intervenir selon plusieurs actions : le chargement d’une page, le scroll d’une personne, la souris qui se déplace etc… Ensuite c’est très simple, il ne vous reste plus qu’à créer l’animation (à noter que Webflow a déjà créé et propose de nombreuses animations comme des effets de slide, de fade etc…).
Attention car vous ne pouvez pas faire ce que vous voulez avec une interaction. Il ne s’agit pas d’un simple hover où vous pourrez modifier n’importe quelle propriété de style. Les interactions portent sur des éléments bien précis comme l’opacité, le display, la taille, la couleur d’un élément. Vous ne pouvez pas modifier le padding d’un élément avec une interaction par exemple.
C’est ce qui permet réellement d’obtenir une expérience immersive. On peut observer cette tendance dans de nombreux sites artistiques. L’objectif pour ces marques est de se démarquer des conventions web classiques afin de mieux mettre en avant leur singularité.
Pour cela, les marques pourront revoir toute la structure et mise en page de leur webdesign. Elles pourront notamment préférer une navigation à travers le site de manière horizontale. Elles créeront une animation pour faire défiler les sections de droite à gauche pendant que l’utilisateur continue de scroller vers le bas. On pourra également imaginer une navigation sous forme de slide. L’utilisateur doit cliquer sur un bouton pour accéder à une autre vue du site (et provoque ainsi une animation de transition).
Cette technique peut véritablement questionner l’utilisateur qui ne pourra pas se reposer sur ses acquis web. Il devra remettre en question sa manière de naviguer sur le web et devra prendre plus de temps pour rechercher certains éléments (il portera alors son attention sur des détails qu’il n’aurait pas forcément abordé avec une navigation classique. Si cela est bien mené, cela pourra provoquer chez l’utilisateur une vrai sensation d’effet wahou.
Sur webflow il est facile d’intégrer des motions design via l’outil Lottie. En partant de votre logiciel Adobe After Effet, vous pouvez créer l’animation de vos rêves, l’exporter en .json et l’intégrer directement dans Webflow en tant que Lottie Animation.
Par la suite, vous pourrez déclencher cette animation selon différents trigger : le déplacement de la souris, le scroll de l’utilisateur etc.. Vous pourrez choisir quand l’animation se termine, si elle doit être jouée en boucle etc..
Bien utilisé, un motion design peut être une arme redoutable pour séduire vos utilisateurs. On peut régulièrement en voir sur des illustrations, démonstration d’application, icons ou même plus grandes images. Il faudra faire attention à la vitesse de chargement de certaines animations qui pourra venir impacter le temps de chargement et les performances de votre site.
Voilà une des raisons pour laquelle le site d’Apple reste (et restera) une référence en terme de webdesign. (Le pôle design a d'ailleurs enquêté à ce sujet en analysant les 5 secrets qui rendent le site d'Apple si puissant)
Pourtant si on jette un oeil au site, il n’y a pas de typographies spéciales, ni de couleurs particulièrement incroyables. Au fur et à mesure des années, Apple a mis en place un webdesign simple, épuré, se basant notamment sur un courant minimaliste.
Mais qu’est ce qui a pu faire son succès ? Cela vient sans nul doute de ses images. Elles sont toutes uniques, d’une qualité incroyable. Elles donnent de la profondeur au design en ajoutant par moment une touche d’humain. C’est notamment la raison pour laquelle vous n’êtes pas capable aujourd’hui de recréer le site d’Apple pour votre propre marque. Il est bon de noter que certaines de ces images sont animées en motion design pour rendre l’effet encore plus unique (ce qui est typique des webdesign Apple).
Retenez bien que cet élément peut faire la différence. De la même manière que peut le faire une bonne phrase d’accroche (copywriting). Cela n’est donc pas forcément lié qu’à des éléments externes relevant purement de l’UI de votre site.
Nous vous recommandons d'ailleurs de découvrir les 6 tendances branding de 2022 qui vous aideront à obtenir cet effet Wahou.
Il y a donc différentes manières d’animer votre site : vous pouvez commencer par créer des animations simples en ajoutant des Hover sur les éléments de base de votre webdesign ; avant de définir des animations plus complexes en utilisant l’onglet « interaction » de Webflow.
Vous pourrez aller encore plus loin en modifiant la navigation naturelle du site (et passer à une navigation horizontale par exemple). Enfin, si votre budget le permet, n’hésitez pas à faire appel à un photographe ou un motion designer. Ils pourront créer des choses qu’aucun autre de vos concurrents ne sera capable de recopier.
Si ces travaux sont réussis, cela pourra créer sans nul doute un effet whaou chez vos utilisateurs. Vous aurez tout gagné en associant cet effet cachou au branding de votre marque et à la personnalité de votre entreprise.
