Prove tecniche di design: come testare sul campo gli strumenti di progettazione

Grazie alla ridefinizione del sito cloud.italia.it, Designers Italia ha avuto l’opportunità di verificare sul campo strumenti e risorse a disposizione di PA e fornitori per realizzare servizi pubblici digitali

di Daniela Iozzo, Daniele Tabellini, Emilio Spatola e Mauro Filippi

credits: imgix via Unsplash

Semplice, accessibile, inclusivo grazie ai kit di Designers Italia: la riprogettazione del sito Cloud Italia, punto di riferimento per la strategia sul cloud computing nella Pubblica Amministrazione, online dallo scorso maggio, è stata l’occasione per testare sul campo gli strumenti di Designers Italia in corso di revisione e aggiornamento, per poi metterli liberamente a disposizione del pubblico.

Si tratta, in particolare, dei kit necessari al design dei touchpoint digitali della Pubblica Amministrazione. Strumenti che, insieme a un processo di design suddiviso in cinque fasi, permettono di progettare in maniera efficace sulla base delle necessità delle persone. I kit verranno nel tempo ampliati e ulteriormente migliorati, grazie anche alla raccolta di feedback e di suggerimenti di chi collabora alla realizzazione dei servizi pubblici digitali.

Partire dall’analisi del contesto per co-progettare soluzioni digitali

Il ridisegno del sito Cloud Italia, una volta organizzato il progetto e la sua gestione, è iniziato infatti dalle attività di ricerca e analisi (fase “comprendere”) insieme alla verifica dei risultati ottenuti dal sito preesistente (fase di “validazione”). Le informazioni dei web analytics sulle visite e sui principali flussi di navigazione, unite ai risultati dell’analisi dei contenuti e degli aspetti legati alla SEO (Search Engine Optimization) hanno fornito i dati di partenza per impostare le attività di co-progettazione, condotte da un team multidisciplinare interno al Dipartimento per la trasformazione digitale (DTD) con il coinvolgimento, a seconda delle varie sessioni di lavoro, di un service designer, una content designer, uno UX designer, uno UI designer e uno sviluppatore front-end, oltre al project owner e agli esperti di dominio del team Cloud Italia.

Attività propedeutica al redesign del sito e alla verifica dei contenuti, è stata la definizione della vision e della mission di progetto, che ha permesso di validare la coerenza delle informazioni veicolate rispetto ai cambiamenti del contesto, anche in vista delle azioni previste dal Piano Nazionale di Ripresa e Resilienza (PNRR). Nell’ottica dell’applicazione di un approccio iterativo ed evolutivo alla progettazione, anche la vision e la mission dei progetti deve essere, infatti, costantemente verificata, validata, concertata e aggiornata, per assicurarsi che i contenuti esposti rimangano al passo con l’evoluzione tecnologica e sociale.

In particolare, il team di lavoro ha individuato, grazie al kit di co-progettazione, due principali categorie di intervento:

1. una serie di obiettivi istituzionali
   - essere il punto di informazione per i cittadini sulle iniziative nazionali rispetto al tema del Cloud;
   - avvicinare la PA, i fornitori e i cittadini alla strategia nazionale sul cloud nella PA;
   - presentare contenuti autorevoli e facilmente fruibili per le ricerche web degli utenti;
2. una serie di obiettivi funzionali
   - consultare risorse utili per realizzare il percorso di trasformazione e abilitazione al cloud
   - verificare le modalità d’uso del catalogo dei servizi qualificati offerti per la PA in base alle proprie esigenze.

Il lavoro di progettazione ha quindi preso il via con la ridefinizione e il consolidamento dei principi dell’ecosistema “Cloud della PA”, in particolare dei suoi valori chiave: sicurezza, affidabilità, fruibilità, reversibilità, scalabilità, resilienza, elasticità. Grazie all’analisi del contesto, è stato inoltre possibile ricostruire la mappa degli stakeholders, attraverso l’individuazione dei principali attori dell’ecosistema, nonché delle loro necessità. L’attività di ricerca ha così fatto emergere che:

• i funzionari delle Pubbliche Amministrazioni utilizzano il sito cloud.italia.it come punto unico d’accesso alle principali informazioni e alle risorse disponibili a supporto dell’adozione del cloud (Cloud Enablement Program, kit e Framework);
• i fornitori che offrono servizi cloud alla PA hanno bisogno di conoscere il proprio ruolo all’interno della strategia nazionale e avere informazioni sul processo di qualificazione dei servizi (Cloud Marketplace);
• i cittadini hanno la necessità di comprendere i benefici che derivano dall’adozione del cloud da parte della PA.

Una volta allineato il team sugli obiettivi, è stato possibile realizzare una mappatura collaborativa delle principali aree di miglioramento del precedente sito cloud.italia.it, individuando in particolare quattro cluster d’azione:

• migliorare il linguaggio e l’interfaccia del sito, per allinearla al design system e ai siti del DTD affini per temi (come, ad esempio, Designers Italia e Developers Italia);
• riequilibrare la densità informativa e semplificare la fruizione di alcuni contenuti, introducendo, ad esempio, sezioni e capitoli insieme a call to action chiare e riconoscibili;
• favorire una targetizzazione dei contenuti, creando percorsi per le PA, i fornitori e cittadini;
• introdurre una sezione editoriale per news e comunicazioni.

I dati relativi agli analytics sono confluiti nella fase di ricerca, insieme a un benchmark dei principali servizi governativi internazionali, speculari al progetto Cloud Italia. Le evidenze emerse hanno fornito importanti insight circa l’ottimizzazione dei percorsi e la riorganizzazione dei contenuti, ad esempio nel caso dei form di contatto e contribuzione, spostati da una pagina con poco traffico a una in evidenza. L’analisi SEO e i report sull’accessibilità hanno inoltre evidenziato anche possibili miglioramenti sulle URL, sulle descrizioni alternative e sulla formattazione dei testi per la lettura automatica.

Definire l’architettura dell’informazione e il content design

Attraverso interviste agli stakeholders, sessioni di co-progettazione da remoto, e l’uso di software di lavoro collaborativo, sono stati inoltre costruiti dei profili utente (Modello personas) in base ai tre principali target considerati (Pubblica Amministrazione, fornitori e cittadini) ed è stata analizzata l’intera architettura dell’informazione, individuando le correlazioni dei contenuti con le esigenze dei diversi utenti. Sono così emerse nuove possibilità di miglioramento, come, ad esempio, la creazione di un’area editoriale legata alla comunicazione, una sezione specifica per le domande frequenti (FAQ) e un glossario dei termini tecnici più ricorrenti.

Una delle sfide tipiche della riprogettazione di un sito web, in particolare nel caso si tratti di pubbliche amministrazioni, riguarda infatti la maniera in cui vengono organizzati e presentati i contenuti, siano essi visuali o testuali. Sotto questo aspetto, purtroppo, la PA a volte non eccelle e spesso prevalgono contenuti e documenti redatti in “burocratese” o “legalese”, che poco hanno a che fare con quelli che dovrebbero essere gli obiettivi di contenuti disegnati e organizzati per essere facilmente recuperati durante la navigazione web e comodamente fruiti dall’utente.

Per facilitare il processo di redesign del sito cloud.italia.it, il team di progettazione ha così sfruttato le risorse di Designers Italia anche per semplificare e agevolare la fruizione, la leggibilità e la trovabilità di contenuti e documenti. Grazie ai kit della fase “progettare” è stato, infatti, possibile ridefinire i seguente aspetti:

• L’architettura dell’informazione. Sulla base delle evidenze emerse nella fase di ricerca, il team di progettazione ha apportato modifiche e “aggiunte” all’architettura del sito web, con la creazione di nuove pagine dedicate a servire intenti informativi specifici e l’implementazione di una sezione dedicata a un glossario per la disambiguazione rapida dei termini più ostici e specialistici; sono stati inoltre creati rimandi più immediati fra le varie sezioni del sito e semplificato gli slug, ovvero l’ultima parte degli indirizzi URL.
• Il linguaggio. La revisione dei testi è stata guidata da un unico ed essenziale principio: semplificare il linguaggio ovunque possibile, senza però snaturare il significato o ridurre la complessità degli argomenti trattati. Contenuti digitali efficaci e inclusivi dovrebbero essere infatti immediatamente comprensibili e fruibili all’utente finale, come suggerito dalla Guida al linguaggio della Pubblica Amministrazione e dalle più avanzate esperienze in materia di scrittura e linguaggio per progetti digitali governativi in ambito internazionale.
• Il tono di voce. La scelta è stata quella di “dare del tu” all’utente, in modo da allontanarsi da forme impersonali e accorciare le distanze nei confronti dei lettori, ormai abituati a sentirsi direttamente coinvolti sia come consumatori di prodotti che di informazioni.
• Il microcopy. Il copy dei pulsanti, delle call-to-action e delle voci di menu è stato definito in maniera “sartoriale” rispetto alla tipologia di azione richiesta e al risultato atteso in termini di esperienza utente, seguendo una logica ispirata alla brevità, alla chiarezza e alla consistenza.
• La SEO. Per migliorare il posizionamento del sito nei motori di ricerca sono state create URL parlanti e specifiche, oltre che una metadatazione univoca e tarata ad hoc sulla singola pagina, per favorire non soltanto un corretto posizionamento del sito nelle pagine di risultato dei motori di ricerca, ma anche per garantire all’utente una buona UX (esperienza utente) già dai risultati di ricerca. Infine — sia per questioni legate alle SEO che all’accessibilità — particolare cura è stata posta ai testi alternativi (alt text) delle immagini, incluse quelle a scopo puramente decorativo.
• L’organizzazione dei documenti. Per alleggerire la struttura delle pagine contenenti dei documenti (scaricabili o accessibili via link), a livello progettuale è stata implementata una soluzione di raggruppamento a scomparsa/ricomparsa delle risorse all’interno di categorie tematiche ad hoc.

