Trerus: una guida 2.0 per l’Alta Valle del Sacco.


La Valle del Sacco è un gioiello di storia, cultura e paesaggi bucolici a soli cinquanta chilometri da Roma. Il rovescio della medaglia è che la Valle del Sacco è un Sito di Interesse Nazionale, per l’emergenza inquinamento. Anni di industrializzazione senza controllo hanno creato una vera e propria polveriera sanitaria. Il progetto ha come obiettivo quello di surclassare la fama negativa della valle, proponendo una guida 2.0 alla scoperta di questi magnifici luoghi.



Ricerca

La fase di ricerca è stata a tutto tondo. Ho iniziato dai paesi a cui sono più legato per poi allargare il raggio di azione. Ho cercato e catalogato dei punti di interesse che saranno poi inseriti nella guida.

Altra fase di ricerca è stata quella sulla storia delle guide turistiche e sulle best-practice dei giorni nostri.

Il progetto

Trerus è una guida 2.0 dell’Alta Valle del Sacco, questo significa che dovrà essere all’altezza del suo compito. Le zone da scoprire, spesso non sono coperte da un buon segnale internet e questo significa che il supporto da scegliere dovrà far fronte a questa problematica. Trerus si pone, come già accennato, come uno strumento di promozione territoriale e deve saper offrire all’utenza la possibilità di usufruire di alcuni itinerari tematici già pronti per essere utilizzati. Gli itinerari sono composti da “elementi” che potranno essere di varia natura. In un primo momento si è pensato di seguire una differenziazione tematica degli stessi, ma per una maggiore libertà la scelta è ricaduta sulla seguente differenziazione: luoghi fisici, eventi ed esperienze. Inoltre l’utente dovrà avere la possibilità di modificare parte di un itinerario nel caso non sia di suo gradimento.

Scelta del supporto: le Progressive Web App

Le Progressive Web App sono un ibrido tra un sito web e un’applicazione nativa. Le applicazioni native, quelle che ogni giorno utilizziamo sui nostri devices e scarichiamo dagli store, sono dei programmi che scaricano codice e contenuti sul dispositivo occupando spazio e offrendo all’utente un’esperienza a 360 gradi. I siti web, con l’affermarsi dei dispositivi mobili e delle applicazioni, hanno dovuto in qualche modo stare al passo con i tempi andando a modificare la loro struttura.

Dopo l’avvento del layout responsive dei siti web, l’esigenza di avvicinare il sito ad un’app aumenta progressivamente e in questo frangente troviamo il passo intermedio: le app ibride. Un’app ibrida consente la visualizzazione di un sito responsive all’interno di un contenitore, che crea l’illusione della applicazione nativa.

Le Progressive Web App invece sono completamente crossplatform. Sono dei siti web che non devono essere scaricati da uno store ma può essere aggiunto uno shortcut nella homepage e hanno le sembianze di un’applicaizone. La differenza sostanziale è che, al contrario delle app ibride, scaricano i dati temporanei all’interno della cache del dispositivo utilizzando le nuovissime tecnologie dei browser come i Service Workers e gli Web App Manifests. Nel 2015 vennero presentate dai developers di Google Chrome e proprio grazie a questo ed altri browser e alle nuove tecnologie, oggi possiamo avere delle simil applicazioni, scaricabili da qualsiasi dispositivo semplicemente attraverso uno shortcut sulla homepage.

Progressive web app

