Corso di Laurea Magistrale in Informatica
Umanistica
R
ELAZIONE
ScrollAStory.js:
una libreria per la creazione di pagine web
di scrollytelling
Candidato:
Rachele Bizzarri
Indice
1 Introduzione ______________________________________________________ 1
2 Raccontare online: la narrazione in rete ed il coinvolgimento degli utenti ___ 5 2.1 L’efficacia della divulgazione ______________________________________ 7 2.2 Incrementare il coinvolgimento utilizzando lo storytelling ______________ 11 2.3 Digital storytelling _____________________________________________ 13 2.4 Scrollytelling __________________________________________________ 15
3 Anatomia tecnica dello scrollytelling _________________________________ 21 3.1 Guidelines di esperti ____________________________________________ 22 3.2 Stato dell’arte _________________________________________________ 25 3.3 Linee guida per una standardizzazione ______________________________ 40 3.4 Librerie JavaScript per lo scrollytelling _____________________________ 42
4 ScrollAStory.js ___________________________________________________ 45 4.1 Progettazione della libreria _______________________________________ 47 4.2 Implementazione della libreria ____________________________________ 49
4.2.1 Livello di astrazione ________________________________________ 49 4.2.2 Class-based behaviour _______________________________________ 50 4.2.3 Le sezioni di ScrollAStory.js __________________________________ 51 4.2.4 Punti di ancoraggio _________________________________________ 74 4.3 Struttura di una pagina di ScrollAStory.js ___________________________ 75 4.4 Struttura e funzionamento della libreria _____________________________ 77 4.4.1 Dati interni di ScrollAStory.js _________________________________ 79 4.4.2 Metodi di ScrollAStroy.js ____________________________________ 83
5 Scroll A Story Page Editor _________________________________________ 96 5.1 Struttura dell’editor _____________________________________________ 99 5.2 Funzionalità del pannello di configurazione _________________________ 102 5.3 Implementazione dell’Editor _____________________________________ 107
6 Validazione _____________________________________________________ 110 6.1 Replica di un prodotto esistente: Il Crollo del Ponte di Genova __________ 111 6.2 Composizione pratica: Il menhir Staurotomea di Carpignano Salentino ___ 117
7 Conclusioni _____________________________________________________ 124
Bibliografia ______________________________________________________ 129
1
Introduzione
La narrazione è una delle più antiche pratiche radicate nell’uomo, collegata com’è ad un intento di comprensione e spiegazione dell’esperienza umana, e ogni cultura sembra trovare una tecnica di racconto più congeniale agli usi e ai costumi che le sono propri storicamente e culturalmente, in base anche al substrato tecnologico.
Da che esistono gli uomini, esiste la narrazione: le scritte rupestri raccontano delle partite di caccia e del loro esito; i papiri egizi delle imprese dei faraoni e dei loro conti; i testi greci e latini le gesta di divinità o dell’imperatore; i bardi celtici le leggende e le leggi; i trovatori i cavalieri e l’amor cortese; i poeti di amore e saggezza.
L’invenzione della scrittura, della stampa, della rete: tutte queste scoperte hanno creato il substrato tecnologico che ha permesso una maggiore e capillare diffusione non solo delle narrazioni, ma anche delle informazioni, della storia e delle conoscenze. Se prima, figure come i bardi e i cantastorie permettevano un accesso alle informazioni a un ampio pubblico, adesso questo ruolo viene ampiamente svolto da Internet, e ogni documento e pagina web inserito all’interno della rete, è uno dei tanti tasselli dell'odierna rete di informazione. La rete diventa oggi un ripetitore di storie e narrazioni da cui la popolazione connessa trae informazioni, intrattenimento e conoscenze.
Data l’infinita vastità della rete e il costante flusso di informazioni a cui ogni giorno siamo sottoposti, gli accorgimenti tipici della narrazione permettono a questi tasselli di diventare qualcosa di più: è qui che nasce quello che oggi viene chiamato digital
storytelling, che altro non è che la metodologia del racconto resa tramite
strumentazioni digitali.
Va comunque detto che l’evoluzione tecnologica, oltre a modificare i metodi con cui vengono raccontate le storie, le informazioni e le conoscenze, ha portato all’entrata in scena di nuovi dispositivi tecnologici, quali personal computer, smartphone e e-book reader, attraverso i quali vengono meno tutte le azioni quasi rituali che accompagnavano la fruizione di una qualsivoglia tipologia di narrazione, sia intrattenitiva che informativa.
Andando indietro nel tempo, una delle azioni ormai pressoché dimenticate è senza ombra di dubbio lo srotolamento della pergamena, un gesto che sembra tanto banale quanto simbolico: dava l’impressione di star scoprendo, di star portando alla luce informazioni nascoste nelle pieghe della pergamena: un figurativo discernimento delle informazioni e della realtà.
L'azione di scroll è l'odierna metafora dello srotolamento delle pergamene, quindi quale miglior tecnica di digital storytelling se non lo scrollytelling può permettere di riallacciarsi a questa pratica ormai dimenticata?
La tecnica in questione è estremamente intuitiva e ormai radicata nella prassi: basta continuare a scrollare1 il sito web per portare alla luce le informazioni, per scoprire come finirà la storia narrata: come lo scriba srotolava il suo papiro per leggerlo al suo faraone, così l’utente scrolla la pagina per informarsi, conoscere e imparare.
È questa metafora a dare slancio alla tesi di ricerca qui presentata: lo scrollytelling, per la sua capacità di semplificare la comprensione, potrebbe essere una delle modalità più innovative e immediate del racconto online? Potrebbe incrementare l’interesse degli utenti della rete a soffermarsi sul sito sul quale stanno navigando, anziché continuare
con il loro zapping digitale? Sicuramente l’utilizzo di un impianto narrativo alla base genera quel coinvolgimento emotivo indispensabile a trattenere l’attenzione del lettore.
Per poter rispondere a queste domande, sono stati fatti studi sulla metodologia di visualizzazione in questione, cercando di capire se fosse possibile trovare una standardizzazione degli elementi più comuni in questi prodotti, al fine di realizzare un modulo che permettesse la produzione di scala di altri prodotti che seguono questo particolare paradigma, permettendo una sua maggiore diffusione online.
Data la grande semplicità di fruizione del paradigma di visualizzazione dello
scrollytelling, ma la sua perlopiù complessa implementazione tecnica, si è scelto di
realizzare un prodotto che permettesse di facilitare i creatori di contenuti web nella realizzazione di questi prodotti, rendendo il lavoro progettuale il più fluido possibile.
Come prima istanza di questo lavoro, al Capitolo 2 (Raccontare online: la narrazione
in rete ed il coinvolgimento degli utenti), vengono spiegate il contesto e le motivazioni
che hanno portato ad una sempre maggior presenza di prodotti di digital storytelling online, focalizzandosi in ultimo su quella che è la metodologia visuale dello
scrollytelling e fornendo una prima anticipazione delle sue caratteristiche prettamente
visive e coinvolgenti. Successivamente, nel Capitolo 3 (Anatomia tecnica dello
scrollytelling), vengono approfondite quelle che sono le caratteristiche tecniche del
paradigma di visualizzazione in questione, riportando indicazioni di esperti del settore della programmazione web, oltre che la presentazione di alcuni prodotti definibili di
scrollytelling, arrivando ad una teorizzazione di linee guida per la standardizzazione
di questi prodotti, ad oggi scorrelati tra di loro.
Il Capitolo 4 (ScrollAStory.js) è dedicato alla presentazione del prodotto realizzato in seno a questo progetto di tesi: una libreria JavaScript class-based che permette al suo utente, idealmente un creatore di contenuti, di realizzare siti di scrollytelling rispettando delle gerarchie di elementi HTML aventi delle classi predefinite, in base alla tipologia di componente animato che si intende realizzare.
Data la prevalenza di prodotti di scrollytelling in ambito del long form journalism, la branca del giornalismo il cui obiettivo è la realizzazione di lunghi articoli contenenti differenti tipologie di componenti semiotiche, è risultato opportuno constatare la
possibilità di utilizzo della libreria creata, come base tecnica programmativa di impaginazione per editor volti alla scrittura online. A tale scopo, nel capitolo 5 (Scroll
A Story Page Editor) è riportata la progettazione e l'implementazione di un editor web
based per la composizione di pagine di scrollytelling che utilizzano ScrollAStory.js come libreria di appoggio per le canoniche animazioni del paradigma di visualizzazione in questione.
Una volta completata l’implementazione della libreria e dell’editor web based, è stata effettuata una loro validazione, riportata nel Capitolo 6 (Validazione, per l’appunto) andando a replicare un prodotto di scrollytelling già esistente tramite ambedue i prodotti descritti in questa tesi, implementando successivamente un oggetto ex novo.
2
Raccontare online: la narrazione in rete ed il
coinvolgimento degli utenti
Il raggio d’azione della rete, combinato all’efficacia coinvolgente dell’impianto narrativo, permette ai creatori di contenuti web2 di far avvicinare alle informazioni
immesse online un numero sempre più alto di utenti del mondo digitale.
È ormai assodato che la rete sia un enorme raccoglitore di documenti, informazioni, notizie e conoscenze. È sempre più difficile far risaltare il proprio prodotto web all’interno di questo contenitore, ma grazie all’utilizzo di un impianto narrativo è possibile raggiungere questo obiettivo, riuscendo altresì a mantenere alto il livello di attenzione che viene prestata al sito web da parte di chi lo naviga.
Questo escamotage, questa “presa in prestito” del metodo comunicativo tipico della narrazione, ben si sposa con quelle che sono le odierne esigenze delle informazioni
2 Content creator: figura lavorativa in ambito di sviluppo web il cui compito si basa sulla ricerca sia
delle migliori soluzioni tecniche da adottare per la realizzazione di un sito web, che del corretto progetto comunicativo inteso in forma contenutistica, presentando i prodotti online nella maniera più idonea ed efficace.
online: il contrasto alle fake news e una più capillare diffusione dei saperi, ormai sempre più messi da parte.
L’utente spesso si sofferma solo ed esclusivamente al titolo accattivante di una notizia, senza andare ad approfondire ciò che viene riportato, diventando un probabile diffusore di fake news. Per contrastare a questa che è forse una delle più grandi problematiche della rete di informazioni del secolo, la realizzazione di contenuti coinvolgenti, differenti dai soliti statici articoli informativi, avvalora non solo l’operato di chi realizza l’eventuale inchiesta giornalistica, ma permette al contempo di puntare verso la diffusione di notizie accreditate e verificabili dall’utente stesso, tramite eventuali inserti di approfondimento quali video, foto, rimandi a pagine terze e così via.
Quando si parla di informazione, è opportuno ricordarsi il suo reale significato: l’informazione è l’atto “dell’informare o dell’informarsi, nel senso di dare o ricevere notizia […], intesa come libero accesso alla verità attraverso i mezzi che interpretano e formano la pubblica opinione”, e nell’uso più comune del termine significa “notizia, dato o elemento che consente di avere conoscenza più o meno esatta di fatti, situazioni, modi di essere” (Treccani, 2019).
L’informazione, quindi, contempla anche il sapere e le conoscenze, che vanno diffuse in maniera sempre più capillare all’interno dello strato sociale attuale, ormai sempre più connesso. Quale miglior mezzo se non la rete, con i suoi circa 4,39 miliardi di utenti in tutto il mondo3, può far riavvicinare le persone al nuovo e vecchio patrimonio umano culturale, sia materiale che immateriale, travestendo queste informazioni da narrazioni?
2.1
L’efficacia della divulgazione
divulgare (ant. divolgare) v. tr. [dal lat. divulgare, comp. di di(s)-1 e vulgare «diffondere tra il volgo», der. di vulgus «volgo»] (io divulgo, tu divulghi, ecc.). – 1. Rendere noto a tutti o a molti, diffondere: d. un segreto; d. una notizia, ecc., anche per mezzo della stampa e degli altri canali d’informazione. Come intr. pron., diffondersi, divenire largamente noto: la voce del fatto si divulgò in un attimo; la sua fama si è ormai divulgata. 2. Rendere accessibili a un più vasto pubblico, per mezzo di un’esposizione semplice e piana, nozioni scientifiche e tecniche: d. una dottrina, una teoria, un’idea, una scoperta; d. la scienza; Cicerone divulgò fra i Romani il pensiero filosofico greco. Con sign. più concreto, ma poco com., diffondere, nel senso di rendere largamente disponibili mezzi di cultura, o anche altri oggetti, soprattutto mediante una produzione su scala industriale o comunque a prezzi accessibili: d. libri, stampe, registrazioni musicali in edizioni economiche; d. l’uso degli apparecchi. ◆
Part. pass. divulgato, anche come agg., noto ai più: è una notizia ormai divulgata; nozioni scientifiche divulgate anche tra i profani. (Treccani, 2019)
Piero Angela, nel suo intervento Le vie della divulgazione scientifica4, presente nella sezione Enciclopedia del sito della Treccani, scrive che è necessario saper adattare le scelte di stile e di registro sulla base della cultura e delle competenze del pubblico verso cui si indirizza una comunicazione riguardante un determinato campo del sapere. Se la comunicazione in questione avviene tra due individui competenti, sarà possibile utilizzare un linguaggio settoriale specifico, consci del fatto che anche i termini più tecnici verranno compresi dal nostro interlocutore. Nel caso in cui la comunicazione avvenga tra persone il cui tipo di specializzazione è diverso, la questione cambia ed
4 http://www.treccani.it/enciclopedia/le-vie-della-divulgazione-scientifica_%28XXI-Secolo%29/ -
entra in gioco la necessità di adottare un linguaggio estremamente divulgativo così che l’altro possa capire qualcosa che non conosce.
Divulgare, come riporta la definizione tratta dal Treccani, permette di “rendere accessibili a un più vasto pubblico, per mezzo di un’esposizione semplice e piana, nozioni scientifiche e tecniche”, ampliando la conoscenza dell’interlocutore e arricchendo il suo personale bagaglio culturale.
Molte volte, però, avviene un fraintendimento, in quanto un pregiudizio diffuso concepisce la divulgazione come atto rivolto a persone poco istruite. Così non è: l’obiettivo della divulgazione è il permettere la comprensione di branche della conoscenza a qualsiasi individuo che non dispone necessariamente di competenze in quella particolare area del sapere, adempiendo al compito di estendere la conoscenza ad un pubblico più vasto, senza screditare l’operato o la figura di chi è oggettivamente un esperto.
Spesso, sfortunatamente, quando viene prodotto materiale espositivo riguardante un qualsiasi settore del sapere, non viene rivolta sufficiente attenzione all'aspetto divulgativo e alle scelte espressive che potrebbero permettere una maggiore estensione del sapere anche all'esterno della cerchia degli specialisti. A conseguenza di questa mancata attenzione, l’interlocutore, non riuscendo a decodificare il messaggio intriso di concetti e parole tecniche, può sentirsi scoraggiato fino al punto di rinunciare alla ricerca di un accesso ad altri tipi di conoscenza. Questo impedisce lo svolgimento di quel ruolo che Piero Angela ritiene fondamentale per la comunicazione culturale: “accendere i cervelli”.
Come fare quindi per accendere i cervelli dei vari interlocutori? Bisogna giocare sulle loro emozioni e sul loro coinvolgimento. A sostegno di questa tesi, è possibile continuare a riallacciarsi al testo di Angela, in cui riporta un esperimento fatto dal Dipartimento di Psicologia presso un’Università americana5, in cui alcuni studenti
vennero sottoposti a un test di lettura di articoli mentre erano costantemente monitorati da un poligrafo, i cui dati segnalavano una maggiore o minore attenzione o interesse del soggetto per ciò che stava leggendo. L’esperimento in questione rileva uno dei vari aspetti fondamentali del funzionamento del cervello umano: ogni volta che ci troviamo di fronte a una situazione positiva o negativa, il centro emotivo fa scattare il sistema nervoso, consentendo alla corteccia cerebrale di memorizzare un particolare evento tramite nuove ramificazioni all’interno della rete neuronale.
Semplificando ulteriormente: il cervello si “accende” e memorizza le esperienze che ritiene significative, rappresentate da pulsioni emotive piacevoli o meno. Da ciò, portando l'argomentazione al tema di questa ricerca, ne consegue la necessità di agire sulle pulsioni emotive, sul coinvolgimento e l’inclusione dell’individuo per far sì che questi riesca ad apprendere e comprendere in maniera totale un’informazione, innescando così su scala sempre più ampia quel processo di curiosa ricerca di nuova conoscenza che alimenta una maggiore circolazione culturale all’interno della società nella sua interezza.
La divulgazione può essere realizzata in vari modi: tramite un articolo di giornale fortemente improntato alla spiegazione di qualche nuova scoperta scientifica o tecnologica, con un saggio realizzato al fine di diffondere ai più qualche conoscenza specifica, in un programma televisivo in cui il conduttore adotta un linguaggio semplice ed efficace per riferirsi ad un ampio bacino d’utenza. Tutte queste e le molte altre tipologie divulgative che possono essere attuate per far sì che la collettività arricchisca il proprio bagaglio culturale, condividono la presenza e la necessità di una comunicazione ben pensata; è quindi indubbio ritenere la divulgazione una vera e propria forma comunicativa efficace, efficiente e fondamentale per la diffusione del sapere.
un’università americana, alcuni studenti sono stati sottoposti, uno alla volta, a un curioso test. Dovevano leggere articoli di giornali o di settimanali mentre un poligrafo (quella che impropriamente viene chiamata la macchina della verità) registrava le loro leggere variazioni di battito cardiaco, tensione muscolare, sudorazione, pressione arteriosa ecc., attraverso una serie di sensori. [...]
È importante ricordare e tenere presente il fatto che la comunicazione di ciò che viene realizzato e di ciò che viene scoperto, è una componente fondamentale per qualsiasi ambito della conoscenza: dall’entrata in vigore di una nuova legge alla scoperta di un nuovo scavo archeologico, dall’aumento di tasse alla traduzione di testo antico.
Con il passare del tempo, le modalità che permettono di comunicare con l’esterno scoperte, innovazioni e quant’altro sono enormemente cambiate: viviamo ormai in un mondo globalizzato in cui le informazioni viaggiano tramite la rete, alla quale è possibile accedere in ogni momento e in ogni luogo grazie alle innovazioni tecnologiche degli ultimi decenni. Questo avanzamento nella tecnica della comunicazione che ne ha rivoluzionato le modalità, ha influenzato anche l’ambito divulgativo delle conoscenze, ampliando i bacini di riferimento e incrementando le possibilità di raggiungere più individui possibili. In ultima conseguenza, si è quindi resa possibile l’attuazione di un vasto insieme di nuove pratiche che permettono un maggior coinvolgimento dell’utente finale.
Quando si tratta di comunicare (e quindi anche divulgare) qualcosa a qualcuno, è bene ricordare non solo a chi ci stiamo rivolgendo, ma è necessario rendersi conto di cosa e come vogliamo comunicare, senza dimenticare che l’interlocutore ricorda, apprende e fruisce piacevolmente della conoscenza, quando quest’ultima riesce a far leva sulla sua emotività.
Una delle modalità comunicative che permette di ottenere un coinvolgimento del referente all’interno della comunicazione è data dall’uso di un impianto narrativo con cui organizzare ed esporre la vicenda oggetto della comunicazione. Questa pratica viene definita con il termine inglese di storytelling.
2.2
Incrementare il coinvolgimento utilizzando lo
storytelling
storytelling (story-telling), s. m. inv. Affabulazione, arte di scrivere o raccontare storie catturando l’attenzione e l’interesse del pubblico. Dall’ingl. storytelling (‘narrazione di storie’). (Treccani, 2019)
Fare storytelling, come suggerisce la definizione tratta dal dizionario online Treccani6, significa sfruttare nella comunicazione le tecniche caratteristiche della narrazione, ovvero tramite raffigurazioni, emozioni, ispirazioni e interpretazioni, modalità proprie di una storia, dandole una veste più coinvolgente ed enfatica.
La forma del racconto intorno a metà degli anni Novanta inizia a ricevere un enorme successo, imponendosi in tutti i settori della società, trascendendo da confini politici, culturali e professionali, realizzando quel fenomeno che è stato definito dai sociologi come narrative turn (Salmon, 2008).
Giulio Lughi, titolare della cattedra di Interactive Storytelling del corso di laurea magistrale in Comunicazione e Culture dei Media presso l’Università di Torino, nel suo saggio intitolato Interactive Storytelling, contenuto in I media digitali e
l'interazione uomo macchina, libro a cura di Simone Arcagni e pubblicato da Arcane
nel 20157, spiega la motivazione che si cela dietro l’utilizzo della parola inglese: i termini italiani come “racconto”, “romanzo”, “narrazione” o “narrativa”, rimangono limitati all’ambiente letterario e alla comunicazione prettamente orale, il termine
6 (Treccani, 2019).
7 Lughi, G. (2015). Interactive Storytelling. In S. Arcagni, I media digitali e l'interazione uomo macchina
“storytelling” invece può essere applicato anche a campi del visuale e dell’immagine in movimento, oltre al fatto che il termine riesce a comprende testi sia di fiction che di
non fiction quali giornalismo, formazione, pubblicità e quant’altro.
L’attività svolta tramite lo storytelling è quindi quella di realizzare delle rappresentazioni visive, sonore e testuali volte all’evocazione di emozioni o riflessioni nella persona che fruisce il prodotto realizzato, grazie anche alla creazione di simulazioni del reale che permettono così all’utente finale di prendere parte alla narrazione.
Lo sviluppo di questa pratica parte da due principi fondamentali, una fondata sulla consapevolezza che le esperienze umane sono organizzate tramite il racconto, l’altra sul fatto che è attraverso il processo della narrazione che si attiva la sensibilità culturale che permette di avviare processi riflessivi e formativi.
Chi si avvale di questa pratica vede aumentato il potenziale della condivisione della conoscenza e, tramite l’uso della struttura narrativa, aumenta la probabilità che avvenga un apprendimento da parte dell’interlocutore (Serrat, 2017).
2.3
Digital storytelling
Grazie allo sviluppo delle nuove tecnologie e l’ormai costante presenza di computer e strumentazioni digitali, lo storytelling sta emergendo all’interno dello scenario culturale, in quanto strumento sempre più diffuso per la sua adattabilità al contesto mediatico e per l'opportunità che consente di favorire la comprensione di elementi complessi grazie al suo aspetto coinvolgente.
Ciò che nasce dalla commistione tra digitale e narrazione è quello che viene chiamato
digital storytelling, pratica che emerge come parte di un ampio insieme di cambiamenti
culturali, comprensivo dei profondi cambiamenti nei modelli di comunicazione dei media, prefiggendosi come modalità principe che permette di coinvolgere i visitatori delle istituzioni culturali. Proprio grazie a questi cambiamenti culturali indotti dal substrato tecnologico del presente, la narrazione accattivante è divenuta la metodologia più naturale anche per parlare di cultura: una tradizionale pagina web non attrae molto l’utente che si trova a navigarla; una storia multimediale, al contrario, permette un maggiore coinvolgimento che porta ad aumentare il livello di attenzione dell’utente (Negrini & Di Blas, 2014).
Questa pratica sta assumendo forme diverse mentre si estende a campi che tradizionalmente verrebbero definiti come diversi e lontani, rispetto a quelli a cui viene abitualmente associato: all’interno di ambiti professionali di grafica e design, al fine di esaltare il potere narrativo di immagini e oggetti, nasce il visual storytelling; in ambito scolastico ed educativo, per la sua efficacia nel favorire l'apprendimento, si sviluppa l’educational storytelling; nel mondo giornalistico, guidato dalla tradizione narrativa anglosassone del "to tell a good story", si sviluppa il journalism storytelling; all’interno del mondo pubblicitario, per sopperire alla crescente svalutazione nei consumatori del legame affettivo un tempo incarnato nel logo aziendale, si sviluppa l’advertising storytelling per poter trovare nuove strategie di engagement dei clienti;
nel mondo delle aziende, che cercano di personalizzarsi e distinguersi dalle altre tramite il racconto della loro storia, emerge il corporate storytelling; in ambito divulgativo infine, grazie alla possibilità di mostrare in maniera più completa e comprensibile dati reali nella loro complessità, si genera una modalità specifica definita data storytelling (Lughi, 2015).
La narrazione, grazie alla sua forma empirica, agile e flessibile, vista come un elemento organizzatore che non usufruisce di modalità rigide, entra all’interno delle visualizzazioni digitali, che si ampliano e migliorano, coinvolgendo e intrattenendo l’utente, dandogli la sensazione di essere parte integrante del prodotto/esperienza. L’interattività permette a quest’ultimo di gestire la narrazione, passando da componente passiva a componente attiva (Lughi, 2015).
Nel suo saggio, Lughi riporta una classificazione delle diverse tipologie di interactive storytelling: computazionale, lo storytelling interattivo con un forte legame con gli studi di computer science, orientato alla modernizzazione e alla formalizzazione dei processi narrativi; partecipativo, caratterizzato dalle possibilità offerte dalla rete e dai social network; transmediale, la cui peculiarità risiede nella contaminazione e negli incroci di diversi canali trasmissivi del processo narrativo; urbano, storytelling interattivo che si realizza grazie alle potenzialità che il posizionamento fisico dell’utente può svolgere all’interno dello spazio mediatico della città, avvalendosi dell’uso dei dispositivi mobili.
La possibilità di percorrere e modificare i testi è la base su cui poggia l’interactive storytelling. Questo tipo di approccio comunicativo ben si sposa con le nuove necessità comunicative che vedono nella comunicazione multimediale8 un nuovo spiraglio di inclusione e di incremento dell’audience.
La vera essenza di quelli che sono i vantaggi messi a disposizione dalla comunicazione multimediale è data dalla possibilità di coinvolgere un’audience più ampia, costituita
da vari individui con esigenze diverse tra di loro, catturandone l’attenzione al fine di propagare un messaggio culturale. Questa peculiarità, sommata al coinvolgimento emotivo permesso dal racconto di una storia, permette di coinvolgere con maggiori risultati i fruitori del messaggio comunicativo realizzato; anche nel campo dei beni culturali lo storytelling e tutte le sue possibili applicazioni online vengono viste come la metodologia ottimale per un maggior coinvolgimento del pubblico di riferimento (Paolini & Di Blas, 2013).
2.4
Scrollytelling
Il mondo delle visualizzazioni online è vasto e variegato, ma un paradigma che negli ultimi anni è stato adottato da molti autori è quello dello scrollytelling, una forma di storytelling digitale interattivo basato unicamente sull’azione dell’utente che scorre una pagina web (da qui “scroll”) tramite la rotellina di scorrimento del mouse. Un prodotto viene definito “di scrollytelling” quando il contenuto di una pagina web cambia o si manifesta allo scrolling dell’utente sulla pagina (Goldenberg, How to implement scrollytelling with six different libraries, 2019), rendendo così il racconto in oggetto più dinamico e articolato, grazie alla possibilità di combinare testi, foto, effetti grafici e animazioni.
Il fatto di avere tutte le animazioni e gli eventi collegati all’azione di scroll, permette di evitare confusione nell’utente, in quanto non è costretto a capire come funziona il sito, permettendo la realizzazione di una fruizione che non necessita di nessun tipo di sforzo da parte dell’utente.
Un altro vantaggio di questo paradigma è che le animazioni e le parti dinamiche della pagina sono direttamente sincronizzate con la velocità di lettura dell’utente, ed è
sempre possibile spostarsi avanti o indietro su altri elementi, permettendo così al lettore di controllare il flusso della lettura secondo le proprie esigenze.
Se pensiamo a un video come un media passivo a scorrimento indipendente, e a una pagina completamente interattiva basata su pulsanti e altri controller come un media dinamico a controllo totale, lo scrollytelling si pone a metà fra i due: più lineare di una pagina a controllo totale, ma non totalmente passivo come un video.
I layout standard dei classici siti web si basano sulla divisione della viewport9 in più parti (vedi Figura 1), al cui interno vengono posizionati vari link ipertestuali che rimandano l’utente a diverse parti del sito o a siti esterni.
Figura 1: Prototipi standard di layout per pagine web.
Questa strutturazione, in prima istanza, si basa sulla conoscenza collettiva che ognuno possiede riguardo la navigazione in rete: viene dato per assodato il fatto che qualsiasi utente che naviga il sito, conosce le funzionalità riportate nelle varie parti che lo compongono.
Utilizzando le immagini presenti in Figura 1, si assume che all’interno delle parti nominate come main menu10 siano riportati i link ipertestuali che collegano le varie pagine web del sito; nelle parti sub menu11, i link alle “sottosezioni” in cui sono riportate delle informazioni aggiuntive al tema trattato; nel footer12 le informazioni quali collegamenti alle normative di privacy, indirizzi mail, numeri di telefono, et similia; nelle parti header13 informazioni che fungono da introduzione al sito; nella parte denominata logo generalmente è presente il logo del sito, dell’azienda a cui fa riferimento il sito o l’immagine utilizzata come identificativa del contenuto riportato nella pagina web; infine la content area14 è la parte adibita al contenimento delle informazioni vere e proprie che si desidera inserire online.
Queste conoscenze sono spesso considerate conoscenze collettive interiorizzate, ma spesso può non essere così. Oltre a questa considerazione, va tenuto conto del fatto che molte volte, troppe informazioni aggiuntive e di contorno generano distrazione, facendo sì che l’utente inizi a prestare minor attenzione a ciò che è riportato all’interno del canonico content area perché distratto dai vari link ipertestuali, bottoni che attivano o disattivano funzionalità, se non addirittura inviano ad ulteriori pagine web terze, cosa che può portare ad una perdita di flusso sul sito in questione, in quanto una volta aperta una nuova pagina web, può succedere che l’utente prosegua la sua navigazione senza tornare.
La presenza di così tante fonti di distrazione è ovviamente deleteria per l’intento che si vuol raggiungere con la narrazione online: si adottano regole e stili tipici del racconto anche per far soffermare maggiormente gli utenti sulla pagina web, creando un prodotto sia efficace in termini di coinvolgimento emotivo da parte di chi fruisce, sia efficiente in termini di flusso di utenti.
10 Menu principale.
11 Sotto menu.
Oltre a quanto scritto finora, lo scrollytelling riesce a sintetizzare un modello di consumo e una modalità narrativa composta da testi lunghi che portano il lettore a soffermarsi molto su un articolo scorrendolo nella sua interezza, riportando in auge questo esercizio ormai creduto superato dalle logiche del web. Per questo, il paradigma di visualizzazione in questione, si integra bene con quello che viene chiamato digital
longform journalism, una rivoluzione del giornalismo online che una volta approdato
sul web si era convinto di dover puntare su contenuti brevi e corti, in quanto si riteneva che i lettori online fossero meno propensi alla lettura delle notizie in rete, ma recenti ricerche hanno portato alla luce il fatto che non è così (Splendore, 2017).
La testata giornalistica pioniera di questo paradigma di visualizzazione è il New York Times, che nel 2012 pubblica l’articolo Snow Fall: The Avalanche at Tunnel Creek15,
il primo articolo realizzato secondo questo paradigma di visualizzazione; nel 2013 la testata europea L’Equipe, lancia L’Equipe Explore che si autodefinisce “il grande reportage digitale, interattivo e multimediale”.
L’obiettivo di un racconto che risponde a logiche di scrollytelling è quello di attivare l’impegno e la partecipazione del lettore tramite il suo coinvolgimento, attivabile mediante la semplice azione di scrolling della pagina web visualizzata (Bianda, 2017). L’efficacia di questo paradigma, come riporta Robert Kosara16 nel suo sito eagereyes17, risiede nel fatto che anziché dover cliccare su un pulsante, l’utente navigherà con maggiore fluidità all’interno della storia mediante la sola azione dello
15 http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek – ultimo accesso
in data 20 marzo 2019.
16 Ricercatore a Tableau Software che prima di unirsi alla compagnia nel 2012, era professore associato
alla University of North Carolina di Charlotte (https://research.tableau.com/user/robert-kosara - ultimo accesso in data 19 marzo 2019)
scroll del mouse18; questo perché con i gesti di scorrimento sui trackpad e i touch screen l’azione di scrolling è ormai diventata automatica.
Lo scrollytelling trasforma l’azione di scroll in una dimensione narrativa che combacia con l’estensione spaziale19 della storia, rendendola elemento narrativo: anche nel caso
in cui le storie siano pensate per il web, queste occupano uno spazio all’interno della pagina del browser, sfruttando il quale sarà possibile ottenere un maggior coinvolgimento dei lettori.
A vantaggio di questa nuova visione della dimensione fisica, alcuni studi hanno sfatato il mito secondo il quale gli articoli sul web dovessero rispettare determinati canoni di lunghezza, dove la brevità faceva da padrona indiscussa al fine di catturare l'interesse dell'utente; emerge quindi che il lettore, se ne viene catturato l'interesse, non abbandona la lettura anche se potrebbe richiedere molto tempo (Splendore, 2017).
Il coinvolgimento del lettore deve quindi essere una costante nella produzione di articoli online o di qualsiasi artefatto volto alla comunicazione mediante la rete, così da poter far nascere nell’utente finale l’interesse per ciò che sta visualizzando, permettendo una completa lettura e fruizione di ciò che viene pubblicato.
Questo coinvolgimento si realizza anche grazie alla tecnica dello storytelling, struttura portante di quegli articoli che vengono definiti con l’etichetta di longform journalism. Oltre a questa nuova consapevolezza, la già accennata preferenza allo scroll rispetto al click, rende lo scrollytelling un paradigma di visualizzazione dalle grandissime potenzialità di riuscita.
3
Anatomia tecnica dello scrollytelling
Per poter realizzare un modello di standardizzazione che permetta l’implementazione di un template per prodotti definibili di scrollytelling, quale è l’obiettivo di questa tesi, è opportuno analizzare e fornire lo stato dell’arte del dominio in questione.
Lo scrollytelling nasce e si sviluppa direttamente nel mondo del web publishing, e non è stato mai oggetto di studi e analisi accademiche: questo ci porta ad una analisi tecnica basata principalmente sulle pagine che usano questa tecnica e su articoli e blog che commentano e danno linee guida sulla pubblicazione web, più che su articolo scientifici e libri di testo.
L’analisi è stata quindi effettuata seguendo sia le linee guida fornite da Bostock nel suo post How To Scroll20, sia quelle di Kosara nel suo The Scrollytelling Scourge, mentre i siti presi in considerazione sono tratti dalle sezioni Continuous Scrolling e
Scrollytelling del post Scrolling In Data Visualization21, pubblicato sul sito personale di Jim Vallandingham, software developer che lavora come Senior Data Visualization e Data Science Engineer presso la Zymergen, in quanto ritenuti esemplificativi del prodotto comunicativo in questione.
20 https://bost.ocks.org/mike/scroll/ - ultimo accesso in data 19 marzo 2019.
3.1
Guidelines di esperti
Mike Bostock, il creatore della libreria grafica d3.js22, uno degli strumenti più utilizzati
in rete per la gestione e successiva visualizzazione di dati tramite grafici online, nel post How To Scroll pubblicato il 3 novembre 2014 sul suo sito web personale23, riporta che già cinque anni fa l’interazione basata sullo scrolling delle pagine web era divenuta popolare per le realizzazioni di storytelling interattivi e successivamente fornisce quelle che lui definisce “le regole” per permettere un uso efficace dell’interazione in questione.
Come primo punto, riporta che generalmente l’azione di scroll viene preferita al click:
scrollare, come riporta anche Kosara nel suo sito web, è ormai pratica onnipresente e,
grazie anche al fatto che non necessita di nessun tipo di coordinazione occhio-mano (caratteristica peculiare dell’azione di click), viene generalmente preferita dagli utenti della rete. In più lo scorrimento risulta utile per le storie narrative, visto che la loro struttura è principalmente lineare e monodimensionale: questo permette di non sovraccaricare l’utente/lettore di scelte, stimolazione inevitabile quando si forniscono pulsanti da cliccare che rimandano a sezioni diverse che potrebbero non seguire il classico flusso lineare di una narrazione.
Bostock ritiene che azioni di scroll-jacking24 siano assolutamente da evitare, in quanto genererebbero frustrazione da parte degli utenti finali: lo scroll della pagina deve combaciare con quello che l’utente si aspetta: se è minimo, si aspetta una reazione
22 D3.js è una libreria grafica realizzata con JavaScript che permette di manipolare documenti web
minima, viceversa il contrario. Stesso pensiero lo ritroviamo anche nell’articolo di Kosara, dove scrive che considera inefficaci quei prodotti di scrollytelling in cui sono inseriti dei blocchi alla reattività dello scrolling, aggiungendo anche che quest’ultimo non deve essere utilizzato per il solo scopo di attivare animazioni, ma deve generare qualcosa di più.
Va comunque tenuto presente che lo scroll è un gesto definibile come continuo: dall’alto verso il basso o viceversa e da destra verso sinistra o viceversa. Le pagine web invece sono generalmente composte da sezioni definibili come discrete (ad esempio foto, grafici, video e testi). Quindi, com’è possibile realizzare una visualizzazione ottimale che mostri tramite un’azione continua componenti discrete? Bostock riporta due scuole di pensiero che permettono di rispondere a questo problema: una riguarda l’immissione di un limite di scorrimento a posizioni fissate dai limiti dei contenuti, l’altra invece consiste nel lasciare lo scrolling invariato, senza apportare adattamenti alla finestra di visualizzazione. Il primo approccio rende lo scrolling un gesto fatto di componenti discrete, rimuovendo la barra di scroll e lasciando al programmatore web il compito di ipotizzare dove si trovi effettivamente l’utente all’interno della pagina, generando vari problemi: uno potrebbe essere la sovrastima di uno scroll minimo portando all'attivazione di un'intera sezione di visualizzazione che cambia totalmente la vista25 dell’utente, oppure la messa in coda26 di animazioni che fanno ritardare l’azione di scorrimento. Anche il solo fatto di rimuovere la barra di scorrimento, come scrive Kosara, genererebbe nell’utente una sensazione di smarrimento, privandolo sia della possibilità di una stima della lunghezza del prodotto, sia di rendersi conto del punto di navigazione in cui si trova,
25 Vista intesa come parte visibile di una pagina web.
26 Il linguaggio di scripting utilizzato comunemente per la programmazione Web è JavaScript,
linguaggio interpretato e funzionale che utilizza un modello di parallelismo basato su un event loop, un paradigma di programmazione il cui flusso è determinato dal verificarsi di eventi esterni. Tutti gli eventi in questione vengono messi in una coda che contiene anche quelli già verificati ma non ancora processati: per far sì che si verifichi un evento, è necessario quindi che quel particolare evento sia il primo ad essere chiamato, altrimenti è necessario attendere l’esecuzione dell’evento precedentemente attivato.
anche se fornire dei segnaposto (realizzati tipicamente con dei piccoli punti verticali) potrebbe risolvere parte di questa mancanza27. L’altro approccio invece permette di mantenere il comportamento standard dello scrolling, ma genera alterazioni alla visualizzazione in base alla vista corrente. In più la pagina viene divisa in varie schermate o sezioni che permettono di attivare le transizioni dall’una all’altra. Queste transizioni possono essere basate sia sul tempo che sulla posizione; le prime possono essere quindi istantanee, le seconde invece sono regolate dalla velocità che l’utente sceglie per scrollare la sua attuale vista28.
Il fatto di avere un costante feedback della pagina all’azione di scrolling è anch’essa un elemento fondamentale dell’interazione che viene realizzata: questa manipolazione diretta dell’utente sulla pagina, permette a quest’ultimo di cablare al meglio la velocità dello scroll con cui decide di navigare la pagina web. Per far sì che questo si realizzi, i contenuti devono muoversi in proporzione alla quantità di pagina scorsa, rispondendo così in maniera consistente all’input. Il contenuto deve in qualche modo animarsi, ma non in maniera asincrona e incongruente allo scroll; deve essere generata una modifica sulla vista che non si traduce con il semplice avvio di un’animazione di uno dei componenti e che non permette la gestione di tutti i contenuti presenti nella finestra, come scrive anche Kosara.
Data la polifonia di elementi che possono costituire una pagina web (testo, immagini, video, audio), Bostock ritiene che sia indispensabile evitare delle interruzioni al flusso di navigazione; se uno degli elementi costitutivi della pagina ad esempio è un video, suggerisce di avviare la sua riproduzione automaticamente o di fornire all’utente la possibilità di lanciarlo, solo quando la vista coincide esattamente con quella che si suppone essere la posizione degli occhi di quest’ultimo: il suo inserimento a schermo
27 Questi segnaposto permettono all’utente di capire dove si trova all’interno del flusso della pagina,
ma non permettono di effettuare una reale stima della sua lunghezza.
intero è quindi preferibile, in quanto permette di evitare distrazioni dal flusso dell’informazione riportata fino a quel momento.
Il programmatore considera fondamentali anche le modalità di scrolling secondarie offerte dai tasti freccia della tastiera, dai tasti di indirizzamento verso inizio e fine riga e quelli di pagine, ritenendo necessario un eventuale override29 del loro comportamento.
3.2
Stato dell’arte
Al fine di comprendere al meglio come tipicamente vengono strutturate le pagine web che si pongono l’obiettivo di realizzare questo paradigma di visualizzazione, è necessario effettuare uno stato dell’arte di questi prodotti, analizzando le loro funzionalità, i loro layout, le loro componenti e cercare di risalire alla tecnologia web su cui poggiano, così da capire se sia possibile trovare una standardizzazione che può racchiudere la loro realizzazione.
29 In programmazione, l’override è l’operazione di riscrittura di un metodo ereditato da una classe. In
questo caso, dato che la programmazione web si basa principalmente su JavaScript, che è un linguaggio debolmente orientato agli oggetti (a differenza di linguaggi quali C, C++ e Java), è la riscrittura di una particolare funzionalità associata ad un evento: anziché chiamare la callback (funzione passata come parametro ad un’altra funzione) standard, viene implementata una sostitutiva che modificherà l’azione scatenata da quel particolare evento.
The Russia Left Behind – A journey through a heartland on the slow road to ruin
Figura 2. Home Page di The Russia Left Behind, pubblicato sul New York Times in data 13 ottobre 2013.
L’articolo The Russia Left Behind, firmato da Ellen Barry, prodotto da Mike Bostock, Shan Carter e Leslye Davis tramite l’uso della libreria di visualizzazione d3.js, è stato pubblicato sul sito del New York Times30 in data 13 ottobre 2013.
Ciò che è possibile notare dalla sola apertura della pagina è la totale assenza di segnaposto, indicata come fondamentale da Kosara in quanto permette un accesso diretto alle sezioni dell’articolo, evitando all’utente di effettuare uno scrolling “infinito” fino alla sezione che desidera navigare nuovamente.
Una volta “sorpassata” la home e la cartina geografica che permette di contestualizzare il percorso sul quale si concentra l’articolo, la pagina presenta sul lato sinistro la stilizzazione del percorso sopracitato, mentre il resto dello schermo è occupato dall’articolo in cui sono presenti inserti fotografici e video.
Il percorso stilizzato vede modificato lo spessore della sua linea in base alla posizione dell’utente lungo la lunghezza totale della pagina e, difatti, ad ogni azione di scorrimento, questa si modifica seguendo la velocità con cui l’utente interagisce con la pagina.
Figura 3. Struttura pagina web del sito The Russia Left Behind: a sinistra è possibile vedere il percorso stilizzato
che varia in base allo scrolling dell'utente.
Money wins Elections
Figura 4. Home page del sito Money wins Elections.
Il sito Money wins Elections31 è stato realizzato da Tony Chu, product Designer presso la Sift Science Inc. di San Franciso32 per denunciare l’apatia politica americana, realizzato tramite la libreria di visualizzazione d3.
31 http://letsfreecongress.org/ - ultimo accesso in data 30 aprile 2019. 32 https://tonyhschu.ca/ - ultimo accesso in data 30 aprile 2019.
Nelle prime sezioni del sito, lo scroll dell’utente fa animare delle visualizzazioni di dati, spiegate da delle componenti testuali che compaiono o sovraimpresse o alla destra delle visualizzazioni (vedi Figura 5).
Figura 5. Struttura delle prime due sezioni del sito Money wins Elections. A sinistra troviamo la visualizzazione
di dati in forma grafica, a destra la spiegazione di questi.
Le parti finali sono strutturate diversamente: in posizione centrale è presente una didascalia informativa delle risposte ottenute dai dati che vengono visualizzate ai lati di quest’ultima (vedi Figura 6). La loro creazione è guidata dallo scrolling dell’utente, il quale vedrà animare le visualizzazioni secondo la velocità che intende adottare e, nel caso in cui decida di tornare alla visualizzazione precedente, vedrà le componenti animarsi in maniera opposta rispetto a quella che li aveva in qualche modo portati all’interno della viewport.
Figura 6. Ultime sezioni del sito Money wins Elections. Ai lati della componente testuale vengono riportate le
relative visualizzazioni grafiche.
The New York City Marathon – A poem in sights and sounds
Figura 7. Home Page di The New York City Marathon, pubblicato sul New York Times in data 28 ottobre 2014.
L’articolo The New York City Marathon, prodotto da Larry Buchanan, Jon Huang, Becky Lebowitz Hanger, Jeremy White e Margaret Cheatham Williams, pubblicato
sul sito del New York Times33 in data 18 ottobre 2014 è stato implementato utilizzando la libreria jQuery.
Come è possibile vedere nell’immagine riportata di seguito (Figura 8), la struttura del sito è basata sulla presenza di un video a schermo intero con sovraimposta la stilizzazione del percorso della maratona in questione. Allo scroll dell’utente, il percorso si colora seguendo la velocità dello scrolling, facendo attivare le sezioni video successive una volta arrivati ad una determinata altezza che coincide con un punto di trigger34, il quale genera la nuova visualizzazione, a seguito della quale viene mostrato il nome del punto di riferimento sul percorso stilizzato riportato a destra e una frase in sovrimpressione al video.
Figura 8. Struttura pagina web del sito The New York Marathon: a destra è possibile vedere il percorso della
maratona che si colora e varia in base allo scrolling dell'utente.
Nella pagina non sono presenti segnaposto che permettono di navigare la pagina per sezioni, anche se tramite il semplice click del mouse sulla viewport è possibile
accedere alla sezione successiva, senza però poter tornare a quelle precedenti in altro modo se non tramite lo scroll nel senso opposto.
La barra di scroll posizionata a destra permette di fare una stima approssimativa del punto dell’articolo in cui si trova l’utente, evitando di creare in lui senso di smarrimento.
A visual introduction to machine learning
Figura 9. Home page del sito A visual introduction to machine learning, realizzato intorno al luglio del 2015.
Il sito A visual introduction to machine learning35 è uno dei prodotti della
collaborazione tra Tony Chu e Stephanie Yee, che ha portato alla resa di R2D336 una “sperimentazione dell’espressione del pensiero statistico tramite l’uso di un design interattivo”37, ed è realizzato tramite l’uso della libreria d3.
Il sito è strutturato in sezioni in cui sono riportate componenti testuali che permettono di comprendere e spiegare come funzionano gli algoritmi di machine learning, il cui funzionamento è rappresentato da dei grafici (vedi Figura 10).
35 http://www.r2d3.us/visual-intro-to-machine-learning-part-1/ - ultimo accesso in data 30 aprile 2019. 36 http://www.r2d3.us/ - ultimo accesso in data 30 aprile 2019.
37 “R2D3 is an experiment in expressing statistical thinking with interactive design”, tratto dal sito di
Figura 10. Prima sezione del sito A visual introduction to machine learning.
Ad ogni azione di scroll dell’utente, la viewport viene aggiornata: la componente testuale scorre dall’alto verso il basso e la parte di visualizzazione dei grafici viene composta in base alla posizione dell’utente all’interno della pagina, animandosi secondo le velocità scelte da quest’ultimo.
Le animazioni che permettono ad un nuovo componente di palesarsi all’interno della pagina, come quelle che modificano il grafico che vanno a commentare, rispettano i criteri di coerenza, in quanto un elemento che compare o si modifica secondo una particolare animazione, scomparirà e riprenderà le forme precedenti con l’animazione inversa.
L’assenza di segnaposto non permette all’utente di navigare in maniera non sequenziale, ma questo sito è senz’altro un esempio calzante di divulgazione digitale, in quanto si avvale di metodologie incrociate (statistica e web design) per spiegare in maniera visiva il funzionamento di algoritmi di machine learning, dando la possibilità anche ai non esperti di potersi fare un’idea riguardo a questa particolare branca dell’informatica.
The Dawn Wall - El Capitan’s Most Unwelcoming Route
Figura 11. Home Page di The Dawn Wall, pubblicato sul New York Times in data 09 gennaio 2015.
L’articolo The Dawn Wall, prodotto da Shan Carter, Wilson Andrews, Derek Watkins e Joe Ward, pubblicato sul sito del New York Times38 in data 9 gennaio 2015 è stato implementato utilizzando la libreria d3. Le fotografie presenti nell’articolo sono di xRez Studio39, mentre il modello 3D è stato realizzato da M. Jaboyedoff, B. Matasci e A. Guerrin dell’Università di Losanna.
Com’è possibile vedere dalla successiva Figura 12, l’articolo è basato sulla visualizzazione del modello 3D della montagna (posta sulla destra), con sovraimpresso il percorso seguito dagli scalatori, tracciato in arancio.
Una volta passati dalla home page alla prima sezione, il modello 3D si anima, ponendosi in posizione orizzontale seguendo la velocità di scroll decisa dall’utente. Questa azione genera la comparsa del primo componente aggiuntivo sulla sinistra, comprendente di riquadro con immagine e testo sottostante. Lo scrolling permette di avvicendarsi nel percorso intrapreso dagli scalatori: ad ogni azione di scroll
38 https://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan.html - ultimo
accesso in data 29 aprile 2019.
corrisponde sia lo spostamento del modello 3D, sia il “soprasso” del riquadro esplicativo associato a quel particolare punto del percorso scalato.
Ogni volta che si passa da una sezione ad un’altra (ovvero da un punto specifico del percorso riportato), sulla mappa sovraimpressa al modello 3D viene evidenziato il punto in questione tramite la sua resa grafica in grassetto; accorgimento poco eclatante ma comunque efficace per l’utente che vuol capire in che punto del percorso si trova in quel particolare momento.
Figura 12. Struttura del sito The Dawn Wall.
L’assenza di segnaposto sembra ormai onnipresente negli articoli sopra riportati. Questo particolare accorgimento permetterebbe all’utente finale di “saltare” da una sezione all’altra senza la necessità di dover “percorrere” nuovamente tutta la pagina.
Resurrecting a Dragon
Figura 13. Home page del sito Resurrectiong a Dragon, pubblicato sul sito del National Geographic nel giugno
del 2017.
Il sito Resurrecting a Dragon40 del National Geographic è stato realizzato da Brian T. Jacobs, Manuel Canales, Daisy Chung. Le componenti testuali sono di Michael Greshko. Il modello 3D, basato sul fossile di un nodosauro presente nel Royal Tyrrell Museum of Palaeontology, è stato realizzato da Corey Jaskolski. Il concept artistico è di Davide Bonadonna e la parte di ricerca è di Patricia Healy.
Il sito riporta un tour virtuale che permette di ricostruire il nodosauro dal modello 3D, facendo immergere l’utente nel mondo della paleontologia.
La prima cosa che è possibile notare è la presenza dei segnaposto nella parte destra della pagina, che si animano insieme alla viewport globale in base alla velocità di scrolling adottata dall’utente (vedi Figura 14), ma che non permettono una navigazione non sequenziale della pagina, portando l’utente a dover scrollare avanti o indietro per tornare a uno specifico punto della navigazione.
40 https://www.nationalgeographic.com/magazine/2017/06/nodosaur-3d-interactive-dinosaur-fossil/ -
Figura 14. Struttura delle sezioni che compongono il sito Resurrecting a Dragon; a destra è possibile notare la
presenza dei segnaposto che aiutano l’utente nella stima di durata globale del tour virtuale, oltre alla scrollbar laterale.
Ogni segnaposto coincide con una particolare sezione, strutturata in vari punti trigger che generano informazioni aggiuntive che si palesano sulla pagina (vedi Figura 15).
Figura 15. Struttura di una sezione del sito Resurrecting a Dragon, in cui è possibile notare l'avanzamento del
cerchio verso l’alto, che indica il punto della sezione in cui si trova l’utente, permettendogli di stimare quanto sarà lunga quest’ultima.
Lo scrolling in senso inverso permette di visualizzare le componenti precedenti della sezione, animandole in modo contrario a quello in cui si erano palesate così da dare coerenza alla strutturazione di questo particolare paradigma di visualizzazione.
Cose da non fare: un sito esemplificativo
Figura 16. Home Page di The Water We Eat.
Il sito The Water We Eat41 è stato realizzato da InfoDesignLab42 e la parte di visualizzazione che si ricollega al paradigma dello scrollytelling è interamente implementata tramite jQuery.
Il sito si basa sulla pura attivazione di animazioni che non sono ricollegate alla velocità di interazione che l’utente decide adottare: una volta arrivati ad un punto di trigger, l’animazione viene avviata senza che l’utente possa in qualche modo bloccarla, rallentarla o rilanciarla. Si verifica inoltre il fenomeno dello scroll-jacking, tanto scoraggiato sia da Bostock che Kosara: arrivati ad un particolare punto di trigger, lo scroll viene in qualche modo disattivato, impedendo all’utente di compiere qualsiasi azione sulla pagina e facendo scomparire la scroll-bar laterale, come riportato in Figura 17.
41 http://thewaterweeat.com/ - ultimo accesso in data 1 aprile 2019. 42 https://infodesignlab.com/ - ultimo accesso in data 1 aprile 2019.
Figura 17. Sezione del sito The Water We Eat in cui scompare la scroll-bar laterale a seguito del fenomeno di
scroll-jacking.
Le sezioni successive del sito rispondono alle regole cardine riportate da Bostock e Kosara: lo scrolling delle parti che compongono la sezione è in linea alla velocità che l’utente decide di adottare, e lo scrolling inverso permette di tornare alla visualizzazione precedente con effetto inverso a quello di arrivo alla sezione. Nonostante questo, alcune parti vedono ripetere il fenomeno di scroll-jacking, in quanto la velocità di scroll non è coerente con la velocità di cambiamento e visualizzazioni delle parti che compongono la viewport.
Prevalentemente il sito in questione non è molto in linea con quello che può essere considerato il paradigma di visualizzazione dello scrollytelling: lo scroll-jacking è troppo presente, il ritorno alle sezioni precedenti è praticamente impossibile se non tramite lo scroll inverso della pagina, la maggior parte dei componenti delle sezioni, una volta riportati nella viewport, non si “nascondono” nuovamente se si effettua lo scrolling indietro, molte animazioni risultano non sincronizzate con lo scroll dell’utente e quest’ultimo potrebbe non accorgersi della comparsa di alcune componenti se effettua uno scrolling troppo veloce per le tempistiche decise dal web-designer, causando (per così dire) delle “pagine bianche” in cui l’utente non vede comparire nessun tipo di informazione (vedi Figura 19).
Figura 19. Sezione del sito The Water We Eat in cui le componenti vengono visualizzate con tempistiche che
differiscono dalla velocità di interazione che l'utente decide di adottare, generando delle "pagine bianche" in quanto vuote di informazione.
3.3
Linee guida per una standardizzazione
Come Russell Goldenberg riporta nel suo post How to implement scrollytelling with
six different libraries43, creare una storia che reagisce allo scrolling non è una pratica standardizzata: non esiste nessun modello da seguire per poter implementare qualcosa di solidamente funzionante che segua una qualsivoglia logica narrativa o concettuale standardizzata; tutto ciò che viene realizzato mediante questo paradigma di visualizzazione segue delle logiche proprie.
L’analisi di siti basati su questo metodo di visualizzazione analizzati sopra, ha portato ad una mappatura di elementi e azioni ricorrenti che si susseguono allo scrolling della pagina.
Come è evidente dai siti sopra citati, questa particolare modalità di visualizzazione è ampiamente utilizzata per la realizzazione di quegli articoli detti di longform
journalism, cosa che ha permesso di fare un’analisi sulle basi strutturali su cui poggia
questo nuovo prodotto giornalistico.
Tuomo Hiippala, assistente professore di lingua inglese e digital humanities presso il Dipartimento di Lingue e ricercatore presso il Centre for Applied Language Studies dell’Università di Helsinki, nel suo articolo The multimodality of digital longform
journalism, pubblicato nella rivista Digital Journalism, analizza 12 articoli pubblicati
negli anni 2012 e 2013, fornendo una prima organizzazione e strutturazione che permette di stabilire una sorta di impianto narrativo comune.
• componente testuale che si basa sulla realizzazione di un racconto scritto suddiviso in paragrafi che segue un andamento lineare, accompagnato da fotografie, diagrammi, illustrazioni, video o altre risorse semiotiche;
• fotografie che coprono la viewport della pagina web e che aderiscono alle convenzioni del fotogiornalismo, aggiungendo la possibilità di avere testi sovrapposti ad esse;
• video;
• mappe ed altre tipologie di rappresentazioni geografiche a schermo intero; • layout bidimensionale in cui viene organizzato il contenuto in varie unità che
collaborano per il raggiungimento della comprensione dell’articolo; • animazioni;
• illustrazioni animate o statiche che occupano l’intera pagina.
Dalla sua analisi emerge che l’elemento principale dei longform attorno a cui viene organizzato tutto l’articolo è la componente testuale, con una percentuale del 42% di presenza nei siti44.
L’organizzazione che si cela dietro a questa modalità di visualizzazione prettamente lineare, rappresenta un’ottima scelta per il longform journalism; il testo può incorporare vari modelli semiotici, allineandoli al flusso della narrazione al fine di ampliare il coinvolgimento e la comprensione di ciò che viene scritto: la componente testuale si rivela essere l’aggancio ottimale tra gli altri componenti semiotici dell’articolo.
Hiippala analizza anche le modalità di transizione che vengono utilizzate per passare da un componente semiotico ad un altro. Dal corpus di siti web da lui presi in considerazione, emergono cinque modalità di transizione simmetrica: lo scroll, il
wipe45, il dissolve46, il click e lo zoom. Tra questi, quelli con un ruolo prominente sono
44 Questa forte presenza è stata rilevata anche dall’analisi di altri siti, riportata in 3.2 45 Consiste in un’animazione in cui l’elemento in questione scompare senza dissolvenze.
quelli di scroll e di wipe, vista la loro maggior compatibilità con molti modelli semiotici in questione.
La transizione di scroll risulta poi essere la più utilizzata per le transizioni che muovono dal racconto/testo a fotografie a schermo intero e da illustrazioni animate a piena pagina e racconto/testo.
3.4
Librerie JavaScript per lo scrollytelling
Come spesso succede nel mondo dello sviluppo web, esistono esempi di queste pagine completamente “fatti a mano”, ossia dove la gestione dello scroll e della interazione dei vari elementi è stata interamente programmata dal creatore di contenuti usando JavaScript e CSS, ma esistono anche alcune librerie che, con differenti livelli di astrazione e supporto, permettono di realizzare pagine scrollytelling.
Russell Goldenberg, uno degli editor di The Pudding47, pubblica un articolo sul sito nel gennaio 2017, in cui fornisce una lista delle librerie più utilizzate per l’implementazione di un prodotto che possa essere etichettato come “prodotto di scrollytelling”:
• Waypoints.js: libreria JavaScript realizzata da I Make Web Thing48 che si
integra con jQuery49, Zepto50; supportata anche da Internet Explorer (Waypoints, 2019).
• Scrollstory.js: plugin di jQuery volto alla realizzazione di interazioni basate sullo scroll della pagina web su cui è utilizzata (Williams, 2019).
• Scrollmagic.js: completa riscrittura della precedente Superscrollama, realizzata da John Polacek. La libreria mantiene un approccio object oriented, utilizzando controlli per ogni contenitore di scroll, fornendo la possibilità di annettere varie scene che definiscono cosa accadrà alla pagina e in quale momento (Paepke, 2019).
• Graph-scroll.js: estensione della libreria di visualizzazione d3.js, sviluppata principalmente per gestire gli eventi di scroll sui grafici realizzati con la suddetta libreria (Pearce, 2019).
• In-view.js: libreria che gestisce gli eventi di entrata e uscita di un particolare elemento DOM dal viewport, registrando delle funzioni che gestiscono questi particolari eventi e che prendono in input l’elemento in questione. La libreria manipola e gestisce gli eventi scatenati da un particolare elemento, non permettendo una buona personalizzazione dello scrollytelling (Wiegert, 2019). • Scrollama.js: libreria realizzata da Goldenberg, dove il focus è dato dalle performance dell’interazione tramite la classe IntersectionObserver51, le cui
API forniscono un modo per poter analizzare in maniera asincrona le modifiche di intersezione tra un elemento e il suo contenitore, o un elemento e la viewport
48 http://imakewebthings.com/ - ultimo accesso in data 20 marzo 2019.
49 Libreria JavaScript che facilita la manipolazione degli elementi che compongono il Document Object
Model (DOM), lo standard ufficiale del W3C.
50 Libreria JavaScript compatibile con jQuery che permette di avere circa le stesse funzionalità fornite
da questa, occupando minor spazio, velocizzando quindi il suo caricamento.
generale. (Goldenberg, GitHub - russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver., 2019).
4
ScrollAStory.js
La scelta di realizzare una libreria JavaScript che permettesse l’impostazione e impaginazione di pagine web di scrollytelling, nasce dal desiderio di rendere questo paradigma di narrazione online il più fruibile possibile, in quanto nonostante esistano già librerie che permettono di realizzare pagine web di questo tipo, quest’ultime risultano ancorate a delle dimensioni (spesso in pixel) che il programmatore web deve manipolare al “millimetro” per riuscire ad ottenere una corretta resa grafica, dovendo spesso implementare e assemblare manualmente effetti e animazioni.
L’obiettivo era realizzare una libreria in grado di soddisfare le seguenti esigenze: ● Automazione. Il creatore di contenuti non è un programmatore: deve essergli
data la possibilità di realizzare prodotti di scrollytelling anche senza la minima conoscenza in programmazione. In più le librerie esistenti hanno bisogno di misurazioni “al pixel” per poter funzionare, e questo passaggio deve essere surclassato; la libreria deve quindi adattarsi automaticamente ai contenuti e ai comportamenti scelti dall’utente, adattandosi anche alla dimensione della finestra da cui viene visualizzata.
● Linearità. Nello scrollytelling è possibile creare pagine dinamiche, cariche di animazioni spesso intrecciate tra loro. Questa particolare implementazione,
