Presentazione per valutazione finale del progetto del corso di Strumenti e Applicazioni per il Web. Anno Accademico 2018-2019.

1. Are you Serious?
Progetto di: Bellotti, Bolgè, Ceresa e Dallera
Our mentality is "All the world is a game"

2. L'argomento
I serious game sono simulazioni virtuali interattive che,
equilibrando intrattenimento e apprendimento, creano
un’esperienza di gioco in grado di far sviluppare al
fruitore determinate abilità e competenze.
Grazie all’immersione in un contesto esperienziale,
infatti, le capacità attentive e i fattori motivazionali
persistono maggiormente rispetto a quando
l’apprendimento avviene nelle più convenzionali
modalità passive.
Gli ambiti d’impiego sono molteplici:
• Riabilitazione di persone con deficit (cognitivi e
motori);
• Settore socio-educativo;
• Formazione aziendale e professionale;

3. Il nostro blog

4. IL TEAM
Sofia
Laureata in Scienze
Psicosociali della
Comunicazione
Lorenzo
Laureato in Comunicazione
Interculturale
Alessandra
Laureata in Scienze e
Tecniche Psicologiche
Susanna
Laureata in Comunicazione
Interculturale

5. I nostri
obiettivi
Il principale obiettivo che ci poniamo consiste nel
sottolineare e chiarire le potenzialità diversificate di
uno strumento d’apprendimento alternativo,
concentrandoci in particolar modo sull’ampliare il
bacino d’utenti di serious game all’interno di realtà
professionali (aziende, scuole, ospedali...).
Obiettivo secondario, seppur importante, è attirare
l’attenzione sui vantaggi derivanti dall’utilizzo di
serious game anche per coloro che professionisti
non sono.

6. Scelta grafica
- IL TEMA-
La scelta del tema Hestia è avvenuta dopo
la considerazione di diverse caratteristiche:
• Design semplice e chiaro;
• Possibilità di inserire widget particolari
(team widget);
• Home con possibilità di immagine full-
width così che i nostri utenti possano
essere attratti maggiormente.

7. Scelta grafica
- LA PALETTE COLORI-
La scelta della palette è stata dettata da un
desiderio di minimalismo cromatico, per
dare maggior risalto ai contenuti del blog.

8. Scelta grafica
IL LOGO
Per il nostro logo abbiamo voluto integrare
graficamente il lato ludico dei serious
game, rappresentato dal joystick, e il lato
educativo, rappresentato dal cervello. Il
design è minimal e pulito, per restare in
linea con il blog.
Per il logo del blog abbiamo
mantenuto una linea grafica
semplice. La figura bianca a
contorni neri è stata scelta in
virtù di un buon abbinamento
con la palette di colori del blog.
Per quanto riguarda la
rappresentazione del logo per
la nostra pagina social di
Facebook abbiamo voluto
puntare su una maggiore
raffinatezza estetica e mettere
in evidenza il nome del blog.

9. Come abbiamo visto il raggio d’azione dei serious game è
molto ampio e diversificato. Per questa ragione e per la
difficoltà, nel contesto italiano, nel recuperare informazioni
coerenti circa questi strumenti, il blog intende rivolgersi sia
ai professionisti, sia ad un insieme di utenti interessati a
sperimentare modalità di apprendimento diverse dalle più
convenzionali.
Il target

10. Linea editoriale
In virtù del target selezionato, la linea editoriale prevede
l’utilizzo di un linguaggio puntuale ma non estremamente
tecnico.
Questo perché è diretto a professionisti, ma deve anche
poter essere fruibile da un pubblico di curiosi che leggerà
il blog per interesse personale.
PROFESSIONISTI
CURIOSI

11. Linea editoriale
Abbiamo cercato di mantenere una media di 4 articoli
pubblicati a settimana.
• Due articoli di case studies e uno di progettazione:
rivolti al pubblico di professionisti;
• Un articolo della categoria "curiosità": rivolto a un
pubblico più ampio.
La volontà era quella di lasciare un giorno fra un articolo e
l'altro in modo da mantenere il blog e le pagine social
attive in modo continuo.
CURIOSI
2 case studies
1 curiosità
1 progettazione e design

12. Pagina statica
Breve descrizione del perché scegliere i serious
game con bottone di rimando alla sezione di
about
Descrizione dei membri del team con immagini
cliccabili che riportano all'insieme di articoli
realizzati dal membro selezionato
Anteprima dei tre articoli più recenti
Footer con contatti, un form compilabile per
richiedere una consulenza e i social scelti
L'architettura
-Home-

13. Pagina statica
Breve approfondimento su cosa siano i serious
game
Infografica per spiegare le scelte compiute
nell'analisi dei casi di serious game e delle
curiosità.
Grafico creato tramite:
L'architettura
-About-

