Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Procedure consigliate per la creazione di storie web di successo

Le storie web sono un formato di narrazione coinvolgente, attivabile con tocchi e facilmente condivisibile. Le storie web vengono create utilizzando una sottinsieme del framework AMP. Le storie web offrono agli autori e agli editori l'opportunità di trasformare i loro contenuti in un'esperienza a schermo intero, visivamente ricca e coinvolgente per gli utenti, che privilegia le prestazioni su applicazioni mobili.

Le storie web possono essere gustate a piccole porzioni e i lettori apprezzano immergersi anche nei loro brevi momenti liberi in esperienze coinvolgenti. L'attesa della metropolitana o una pausa caffè offrono l'opportunità agli utenti di fruire di contenuti concentrati. Perciò occorre che anche il più piccolo frammento dei prorpri contenuti sia coinvolgente, applicando le seguenti procedure consigliate per la creazione di storie web soddisfacenti e fruibili 'in pillole'.

Panoramica

Presentiamo un elenco dei principali suggerimenti per la creazione di storie web soddisfacenti e fruibili 'in pillole':

  • Raccontare una storia completa e interessante.
  • Rendere attraente la pagina di copertina con immagini di alta qualità e un titolo accattivante.
  • Creare contenuti visivi con video e immagini che si adattano e riempiono lo schermo dell'utente.
  • L'uso di elementi visivi, in particolare le immagini, permette di dire più di tante parole. Mantenere l'estensione dei testi al di sotto delle 10 parole per pagina.
  • I video più brevi sono i migliori da usare, quindi non inserire video più lunghi di 15 secondi.
  • In molte situazioni le persone preferiscono una visualizzazione senza audio. Rendere i contenuti pertinenti con l'aggiunta di didascalie ai video.
  • Ai lettori piacciono contenuti con diverse pagine da scorrere. Una lunghezza media di 10-20 pagine è sufficiente alla maggior parte degli autori per raccontare buone storie.
  • Non abusare di animazioni o contenuti incorporati e prestare attenzione ai tempi di transizione.

Proporre narrazioni complete

Pianificare l'introduzione della storia, creare un percorso e sviluppare una narrazione completa. Una volta stabilito cosa raccontare, suddividerlo adeguatamente. Ogni pagina di una storia web dovrebbe trasmettere un'unica idea che si integri in modo coerente con le altre.

Contenuti esaurienti e gradevoli

Ogni storia web deve avere una lunghezza minima di 4 pagine e idealmente non superare le 30 pagine. Le storie web devono essere ben raccontate e appetibili. Se richiesto da una storia particolare, è possibile superare le 30 pagine.

Copertine accattivanti

La pagina di copertina è la confezione di una storia web. È la prima cosa che gli spettatori vedranno e, se non la aprono, anche l'unica cosa che vedranno. Occorre renderla attraente! I due principali ingredienti per una buona copertina sono immagini accattivanti e titoli brevi ma memorabili.

Immagini

Utilizzare immagini verticali o video di alta qualità che si adattino allo schermo intero. Può essere utile far sapere ai propri clienti qual è il proprio marchio, includendo una favicon e un logo.

Titolo

Utilizzare titoli chiari e semplici, idealmente meno di 10 parole in meno di 40 caratteri. Includere l'autore e il nome della pubblicazione e aggiungere una data di pubblicazione se la storia dipende dal tempo.

Marchio e data

Il lettore ha bisogno di riconoscere chi ha pubblicato la storia web e quando è stata pubblicata. Includere nella copertina un marchio di attribuzione e una data di pubblicazione. Questo contribuisce a stabilire un rapporto di fiducia e a favorire la fidelizzazione degli utenti che apprezzano i contenuti. Questa Storia Web pubblicata dalla CNN sui viaggi in Italia permette di vedere facilmente a colpo d'occhio l'editore e la data di pubblicazione.

Contenuti visivi piacevoli

I lettori sono attratti maggiormente da immagini di qualità che catturano la loro attenzione e testi che si possono leggere facilmente e rapidamente. Utilizzare principalmente video e immagini di alta qualità, ma non disdegnare l'aggiunta di un pizzico di animazioni brillanti quando opportuno.

Tutte le immagini e i video dovrebbero occupare l'intero schermo con un uso minimo del formato letterbox dove applicabile.

Video

I video sono molto coinvolgenti per i lettori, per cui se ne possono includere sicuramente il maggior numero possibile nelle proprie storie. Inserire video di durata inferiore ai 15 secondi. In caso di video più lunghi, valutare la possibilità di suddividerli in blocchi più piccoli.

Le storie web sono consultate tipicamente in modalità verticale, quindi occorre tenere presenti le seguenti indicazioni:

  • Girare video con dispositivi mobili di alta qualità, se possibile.
  • Girare video da 480p.
  • Girare video ad almeno 24 fotogrammi al secondo.