Il processo di redesign ha seguito il naturale legame progettuale tra disegno dei contenuti, esperienza utente e disegno dell’interfaccia: da questo punto di vista, la soluzione scelta per l’organizzazione dei contenuti della home page caratterizza questa sinergia tra competenze e fasi di progettazione successive.

Costruire e sviluppare il touchpoint digitale

Il motore tecnologico del nuovo Cloud Italia è Gatsby.js, un moderno e veloce generatore di siti statici basato su React, che in questo caso — qui la repository github — sfrutta gli strumenti per lo sviluppo dell’interfaccia implementando React e Bootstrap Italia a livello di front end. Grazie a queste risorse, oltre che all’utilizzo del wireframe kit e dello UI kit messi a disposizione da Designers Italia, il nuovo sito Cloud è stato così ripensato, in prospettiva mobile first, per essere conforme a quanto previsto dalle Linee guida di design per i servizi web della Pubblica Amministrazione, anche in materia di accessibilità.

Su questo punto è bene ancora una volta sottolineare che oltre a rispondere a precisi riferimenti normativi (Legge Stanca e successive modificazioni, Decreto legislativo 106/2018, Linee guida per l’accessibilità degli strumenti informatici, Piano Triennale per l’informatica nella PA), l’accessibilità rappresenta un’opportunità per migliorare l’usabilità complessiva di un sito o di un servizio per tutti gli utenti.

La struttura e l’ordine degli “heading” secondo la semantica HTML, la semplificazione degli elementi in pagina, l’utilizzo di accorgimenti tecnici e strumenti di testing per intercettare errori sono solo alcune delle soluzioni adottate alla luce dell’esperienza per la riprogettazione del sito MITD. L’attenzione agli utenti, infatti, è replicabile e scalabile: una volta consolidata nella progettualità di siti e servizi diventa più semplice applicarla a diverse soluzioni.

Oltre a fornire spunti e indicazioni utili al miglioramento dei kit di progettazione, la ristrutturazione del sito cloud.italia.it ha permesso di capitalizzare al contempo le soluzioni di design messe a punto per il sito del Ministro per l’innovazione tecnologica e la transizione digitale (MITD): un esempio concreto di come le buone pratiche di progettazione e realizzazione possono essere riutilizzate anche per la creazione di altri siti, verticali o di diversa ampiezza, anche con specifico riferimento al tema dell’accessibilità. L’impostazione della griglia di homepage, quella delle pagine foglia e delle card per le notizie sono state infatti mutuate direttamente dal design UX/UI e dall’uso di UI Kit e Bootstrap Italia utilizzati per innovazione.gov.it, alle quali sono state integrate soluzioni ad hoc come la fascia dedicata alle “Risorse utili” per la presentazione di documentazione tecnica e amministrativa.

Per migliorare l’efficacia in termini di comunicazione e soddisfazione utente inoltre, è stato curato con particolare attenzione il progetto grafico per la parte visual del sito, impostando una art direction semplice ma ben riconoscibile per le composizioni di immagini che accompagnano i contenuti testuali, con l’obiettivo di dotare il sito cloud.italia.it di una precisa identità visiva, in modo da essere immediatamente riconoscibile in tutte le sue declinazioni comunicative.

Il tuo feedback è prezioso

Per Designers Italia il nuovo sito Cloud ha rappresentato un’importante occasione di testing dei kit messi a disposizione di fornitori e PA per progettare servizi pubblici digitali sempre più aderenti ai bisogni dei cittadini. Grazie agli elementi raccolti sul campo, infatti, è stato possibile integrare e aggiornare alcuni template e lavorare a nuove risorse, tutte disponibili liberamente su designers.italia.it. Ma il nostro obiettivo è continuare a migliorare, grazie anche alla raccolta di feedback e di suggerimenti di chi collabora alla progettazione dei servizi pubblici digitali.

Inviaci il tuo contributo o suggerisci ulteriori nuove risorse via mail a contatti@designers.italia.it o sul canale #design-service dello Slack di Developers Italia, oppure raccontaci la tua esperienza sulla pagine Medium di Designers Italia. Il tuo esempio potrà essere utile anche per altri.