La maggior parte dei gestori di siti web desidera informare o in­trat­te­ne­re i propri vi­si­ta­to­ri riguardo a un’area tematica specifica. È proprio per questo che ha senso og­gi­gior­no puntare come non mai su contenuti ed elementi unici e di qualità, così da di­stin­guer­si dalla massa. In modo par­ti­co­la­re il contenuto, o per meglio dire il contenuto in­te­rat­ti­vo, occupa al giorno d’oggi una posizione di sempre maggiore im­por­tan­za. Il motivo è semplice: i contenuti in­te­rat­ti­vi si rivolgono agli utenti su più piani diversi. L’utente che si trova sulle vostre pagine non legge sem­pli­ce­men­te un testo o guarda un’immagine, ma può in­ter­ve­ni­re in­fluen­zan­do di­ret­ta­men­te un elemento, accedere a ulteriori in­for­ma­zio­ni o con­di­vi­de­re la propria opinione. In questo modo il contenuto diventa espe­rien­za e rimane impresso più a lungo nella memoria. L’in­te­ra­zio­ne con il sito web e quindi anche con il marchio o i servizi che ne stanno alla base è ben più si­gni­fi­ca­ti­va rispetto alla mera lettura. E la pos­si­bi­li­tà che l’utente sia sod­di­sfat­to e che avvenga una con­ver­sio­ne aumenta di pari passo con la sua per­ma­nen­za sulle vostre pagine. In con­si­de­ra­zio­ne di ciò nel presente articolo vi offriamo una pa­no­ra­mi­ca sui vari tipi di contenuto in­te­rat­ti­vo e vi pre­sen­tia­mo degli utili tool per crearli e im­ple­men­tar­li nel vostro sito web.

Quali e quanti formati di contenuto in­te­rat­ti­vo esistono?

Ci sono molti tipi diversi di contenuto in­te­rat­ti­vo che potete includere all’interno del vostro progetto web con un grado d’impegno diverso. In base al formato scelto ne­ces­si­ta­te poi di vari strumenti e co­no­scen­ze di pro­gram­ma­zio­ne. Inoltre va anche con­si­de­ra­to che i vari tipi di contenuto si di­stin­guo­no anche per i vari costi a essi collegati. La seguente tabella mostra alcune in­te­res­san­ti soluzioni per i contenuti in­te­rat­ti­vi per i siti web:

Tipologie di contenuto in­te­rat­ti­vo De­scri­zio­ne Impegno e costi Esempio
Con­fi­gu­ra­to­ri Ap­pli­ca­zio­ne web at­tra­ver­so la quale gli utenti possono in­te­ra­gi­re con il prodotto offerto e vi­sua­liz­za­re im­me­dia­ta­men­te il risultato della con­fi­gu­ra­zio­ne de­si­de­ra­ta Molto alti Il con­fi­gu­ra­to­re delle auto Fiat
Cal­co­la­to­ri Tool per il calcolo autonomo Da alti a molto alti Il cal­co­la­to­re del bollo del sito dell’Agenzia delle Entrate
Quiz Test co­no­sci­ti­vo con formato domanda e risposta Basso Quiz-Online
Video in­te­rat­ti­vi /video a 360 gradi Video in cui l’utente può in­fluen­za­re lo svol­gi­men­to o l’angolo visuale Da alti a molto alti Archivio di video e foto a 360 gradi di sport­di­gi­ta­le.com
Slideshow Galleria con scor­ri­men­to foto relative a un tema specifico Molto bassi Raccolta foto della sezione Motori 2.0 de Il Fatto Quo­ti­dia­no
Diagrammi, mappe e in­fo­gra­fi­che in­te­rat­ti­vi Grafiche che pre­sen­ta­no dati det­ta­glia­ti e in­for­ma­zio­ni ag­giun­ti­ve con un semplice clic dell’utente Alti “La grafica in­te­rat­ti­va con tutti i flussi migratori degli ultimi anni”-in­fo­gra­fi­ca della rivista Studio
Giochi Giochi mobile e su web, che si allineano te­ma­ti­ca­men­te o crea­ti­va­men­te al marchio, al servizio o al prodotto Molto alti Magnum “Pleasure Hunt 2”
Sto­ry­tel­ling in­te­rat­ti­vo Col­le­ga­men­to di diversi elementi in­te­rat­ti­vi per rac­con­ta­re una storia Alti “Nature’s Com­bi­na­tions” di Se­ve­n­hills

