Dietro le quinte del sito MITD, dalla ricerca alla pubblicazione online (2a parte)

Prosegue il racconto delle scelte progettuali e delle fasi di realizzazione del nuovo sito istituzionale del Ministro per l’innovazione tecnologica e la transizione digitale, ufficialmente online dallo scorso 4 febbraio — Leggi la prima parte

di Daniele Tabellini, Francesco Zaia e Matteo Vabanesi

Uno degli elementi centrali nella riprogettazione del sito MITD è stata l’attenzione ai contenuti, grazie a una content strategy in grado di sostenere la migrazione delle pagine alla nuova piattaforma e, allo stesso tempo, rafforzare la definizione delle linee guida editoriali necessarie alla loro gestione nel tempo. Ripensare l’architettura dell’informazione, il design UX/UI e le scelte relative al CMS (content management system) rischiava, infatti, di rivelarsi meno efficace del previsto senza una strategia di gestione dei contenuti condivisa a vari livelli dalla “macchina” redazionale. Una necessità del resto sottolineata anche dalla funzione principale individuata come base della riprogettazione: divulgare le attività del Ministro e del Dipartimento in maniera riconoscibile per un pubblico trasversale.

Per il sito MITD questo ha significato anzitutto impostare, grazie al modello di analisi dei contenuti e al kit di ottimizzazione SEO (search engine optimization) messi a disposizione sul sito di Designers Italia, una content audit quantitativa e qualitativa di tutte le informazioni da migrare, evidenziando, tra i vari elementi, numerazione progressiva delle pagine, titoli, metadati ed eventuali problemi rilevati. Si tratta di un passaggio basilare, per gestire in maniera efficace lo spostamento di contenuti da un sistema (in questo caso un sito) a un altro: fare un inventario garantisce infatti che nulla vada perso durante la migrazione, specialmente nel caso venga effettuata da più persone in un gruppo di lavoro; e soprattutto rappresenta lo “storico” sul quale impostare il monitoraggio di ogni singola pagina nel tempo.

Tuttavia per ottimizzare la migrazione dei contenuti del sito MITD è stato necessario inserire, nei fogli d’analisi, anche una voce “argomento” a ciascun contenuto. Favorire dei percorsi di navigazione orizzontale ha significato, infatti, mettere a punto un consistente sistema di tagging, riservando particolare attenzione alla scelta delle parole chiave. Il gruppo di lavoro ha così esplorato le possibilità offerte da OntoPIA e Eurovoc, nell’ottica di allineare il sito alle ontologie standard e ai vocabolari controllati creati per favorire una completa interoperabilità semantica dei contenuti nei siti della Pubblica Amministrazione.

Purtroppo, però, in entrambi i cataloghi non è stato possibile reperire indicazioni inerenti il tema “innovazione”, e i vincoli temporali del progetto non hanno permesso la costruzione di ontologie o vocabolari dedicati, che avrebbero permesso anche un contestuale aggiornamento delle risorse di OntoPIA. Per rendere funzionale il sistema di tagging sono stati comunque introdotti, a livello redazionale, una serie di vincoli relativi al numero di parole chiave e all’attribuzione dei permessi necessari ad introdurre nuovi argomenti.

Per essere efficaci, infatti, i tag non devono essere né troppo specifici (non aggregherebbero contenuti) né troppo generici (restituirebbero troppi risultati): l’equilibrio è dato dall’ampiezza del progetto e dai possibili scenari di evoluzione. Nel nostro caso, scenari e contenuti da migrare hanno portato alla creazione di un sistema composto da 49 parole chiave, l’introduzione di un massimo di quattro ricorrenze per contenuto, la composizione di una serie di dipendenze fra i termini da utilizzare e, soprattutto, il controllo del sistema affidato a un numero ristretto di redattori del sito. Il risultato si può vedere nella pagina lista degli argomenti, la mappa concettuale che attraversa e crea una rete di relazioni all’interno dell’universo MITD.

Lo sviluppo front end

