Share
Pagine e siti di marketing unici sono sempre più popolari; in particolare, queste "esperienze di interazione mirate" sono cresciute attorno all'industria dell'intrattenimento, alle relazioni e ai lanci di prodotto. Oggi, ci concentreremo sui dadi e bulloni che sono entrati nella costruzione di inception-explained.com e l'anno 2012 di Mailchimp in revisione.
Entrambi questi siti hanno alcune somiglianze in termini di implementazione tecnica e differenze nette in altri modi. Abbiamo scelto questi due siti perché rappresentano una grande tendenza nella progettazione dell'interazione Web: modifica del comportamento predefinito dell'interazione di scorrimento creando animazioni personalizzate e / o trasformazioni di contenuto attivate in qualche modo dalla posizione di scorrimento. Quindi tuffiamoci dentro!
Per entrambi questi siti, la caratteristica più ovvia è la manipolazione dell'interazione di scorrimento. Entrambi i siti hanno manipolato l'evento scroll con JavaScript per comportarsi in modo diverso rispetto a un documento statico predefinito.
La manipolazione di Mailchimp dell'evento di scorrimento è relativamente sottile; Mentre lo scorrimento attiva le modifiche di sfondo e alcune dissolvenze incrociate del contenuto, esiste un comportamento di scorrimento predefinito; la sezione del contenuto corretta scorre normalmente, offrendo un'interfaccia accessibile per consumare il report basato sui dati. Il report è facilmente percorribile in modo secondario tramite i collegamenti a sinistra, che attivano un'animazione di scorrimento. Il rapporto si basa molto su jQuery Waypoints, un plugin jQuery che controlla l'evento di scorrimento per vedere quando un determinato "waypoint" è stato raggiunto tramite scroll. In particolare, alcuni pseudo-codice possono spiegare come questo sarebbe usato per l'implementazione di MailChimp.
Accentsconagua
// Definisce tutti gli elementi di .main-section come waypoint $ (". Main-section"). Waypoint (function (direction) // callback quando viene raggiunto il waypoint, con la direzione di scroll come un parametro var $ this = $ (this ; // caching dell'elemento waypoint // rimuove la classe corrente da tutti i fratelli che non sono il waypoint corrente $ this.siblings (). removeClass ("current"); // ottiene l'ID background dall'esempio html: // var bgid = $ this.addClass ("current"). data ("bgid"); // ottiene l'elemento con un id uguale al bgid e aggiunge la classe corrente; rimuovere la classe corrente da tutti i fratelli $ ("#" + bgid) .addClass ("current"). siblings (). removeClass ("current"); ); Il codice sopra riportato è un esempio di ciò che MailChimp avrebbe potuto fare per ottenere alcuni di questi effetti. jQuery Waypoint sarebbe anche un modo adeguato per creare elementi di navigazione "appiccicosi", con qualcosa di simile a questo:
$ ("nav.sticky"). waypoint (function (direction) if (direction === "down") $ (this) .css (position: "fixed");) Inception Explained ha una manipolazione molto più coinvolgente del comportamento di scorrimento.
Costruito da Matt Dempsey, l'infografica interattiva si affida molto alle animazioni CSS3 e alle animazioni basate su JavaScript basate su Scrollorama di John Polacek, un plugin jQuery costruito fondamentalmente per fare esattamente i tipi di manipolazioni che Matt ha fatto.
Parliamo di contenuti.
Per entrambi questi siti, il contenuto è una delle chiavi per comprendere le decisioni progettuali che sono state prese (come è vero per qualsiasi progetto ben congegnato). Spiegare la panoramica della trama di alto livello di Inception è un compito molto diverso rispetto alla revisione pubblica delle realizzazioni e dei fallimenti dello scorso anno di un'azienda di servizi di email marketing.
Per Inception Explained, l'autore del contenuto ha preso una narrativa relativamente complessa ed ha estratto i punti della trama primaria in un nuovo mezzo.
Questa narrazione ha un artefatto "fratello" (il film Inception) che lo spettatore deve aver visto in precedenza per identificarsi adeguatamente con le decisioni di progettazione. Il sito non funziona bene come una forma di veicolo per l'intrattenimento (in cui qualcuno che non ha visto il film può ottenere un "senso" informativo e ancora divertente della storia). Invece, serve per aiutare a liberare le ragnatele di confusione abbattendo i punti di svolta primari e mostrando gli indicatori che spiegano quei punti di svolta.
Se hai visto Inception, comprendi che la struttura primaria della trama è suddivisa in "livelli", che sono rappresentativi di "sogni nei sogni". Inception Explained ti porta attraverso questi livelli uno alla volta, utilizzando alcuni fattori visivi costanti per aiutare a ridurre la complessità. In particolare, i sette personaggi principali e i loro stati sono rappresentati visivamente da cerchi attraverso la narrazione verso la parte inferiore della pagina.
Oltre a questo, un indicatore di sfondo della sede del livello attuale è anche un indicatore; Viene mostrato un aereo per il livello "realtà", il furgone di Yusuf per Level One, il sogno di Arthur in un hotel in Level Two, le montagne che indicano la scena innevata del Livello tre e infine alcuni bar vaghi che probabilmente indicano gli edifici della città nel "Limbo" "livello. Tutte queste immagini, come chiunque abbia visto il film avrebbe capito, sono iconiche dei diversi livelli rappresentati nel film.
Un orologio animato è mostrato in alto a destra, che mostra il rapporto del tempo con la realtà in ogni livello; man mano che i personaggi entrano più in profondità in ogni livello, il tempo rallenta (in modo che i minuti alla fine sembrino decenni).
La trama è spiegata e le icone abbinate a semplici animazioni rappresentano i punti di svolta nella trama. I paragrafi esplicativi sono il principale veicolo per gli utenti per comprendere il contesto delle animazioni e dei cambiamenti di stato.
La strategia per i contenuti di MailChimp per "A Look Back" è molto diversa, ovviamente, rispetto a Inception Explained. "A Look Back" è il rapporto annuale di MailChimp, che riassume gli aspetti qualitativi e quantitativi delle loro prestazioni nel 2012.
La strategia dei contenuti qui segue meno di una narrativa, e invece è segmentata in una parvenza di "sotto-narrazioni", guidata dal marketing, dalla messaggistica quantitativa e da una forte voce del marchio. Queste diverse sub-narrative sono chiaramente segmentate: "L'app", "Supporto", "Operazioni", "Sociale", "Geografia" e "Buone idee" sono le sezioni delineate nel nav, direttamente correlate ai cambiamenti visivi nel design e segmentazione dei contenuti. Queste sezioni sono state raccolte dall'ammirevole scagnozzo del portavoce di MailChimp (Freddie) che ha osservato la città di Atlanta all'inizio, e poi si è voltata per salutare il pubblico alla fine.
MailChimp affronta molti aspetti in termini di strategia dei contenuti in questo rapporto; in particolare, la portata dell'impatto e della crescita che MailChimp ha realizzato nell'ultimo anno è il messaggio principale. Un importante parametro di prova è la prima cosa nella prima sotto-narrazione - "Email inviate: 34.796.235.769". Questo è un gran numero di nulla, e questo è ciò che serve come prova che MailChimp fa meglio la posta elettronica.
Questa è una strategia "best-foot-forward". Tuttavia, non finisce qui; MailChimp ha reso chiaro il punto di mantenere una voce amichevole che corrisponda al capriccio della mascotte Freddie di Chimp. Nella stessa sezione, vediamo un significante di "Party-Poopers" (con l'1,9% della base di utenti di MailChimp che rientra in questa categoria).
Ciò garantisce un senso di trasparenza pur mantenendo il tono generale positivo e giocoso che MailChimp ha prestabilito. Affronta direttamente il male, inquadrando la metrica come un'esperienza divertente e divertente per il lettore. Possiamo vedere note simili in tutta la strategia di contenuto per MailChimp.
Ora passeremo a parlare dei dettagli di implementazione tecnologica.
C'è una netta differenza nelle prestazioni di questi due siti, principalmente a causa di uno dei principali fattori: le librerie a scorrimento operano su due paradigmi molto diversi per l'attivazione degli eventi di scorrimento.
In Scrollorama, il codice di animazione viene eseguito su ogni scroll; questo codice di animazione anima tutti gli oggetti "animate-able", causando una grande quantità di calcoli e ridisegno del browser. Tuttavia, per Inception spiegato, questo è l'effetto più desiderato, poiché ogni pixel è pertinente alle animazioni progettate. Questo tipo di sorveglianza intensiva e la successiva funzione di animazione possono rendere il browser ridipinto su ogni evento di scorrimento. Sfortunatamente, per un sito come Inception Explained, questa tecnica di scrolling è necessaria per mantenere accuratamente uno stato di animazione per ogni singola posizione di scorrimento.
D'altra parte, jQuery Waypoint consente la limitazione degli eventi di scorrimento impostando un timeout e una variabile "didScroll".
Oltre a ciò, la funzione onScroll ha un set ridotto di funzionalità; in particolare, controlla se un determinato waypoint è stato raggiunto (da cui il nome) e attiva le funzioni definite dall'utente quando vengono raggiunti i waypoint. Ciò consente molto meno ridipingere il DOM, ma richiede anche un sacrificio di flessibilità e potrebbe non funzionare altrettanto bene per animazioni più complesse basate su fotogrammi chiave derivati dalla posizione di scorrimento.
Mentre entrambi i progetti hanno compresso il loro codice, possiamo dare un'occhiata ad alcune delle funzioni principali utilizzate dai due siti.
Vedremo prima l'implementazione di Waypoint di Mailchimp. (Nota: questo codice è stato leggermente modificato dalla versione minifed originale per la leggibilità.)
function set \ _active \ _section (index) $ (". section.fixed"). removeClass ("fixed"); $ ( "Sezione. ") Eq (index) .addClass (" fisso").; $ ( "Sito-link.selected. ") RemoveClass (" selezionato."); $ (". site-nav li: not (: has (#freddie))"). eq (index) .find (". site-link"). addClass ("selected"); $ (". sezione .content"). waypoint (funzione (evento, direzione) var current_section; current_section = $ (this) .parent (". section"); direction === "up" && current_section.index ( )> 0 && (current_section = current_section.prev ()); // can \ _animate \ _background impostato al di fuori di questo codice può \ _animate \ _background && (set \ _active \ _section (current_section.index ()); // anima sfondo usa Modernizr per verificare se è possibile utilizzare i CSS al posto delle animazioni JS animate_background (current_section.index ())); current_section.attr ("id") === "section-footer" && $ (". site-nav") .fadeOut (); if (direction === "up") restituisce $ (". site-nav"). fadeIn (); Quindi passiamo attraverso questo codice per vedere cosa sta succedendo.
Innanzitutto, vediamo una funzione che essenzialmente riceve un indice della sezione da rendere attiva. Fa alcune cose per sezioni speciali (come le foto di Freddie) e navs.
La chiamata Waypoint e il callback attivano il set_active_section, e controllare per quale direzione è stato raggiunto il target. Mailchimp imposta anche la limitazione dello scroll a 0.
Mailchimp sta anche utilizzando Google Analytics per vedere quali sezioni stanno guardando le persone, e controllando quanto tempo ci sono voluti per esaminare le sezioni presumibilmente per vedere quanto tempo / impegno le persone stanno investendo in ciascuna delle sezioni. Avere questa informazione permetterà a MailChimp di vedere il "percorso" dell'utente più comune - se le persone saltano sulla pagina, si spostano direttamente in una sezione o un'altra, o passano attraverso la pagina in sequenza, spendendo lo stesso ammontare medio di tempo per sezione.
Una breve nota: il&& l'operatore agisce come "se questo è quello" - qualcosa e & qualcos'altro è in qualche modo equivalente a se (qualcosa) qualcosa di simile; come && controlla che il lato sinistro sia vero prima di spostarsi sul lato destro. Inception Explained utilizza un insieme molto semplice di funzioni ripetute basate su Scrollorama.
var a = $ .scrollorama (blocks: ".scrollblock"); a.onBlockChange (function () var b = a.blockIndex; $ ("# console"). css ("display", "block"). text ("onBlockChange | blockIndex:" + b + "| blocco corrente: "+ a.settings.blocks.eq (b) .attr (" id "))); a.animate ("# reality .bg", ritardo: 300, durata: 35E3, proprietà: "sinistra", inizio: 100, fine: 1100); a.animate ("# reality .bg", ritardo: 300, durata: 35E3, proprietà: "top", inizio: 120, fine: 340); // ... Questo codice viene preso direttamente dall'inizio della sceneggiatura Inception Explained; qui, vediamo un esempio di uso diretto della funzione animata di Scrollorama (che è diversa dalla funzione animata di jQuery). Queste chiamate sono essenzialmente la registrazione di fotogrammi chiave per gli elementi per Scrollorama da guardare ed eseguire; ad esempio, la prima chiamata animata ha un ritardo di 300 pixel, una durata di 35e3 (o 35k), un valore iniziale di 100 e un valore finale di 1100.
Questo essenzialmente significa quanto segue:
Inception Explained ha 300 diverse chiamate .animate () simili a questa.
Possiamo vedere da entrambi questi siti una manipolazione dell'interazione simile, con obiettivi molto diversi e effetti significativamente divergenti.
MailChimp e Inception Explained ci hanno mostrato l'importanza della strategia dei contenuti e la scelta dello strumento giusto per il lavoro; inoltre, possiamo aspettarci di vedere l'interazione di scorrimento svilupparsi ulteriormente, mentre i dispositivi touch continuano a conquistare quote di mercato e i gesti di scorrimento / scorrimento sono ulteriormente sviluppati come modello di interazione standard.
