• Non ci sono risultati.

2. Modalità

2.2. Approcci

2.2.1 Analisi di quattro case studies

L’analisi della concorrenza mi permette di presentare i casi studio da cui sono partita per lo sviluppo di IDAWARE. Ognuno di questi siti web, infatti, è stato di ispirazione per la costruzione della struttura, del layout, del design e della navigazione del sito. Le piattaforme online scelte sono le seguenti:

▪ Digital IQ179, piattaforma web di Fastweb che offre la possibilità di ottenere una certificazione delle proprie competenze digitali attraverso test e attività su diversi argomenti legati al web e ai media digitali.

▪ Digital Wellbeing180, corso online sul tema del benessere digitale che rientra nel pacchetto di corsi online offerti da Google nel progetto Google Digital Training.

▪ CIVIX Cittadinanza digitale a scuola181, progetto formativo rivolto agli studenti delle scuole superiori che fa parte dei progetti promossi dall’associazione Media Educazione Comunità che ha sede a Udine (Friuli-Venezia Giulia).

▪ Youth Toolkit for Educators182, progetto del Center for Human Technology, un’organizzazione no-profit fondata da Randi Fernando e Tristan Harris, quest’ultimo è noto per la sua partecipazione al film ‘The Social Dilemma’, in cui denuncia gli effetti negativi che i social network possono produrre sui giovani utenti.

179 Digital IQ, Fastweb, https://www.digitaliq.it/

180 Introduzione al Digital Wellbeing, Google Digital Training,

https://learndigital.withgoogle.com/digitaltraining/course/digital-wellbeing

181 CIVIX Cittadinanza digitale a scuola, https://civix.fvg.it/

182 Youth Toolkit, https://www.humanetech.com/youth

101

DIGITAL IQ - Fastweb

Introduzione

Digital IQ è una piattaforma web sviluppata da Fastweb che si inserisce all’interno di un progetto formativo più ampio legato a Fastweb Digital Academy: uno spazio online che offre “percorsi di formazione specialistica a giovani e adulti per acquisire competenze digitali fondamentali per il mercato del lavoro attuale, e imprescindibili per il futuro.”183 In questo senso, Digital IQ rappresenta il primo passo di auto analisi con cui l’utente può comprendere meglio quali sono le proprie capacità e competenze nei confronti degli strumenti digitali e a partire dal risultato di questa analisi, approfondire successivamente questi aspetti attraverso i corsi offerti dall’accademia digitale.

Analisi

Il sito non presenta un menù nell’header: la navigazione all’interno dei diversi livelli è guidata quindi da una serie di link che, a partire dall’homepage guidano l’utente all’interno del percorso offerto dalla piattaforma.

183 Fastweb Digital Academy, https://www.fastwebdigital.academy/chi-siamo/

102

L’homepage presenta all’utente come funziona il sito di Digital IQ. Dopo una breve introduzione al contenuto della piattaforma, è chiamato all’azione attraverso un pulsante che lo invita a iniziare il test.

Come è possibile notare anche dall’homepage, il sito Digital IQ sceglie come tema di progettazione grafica elementi e sfondi che richiamano l’universo e i pianeti. L’Hero header è costituito dall’immagine animata di un astronauta che salta sopra alla luna e che tiene in mano una bandiera con il logo di Digital IQ. Dopo aver cliccato sul pulsante “INIZIA IL TEST”

l’utente viene portato alla pagina di login, a questo punto è obbligato a registrarsi al sito per poter accedere ai contenuti. In questo modo attraverso l’area personale potrà tenere traccia del proprio percorso.

Dopo che l’utente ha effettuato l’accesso si trova davanti alle “Missioni”. L’idea di Digital IQ è quella di simulare l’esperienza di un viaggio nello spazio, lo sfondo del sito, infatti, richiama l’universo, con il fondo blu e qualche stella e i diversi pianeti rappresentano le diverse aree tematiche. In alto nell’header l’utente può vedere lo stato di avanzamento del proprio percorso che si aggiorna ogni volta che completa una missione.

103