COSE DA FARE COSE DA EVITARE
Questo video a schermo intero aiuta i lettori a concentrarsi su un unico argomento chiave. Questo video orizzontale non trasmette una sensazione di coinvolgimento e potrebbe distrarre i lettori.

Verificare che i propri contenuti siano accessibili. Ridimensionare i video per lasciare spazio al testo e ai sottotitoli in basso. Non tutti i lettori potranno o vorranno ascoltare l'audio dei contenuti video.

COSE DA FARE COSE DA EVITARE
I sottotitoli aiutano a mantenere vivo il coinvolgimento del pubblico, anche quando non si può ascoltare l'audio. Senza sottotitoli, il pubblico deve essere in grado di ascoltare l'audio per seguire la storia. Ciò potrebbe limitare l'interesse dei contenuti e la possibilità di fruirne.

Immagini

Utilizzare immagini a schermo intero con orientamento verticale e una buona risoluzione (828 x 1.792).

Evitare foto tagliate in orizzontale.

Rimuovere elementi con attenzione

Dare la precedenza agli elementi importanti. Eliminare gli elementi non necessari o che distraggono e assicurarsi che il soggetto principale della foto sia nitido e completo. La parte superiore e inferiore delle immagini potrebbero essere tagliate su alcuni dispositivi, quindi occorre fare dei test.

COSE DA FARE COSE DA EVITARE
Questa immagine è ritagliata per allinearsi al contenuto della pagina e dare rilievo al concetto principale. Ritagliando l'immagine in questo modo, non è chiaro dove il lettore debba concentrare la propria attenzione e quale idea l'immagine intenda trasmettere.

Testo

Il testo deve essere leggibile. La dimensione 24 deve essere la taglia minima utilizzata per i caratteri, ma è consigliabile rendere i caratteri grandi e leggibili al massimo. Differenziare il colore del testo da quello dello sfondo o delle immagini della storia. Non includere immagini o video di solo testo.

COSE DA FARE COSE DA EVITARE
Un contrasto elevato rende le parole più facili da vedere. Con uno scarso contrasto, le parole e le immagini possono confondersi, rendendo difficile la lettura e la storia complicata da seguire.
Evidenziando il testo, le parole possono risaltare meglio e i lettori possono concentrarsi meglio sulla storia. L'uso di testo dal colore chiaro su un'immagine rende le parole difficili da leggere.

Parole in piccoli gruppi

Il testo dovrebbe essere inserito in piccoli gruppi di parole, evitando concentrazioni eccessive. Cercare di usare meno di 200 caratteri per pagina.

Dare il giusto risalto ai dettagli, come se si trattasse di una lista di ingredienti. Occorre renderli adeguatamente disponibili, ma solo se gli utenti li richiedono. Includere lunghi contenuti di testo in appositi allegati alle pagina. Gli allegati a una pagina indicano all'utente che ci sono altri contenuti da leggere. I lettori interessati possono scorrere la pagina verso l'alto sul proprio dispositivo per accedervi.

Una pagina con un contenuto di testo più lungo di una frase potrebbe essere inevitabile. Tuttavia non lasciare che i testi occupino più del 10% delle pagine totali di una storia.

COSE DA FARE COSE DA EVITARE
Cercare di ridurre il testo all'essenziale. La variazione della dimensione e dello stile dei caratteri per suddividere i blocchi di testo può aumentarne la leggibilità. Un grande blocco di testo come il precedente può essere difficile da leggere e ridurre l'interesse degli utenti per la storia.

Animazioni

Le animazioni possono essere coinvolgenti se realizzate con uno scopo, ad esempio aggiungere movimento a immagini statiche. Per animare immagini e risorse si possono utilizzare effetti di entrata in volo, rotazione o dissolvenza.

COSE DA FARE COSE DA EVITARE
Il movimento in questo esempio favorisce la trasmissione dell'idea principale della pagina, aggiungendovi un elemento dinamico. Questa pagina statica può funzionare, ma potrebbe essere non altrettanto coinvolgente per i lettori.

Ma occorre usarle con parsimonia, poiché le animazioni possono diventare sgradevoli se eccessive. Come in una buona ricetta, è meglio evitare di aggiungere troppi aromi e spezie, occorre evitare di abusare delle animazioni.

Il tempismo è fondamentale

Le pagine dovrebbero completarsi rapidamente: un'animazione non dovrebbe impedire a un utente di passare alla pagina successiva, ma nemmeno essere troppo veloce! È importante fornire la giusta combinazione di stile e durata. Ad esempio, le animazioni semplici dovrebbero richiedere meno di 500 millisecondi, ma la panoramica su un'immagine di sfondo dovrebbe durare più a lungo.