Creare del contenuto in­te­rat­ti­vo: i migliori tool

I vari tipi di contenuto pre­sen­ta­ti ri­chie­do­no chia­ra­men­te più dedizione rispetto ai comuni contenuti testuali o a quelli sotto forma di immagine. Ma anche il costo non è da sot­to­va­lu­ta­re, poiché anch’esso più elevato, spe­cial­men­te se sono necessari strumenti e servizi per la creazione degli elementi in­te­rat­ti­vi. Chi non è esat­ta­men­te un esperto del settore della pro­gram­ma­zio­ne di vi­deo­gio­chi ma vuole in­te­grar­ne uno all’interno del proprio sito web, non può fare a meno di assumere un’agenzia esterna. Lo stesso vale per la rea­liz­za­zio­ne pro­fes­sio­na­le di video a 360 gradi, i quali ri­chie­do­no molto più lavoro di quello che potrebbe sembrare ini­zial­men­te. La necessità di equi­pag­gia­men­to di alta qualità e di tempo a di­spo­si­zio­ne per la post­pro­du­zio­ne del materiale grezzo fanno schizzare i costi alle stelle, rag­giun­gen­do in poco tempo cifre a quattro zeri. Tutto questo per un video della durata di un paio di minuti. Alcuni tipi di contenuto in­te­rat­ti­vo, come ad esempio grafiche quiz e slideshow, possono essere prodotti spesso anche senza l’aiuto di terzi. A questo scopo tutto ciò che vi serve è una buona idea e uno strumento adatto. Alcuni dei tool in­te­res­san­ti ve li pre­sen­tia­mo qui di seguito.

L’azienda fin­lan­de­se ThingLink ha ri­la­scia­to il software Rich Media Tags nel 2011, grazie al quale è possibile collegare le immagini sui siti web alle piat­ta­for­me social media. Da allora il team degli svi­lup­pa­to­ri ha mi­glio­ra­to com­ple­ta­men­te l’ap­pli­ca­zio­ne, che nel frattempo ha preso il nome dell’azienda stessa, ThingLink. At­tual­men­te potete ampliare le vostre immagini e grafiche con elementi ag­giun­ti­vi quali riquadri testuali, immagini, musica, video o link. A questo scopo l’utente ha a di­spo­si­zio­ne un web editor dall’utilizzo intuitivo, all’interno del quale è possibile importare grafiche e immagini originali tramite la funzione drag and drop. I pulsanti aggiunti e im­po­sta­bi­li a proprio piacere segnalano all’os­ser­va­to­re dove si nasconde il contenuto in­te­rat­ti­vo.

Immagine: Interfaccia utente del web editor di ThinkLink
In­ter­fac­cia utente del web editor di ThinkLink

La versione base dell’editor immagini è uti­liz­za­bi­le gra­tui­ta­men­te, tuttavia è di­spo­ni­bi­le solamente un pulsante per la se­gna­la­zio­ne di elementi in­te­rat­ti­vi, del quale è però possibile scegliere il colore. Inoltre il numero di accessi mensili a una immagine o grafica che sia è limitato a 10.000. Chi desidera con­fi­gu­ra­re ma­nual­men­te dovrebbe optare per il pacchetto pro­fes­sio­na­le (circa 20 € al mese per utente e 100.000 accessi): con esso potete disporre anche di ampie sta­ti­sti­che di analisi e vi è permesso escludere il logo di ThinkLink dalle vostre grafiche in­te­rat­ti­ve. Invece con il pacchetto premium (poco più di 100 € al mese per 5 utenti e 1 milione di accessi) potete creare immagini e video a 360 gradi con contenuto in­te­rat­ti­vo.

Vantaggi Svantaggi
✓ Col­le­ga­men­to facile e intuitivo di contenuti esterni ✗ I video in­te­rat­ti­vi possono essere rea­liz­za­ti solamente con l’edizione premium
✓ Contenuto re­spon­si­vo in au­to­ma­ti­co
✓ Versione base gratuita, perfetta per mettere alla prova del contenuto in­te­rat­ti­vo