I pianeti e le diverse aree tematiche che rappresentano le “Missioni” sono:

• Sole, il primo pianeta in cui l’argomento riguarda la creazione di contenuti digitali

• Mercurio, dedicato al tema della sicurezza in rete

• Venere, ha come argomento la comunicazione e la collaborazione online

• Marte, dedicato al tema del benessere digitale

• Fascia di asteroidi, ha come oggetto di studio l’informazione sul web

• E infine, come ultima tappa del viaggio, la Terra, la base di controllo

104

Il contenuto di ogni argomento è sviluppato in una serie di sotto argomenti, di solito due o tre, trattati principalmente attraverso test che pongono un quesito e chiedono all’utente di rispondere secondo la risposta che ritiene più corretta.

In alcuni pianeti invece l’argomento è proposto in forme più ludiche attraverso semplici giochi interattivi che si legano sempre al tema dello spazio.

In generale emerge una coerenza nell’uso del tema grafico in ogni aspetto.

105

106

Digital Wellbeing – Google

Introduzione

Si tratta di un breve corso online gratuito creato da Google per “sviluppare e mantenere abitudini tecnologiche sane”184. Dura un’ora comprendendo quattro video-lezioni da 19 minuti ciascuna. Le video-lezioni sono tenute da alcuni esperti di comunicazione e tecnologie digitali che trattano l’argomento del digital wellbeing suggerendo pratiche utili a vivere un rapporto più sano con gli strumenti digitali.

Analisi

Il corso fa parte di un pacchetto didattico proposto da Google nella piattaforma online Google Digital Training, disponibile al link: https://learndigital.withgoogle.com

L’homepage presenta un unico e semplice menu dell’header costituito di quattro voci, più una voce a tendina che contiene le altre pagine restanti. A destra, dalla parte opposta del logo, si trovano invece i pulsanti per accedere e iscriversi alla piattaforma.

184 Introduzione al Digital Wellbeing – Google Digital Training,

https://learndigital.withgoogle.com/digitaltraining/course/digital-wellbeing

107

Sotto all’header la pagina illustra come prima cosa la mission del progetto e invita l’utente a consultare i programmi del sito, poi promuove lo scopo della piattaforma Google Digital Training e chiama l’utente a esplorare le risorse. Un’ulteriore sezione è dedicata a descrivere gli obiettivi che si possono raggiungere attraverso i corsi che il servizio di Google offre, a cui segue una sezione dedicata alle FAQ. A questo punto l’utente può interagire con gli altri livelli del sito attraverso i pulsanti presenti nell’homepage o attraverso le voci del menu. Cliccando su “Trova il tuo corso” o la voce “Corsi Online”)

108

si viene indirizzati alle pagine dove sono visibili tutti i corsi di Google Digital Training e le relative informazioni. Si possono visualizzare filtrando in base a diverse caratteristiche legate alla categoria, alla durata o alla possibilità di ricevere la certificazione. Tra questi è presente anche il corso Digital Wellbeing, che rientra tra quelli dedicati alla crescita personale.

109

All’interno dell’Hero Header si trova la call to action: “Inizia il corso, senza costi”. Attraverso questo pulsante si accede al corso, dopo aver effettuato l’accesso al proprio account Google. Dopo l’header sono descritte le informazioni sul corso e le caratteristiche. Una sezione spiega come funziona il servizio di Digital Training, seguita da uno spazio dedicato a descrivere i moduli del corso e da una che illustra le competenze che l’utente acquisisce e le FAQ. La pagina si conclude invitando l’utente a iniziare il corso attraverso un pulsante, uguale a quello dell’Hero Header.

Google sceglie di utilizzare per la grafica della piattaforma di Digital Training uno stile semplice, pulito, dai colori neutri, si alternano il blu e il grigio chiaro, la palette di colori si arricchisce grazie alle illustrazioni.

La comunicazione è volta a guidare l’utente all’interno della piattaforma e invitarlo a visitare i corsi che offre.

Effettuato l’accesso a Google si accede al personale piano di studi dove si possono visualizzare i corsi che l’utente sta seguendo o che ha completato, tra questi sarà presente il