COSE DA FARE COSE DA EVITARE
Questo effetto Ken Burns sull'immagine di sfondo è delicata e rende l'esperienza più coinvolgente. Crea un giusto equilibrio con il testo in sovrimpressione. Qui, l'effetto Ken Burns è troppo veloce. Il movimento distrae e rende difficile concentrarsi sul titolo.

Si può essere molto creativi con l'uso dei movimenti. Ad esempio si possono animare più oggetti in una sequenza, invece di spostarli insieme in un unico effetto. Gli elementi possono avere diversi effetti e durate che producono un'animazione ben fatta.

COSE DA FARE COSE DA EVITARE
L'animazione di questi oggetti separatamente rende l'immagine più interessante e divertente. Permette anche di far risaltare in modo più netto ciascun oggetto. L'aggiunta di movimenti rapidi a un blocco grande come questo non aumenta la chiarezza dei contenuti e può essere causa di disturbo.

Abbinamenti perfetti

Lo stile di animazione deve abbinarsi bene all'aspetto estetico di una storia. Occorre utilizzare la libreria delle animazioni disponibili per le storie web per trovare uno stile e un'intensità che si abbinino bene ai contenuti senza disturbare.

COSE DA FARE COSE DA EVITARE
Un effetto che fa scorrere il titolo verso l'alto con dissolvenza nel sottotitolo aiuta il lettore a seguire il contenuto della pagina nel giusto ordine. Questa animazione a rotazione non aggiunge valore alla storia. Invece, crea disturbo visivo e può distrarre i lettori.

Curiosi di novità

Dare agli utenti la curiosità di esplorare ulteriormente la propria storia, incorporando contenuti di terzi, allegando informazioni aggiuntive e inserendo collegamenti ad altri siti.

Inclusioni strategiche

Gli oggetti incorporati forniscono una dimensione aggiuntiva, se pertinenti e presentati in modo piacevole. Includere contenuti pertinenti oltre ad incorporarne, in modo che diventino una parte che si integra nella storia. Potrebbe essere necessario aggiungere interattività con gli oggetti incorporati.

COSE DA FARE COSE DA EVITARE
L'oggetto incorporato in questa pagina si integra bene con il resto del layout. Il titolo, la data e la grafica di sfondo aiutano a migliorare l'aspetto visivo. L'inserimento di un oggetto incorporato da solo nella pagina la fa apparire incompleta e non si integra bene con l'intera storia.

Allegare contenuti aggiuntivi

Mantenere le proprie storie web snelle inserendo i contenuti correlati in allegati. In questo modo, i lettori potranno approfondire l'argomento se vogliono saperne di più sulla storia. I lettori navigano in una storia più facilmente quando contenuti aggiuntivi sono allegati alle pagine relative.

COSE DA FARE COSE DA EVITARE
L'oggetto incorporato in questa pagina si integra bene con il resto del layout. Il titolo, la data e la grafica di sfondo aiutano a migliorare l'aspetto visivo. L'inserimento di un oggetto incorporato da solo nella pagina la fa apparire incompleta e non si integra bene con l'intera storia.

Gli allegati funzionano bene con lunghi blocchi di testo oppure, se la storia contiene l'estratto di un video, puoi includere il video completo come allegato.

COSE DA FARE
L'estratto di un video può essere un elemento utile in una storia AMP. Puoi includere il video integrale come allegato, offrendo ai lettori la possibilità di approfondirne i contenuti.

Collegamenti a nuovi siti

Puoi aggiungere collegamenti ovunque in una pagina di una storia web. Toccando un collegamento viene visualizzato un suggerimento. Questo dice all'utente dove porta il collegamento e gli consente di confermare l'azione prima di uscire dalla storia.

COSE DA FARE COSE DA EVITARE
I collegamenti in questa pagina sono chiaramente contrassegnati e circondati da contenuti correlati. Non interferiscono con la navigazione della storia. I link in questa pagina bloccano completamente la navigazione. I lettori non saranno in grado di passare facilmente alla pagina precedente o alla successiva.

Occorre studiare strategicamente le dimensioni, la posizione e la frequenza dei link. Troppi elementi selezionabili possono complicare la navigazione e disturbare i lettori.

Codificare o creare

Le storie web possono essere codificate a mano dall'inizio o costruite utilizzando strumenti di creazione.

Per realizzare una storia web scrivendone il codice a mano, occorre realizzarla da zero utilizzando il framework AMP. Consultare la sezione Crea la tua prima storia web per iniziare. Dopo aver creato la storia web, controllare che la pagina AMP realizzata sia valida. Il test può avvenire nello strumento di convalida AMP. Leggere i dettagli tecnici sulle storie web per maggiori informazioni.