Abbiamo avviato il progetto Atlante della Svizzera (AdS) con un nuovo concetto, in cui l’interfaccia grafica (GUI) rappresenta un elemento centrale del nostro Atlante interattivo. Perciò il design della GUI è stato inserito sin dall’inizio nel processo di pianificazione e realizzazione dell’Atlante. Per poter sviluppare al meglio l’interfaccia grafica considerando la struttura piuttosto complessa dell’Atlante, si è seguito l’approccio dell’Interaction Design (IxD). Sostanzialmente, questo approccio IxD si può suddividere in quattro fasi principali: 1) Investigazione, 2) Design di base, 3) Design dettagliato e 4) Implementazione . Le prime tre fasi, realizzate in collaborazione con la società dreipol GmbH incaricata dell’IxD sono già state ultimate e al momento lavoriamo all’implementazione degli elementi della GUI e al loro collegamento con l’APSglobe.
Investigazione
Per la fase investigativa abbiamo dapprima studiato varie GUI attuali, per avere una panoramica e farci delle idee sui possibili layout per la GUI. Successivamente è stata definita la struttura generale della GUI con l’aiuto di tecniche die progettazione centrata sull’utente (UCD).
All’inizio sono stati eseguiti degli studi sullo stato attuale di atlanti web, geoportali e mappamondi virtuali. Al fine di ottenere esperienze con le GUI per gli apparecchi mobili, gli studenti della Zürcher Hochschule der Künste hanno realizzato dei prototipi servendosi di materiale tratto dall’AdS3. Uno studio supplementare con i “nativi digitali” è stato condotto su applicazioni desktop, fornendo indicazioni utili riguardo al layout ottimale della GUI. Inoltre, ci ha permesso di comprendere meglio il comportamento della giovane generazione di utenti.
La valutazione dei requisiti generali ci ha indotti a scegliere per il design di riferimento per l’Atlante l’interfaccia Metro di Windows 8 con un comportamento responsivo; successivamente è stato creato un mockup per verificarne la fattibilità.
In seguito abbiamo formulato diversi casi d’uso per l’utilizzo dell’Atlante, in cui si descrivono situazioni tipiche con cosiddette persone (studenti, giornalisti, anziani, escursionisti, ecc.), scenari (formazione, lavoro, tempo libero) e attività (es. confronto dei layer cartografici, aggiunta di dati propri, modifiche della carta).
Infine è stata definita una lista di funzioni interattive dell’Atlante di base e avanzate. Poiché la nuova edizione dell’AdS si concentrerà sulla visualizzazione e sull’esplorazione di carte in 3D, inizialmente si è introdotto un numero limitato di funzioni, quali ad esempio la ricerca di luoghi e temi, la selezione temporale, la richiesta di informazioni sulle carte, la misurazione di distanze e superfici e la visualizzazione di elementi multimediali.
Design di base
La fase del design di base è decisiva per l’intero progetto dell’Atlante. In questa fase si definisce il “Look and Feel” dell’Atlante. Molto probabilmente gli utenti resteranno collegati all’Atlante più a lungo se il design complessivo della GUI risulta attraente!
I grafic designer IxD hanno creato numerose versioni di GUI per mezzo di wireframes e moodboards comprensive di schemi di caratteri e di colori, che abbiamo poi potuto valutare.
L’idea di base del design della GUI è stata poi impiegata su entrambe le pagine principali dell’Atlante, la pagina iniziale e la pagina delle carte. Le decisioni riguardo al layout generale, al design responsivo, alla tipografia, ai colori della legenda, ecc. sono state messe per iscritto. I risultati di questa fase sono stati mostrati nella Design Direction Presentation (DDP), essenziale per prendere le ulteriori decisioni riguardo all’aspetto grafico e agli elementi della GUI.
Design dettagliato
L’obiettivo della fase del design dettagliato consiste nell’ottenere un layout grafico ben definito per la GUI dell’Atlante e interazioni prestabilite per la fase di implementazione.
Per il design dettagliato è stato necessario disegnare tutte le varianti del layout della GUI e tutti i singoli elementi in formato vettoriale. Sono state così create delle pagine di layout, come le carte della settimana, la selezione della categoria tematica, la funzione di ricerca, la guida e l’impressum. Sono state quindi inserite sequenze animate per illustrare il passaggio dalla pagina iniziale alla pagina delle carte e viceversa. Al fine di risparmiare tempo e costi, il design dettagliato delle icone vettoriali è stato eseguito sulla base di una raccolta già esistente. Infine, alle descrizioni delle modalità (on/off) e delle funzioni interattive (es. tool per misurare le distanze) sono stati allegati anche esempi visivi, poiché una semplice descrizione potrebbe risultare facilmente ambigua per gli sviluppatori software.
L’esito di questa fase è la Detailed Design Documentation (DDD), che serve come documento di riferimento e contiene le specifiche (dimensioni, comportamenti) di ciascun elemento della GUI.
Implementazione
Uno dei principali obiettivi dell’ implementazione della GUI è quello di mantenere al minimo le risorse necessarie per l’interfaccia stessa, in modo da non ostacolare i complessi processi di visualizzazione. Perciò abbiamo redatto un elenco di possibili tecnologie applicabili. Il Chromium Embedded Framework (CEF) è stata selezionata come browser mentre vue.js come JavaScript-Framework. Per garantire una comunicazione fluida con il back end dell’Atlante e il motore di visualizzazione 3D, sono stati definiti modelli di dati e interfacce di eventi. Riguardo al linguaggio CSS i nostri sviluppatori IxD del front end hanno avuto libera scelta e hanno optato per SASS. Come code repository è stato utilizzato Github, per documentare e verificare regolarmente i progressi dell’implementazione.
Successivamente, sono stati definiti i moduli di consegna per la ditta incaricata dell’IxD, comprendenti: strutture e moduli di base (layout delle singole pagine, sistema di icone, menù a discesa standard e pulsanti, ecc.), moduli di contenuto (risultati di ricerca, informazioni multimediali, overlay, ecc.), moduli GUI (icone, menù a discesa, pulsanti), animazioni (transizioni tra pagine, effetti hover su icone, ecc.) e interfacce per i componenti della GUI. Dopo la consegna di ogni modulo è stato eseguito un test d’implementazione per migliorare l’applicazione in modo iterativo. Al termine di questa quarta e ultima fase è stato programmato un test d’usabilità con diversi gruppi di utenti attuali dell’AdS3 e persone che non conoscono l’AdS.
Il risultato finale dell’intero processo di progettazione della GUI sarà una GUI operativa, robusta e veloce, in grado di funzionare efficacemente anche in condizioni difficili. L’obiettivo è far sì che la GUI supporti gli utenti durante l’esplorazione dei temi cartografici, senza risultare invadente.
Abbiamo avviato il progetto Atlante della Svizzera (AdS) con un nuovo concetto, in cui l’interfaccia grafica (GUI) rappresenta un elemento centrale del nostro Atlante interattivo. Perciò il design della GUI è stato inserito sin dall’inizio nel processo di pianificazione e realizzazione dell’Atlante. Per poter sviluppare al meglio l’interfaccia grafica considerando la struttura piuttosto complessa dell’Atlante, si è seguito l’approccio dell’Interaction Design (IxD). Sostanzialmente, questo approccio IxD si può suddividere in quattro fasi principali: 1) Investigazione, 2) Design di base, 3) Design dettagliato e 4) Implementazione . Le prime tre fasi, realizzate in collaborazione con la società dreipol GmbH incaricata dell’IxD sono già state ultimate e al momento lavoriamo all’implementazione degli elementi della GUI e al loro collegamento con l’APSglobe.
Investigazione
Per la fase investigativa abbiamo dapprima studiato varie GUI attuali, per avere una panoramica e farci delle idee sui possibili layout per la GUI. Successivamente è stata definita la struttura generale della GUI con l’aiuto di tecniche die progettazione centrata sull’utente (UCD).
All’inizio sono stati eseguiti degli studi sullo stato attuale di atlanti web, geoportali e mappamondi virtuali. Al fine di ottenere esperienze con le GUI per gli apparecchi mobili, gli studenti della Zürcher Hochschule der Künste hanno realizzato dei prototipi servendosi di materiale tratto dall’AdS3. Uno studio supplementare con i “nativi digitali” è stato condotto su applicazioni desktop, fornendo indicazioni utili riguardo al layout ottimale della GUI. Inoltre, ci ha permesso di comprendere meglio il comportamento della giovane generazione di utenti.
La valutazione dei requisiti generali ci ha indotti a scegliere per il design di riferimento per l’Atlante l’interfaccia Metro di Windows 8 con un comportamento responsivo; successivamente è stato creato un mockup per verificarne la fattibilità.
In seguito abbiamo formulato diversi casi d’uso per l’utilizzo dell’Atlante, in cui si descrivono situazioni tipiche con cosiddette persone (studenti, giornalisti, anziani, escursionisti, ecc.), scenari (formazione, lavoro, tempo libero) e attività (es. confronto dei layer cartografici, aggiunta di dati propri, modifiche della carta).
Infine è stata definita una lista di funzioni interattive dell’Atlante di base e avanzate. Poiché la nuova edizione dell’AdS si concentrerà sulla visualizzazione e sull’esplorazione di carte in 3D, inizialmente si è introdotto un numero limitato di funzioni, quali ad esempio la ricerca di luoghi e temi, la selezione temporale, la richiesta di informazioni sulle carte, la misurazione di distanze e superfici e la visualizzazione di elementi multimediali.
Design di base
La fase del design di base è decisiva per l’intero progetto dell’Atlante. In questa fase si definisce il “Look and Feel” dell’Atlante. Molto probabilmente gli utenti resteranno collegati all’Atlante più a lungo se il design complessivo della GUI risulta attraente!
I grafic designer IxD hanno creato numerose versioni di GUI per mezzo di wireframes e moodboards comprensive di schemi di caratteri e di colori, che abbiamo poi potuto valutare.
L’idea di base del design della GUI è stata poi impiegata su entrambe le pagine principali dell’Atlante, la pagina iniziale e la pagina delle carte. Le decisioni riguardo al layout generale, al design responsivo, alla tipografia, ai colori della legenda, ecc. sono state messe per iscritto. I risultati di questa fase sono stati mostrati nella Design Direction Presentation (DDP), essenziale per prendere le ulteriori decisioni riguardo all’aspetto grafico e agli elementi della GUI.
Design dettagliato
L’obiettivo della fase del design dettagliato consiste nell’ottenere un layout grafico ben definito per la GUI dell’Atlante e interazioni prestabilite per la fase di implementazione.
Per il design dettagliato è stato necessario disegnare tutte le varianti del layout della GUI e tutti i singoli elementi in formato vettoriale. Sono state così create delle pagine di layout, come le carte della settimana, la selezione della categoria tematica, la funzione di ricerca, la guida e l’impressum. Sono state quindi inserite sequenze animate per illustrare il passaggio dalla pagina iniziale alla pagina delle carte e viceversa. Al fine di risparmiare tempo e costi, il design dettagliato delle icone vettoriali è stato eseguito sulla base di una raccolta già esistente. Infine, alle descrizioni delle modalità (on/off) e delle funzioni interattive (es. tool per misurare le distanze) sono stati allegati anche esempi visivi, poiché una semplice descrizione potrebbe risultare facilmente ambigua per gli sviluppatori software.
L’esito di questa fase è la Detailed Design Documentation (DDD), che serve come documento di riferimento e contiene le specifiche (dimensioni, comportamenti) di ciascun elemento della GUI.
Implementazione
Uno dei principali obiettivi dell’ implementazione della GUI è quello di mantenere al minimo le risorse necessarie per l’interfaccia stessa, in modo da non ostacolare i complessi processi di visualizzazione. Perciò abbiamo redatto un elenco di possibili tecnologie applicabili. Il Chromium Embedded Framework (CEF) è stata selezionata come browser mentre vue.js come JavaScript-Framework. Per garantire una comunicazione fluida con il back end dell’Atlante e il motore di visualizzazione 3D, sono stati definiti modelli di dati e interfacce di eventi. Riguardo al linguaggio CSS i nostri sviluppatori IxD del front end hanno avuto libera scelta e hanno optato per SASS. Come code repository è stato utilizzato Github, per documentare e verificare regolarmente i progressi dell’implementazione.
Successivamente, sono stati definiti i moduli di consegna per la ditta incaricata dell’IxD, comprendenti: strutture e moduli di base (layout delle singole pagine, sistema di icone, menù a discesa standard e pulsanti, ecc.), moduli di contenuto (risultati di ricerca, informazioni multimediali, overlay, ecc.), moduli GUI (icone, menù a discesa, pulsanti), animazioni (transizioni tra pagine, effetti hover su icone, ecc.) e interfacce per i componenti della GUI. Dopo la consegna di ogni modulo è stato eseguito un test d’implementazione per migliorare l’applicazione in modo iterativo. Al termine di questa quarta e ultima fase è stato programmato un test d’usabilità con diversi gruppi di utenti attuali dell’AdS3 e persone che non conoscono l’AdS.
Il risultato finale dell’intero processo di progettazione della GUI sarà una GUI operativa, robusta e veloce, in grado di funzionare efficacemente anche in condizioni difficili. L’obiettivo è far sì che la GUI supporti gli utenti durante l’esplorazione dei temi cartografici, senza risultare invadente.