Infogram

Chi vuole pre­sen­ta­re dei dati ai propri utenti nel formato più adatto, uti­liz­zan­do anche elementi in­te­rat­ti­vi, trova in Infogram lo strumento perfetto. Questo web tool ap­par­tie­ne all’azienda Prezi, azienda che tra le altre cose offre anche un software di pre­sen­ta­zio­ne omonimo. L’app Infogram offre diversi layout ed elementi per la creazione di in­fo­gra­fi­che, mappe e diagrammi in­te­rat­ti­vi. I dati possono essere com­ple­ta­ti ma­nual­men­te o tramite la funzione d’im­por­ta­zio­ne, potendo contare anche sulle in­ter­fac­ce di Google Drive, Dropbox e OneDrive. Le grafiche terminate possono essere incluse all’interno del vostro progetto web per mezzo di un codice di in­te­gra­zio­ne o scaricate come file in formato JPG o PNG (opzione di­spo­ni­bi­le solamente con i pacchetti a pagamento).

Immagine: Interfaccia utente di Infogram
In­ter­fac­cia utente di Infogram

La versione base di Infogram può essere uti­liz­za­ta com­ple­ta­men­te gra­tui­ta­men­te per produrre il vostro contenuto in­te­rat­ti­vo. Tuttavia la gamma di funzioni software risulta for­te­men­te limitata: a di­spo­si­zio­ne avete solamente una manciata di mappe (tra le quali quella degli USA, dell’Europa e dell’Africa) e una scelta ridotta di icone e immagini. Inoltre siete costretti ad ar­chi­via­re i vostri progetti con accesso pubblico. Per poter invece creare progetti privati e ottenere l’acceso a milioni di immagini e di icone dovete ac­qui­sta­re un pacchetto a pagamento a scelta tra “Pro” (fino a 100 progetti a partire da poco meno di 20 € al mese), “Business” (fino a un massimo di 1.000 progetti per circa 70 € al mese) o “En­ter­pri­se” (numero infinito di progetti, prezzo co­mu­ni­ca­to su richiesta in base alle necessità). I pacchetti “Business” e “En­ter­pri­se” vi per­met­to­no tra l’altro di uti­liz­za­re il vostro logo; al­tri­men­ti le grafiche e i diagrammi creati con­ten­go­no il logo di Infogram.

Vantaggi Svantaggi
✓ Più di 35 modelli di diagrammi ✗ Projects in the free version must be made available to the public
✓ Le grafiche prodotte possono essere im­ple­men­ta­te con facilità per mezzo di un codice di in­te­gra­zio­ne ✗ Il logo di Infogram può essere escluso solo a partire dal pacchetto business onwards
✓ Diverse in­ter­fac­ce per l’im­por­ta­zio­ne dei dati

Qzzr

Qzzr è uno degli strumenti migliori per la creazione di quiz, sondaggi e liste fatti su misura. Il software conta oltre 270.000 utenti, tra i quali isti­tu­zio­ni famose e aziende come i canali te­le­vi­si­vi ESPN e HBO, la piat­ta­for­ma video Vimeo o il pro­dut­to­re di energy drink Red Bull. Con questo strumento potete produrre in breve tempo domande, pos­si­bi­li­tà di risposta, de­scri­zio­ni il­lu­stra­ti­ve e consigli; inoltre il contenuto in­te­rat­ti­vo si lascia va­lo­riz­za­re ul­te­rior­men­te at­tra­ver­so l’im­mis­sio­ne di immagini, video e file audio. I contenuti com­ple­ta­ti possono essere collegati di­ret­ta­men­te nel progetto web tramite codice di in­te­gra­zio­ne o in al­ter­na­ti­va possono essere condivisi sui vari social network con un singolo clic. Tutto il contenuto condiviso è ot­ti­miz­za­to in au­to­ma­ti­co per i di­spo­si­ti­vi mobile.

Immagine: Screenshot di un quiz prodotto con Qzzr
Screen­shot di un quiz prodotto con Qzzr