In parallelo alla content audit, il team di riprogettazione si dedicava, intanto, anche alla definizione delle risorse necessarie allo sviluppo front end del sito. Una fase condotta utilizzando anche in questo caso gli strumenti messi a disposizione da Designers Italia, in particolare la libreria Bootstrap Italia, una risorsa fondamentale per ottenere una base di codice efficiente, scalabile e mantenibile. Bootstrap Italia, infatti, è realizzato con l’obiettivo di rendere più lineare e veloce la fase di sviluppo dei progetti digitali, in quanto la libreria riproduce fedelmente quanto già previsto dallo UI Kit, assicurando aderenza alle Linee guida di design per i servizi web della Pubblica Amministrazione in tema di accessibilità e compatibilità tra diversi dispositivi.

Molti dei template previsti in fase di progettazione, come ad esempio l’impostazione del menu principale, le pagine lista per i risultati di ricerca, o le “foglie” delle singole notizie, sono stati infatti realizzati utilizzando semplicemente componenti già previsti nella libreria, all’occorrenza personalizzandoli per favorire una maggiore fruibilità da ogni tipo di dispositivo. Altri elementi, invece, hanno richiesto l’ampliamento del codice con nuovi componenti: è il caso, tra gli altri, delle testate nelle pagine dedicate ai progetti, oppure delle card per la gestione degli allegati agli articoli. Entrambi sono stati realizzati per essere compatibili con le librerie di Bootstrap Italia, e potranno quindi essere riutilizzabili, con pochi adattamenti, su altri progetti della Pubblica Amministrazione.

Nel pieno rispetto della filosofia open-source, la libreria Bootstrap Italia potrà inoltre essere aggiornata, nei prossimi mesi, con parte del lavoro di sviluppo fatto per il sito MITD, così da mettere a disposizione alle PA nuovi componenti, migliorie e bugfix (correzione di errori). Tutto il codice è comunque disponibile, ed è ospitato su un repository git: è possibile quindi utilizzarlo ed eventualmente contribuire al suo miglioramento, anche grazie alla presenza di una ricca documentazione a disposizione, garanzia della qualità del codice.

Dietro le quinte del sito MID, dalla ricerca alla pubblicazione online

Sempre in tema di sviluppo front end, abbiamo visto, nel capitolo dedicato al design UX/UI, che l’adozione di un CMS di tipo headless ha permesso una scelta completamente libera da vincoli sul codice da usare per la realizzazione dell’interfaccia del sito. Nel nostro caso questo ha significato anche introdurre l’utilizzo di un generatore di siti statici, una modalità di gestione dei contenuti che assicura alti livelli di performance e sicurezza, in quanto tutti gli aggiornamenti, prima di essere pubblicati, vengono compilati sotto forma di pagine “statiche”, quindi non collegate direttamente a un back end o un database, migliorando così la solidità complessiva del sistema.

La riprogettazione del sito ha segnato, inoltre, anche il passaggio al generatore di siti statici Middleman, scelto per la sua flessibilità e la possibilità di gestire dati provenienti da API (application programming interface), come avviene appunto nel contesto di compilazione di un CMS headless. Middleman ha così permesso di creare template parziali da riutilizzare in più parti del sito, come ad esempio nell’anteprima delle notizie. Una soluzione che ha reso possibile l’utilizzo di moderni linguaggi per la semplificazione sintattica del codice come Slim e SCSS, rendendo più efficiente la fase di sviluppo e la futura manutenzione del sito.

Linguaggio e content design

A seguito della migrazione, la revisione dei contenuti del sito MITD ha tenuto conto anche di alcune peculiarità della lettura online. Nella maggior parte dei casi, infatti, i testi di una pagina web non vengono letti ma “scansionati”, diminuendo così la durata dell’attenzione e aumentando, di converso, la velocità di lettura. Per massimizzare l’efficacia dei contenuti, è stato così necessario mettere in atto una serie di accorgimenti per semplificarne la struttura, soprattutto su dispositivi mobili. In particolare, oltre a titoli e sommari, tra le varie soluzioni adottate è stata accordata importanza a:

• paragrafi e sottotitoli, con la possibilità di attivare, nel back office, una funzionalità che permette di realizzare degli indici di pagina;
• elenchi puntati e numerati, utilizzabili anche nel sommario per aumentarne il valore informativo, restituendo in maniera sintetica il quadro dei contenuti nella pagina;
• formattazione delle parole chiave o delle locuzioni più importanti, utilizzando il grassetto e non il sottolineato, che può essere scambiato per un link pur favorendo l’attenzione;
• struttura dei link, che oltre a essere “parlanti”, ovvero indicare nel testo del collegamento la loro destinazione, devono avere una destinazione univoca (le stesse parole non devono portare a destinazioni differenti).

