Comment l'école de cinéma m'a aidé à faire de meilleures expériences utilisateur

Mon récent défi d'animation CSS de soixante jours, en se concentrant sur les créations sur le thème des zombies, a ravivé de façon inattendue mes apprentissages d'école de cinéma. Les parallèles entre le cinéma et l'animation Web, en particulier concernant la narration et les techniques visuelles, se sont révélées étonnamment fortes. S'appuyant sur les idées de Sarah Drasner sur la connexion du développement du théâtre, j'ai exploré comment les principes du film élèvent les expériences Web.

Engager les utilisateurs à travers le récit

Les humains sont intrinsèquement attirés par des histoires. L'intégration du récit, en particulier dans les animations Web, stimule considérablement l'engagement. Pour les animations Web concises, une histoire convaincante n'a besoin que de deux éléments: un personnage et un incident d'incitation .

Ma démo de codepen "Magical Oops" illustre ceci:

L'interaction simple - un rayon rétractable d'un scientifique - réduit un récit miniature. Bien que les téléspectateurs ne se rapportent pas personnellement aux personnages (un scientifique et un zombie), l'événement inattendu génère de l'intrigue. Le ton peut être ludique, sérieux ou quoi que ce soit entre les deux; La clé est pertinente pour le contexte du site Web.

Personfier l'expérience

Les humains anthropomorphisent naturellement. Pensez aux connexions émotionnelles que nous forgeons avec les personnages Pixar. Ce principe s'applique aux animations Web, même sans personnages littéraux. Considérez l'animation festive de Slack en effacer les messages non lus. Cela personnifie subtilement l'accomplissement de l'utilisateur, transformant une action fonctionnelle en un moment narratif enrichissant.

L'ajout de la personnalité aux animations les rend plus mémorables et relatables. L'utilisateur devient un participant à l'histoire, améliorant son expérience globale. Observez le sourire subtil dans mon code de "conducteur de siège mort-vivant": ce petit détail ajoute une profondeur et une relatibilité émotionnelles.

Maîtriser la profondeur visuelle et la focalisation

La cinématographie révolutionnaire en profondeur révolutionnaire de Citizen Kane, permettant à plusieurs avions focaux de rester nets, offre une leçon précieuse. Bien que les développeurs Web ne soient pas limités par les lentilles de la caméra, le principe d'attirer l'attention à travers différentes couches visuelles reste cruciale.

Le défilement de parallaxe et les modèles modaux utilisent déjà ce concept. Mon "Hé, hé, hé!" Codepen démontre la mise au point de déplacement entre les éléments de premier plan et de fond:

À l'inverse, "personne ici sauf nous, les humains… 2", l'inverse, en commençant par un caractère éloigné et en mettant le premier plan à l'origine:

Affichage d'un site Web comme un espace tridimensionnel débloque les possibilités créatives. Des techniques comme l'ombrage, les ombres et la manipulation de taille peuvent simuler la profondeur, comme indiqué dans "Enfin, seul avec mon sandwich…," Où l'ordre d'empilement crée un effet multidimensionnel:

Élévation des animations avec des transitions de scène

Mes animations les plus réussies vont au-delà des interactions simples des personnages. "Zombie Noon 2" déplace intelligemment la perspective du spectateur, les transformant en un personnage dans le récit:

De même, "Lunch (at) Noon" utilise une perspective à la première personne, culminant dans une transition de scène qui se concentre sur un nouveau personnage surprenant:

Le travail stratégique de la caméra - simulée par le biais de techniques d'animation - Engagement de la visionneuse. Bien que toutes les animations ne nécessitent pas de mouvements de caméra spectaculaires, les changements de perspective réfléchis peuvent améliorer considérablement l'expérience utilisateur.

Mon antécédents de cinéma s'est avéré inestimable dans l'animation Web. Les principes de la narration et de la cinématographie se traduisent directement par la création d'expériences en ligne plus attrayantes et mémorables.

Cependant, il est crucial de noter que le récit n'est pas toujours approprié. Une animation axée sur l'histoire sur une page de termes et conditions pourrait être contre-productive. Considérez les préférences des utilisateurs, en particulier celles avec des paramètres de mouvement réduits. Ces techniques sont des outils, et non des solutions universelles, pour améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!