Qzzr non permette di produrre uni­ca­men­te del contenuto in­te­rat­ti­vo ma vi consegna anche sta­ti­sti­che det­ta­glia­te sull’attività degli utenti. Per­met­ten­do­vi di com­pren­de­re quanti utenti hanno portato a termine un quiz (com­ple­ta­tion-rate) o hanno preso parte a un sondaggio, quanto tempo passano sulle vostre pagine, e chi ha collegato una call to action al proprio contenuto, può scoprire anche il proprio con­ver­sion rate. Chi ha necessità di un semplice quiz o di un breve sondaggio, può affidarsi al pacchetto gratuito base. Tuttavia per contenuti pro­fes­sio­na­li e in­te­rat­ti­vi dovreste ac­qui­sta­re l’ab­bo­na­men­to pro (circa 300 € l’anno). Nella versione pro un eventuale quiz prodotto lascia trapelare solamente un piccolo accenno al software Qzzr, mentre ad esempio uti­liz­zan­do la versione base compare il brand dell’azienda su tutti i contenuti condivisi). Tra l’altro, con la prima, è possibile anche di­sat­ti­va­re il sug­ge­ri­men­to au­to­ma­ti­co di altri quiz e sondaggi della rete Qzzr. Se non si desidera alcuna allusione al tool o al provider, allora è ne­ces­sa­rio affidarsi alla versione en­ter­pri­se, chia­ra­men­te più costosa di quella pro. Per questa versione non c’è un prezzo fisso, ma va richiesto dalla vostra azienda in base alle necessità.

Vantaggi Svantaggi
✓ Anche con la variante gratuita avete la pos­si­bi­li­tà di produrre quanti quiz re­spon­si­vi ✗ Di­sat­ti­va­zio­ne di tutti i ri­fe­ri­men­ti a Qzzr possibile solo con il pacchetto En­ter­pri­se­man­ce’ plan
✓ Possibile col­le­ga­men­to con funzioni di analisi e di Lead Ma­na­ge­ment
✓ Facile in­te­gra­zio­ne di elementi mul­ti­me­dia­li come immagini, video o GIFs

Cincopa

Il provider della piat­ta­for­ma mul­ti­me­dia Cincopa, fondata nel 2006, offre soluzioni per l’in­te­gra­zio­ne e la gestione di contenuti mediatici nei vostri progetti web. Tramite di essa gli utenti possono ampliare il proprio sito web con portali video, podcast e slideshow fatti su misura. A questo scopo Cincopa mette a di­spo­si­zio­ne degli editor web speciali con l’aiuto dei quali è possibile creare il contenuto in­te­rat­ti­vo de­si­de­ra­to. D’altro lato l’azienda offre anche delle risorse di hosting ne­ces­sa­rio per i file au­dio­vi­si­vi uti­liz­za­ti (audio, video, immagini, ecc.). Inoltre ci sono diverse pos­si­bi­li­tà per l’in­te­gra­zio­ne dei contenuti, ad esempio per mezzo del codice HTML, di Landing Page, link o plug-in specifici per CMS (tra i quali WordPress, Joomla, Blogger, Drupal, Wix).

Immagine: Concopa: il manager per l’upload dei vostri file
Concopa: il manager per l’upload dei vostri file

Gli utenti di Cincopa hanno diversi template tra cui scegliere per la gestione del contenuto in­te­rat­ti­vo: ad esempio ci sono vari modelli di­spo­ni­bi­li nella versione gratuita per i collage, le slideshow, i vi­deo­player, le playlist e le timeline. La versione base è tuttavia limitata a un singolo dominio e a un massimo di 50 file immagine e 3 file audio e video, per un totale di 1 gigabyte di traffico totale. Inoltre il contenuto viene munito della dicitura del brand “Powered by Cincopa”. Chi invece ha necessità di produrre e pub­bli­ca­re del contenuto in­te­rat­ti­vo con re­go­la­ri­tà farebbe bene ad affidarsi alle versioni a pagamento: Startup (1 dominio, 5 file video e audio, 1.500 file immagine e 10 GB di traffico per circa 100 € una tantum), Plus (5 domini, 50 video, 200 file audio, 2.000 file immagine e 100 GB di traffico per circa 25 € al mese), o Corporate (un numero il­li­mi­ta­to di domini, 500 video, 1.000 file audio, 5.000 immagini e 400 GB di traffico per circa 100 € al mese).