Ai principali accorgimenti di content design, non meno importante si è rivelata, a livello redazionale, l’attenzione alle scelte linguistiche e lessicali. Riferimento obbligato, in questo caso, è stata la Guida al linguaggio della Pubblica Amministrazione messa a disposizione da Designers Italia, insieme al capitolo dedicato al linguaggio nelle Linee guida di design per i servizi web della Pubblica Amministrazione.

Oltre ai numerosi suggerimenti redazionali, inerenti ad esempio stile di scrittura (acronimi, cariche, uso di simboli, parole straniere ecc.), regole di formattazione, numeri e date, la Guida offre infatti anche diversi spunti di riflessione in merito a due temi centrali nella corretta trattazione dei contenuti: l’utilizzo di forestierismi e il linguaggio di genere.

La lingua, infatti, è in continua evoluzione: se ad esempio l’utilizzo di termini come “sindaca” è oggi ineccepibile da un punto di vista linguistico, con riferimento al genere permangono comunque ancora delle incertezze sulla correttezza di alcune forme da utilizzare. È comunque ampiamente condiviso, ormai, che nella grammatica italiana siano presenti varie “dissimmetrie” di genere, come l’uso del maschile non marcato (“i diritti dell’uomo”), la concordanza di termini maschili e femminili che privilegia il maschile (“Anna e Luigi sono andati a casa”), oppure l’uso dell’articolo davanti a cognomi di donna (“la Von der Leyen”).

Una situazione del resto simile all’utilizzo sempre più insistito di forestierismi, ovvero di prestiti linguistici da vocabolari esteri: se da una parte alcuni campi sono permeati da un lessico settoriale (moda, sport, informatica e più in generale molte professioni legate al digitale), dall’altra non bisogna dimenticare come, secondo i dati dell’Organizzazione per la cooperazione e lo sviluppo economico (Ocse), in particolare l’Indagine internazionale sulle competenze degli adulti (PIAAC), il 27,9% degli italiani fra i 16 e i 65 anni possono essere considerati “analfabeti funzionali”, ovvero persone prive delle competenze di base necessarie alla comprensione di un testo.

È tra queste polarità che ogni redattore si trova a dover valutare le proprie scelte linguistiche, specialmente quando l’attività redazionale viene svolta nell’ambito di una Pubblica Amministrazione. Senza voler promuovere a tutti i costi un atteggiamento normativo, siamo certi della necessità, per le figure professionali alle prese con informazioni e contenuti, di essere consapevoli che la scelta di una forma linguistica porti con sé degli innegabili riflessi sociolinguistici, oltre ad avere riscontri sulla chiarezza espositiva e sulla fruibilità dei contenuti.

L’accessibilità come processo in divenire

Per “accessibilità” si intende la capacità di un sistema informatico di erogare servizi e rendere informazioni fruibili a tutti, senza discriminazioni, con un’esperienza piena e soddisfacente, a prescindere da possibili condizioni di disabilità che rendano necessario l’utilizzo di strumenti assistivi o di particolari configurazioni del sistema.

The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee, Direttore W3C e inventore della rete come la conosciamo

Il consorzio World Wide Web Consortium (W3C), nella introduzione alle Web Content Accessibility Guidelines (WCAG) 2.1, spiega infatti che migliorare l’accessibilità porta a migliorare l’esperienza di utilizzo anche per le persone con disturbi dell’apprendimento o limitazioni cognitive, oltre che incrementare l’usabilità per tutti gli utenti. Un sito web accessibile è quindi, semplicemente, un sito web fatto per bene. Ma cosa significa “fatto per bene” nel contesto dei siti web della Pubblica Amministrazione?

Sgombriamo anzitutto il campo da un equivoco: l’accessibilità non è una proprietà acquisita una tantum in fase di progettazione e implementazione, è un processo in divenire. Si tratta di una qualità da curare e far evolvere nel tempo, al pari della redazione dei contenuti e della manutenzione tecnologica, mettendo in campo veri e propri processi iterativi di design e validazione, in una prospettiva di miglioramento continuo.

