Quel est l'intérêt des animations fadeUp sur les pages de destination du site Web?
Récemment, j'ai remarqué que de nombreuses pages d'accueil de sites Web utilisent des animations fadeUp sur le contenu de la page.
la page d'accueil de Spotify est un bon exemple.
Je suis curieux de savoir pourquoi ils font ça.
Pour moi, cela semble être une utilisation inutile de l'animation. Le site fonctionnerait tout aussi bien sans lui. J'imagine qu'il se chargerait un peu plus rapidement sans les animations. Et il serait probablement plus facile pour les lecteurs de scanner rapidement les informations sur la page.
Y a-t-il eu des recherches sur ce sujet? Je ne trouve aucun article en discutant.
Tout d'abord, appelons les choses par son nom: dans ce cas, lorsque vous dites animation, vous voulez dire transition
Tout ne doit pas nécessairement avoir une fonction, les valeurs esthétiques signifient généralement plus que la fonction (triste mais vrai). C'est fondamentalement l'histoire de l'humanité et de la civilisation. Une Rolex en or vous donnera l'heure aussi précisément qu'une montre numérique bon marché. Mais ... préférez-vous une Rolex en or ou une montre numérique pas chère? Même en considérant la durée comme un différentiel (une Rolex sera certainement plus durable qu'une montre numérique bon marché), vous pourriez acheter 1000 montres numériques pour le prix d'une Rolex en or.
Les transitions sont destinées à créer un focus sur les éléments , et en tant que telles, elles sont extrêmement puissantes. Personnellement, dans notre studio, nous ne considérons même pas un site sans transitions: lorsque nous travaillons sur des wireframes, les transitions sont incluses dans l'ensemble de la planification, y compris toutes les parties de cette transition (effet, time in, time out, etc.)
De Améliorez votre expérience utilisateur avec des transitions animées
Les animations n'offrent pas seulement des goodies esthétiques, mais peuvent également être de véritables améliorateurs de l'expérience utilisateur. Il est également essentiel de trouver le bon équilibre entre le plaisir et la fonction et de vous assurer que votre flux d'utilisateurs est excellent sans animations. Une bonne transition est une transition qui n'est pas envahissante, améliore l'expérience utilisateur et est amusante en même temps.
Vous avez donné l'exemple de Spotify , et la convivialité de Spotify est connue pour être vraiment mauvaise, pourtant .... diriez-vous qu'ils font mal à cause de cela? N'aimeriez-vous pas avoir seulement 1/100e de Spotify et vous accrocher à la mauvaise UX? Et ce n'est qu'un exemple extrême. Vous dites que des transitions comme celles-ci sont inutiles, mais il est évident que certaines personnes pensent le contraire.
À mon humble avis, ces transitions attirent l'attention en tant que blocs de contenu (vous verrez qu'elles s'animent à chaque clic en utilisant chargement paresseux , bien que ce soit juste anecdotique, ils auraient pu se charger sans cette technique et avoir juste une transition), donc ils attirent l'attention sur le contenu à l'intérieur de ces blocs. Pour être honnête, je dirais que ce n'est pas très efficace car ils concentrent leur attention sur les téléphones au lieu du message, mais bon, le moche UX fait également partie de leur marque et je suppose qu'ils auraient pu tester cela
Bref , tout revient aux tests et recherches de chaque site, puis étudiez les résultats: les transitions affectent-elles négativement l'UX du site? Si c'est le cas, alors c'est mauvais. Sinon, pourquoi s'inquiéter? S'ils apportent quelque chose à la table ... eh bien, la réponse est évidente.
Lecture supplémentaire
Je ne peux pas vous dire la raison exacte pour laquelle Spotify a choisi de le faire, mais je peux vous dire pourquoi je pourrais l'utiliser.
L'exemple de page que vous avez partagé ici (Spotify) semble utiliser une technique AJAX connue par certains sous le nom de "chargement paresseux". C'est là que les éléments sont uniquement chargés dans la page juste avant leur apparition au bas de la fenêtre d'affichage, ce qui signifie que le navigateur ne charge que de minuscules blocs d'informations à la fois plutôt que de faire attendre l'utilisateur pendant qu'il charge la page entière.
Dans le cas de l'exemple que vous avez partagé (Spotify), l'animation est complétée en utilisant une combinaison de CSS et JavaScript (probablement une forme de JQuery), ce qui signifie que les animations sont extrêmement légères et ne doivent être codées et chargées qu'une seule fois mais peuvent toujours être appliqué à tous les éléments animés.
En plus de cela, l'inclusion d'éléments subtils tels qu'une petite animation lumineuse, donne au produit le sentiment que quelqu'un a pris soin de la conception et de la construction ainsi que de transmettre plus de la `` personnalité '' de la marque.
Des touches subtiles comme ces animations peuvent faire une grande différence dans la façon dont les utilisateurs interprètent le produit.