Vantaggi Svantaggi
✓ Diversi template per contenuto audio, video e immagine fatto su misura ✗ Hosting dei server negli Stati Uniti
✓ Web editor intuitivi 
✓ Downgrade e upgrade del pacchetto se­le­zio­na­to possibile in ogni momento

Adobe Spark

Adobe è co­no­sciu­to prin­ci­pal­men­te per il suo Flash Player e per il Creative Cloud (quello che una volta era la Creative Suite). Ma con Adobe Spark l’azienda di software offre anche la propria soluzione per lo sto­ry­tel­ling in­te­rat­ti­vo nel world wide web. Il pacchetto del tool si compone di tre diversi software: Spark Post (per il contenuto di semplici file immagine), Spark Video (per i video in­te­rat­ti­vi) e Spark Page (per le web stories). L’utente ha così la pos­si­bi­li­tà di scegliere se ad esempio vuole ot­ti­miz­za­re una foto con del testo e dei filtri di design, se creare delle clip pub­bli­ci­ta­rie o in­for­ma­ti­ve o se rac­con­ta­re una storia at­tra­ver­so del contenuto in­te­rat­ti­vo. Gli utenti che uti­liz­za­no Creative Cloud, Adobe Stock o Lightroom hanno inoltre la pos­si­bi­li­tà di collegare questi con la web app di Spark.

Immagine: Adobe Spark Page: l’interfaccia utente della versione web
Adobe Spark Page: l’in­ter­fac­cia utente della versione web

Per riempire i vostri progetti con il contenuto de­si­de­ra­to potete chia­ra­men­te caricare anche del materiale visivo di vostra pro­du­zio­ne. In aggiunta potete produrre titoli, riquadri di testo e pulsanti e col­lo­car­li così nella posizione de­si­de­ra­ta nelle vostre web story. Tramite la scelta del tema de­si­de­ra­to in­fluen­za­te anche il design del contenuto. Se de­si­de­ra­te importare delle clip tutto ciò che vi serve è indicare l’URL cor­ri­spon­den­te. Una volta pronto, il contenuto può essere condiviso per mezzo del link au­to­ma­ti­ca­men­te generato (con funzioni integrate per Facebook e Twitter), inviato per email o integrato nel proprio sito web tramite l’apposito codice. L’ap­pli­ca­zio­ne Spark è di­spo­ni­bi­le anche per il sistema operativo iOS ed è com­ple­ta­men­te gratuita. Tuttavia è possibile fare l’upgrade con versioni a pagamento per fare in modo di escludere la dicitura del brand al­tri­men­ti presente sul contenuto creato.

Vantaggi Svantaggi
✓ Utilizzo facile e intuitivo ✗ I contenuti creati non possono essere scaricati ma solo hostati da Adobe
✓ Di­spo­ni­bi­le anche come app per il sistema operativo iOS ✗ Opzioni di design limitate (ad esempio la grandezza dei testi non può essere adattata e i font dipendono dal tema se­le­zio­na­to)
✓ Com­bi­na­bi­le con Creative Cloud

Mapme

With the web editor, Mapme, si possono creare mappe in­te­rat­ti­ve di qualità anche senza possedere co­no­scen­ze di pro­gram­ma­zio­ne. L’utente può scegliere tra 8 stili di mappe diversi, come ad esempio la veduta sa­tel­li­ta­re, naturale o la rete stradale. In­di­pen­den­te­men­te dalla tipologia scelta, il numero di puntine ag­giun­gi­bi­li alla mappa è uni­ca­men­te a vostra di­scre­zio­ne: queste servono a marcare de­ter­mi­na­ti luoghi e posizioni e a fornire in­for­ma­zio­ni relative a essi. Inoltre è possibile con­fi­gu­ra­re per­so­nal­men­te l’ottica delle spille (con il pacchetto a pagamento è possibile uti­liz­za­re anche delle icone proprie) e ag­giun­ge­re alla mappa dei file immagine, audio e video così come dei pulsanti per i social media. In base al layout se­le­zio­na­to i contenuti cor­ri­spon­den­ti ai singoli spilli compaiono in uno slider menu nella parte inferiore della mappa (Slider Style) o in una lista sul lato sinistro (List Style).

Immagine: Interfaccia utente di Mapme
In­ter­fac­cia utente di Mapme