Sono Progressive, ovvero funzionano per ogni utente a prescindere dal browser perché sono costruite alla base con principi di miglioramento progressivo;
Sono Responsive perché si adattano a qualsiasi tipologia di schermo per ogni tipologia di dispositivo grazie all’aiuto del team di Google Chrome;
Sono indipendenti dalla disponibilità della connessione poiché i Service Worker consentono di far funzionare l’applicazione offline, in mancanza di connessione o di connessione debole; Sono App-like, ovvero si comportano e si presentano come delle applicazione native in termini di interazione e navigazione;
Sono sempre aggiornate grazie al processo di aggiornamento dei dati offerto dai Service Worker;
Sono sicure grazie al protocollo HTTPS per evitare che la connessione esponga i dati dell’utente o che i contenuti vangano alterati;
Sono facilmente individuabili come applicazioni tramite i browser grazie al Manifesto W3C e al Service Worker;
Sono facilmente ri-attivabili, grazie alla capacità di gestione notifiche push e facilmente installabili grazie alla possibilità di salvare la Url del sito come icona sulla hompage;
Infine sono facilmente divulgabili tramite la loro Url oppure legando l’url a sistemi terzi come beacon, Nfc e Qrcode.
In questo modo Trerus può avere le potenzialità di un sito, la facile gestione dei contenuti e la visualizzazione crossplatform senza dimenticare il coinvolgimento dell’utente con un profilo privato dove conservare i preferiti e le notifiche push.

Struttura dell’app

Il grafico nella parte superiore della pagina mostra la struttura dell progressive app. Quando si entra viene chiesta la registrazione per avere la possibilità di salvare offline e modificare gli itinerari altimenti, si può procedere senza registrarsi ma non si potrà usufruire della parte smart del servizio. la home page è il luogo intorno a cui tutto ruota e poiché è la prima pagina che verrà visualizzata, porterà l’utente nel vivo del servizio proponendo una serie di itinerari, luoghi, esperienze ed eventi in modo da mostrare immediatamente ciò che il servizio può offrire. Sullo stesso livello della homepage ci sono le classiche pagine che servono al sito web: la pagina “progetto” in cui si spiega che cosa è Trerus e il perché della sua esistenza; la pagina “Esplora” che sarà una ricerca approfondita su itinerari o luoghi, eventi, itinerari; la pagina “In Evidenza” dovrà essere il punto di contatto tra la redazione e gli utenti: attraverso questa pagina che si prefigura come un blog, la redazione darà notizie degne di rilievo sia per il servizio sia per presentare novità; la pagina “Contatti” è una pagina dove l’utente può entrare in contatto con la redazione e dove potrà ritrovare gli account social dei vari servizi. Dalla home e dalla pagina di ricerca si potranno visitare le pagine delle esperienze, dei luoghi e degli eventi dove saranno presentati in modo approfondito con dati specifici, contenuti multimediali e collegamenti. Nello stesso modo si potrà entrare nella pagina itinerario, dove si avrà la possibilità di visualizzare l’itinerario con i suoi elementi trattati in modo sommario per dare una visione d’insieme; dalla stessa pagina si potrà accedere alla pagina per modificare l’itinerario che si sta osservando per poi salvarlo e magari ripubblicarlo con un nome differente. In tutte le schermate è presente la navigazione primaria, fondamentale per navigare nel sito: da essa si potrà tornare alla home, entrare nelle pagine del progetto, di esplorazione, dei contenuti in evidenza, dei contatti, nel profilo (dove saranno presenti i nostri preferiti e gli elementi salvati) e fare una veloce ricerca per nome.

Design e Layouts

Material design

Il linguaggio scelto per la progressive app era la prima versione del Material Design. I layouts delle schermate è diviso, come precedentemente spiegato, in una versione desktop e una versione mobile.

Layouts

Grafica

Per quanto riguarda i colori, sono state scelte quattro tonalità molto differenti tra loro. L’Azzurro è il colore primario dell’applicazione e rappresenta Trerus, il fiume e l’acqua. Trerus, che proporrà itinerari, colorerà di azzurro anche questi ultimi. Gli altri tre colori sono stati scelti come rappresentanti di tre tipologie di contenuti: i luoghi fisici, gli eventi e le esperienze.
I luoghi fisici sono rappresentati da un giallo ocra, colore che ricorda le mappe e le pergamene.
Gli eventi sono di coloro rosso, poiché il colore rappresenta la convivialità, il vino e la passione.
Le esperienze sono di colore verde, perché rappresentano la natura e la maggior parte delle esperienze contenute in Trerus riguardano proprio la natura.