110

corso “Digital Wellbeing”. Selezionando il corso si accede alla pagina da cui l’utente esplora ai moduli del corso. A destra del titolo e della mission è presente un simbolo grafico che indica lo stato di progressione che si aggiorna ogni volta che l’utente avrà completato un modulo. Ogni piccolo traguardo farà ottenere un bagne che sarà visibile sotto ai progressi e ai dettagli del corso. Cliccando sul pulsante “Inizia” si entra nel corso vero e proprio.

La pagina del corso è strutturata su due colonne, nella colonna di destra è presente l’argomento, presentato sotto forma di video lezione e in quello stesso spazio sarà visualizzata la domanda di verifica delle competenze; a sinistra invece sono indicati i vari moduli che costituiscono il corso, gli argomenti e la durata, oltre a un pulsante che permette di accedere direttamente al quiz finale.

111

112

113

CIVIX: Cittadinanza Digitale a Scuola

Introduzione

CIVIX è una piattaforma online nata dall’associazione M.E.C. (Media Educazione Comunità) grazie al supporto della Regione Autonoma Friuli-Venezia Giulia e di Fondazione Friuli. Rappresenta uno dei tanti progetti di cui si occupa l’associazione che persegue lo scopo di promuovere e sviluppare progetti di formazione su tematiche legate ai media e alla comunicazione soprattutto nelle scuole.

Come è descritto nell’homepage del sito, il progetto CIVIX ha tre obiettivi: educare gli studenti a combattere il cyberbullismo, promuovere lo sviluppo di competenze digitali e sperimentare un percorso didattico di consapevolezza degli strumenti digitali offerti dagli smartphone, da inserire come argomento di studio nel programma di educazione civica.

Analisi

Si accede alla piattaforma CIVIX attraverso il sito dell’Associazione MEC: il progetto di cittadinanza digitale è disponibile all’interno dell’elenco dei progetti di cui si occupa l’associazione.

114

La struttura, il layout e lo stile semplici e puliti di questa piattaforma ricordano quella precedentemente analizzata di Google.

L’homepage si costituisce di un menu semplice, costituito dal logo a sinistra, da quattro voci e dallo strumento ricerca a destra. Sotto l’header del menu è presente una sezione che descrive brevemente il progetto e invita l’utente ad accedervi attraverso il pulsante “Vai al progetto”.

Segue una sezione dedicata ai partner e una sezione in cui si invita l’utente a visitare la pagina

“Kit Didattico per l’educazione digitale” dove sono disponibili “contenuti specifici per ogni ordine scolastico ed è stato progettato sulla base di un solido quadro teorico per supportare i docenti nell'introduzione di questa complessa tematica”185. Dopo un ulteriore sezione dedicata ad altri partner che collaborano con l’associazione è presente una sezione, simile dal punto di vista grafico a quella dedicata al Kit Didattico, rivolta a promuovere la pagina del “Quadro tematico e metodologico”, dove sono illustrati tutti gli argomenti trattati. A seguire uno spazio rivolto esclusivamente agli insegnanti e un ulteriore spazio che promuove altri progetti: il patentino per lo smartphone e la prevenzione del cyberbullismo.

Il fondo della pagina si conclude con una finestra utile per potersi mettere in contatto con lo sportello e l’associazione.

Cliccando sul pulsante “Vai al progetto” presente nella prima sezione di benvenuto del sito l’utente si troverà all’interno della pagina progetto (è

185 CIVIX, https://civix.fvg.it/

115 possibile comprenderlo perché

la voce “Progetto” dell’header si colora diversamente, a indicare all’utente il livello in cui è in questo momento nella piattaforma). La pagina progetto ha il solo scopo di presentare l’argomento, la mission e la vision che CIVIX:

Cittadinanza Digitale ha scelto, manca un invito all’azione che porti l’utente all’interno dei contenuti del corso stesso.

L’utente può consultare gli argomenti all’interno della pagina “Quadro Tematico”