Chi desidera uti­liz­za­re Mapme per creare del contenuto in­te­rat­ti­vo per il proprio sito web deve affidarsi a una delle offerte a pagamento. La variante gratuita dell’ap­pli­ca­zio­ne web serve solamente come di­mo­stra­zio­ne di quelle che sono le pos­si­bi­li­tà offerte dal tool, ma non permette quindi di produrre alcuna mappa per la pub­bli­ca­zio­ne o l’in­te­gra­zio­ne all’interno del vostro progetto web. I pacchetti premium a scelta sono tre: Basic (a partire da poco meno di 20 € al mese), Standard (da circa 30 € al mese) e Plus (da circa 50 € al mese). Quest’ultimo pacchetto non solo vi permette di inserire un numero il­li­mi­ta­to di spilli, ma ga­ran­ti­sce anche l’accesso agli effetti 3D, così da rendere il design delle proprie mappe ancora più in­te­res­san­te. Ancora, con la versione Plus potete adattare la le vostre mappe a CSS.

Vantaggi Svantaggi
✓ Le spille di posizione possono essere con­fi­gu­ra­te au­to­no­ma­men­te ✗ Con la versione gratuita non è possibile pub­bli­ca­re le proprie mappe
✓ Tutte le carte sono au­to­ma­ti­ca­men­te ot­ti­miz­za­te per i di­spo­si­ti­vi mobili
✓ Tutorial di ap­pren­di­men­to integrato

Progetti web con contenuti in­te­rat­ti­vi: i migliori esempi e le migliori pratiche

I tool pre­sen­ta­ti in questo articolo offrono numerose opzioni per rendere il vostro progetto web in­te­rat­ti­vo tramite l’utilizzo di mezzi di semplice utilizzo e no­no­stan­te un budget re­la­ti­va­men­te risicato. Le aziende con maggiori pos­si­bi­li­tà fi­nan­zia­rie possono na­tu­ral­men­te anche assumere un’agenzia esterna che si prenda cura della creazione e della gestione di contenuti in­te­rat­ti­vi per il proprio sito web. In ogni caso il contenuto in­te­rat­ti­vo serve a rendere un sito web più attraente, almeno fin quando questo è po­si­zio­na­to cor­ret­ta­men­te e non abbia l’effetto di al­lon­ta­na­re i vi­si­ta­to­ri dai propri prodotti o servizi. È dunque im­por­tan­te creare il contesto adeguato per ogni de­ter­mi­na­to contenuto in­te­rat­ti­vo e trovare il giusto equi­li­brio tra in­for­ma­zio­ne e in­trat­te­ni­men­to – risultato che è stato ottenuto con successo e bravura nei siti pre­sen­ta­ti qui sotto:

  • Airbnb: at­tra­ver­so un’in­fo­gra­fi­ca in­te­rat­ti­va con diverse immagini, ani­ma­zio­ni e mappe, Airbnb presenta l’influsso economico che i suoi servizi hanno portato alla capitale tedesca.

  • Fillory: con una con­vin­cen­te mappa in­te­rat­ti­va, il sito web wel­co­me­to­fil­lo­ry.com presenta Fillory, il mondo fan­ta­sti­co della serie fan­ta­scien­ti­fi­ca “The Magicians” basata sull’omonima trilogia di Lev Grossman. Al suo interno possono essere trovate in­for­ma­zio­ni det­ta­glia­te sui per­so­nag­gi prin­ci­pa­li così come diversi giochi e quiz alla rubrica “Quests”. Nel corso della seconda stagione della serie l’emittente avrebbe affidato la creazione del sito web allo studio di pro­du­zio­ne UNIT9.

  • The Museum of Modern Art: il celebre museo di arte moderna di New York ha deciso di dotare la propria esi­bi­zio­ne “Century of the Child” di un omonimo progetto web in­te­rat­ti­vo, at­tra­ver­so il quale si ha la pos­si­bi­li­tà di esplorare oltre 250 oggetti e 500 immagini di design moderno prodotti per i bambini durante il secolo scorso. La pagina web in HTML/Ja­va­script è stata creata da Hello Monday, un’agenzia spe­cia­liz­za­ta nella creazione di contenuto digitale.

Vai al menu prin­ci­pa­le