14. L'architettura
-Categorie blog-
Come coinvolgere l'utente
User Centered Game Design
Team di progettazione
Schema delle tappe di progettazione
• Didattica
• Sensibilizzazione (ambientale,
salute e temi sociali)
• Formazione professionale
Questa sezione è indirizzata al
pubblico di non professionisti con
articoli a scopo maggiormente
intrattenitivo.
PROGETTAZIONE E
DESIGN
CASE STUDIES CURIOSITA'
Si approfondiranno temi legati alla buona
progettazione di un serious game.
Verranno riportati e analizzati esempi
di serious games improntati alla
trasmissione di contenuti educativi in
diversi ambiti.
Fitness/ Health Care
Serious Games inaspettati
Conferenze dedicate
Oltre all'uso delle categorie abbiamo optato per una suddivisione degli articoli anche mediante l'utilizzo di Tag.

15. Modifiche al tema
-CSS-
Inserita con l'obiettivo di
modificare la grandezza del
font delle voci di menu e la
lunghezza della finestra di
menu su visuale da
smartphone.
Modifica di CSS sulla base di
aggiunte in HTML per la sezione
"Perchè scegliere i Serious Game"
affinchè gli elementi presentati in
linea su schermi ad alta risoluzione,
si presentassero in un'unica colonna
su schermi più piccoli di 768 px.
Grazie all'inserimento di questa media query è
stato possibile impostare un'immagine di
background della home in modo tale che il
cervello occupasse la parte destra dello
schermo (così da bilanciare l'equilibrio
spaziale) in schermi con risoluzione superiore
a 1070 px. A risoluzioni inferiori, invece, il
cervello si visualizza centrale.