raggiungibile dal menu dell’header: questa pagina ha il solo scopo di presentare gli argomenti del progetto CIVIX, i contenuti veri e propri sono disponibili alla pagina “Kit Didattico”. Oltre a queste due pagine di approfondimento sul tema, è consultabile la pagina

“Formazione” dedicata a elencare i webinar online che si sono già tenuti o che si stanno tenendo su temi legati alla Cittadinanza Digitale.

116

La pagina dedicata al quadro tematico sceglie di basarsi su un tema grafico che vuole ricordare una mappa utilizzata in attività ludiche dove si simula il viaggio per mare o si gioca alla caccia al tesoro. Un tema che si adatta al target giovane a cui CIVIX si

rivolge: i ragazzi delle scuole superiori.

La pagina web dove è disponibile il Kit Didattico è costituita da una serie di pannelli che si aprono attraverso il pulsante

“+” alla destra del titolo dell’argomento.

Quando si apre un pannello è possibile visualizzare l’elenco dei singoli moduli e insieme il tipo di istituto per cui è stato creato quel contenuto e accedervi cliccando l’apposito pulsante. I colori cornice di ogni modulo e sfondo dei titoli degli stessi si ricollegano a quelli utilizzati nelle terre della mappa della caccia al tesoro:

l’immagine del tema scelto per la pagina del quadro tematico.

Cliccando su uno degli argomenti elencati all’interno di un pannello si accede al contenuto didattico vero e proprio.

117

La pagina dedicata al contenuto si costituisce di una scheda didattica, presente all’interno di un box apposito di visualizzazione, come quello di un programma di visualizzazione di pdf, che permette anche di visionare, salvare, scaricare e stampare il contenuto.

Contenuto in cui sono proposte agli insegnanti attività da fare in classe con gli studenti collegate alle tematiche della cittadinanza digitale.

118

119

120

Youth Toolkit

Introduzione

Young Toolkit rappresenta una delle risorse a disposizione nel sito del Center for Human Technology, un’organizzazione no-profit americana la cui missione è quella di “guidare un cambiamento globale verso una tecnologia umana che supporti il nostro benessere, la democrazia e l'ambiente di informazioni condivise”186.

Young Toolkit rappresenta una sorta di “cassetta degli attrezzi” (immagine utilizzata anche nel progetto CIVIX) a disposizione dei giovani utenti per poterli aiutare ad applicare un utilizzo sano, equo e sostenibile dei social media. Si costituisce di una serie di guide contenenti approfondimenti, domande e attività sul tema, si rivolgono ai ragazzi di età compresa tra i 13 e i 25 anni.

186 Center for Human Technology, Chi siamo, https://www.humanetech.com/who-we-are

121

Analisi

L’utente accede alla risorsa attraverso il sito del Center for Human Technology. L’homepage presenta un Hero Header in cui è contenuto il menu e la sezione di benvenuto e presentazione del centro, attraverso cui è esposta anche la mission. Dal menu dell’header si possono accedere alle diverse risorse, ai progetti e alle informazioni utili, tra questi è presente anche il progetto “Young Toolkit”

all’interno della voce “Resources”.

Dopo una sezione dedicata a descrivere l’obbiettivo che persegue il centro, si invita l’utente all’esplorazione delle diverse risorse e a iscriversi alla newsletter.

Il sito utilizza una palette di colori basata su sfumature di azzurro e verde, il colore principale è un verde petrolio che domina l’hero header. Il secondo colore più utilizzato è un blu scuro, che costituisce lo sfondo del footer ed è utilizzato per alcuni elementi grafici.

A questo punto l’utente può raggiungere la risorsa Young Toolkit sia attraverso il link nel menu dell’header, sia attraverso la call to action nella sezione dedicata alle risorse sulla pagina di homepage.

122 La pagina del progetto “Young Toolkit” si presenta con un grande Hero Header con l’immagine di sfondo di un gruppo di ragazzi che discutono in un salotto: un riferimento al target per il quale la risorsa è stata creata.

L’immagine inoltre promuove l’idea del confronto e della condivisione che sono alla base dell’educazione.

