Share
Les pages et les sites de marketing ponctuels sont de plus en plus populaires; en particulier, ces "expériences d'interaction ciblée" se sont développées autour de l'industrie du divertissement, des reportages et des présentations de produits. Aujourd'hui, nous allons nous concentrer sur les éléments essentiels qui ont été utilisés dans la construction de inception-explained.com et dans le bilan de l'année 2012 de Mailchimp..
Ces deux sites présentent des similitudes en termes de mise en œuvre technique et des différences marquées à d'autres égards. Nous avons choisi ces deux sites car ils représentent une tendance importante dans la conception d'interactions Web: modification du comportement par défaut de l'interaction de défilement en créant des animations personnalisées et / ou des transformations de contenu déclenchées d'une manière ou d'une autre par la position de défilement. Alors plongeons dans!
Pour ces deux sites, la caractéristique la plus évidente est la manipulation de l'interaction de défilement. Les deux sites ont manipulé l'événement de défilement avec JavaScript pour se comporter différemment d'un document statique par défaut.
La manipulation de l'événement de défilement par Mailchimp est relativement subtile; Bien que le défilement déclenche des modifications en arrière-plan et certains fondus enchaînés de contenu, il existe un comportement de défilement par défaut; la bonne section de contenu défile normalement, offrant une interface accessible pour utiliser le rapport piloté par les données. Le rapport est facilement parcourable de manière secondaire via des liens à gauche qui déclenchent une animation de défilement. Le rapport s'appuie largement sur jQuery Waypoints, un plugin jQuery qui surveille l'événement de défilement pour voir quand un certain "point de passage" a été atteint via scroll. En particulier, certains pseudo-codes peuvent expliquer comment cela serait utilisé pour l'implémentation MailChimp.
Accentsconagua
// Définit tous les éléments de la section principale en tant que points de passage $ (". Section-principale"). Waypoint (fonction (direction) // rappel lorsque le point de passage est atteint, avec la direction de défilement en tant que paramètre var $ this = $ (this ); // cache l'élément de waypoint // supprime la classe actuelle de tous les frères et sœurs qui ne sont pas le waypoint actuel $ this.siblings (). removeClass ("current"); // récupère l'identifiant d'arrière-plan de l'exemple html: // var bgid = $ this.addClass ("current"). data ("bgid"); // récupère l'élément avec un identifiant égal à bgid et ajoute la classe actuelle; supprime la classe actuelle de tous les frères et sœurs $ ("#" + bgid) .addClass ("current"). siblings (). removeClass ("current"); ); Le code ci-dessus est un exemple de ce que MailChimp aurait pu faire pour obtenir certains de ces effets. Les waypoints jQuery seraient également un moyen approprié de créer des éléments de navigation "collants", avec quelque chose comme ceci:
$ ("nav.sticky"). waypoint (fonction (direction) if (direction === "bas") $ (this) .css (position: "fixe");) Inception Explained a une manipulation beaucoup plus complexe du comportement de défilement.
Construit par Matt Dempsey, l’infographie interactive repose largement sur les animations CSS3 et JavaScript basées sur Scrollorama de John Polacek, un plugin jQuery construit pour faire exactement le type de manipulations que Matt a effectué..
Parlons de contenu.
Pour ces deux sites, le contenu est l’une des clés permettant de comprendre les décisions de conception qui ont été prises (comme c’est le cas pour toute conception bien pensée). Expliquer l'aperçu de haut niveau de l'intrigue d'Inception est une tâche très différente de celle consistant à examiner publiquement les réalisations et les échecs de l'année dernière d'une entreprise de services de marketing par courrier électronique..
Pour Inception Explained, l'auteur du contenu a pris un récit relativement complexe et extrait les principaux points de l'intrigue dans un nouveau support..
Ce récit a un artefact "frère" (le film Inception) que le spectateur doit avoir vu auparavant pour s'identifier correctement aux décisions de conception. Le site ne fonctionne pas bien comme une forme de véhicule de résumé de divertissement (dans lequel une personne qui n’a pas vu le film peut obtenir un "résumé" informatif et toujours divertissant de l’histoire). Au lieu de cela, il aide à dissiper la confusion qui règne entre les toiles d'araignées en décomposant les points de retournement principaux et en montrant des indicateurs expliquant ces points de retournement..
Si vous avez vu Inception, vous comprenez que la construction principale de l'intrigue est décomposée en "niveaux", qui sont représentatifs des "rêves dans les rêves". Inception Explained vous guide pas à pas dans ces niveaux en utilisant quelques facteurs visuels constants pour vous aider à réduire la complexité. En particulier, les sept personnages principaux et leurs états sont représentés visuellement par des cercles tout au long du récit vers le bas de la page..
Au-delà, un signifiant de fond du lieu du niveau actuel est également un indicateur; Un avion apparaît pour le niveau "réalité", la camionnette de Yusuf pour le niveau un, le rêve d'Arthur dans un hôtel du deuxième niveau, les montagnes représentant la scène enneigée du troisième niveau et enfin des barres quelque peu vagues qui indiquent probablement les bâtiments de la ville dans le "Limbo". " niveau. Toute personne ayant compris le film comprendrait que toutes ces images sont emblématiques des différents niveaux représentés dans le film..
En haut à droite, une horloge animatrice montre le rapport temps-réalité de chaque niveau; au fur et à mesure que les personnages s'enfoncent dans chaque niveau, le temps diminue (de sorte que les minutes finissent par ressembler à des décennies).
Le graphique est expliqué, et les icônes associées à des animations simples représentent des points de retournement dans le graphique. Les paragraphes explicatifs sont le principal moyen permettant aux utilisateurs de comprendre le contexte des animations et les changements d'état..
La stratégie de contenu de MailChimp pour "A Look Back" est bien sûr très différente de celle de Inception Explained. "A Look Back" est le rapport annuel de MailChimp, résumant les aspects qualitatifs et quantitatifs de leurs performances en 2012..
La stratégie de contenu suit ici moins un récit, mais est segmentée en un semblant de "sous-récits", motivés par le marketing, la messagerie quantitative et une voix forte de la marque. Ces différents sous-récits sont clairement segmentés: "L'application", "Assistance", "Opérations", "Social", "Géographie" et "Bonnes idées" sont les sections décrites dans le nav, en corrélation directe avec les changements visuels dans conception et segmentation du contenu. Cet admirable porte-parole chimpanzé (Freddie) de MailChimp surveille ces sections au début, puis se tourne vers le public à la fin..
MailChimp aborde beaucoup de terrain en termes de stratégie de contenu dans ce rapport; En particulier, l'ampleur de l'impact et de la croissance qu'a réalisés MailChimp au cours de la dernière année est le message principal. Une métrique majeure de la preuve est la première chose dans le premier sous-récit - "E-mails envoyés: 34 796 235 769". C'est un grand nombre de n'importe quoi, et c'est ce qui sert de preuve que MailChimp utilise le meilleur courrier électronique.
C'est une stratégie de "meilleur pied en avant". Cependant, cela ne s'arrête pas là; MailChimp a clairement mis en avant le maintien d'une voix amicale qui correspond à la fantaisie de la mascotte des chimpanzés Freddie. Dans la même section, nous voyons un signifiant "Party-Poopers" (avec 1,9% de la base d'utilisateurs de MailChimp entrant dans cette catégorie).
Cela crée un sentiment de transparence tout en conservant le ton positif et ludique que MailChimp a déjà établi. Il aborde directement le problème, en définissant la métrique comme une expérience amusante et divertissante pour le lecteur. Nous pouvons voir des notes similaires tout au long de la stratégie de contenu de MailChimp.
Nous allons maintenant parler des détails de la mise en œuvre technologique..
Les performances de ces deux sites sont très différentes, principalement à cause d'un facteur important: les bibliothèques de suivi du défilement fonctionnent selon deux paradigmes très différents pour le déclenchement d'événements de défilement..
Dans Scrollorama, le code d'animation est exécuté à chaque défilement; Ce code d'animation anime tous les objets "animables", ce qui entraîne un grand nombre de calculs et de modifications du navigateur. Cependant, pour Inception, c’est l’effet le plus recherché, car chaque pixel est pertinent pour les animations conçues. Ce type d’observation intensive du défilement et de la fonction d’animation subséquente peut entraîner une nouvelle peinture du navigateur à chaque événement de défilement. Malheureusement, pour un site comme Inception Explained, cette technique de suivi de défilement est nécessaire pour conserver avec précision un état d'animation pour chaque position de défilement..
D'autre part, jQuery Waypoints permet de limiter les événements de défilement en définissant un délai d'attente et une variable "didScroll"..
Au-delà, la fonction onScroll a un ensemble de fonctionnalités réduit. en particulier, il vérifie si un point de cheminement particulier a été atteint (d'où son nom) et déclenche des fonctions définies par l'utilisateur lorsque ces points de cheminement sont atteints. Cela permet de beaucoup moins de repeindre les DOM, mais nécessite également un sacrifice de flexibilité et peut ne pas fonctionner aussi bien pour des animations plus complexes basées sur des images clés dérivées de la position de défilement..
Bien que les deux projets aient compressé leur code, nous pouvons examiner certaines des fonctions principales utilisées par les deux sites..
Nous allons d'abord examiner la mise en œuvre des points de cheminement Mailchimp. (Remarque: ce code a été légèrement modifié par rapport à la version originale minifed pour plus de lisibilité.)
ensemble de fonctions \ _active \ _section (index) $ (". section.fixed"). removeClass ("fixed"); $ (". section"). eq (index) .addClass ("fixed"); $ (". site-link.selected"). removeClass ("selected"); $ (". site-nav li: not (: has (#freddie))"). eq (index) .find (". site-link"). addClass ("sélectionné"); $ (". section .content"). waypoint (fonction (événement, direction) var current_section; current_section = $ (this) .parent (". section"); direction === "up" && current_section.index ( )> 0 && (current_section = current_section.prev ()); // peut \ _animate \ _background défini en dehors de ce code peut \ _animate \ _background && (set \ _active \ _section (current_section.index ()); // arrière-plan animé utilise Modernizr pour vérifier si CSS peut être utilisé à la place des animations JS animate_background (current_section.index ())); current_section.attr ("id") === "section-footer" && $ (". site-nav") .fadeOut (); if (direction === "up") renvoie $ (". site-nav"). fadeIn (); Passons en revue ce code pour voir ce qui se passe.
Premièrement, nous voyons une fonction qui reçoit essentiellement un index de la section à rendre active. Il fait certaines choses pour les sections spéciales (comme les photos de Freddie) et les navs également.
L’appel et le rappel de Waypoint déclenchent la set_active_section, et vérifiez dans quelle direction la cible a été atteinte. Mailchimp a également mis la limitation de défilement sur 0.
Mailchimp utilise également Google Analytics pour connaître les sections regardées par les utilisateurs et vérifier combien de temps il leur a fallu pour examiner ces sections, sans doute pour voir le temps / l'engagement que les utilisateurs consacrent à chacune de ces sections. Avoir ces informations permettra à MailChimp de voir le "chemin" utilisateur le plus courant - que les personnes sautent sur la page, passent directement d’une section à l’autre ou parcourent la page de manière séquentielle, en passant le même temps moyen par section..
Un petit mot: la&& L'opérateur agit comme un "si cela alors cela" - quelque chose && quelque chose est quelque peu équivalent à si (quelque chose) quelque chose; as && vérifie que le côté gauche est vrai avant de passer au côté droit. Inception Explained utilise un ensemble très simple de fonctions répétées basées sur Scrollorama.
var a = $ .scrollorama (blocks: ".scrollblock"); a.onBlockChange (function () var b = a.blockIndex; $ ("# console"). css ("display", "block"). text ("onBlockChange | blockIndex:" + b + "| bloc actuel: "+ a.settings.blocks.eq (b) .attr (" id "))); a.animate ("# reality .bg", délai: 300, durée: 35E3, propriété: "à gauche", début: 100, fin: 1100); a.animate ("# reality .bg", delay: 300, durée: 35E3, propriété: "top", début: 120, fin: 340); //… Ce code provient directement du début du script Inception Explained; Nous voyons ici un exemple d'utilisation simple de la fonction animate de Scrollorama (qui est différente de la fonction animate de jQuery). Ces appels consistent essentiellement à enregistrer des images clés d'éléments à surveiller et à exécuter par Scrollorama; Par exemple, le premier appel animé a un retard de 300 pixels, une durée de 35e3 (ou 35k), une valeur initiale de 100 et une valeur finale de 1100..
Cela signifie essentiellement ce qui suit:
Inception Explained a 300 appels .animate () différents similaires à celui-ci.
Nous pouvons voir sur ces deux sites une manipulation d'interaction similaire, avec des objectifs très différents et des effets significativement divergents..
MailChimp et Inception Explained nous ont montré l’importance de la stratégie de contenu et du choix du bon outil pour le poste; de plus, nous pouvons nous attendre à voir l’interaction de défilement se développer davantage, car les appareils tactiles continuent de conquérir des parts de marché et les gestes de balayage / défilement sont encore développés en tant que motif d’interaction standard..