Per i siti web della PA esistono, in Italia, dei precisi riferimenti normativi, contenuti principalmente nella Legge n. 4/2004, la cosiddetta Legge Stanca, e nei suoi aggiornamenti successivi. Nell’attuare la Direttiva UE 2016/2102, recepita in Italia con il Decreto legislativo n. 106 del 10 agosto 2018, l’Agenzia per l’Italia Digitale (AgID) ha inoltre messo a disposizione di tutti gli enti pubblici le Linee guida sull’accessibilità degli strumenti informatici.

Un’attenzione confermata, del resto, anche dal Piano Triennale per l’informatica nella PA 2020–22, che prevede l’obbligo, per le amministrazioni, di rendere manifesto lo stato di accessibilità di ogni sito web e app mobile di cui sono titolari, tramite la pubblicazione di una Dichiarazione di accessibilità. Ed è proprio all’intersezione tra buone pratiche e normativa che si situa l’attenzione riservata all’accessibilità nel nuovo sito MITD.

Tabella: le figure professionali coinvolte nella cura dell’accessibilità nelle fasi di riprogettazione del sito MITD

Fin dalla fase progettuale sono stati infatti definiti degli obiettivi di accessibilità, che hanno coinvolto, a vari livelli, diverse figure professionali a seconda degli step di avanzamento del progetto. In particolare è stato così possibile:

• provare a soddisfare pienamente il livello AA di conformità alle WCAG 2.1;
• individuare criticità e opportunità in fase di design, sviluppo e redazione;
• sollecitare consapevolezza nelle diverse figure coinvolte;
• non rispondere solo alla norma, ma mettere in campo innovazione;
• capire come usare strumenti di validazione e tecnologie assistive;
• capire eventuali necessità di introdurre regole redazionali;
• capire come instaurare meccanismi di validazione e feedback nel tempo;
• capire come coinvolgere gli utenti e le community.

A loro volta, questi obiettivi hanno determinato, a cascata, una serie di scelte progettuali, portando ad esempio a realizzare:

• diverse piccole migliorie ai componenti dell’interfaccia, con approccio less is more, per semplificare, facilitare la lettura e togliere rumore;
• una struttura consistente e ordinata della titolazione secondo la semantica HTML, per permettere una facile scansione dei contenuti in pagina agli strumenti assistivi;
• regole e meccanismi automatici di presentazione per supportare la redazione nel realizzare etichette descrittive utili agli strumenti assistivi, le aria-label, ad esempio per i pulsanti di call to action, i collegamenti esterni e i documenti allegati;
• una piccola guida redazionale per la stesura di testi alternativi;
• l’esecuzione automatizzata di test, attraverso l’uso di Pa11y-CI per cercare di intercettare eventuali errori e problemi legati all’uso del sito.

Inoltre, proprio perché l’accessibilità è un processo in divenire, in queste settimane il team di riprogettazione sta verificando modalità e strategie per integrare embed video e presentazioni animate provenienti da altre piattaforme, oltre che le visualizzazioni grafiche di dati e la pubblicazione di contenuti social.

Nonostante tutte le attenzioni, però, nel sito MITD continua a persistere una criticità dovuta ai file allegati. Come segnalato nella Dichiarazione di accessibilità, il problema non risiede nella produzione di nuovi documenti, quanto nella gestione di quelli in archivio e di quelli che arrivano da altre amministrazioni, che dovrebbero essere tutti verificati e, se possibile, e non sempre lo è, sistemati.

Con la riprogettazione del sito MITD riteniamo comunque di aver messo in campo approcci interessanti, e soprattutto replicabili, per rendere accessibili i siti istituzionali delle Pubbliche Amministrazioni italiane. Siamo consapevoli che tutto è perfettibile e ci piacerebbe così coinvolgere, dove possibile, community ed esperti, con i quali condividere metodi e strumenti per la progettazione, l’autovalutazione e il continuo miglioramento.

Segnalazioni e suggerimenti sono quindi benvenuti: ci trovate su Slack e su Forum Italia; in alternativa potete scrivere a contatti@designers.italia.it

Credits foto di copertina: Federico Di Dio photography su Unsplash

Aiutaci a raccontare la tua storia
Se hai utilizzato gli strumenti di progettazione di Designers Italia oppure hai applicato una metodologia user centered per realizzare i tuoi servizi pubblici digitali scrivici a contatti@designers.italia.it, il tuo contributo potrà essere d’esempio anche per altri.