16. Modifiche al tema
-HTML-
PROGETTAZIOE E
DESIGN
CURIOSITA'
Con l'inserimento di <div> abbiamo realizzato la
sezione "Perchè scegliere i Serious Game" nella Home.
L'utilizzo di 3 div caratterizzati da ID differenti ha
semplificato, poi, la modifica responsive tramite CSS
(float degli elementi su un'unica colonna). Grazie al
codice HTML, inoltre, è stato aggiunto un input
"button" così da rendere possibile il passaggio diretto
alla sezione "About".

17. Plugin
PROGETTAZIOE E
DESIGN
CURIOSITA'
Per proteggere il
nostro blog dallo
spam inutile
Secondo plugin per la
costruzione della struttura
dei post
Per realizzare uno smooth
scroll all'interno delle
diverse sezioni della home
AKISMET
ANTI-SPAM
GUTENBERG
PAGE SCROLL
TO ID
Ha permesso di collegare
Google Analytics al blog
(grazie all'inserimento di un
codice html)
MONSTER
INSIGHT
Per il loader di
caricamento del
blog
WP SMART
PRELOADER
Per la realizzazione del
form all'interno del footer
della home
WPFORMS
LITE

18. Widget
TAG CLOUD SEARCH
ALTERVISTA
ARTICOLI RECENTI

19. Contatti professionali
Per approfondire il tema, a livello professionale, abbiamo contattato Luca Morganti,
psicologo ricercatore presso Imaginary, un'azienda che si occupa di progettazione di
videogiochi e serious game, e Luca Roncella, Game Designer Applied presso il Museo della
Scienza e della Tecnologia "Leonardo Da Vinci"

20. Gli strumenti utilizzati per lavorare al progetto
WhatsApp Incontri Google Docs Google Drive

21. Gli strumenti utilizzati per lavorare al progetto
Biteable.com Infogram iMovie
-parte 2-

22. FEATURED POST
Sofia
La simulazione nei Serious
Games, con focus sull'analisi di
utilizzo ed efficacia di
simulatori neurochirurgici
all'interno del Besta NeuroSim
Center.
Lorenzo
Analisi del gioco "Assassin's
Creed" come Serious Game in
grado di insegnare la Storia.
Alessandra
Serious Games e riabilitazione
cognitiva. Analisi delle
caratteristiche e dei benefici.
Il caso di Rehab@Home: la
riabilitazione a domicilio.
Susanna
Come i serious game possono
favorire lo studio di una lingua
straniera: analisi di un caso

23. FEATURED POST
Per garantire ai Featured Post uno spazio dedicato e per mantenere alta la loro visibilità,
abbiamo deciso di attivare l'opzione "Stick to the Front Page" che Wordpress mette a
disposizione nella pagina di editing.
Il post, visualizzato come nella figura sopra riportata, si differenzia immediatamente dai
post comuni, attirando su di sè molta più attenzione.

24. FACEBOOKLINKEDIN
dei social
La scelta di utilizzare Linkedin deriva dall’intenzione di
rivolgerci al target dei professionisti: coloro che sono
interessati alla creazione di un serious game e coloro che
ne vogliono fare uso per la propria attività.
Facebook è invece rivolto al target dei curiosi, che su
questo social potranno trovare post e rimandi agli articoli
dedicati alle curiosità e che riteniamo essere di loro
interesse.
La scelta

25. Il nostro profilo Facebook (1)
Creazione della pagina in Dicembre 2018
Impostazione del profilo "aziendale" al fine di
monitorare i dati statistici inerenti ai nostri
follower
Adattamento del logo in modo da renderlo
compatibile con gli standard grafici di FB
- Home -

26. Il nostro profilo Facebook (2)
A lato, i dati statistici riguardo la crescita dei
nostri follower dalla creazione della pagina
fino ad oggi
Abbiamo totalizzato 165 "mi piace" alla
pagina!
- Analisi dei dati -
In questo grafico è mostrato invece il numero
di visualizzazioni alla pagina
In particolare risalta un forte numero di
visualizzazioni dal 5 al 7 Gennaio in
concomitanza con l'uscita del nostro video-
post riguardante il mondo Serious

27. Google Analytics
-Caratteristiche del pubblico-
PROGETTAZIOE E
DESIGN
CASE STUDIES CURIOSITA'
Il nostro pubblico si è rivelato essere per una lieve maggioranza maschile, per quanto riguarda l'età invece sono
maggiori gli utenti di anni compresi tra i 25 e i 34, in generale c'è una netta maggioranza di visitatori nelle fasce di età
più giovane. Questo dato rispecchia anche l'utenza del social Facebook, canale dal quale provengono la maggior
parte dei visitatori del blog.

28. Google Analytics
-Caratteristiche del pubblico-
CASE STUDIES CURIOSITA'
Analytics mostra come la
stragrande maggioranza degli
utenti di Are you Serious? ha
avuto accesso al blog tramite
mobile, ben il 75,8%, mentre
abbiamo una minoranza del
22,4% che ha avuto accesso
tramite desktop e meno del 2%
tramite tablet.
Device di accesso

29. Google Analytics
-Caratteristiche del pubblico-
CASE STUDIES CURIOSITA'
Are you Serious? ha fatto il giro del mondo! Il blog può vantare visualizzazioni da altri due continenti oltre quello
europeo: Asia e America. Gli Stati Uniti inoltre occupano il secondo posto per visualizzazioni con ben 59 utenti!
Provenienza:

30. Google Analytics
-Comportamento del pubblico-
PROGETTAZIOE E
DESIGN
CASE STUDIES CURIOSITA'Il nostro blog ha ottenuto una
frequenza di rimbalzo pari al 36,33%.
Questo valore riteniamo possa essere
considerato soddisfacente: dimostra,
infatti, che ben più della metà dei
nostri utenti hanno navigato il nostro
sito in maniera attiva, senza
"rimbalzare" fuori.

31. Google Analytics
-Comportamento del pubblico-
L'insieme dei nostri visitatori, considerando l'intero periodo di attività del blog (slide precedente), è formato per il 74,9% da visitatori
nuovi e solo dal 25,1% di visitatori che ritornano sul nostro blog.
Se però consideriamo una comparazione tra il primo periodo di pubblicazione (4 dicembre-31 dicembre) e il periodo posteriore al 7
gennaio, data in cui abbiamo acquisito un bacino d'utenza maggiore su Facebook, possiamo notare un miglioramento: siamo passati
ad avere il 37% di visitatori di ritorno.
Grazie alla maggiore utenza, alla costanza di pubblicazione e ai featured post, siamo riusciti a migliorare un dato che, inizialmente,
non era soddisfacente.
Periodo: 4 dicembre-31 gennaio Periodo: 4 dicembre-7 gennaio Periodo: 10 gennaio-31 gennaio

32. Google Analytics
-Comportamento del pubblico-
La durata media di ogni sessione è stata di circa 8 minuti, con una lieve differenza fra utenti arrivati direttamente e quelli arrivati tramite
referrer. I primi vi hanno passato mediamente più tempo, forse più interessati a navigare il sito piuttosto che al singolo articolo.
In media sono state visitate 2 pagine a sessione, l'utente arrivato in via diretta ne ha visitate in media più di chi è arrivato al blog via
referrer, il che andrebbe a supporto della precedente ipotesi.
L'ultima settimana ha visto un incremento della durata di sessione media (15 minuti) che colleghiamo alla pubblicazione dei featured post.
26 gennaio - 2 febbraio4 dicembre - 31 gennaio

33. Google Analytics
-Comportamento del pubblico-
La maggior parte degli
utenti è arrivata al
nostro blog tramite
facebook, in particolare
da facebook-mobile.
Il 38,5% degli utenti vi è
arrivato tramite ricerca
diretta.
Il 7,7% dalla ricerca su
Google.

34. Google Analytics
- Analisi della sessione degli utenti -
Grazie a questa analisi sulla
sessione dei nostri utenti abbiamo
potuto constatare che vi è stato un
importante picco in data 29
Gennaio. Questo fatto denota una
grossa interazione con la pagina da
parte del nostro pubblico in
concomitanza con l'uscita dei
Feautured Post.
Pubblicandoli assieme abbiamo
fatto sì che si generasse molto
traffico.

35. «Coloro che fanno distinzione fra intrattenimento ed
educazione forse non sanno che l’educazione deve essere
divertente e il divertimento deve essere educativo».
M. McLuhan
Grazie per l'attenzione!