Sotto all’hero header il contenuto è organizzato su due colonne, quella a sinistra, più stretta, elenca per punti gli argomenti trattati nella pagina, quella a fianco ospita il contenuto vero e proprio.

Il layout scelto per organizzare la pagina ricorda quello usato anche per la pagina del corso di Google ‘Digital Wellbeing’.

Le guide sono disposte a colonna e sono presentate attraverso un riquadro colorato che ne contiene il titolo e l’obbiettivo, a fianco di esso sono indicati il tempo richiesto alla lettura della guida e una breve descrizione.

Sono divise in due sezioni: ‘Issue Guides’ e

‘Action Guides’. Sotto di esse sono presenti invece le sezioni ‘Share Your Story’ e ‘For Educators’ dedicate ad altre risorse, si distinguono dalle guide per l’utilizzo di una tonalità cromatica opposta.

L’utente accede a una singola guida cliccando sulla freccetta posta all’interno del riquadro.

123

La pagina dedicata alla singola guida del progetto ‘Young Toolkit’ si costituisce di un header in cui sono presenti gli stessi elementi grafici e di testo che costituivano il riquadro della guida nella pagina precedente, creando così un collegamento visivo coerente.

Si aggiunge solo un pulsante che permette all’utente di scaricare il contenuto in formato pdf.

Segue una sezione dedicata a elencare gli argomenti trattati nella guida attraverso dei link che permettono all’utente di accedere direttamente al contenuto che gli interessa senza dover scorrere tutta la pagina per ricercarlo. Una linea temporale indica all’utente il punto in cui si trova all’interno del testo: ovvero l’argomento che sta leggendo. Il contenuto testuale della guida si arricchisce di nozioni, immagini, esperienze e considerazioni. Ogni argomento si conclude con un riguardo che invita l’utente alla riflessione su ciò che è stato trattato.

124

Conclusioni dell’analisi

L’analisi dei quattro siti competitors mi ha permesso di sviluppare la progettazione di IDAWARE. Nello specifico, la piattaforma Digital IQ di Fastweb la cui narrazione è basata sull’universo e sui pianeti mi ha ispirato a immaginare un tema grafico per il mio sito e mi ha fatto comprendere l’importanza di applicare in modo coerente il tema nelle diverse pagine. Inoltre, ho osservato come, in assenza di un menu, la navigazione per

125

mezzo di link permette di guidare l’utente e di portarlo a eseguire l’azione che si vuole che compia, navigando verticalmente nella gerarchia dei livelli del sito: dalla superficie alla profondità.

Il corso di Google dedicato al benessere digitale (Digital Wellbeing) mi ha colpita per lo stile semplice e pulito e la scelta di inserire alcune illustrazioni per arricchirlo mi ha ispirato a utilizzarle anche nel mio progetto web. Il sito di Google mi ha inoltre permesso di capire come organizzare la struttura di un progetto di tipo didattico/educativo trasposto in una piattaforma web: costruendo una homepage che presenta la piattaforma, il progetto e gli obiettivi, all’interno del quale inserire uno o più collegamenti alla pagina principale del progetto dal quale accedere a ogni singolo argomento che tratta.

La risorsa Young Toolkit creata da Center for Human Technology ha favorito la scelta di proporre gli argomenti della ricerca di tesi in forma testuale e mi sono ispirata alle guide presenti all’interno della risorsa per capire come gestire e organizzare il contenuto all’interno di una pagina web. Ho compreso l’importanza di distinguere a livello visivo i diversi argomenti, il sito infatti sceglie una grafica diversa per rappresentare le nozioni teoriche, i suggerimenti e le riflessioni. In conclusione, ognuno di questi siti è stato utile a comprendere che l’homepage è il biglietto da visita del mio sito, oltre che la pagina di benvenuto, perciò deve sapere descrivere il sito, lo scopo, quello di cui tratta e ciò che offre all’utente. Inoltre, ho appreso come progettare la navigazione all’interno della piattaforma comprendendo l’importanza della gerarchizzazione dei livelli del sito.

2.3. Ricerca: target e personas