La palette dei colori risulta essere molto semplice ed escludendo i colori delle categorie quasi anonima. In realtà proprio la presenza di quattro colori così differenti (quelli della colonna di sinistra) e di fotografie all’interno dell’app, hanno costretto l’utilizzo di un solo colore per l’applicazione con la grande predominanza del bianco. Esclusi, infatti il rosso, il verde ed il giallo, l’app si presenta completamente bianca se non per il colore azzurro (degli itinerari) che colora le icone e viene utilizzato come colore d’accento. L’arancio viene utilizzato per i feedback ed è stato preso dalla libreria del material design: è un colore acceso che tende a catturare l’attenzione ma viene usato in aree molto piccole ed insignificanti per l’occhio dell’utente. i grigi sono utilizzati per le scritte con eccezione del terzo che viene utilizzato per la bottom bar.

Le icone presenti nell’app sono, ad eccezione del logo, tutte icone “di servizio” ovvero quelle icone che indicano un’azione tecnica da svolgere.
Le icone utilizzate si ispirano tutte al material design e sono state modificate per essere utilizzate al meglio all’interno dell’applicazione.

Risultato finale

Come detto in precedenza attorno alla home ruota tutta la progressive app. In alto abbiamo la navigazione principale dove possiamo conoscere il progetto, Esplorare i contenuti in modo ordinato, vedere le news della redazione attraverso un blog e avere i contatti, ricercare nel sito tramite nome ed accedere al profilo. Nella prima parte troveremo alcuni contenuti che ruotano, mentre la parte centrale è tutta per le schede: abbiamo itinerari, luoghi, esperienze ed eventi che la redazione sceglie di mettere nella home. In basso abbiamo un piccolo carosello di foto social prese da instagram grazie all’hashtag #trerusguide.

Nella pagina Esplora possiamo visualizzare itinerari, luoghi, esperienze ed eventi attraverso il sottomenù. Nella progressive app la bottom bar con i suoi tre pallini e l’icona di Trerus formano la parte “Esplora” della progressive app. All’interno di ogni esplorazione si può decidere di visualizzare le schede in differenti ordini (distanza, data di upload, ordine alfabetico).

La schermata itinerario è una schermata che ha due colonne ferme e una, con i contenuti dell’itinerario che scorre in verticale (la prima da destra). In questa pagina si può visualizzare la descrizione dell’itinerario, dei suoi contenuti, si può scaricare offline, modificare, aggiungere ai preferiti, esportare su Google Maps per la navigazione, condividere e visualizzare la mappa.

In seguito vediamo come si visualizza la mappa navigabile (integrazione con Google Maps) e visualizzare un’anteprima degli “oggetti contenuti”. Per chi è più interessato alle notizie storiche e ai contenuti ancor più curati può entrare nella descrizione dell’oggetto.

La schermata di modifica consente di integrare l’itinerario o cancellarne elementi. Questa facoltà appartiene solamente agli utenti iscritti. Come si può notare c’è una piccola differenza. Nella pagina per schermi grandi, i contenuti dell’itinerario (colonna di sinistra) sono blu: questa scelta è dovuta ad un eccesso di colore nella pagina. Altra differenza sta nell’interazione. Nel pc è presente il pulsante sulle schede (sempre colonna di sinistra) per le azioni mentre sullo smartphone viene utilizzato il touch.

La schermata dell’oggetto, è quella che detiene il maggior numero di informazioni: in essa ci sono le informazioni utili, i contatti e molto elementi multimediali. Grazie all’integrazione delle Google Apps, potremmo usufruire di foto, video, foto a 360°, video carboard. In linea con lo sviluppo delle progressive app è prevista anche l’integrazione con la realtà aumentata di Google Daydream.

Il profilo personale consente di avere nel servizio una piccola parte social. L’utente puà inserire un’immagine del profilo, il nome e una breve descrizione. Nel profilo appariranno le azioni volontarie dell’utente (condivisioni) e invontarie (aggiunte ai preferiti e modifiche itinerari).