Dietro le quinte del sito MITD, dalla ricerca alla pubblicazione online
Il sito istituzionale del Ministro per l’innovazione tecnologica e la transizione digitale è stato completamente riprogettato in base ai principi dello user centered design, grazie agli strumenti messi a disposizione da Designers Italia (prima parte)
di Daniele Tabellini, Francesco Zaia e Matteo Vabanesi
Rendere l’innovazione a portata di cittadino: è l’obiettivo che ha guidato la riprogettazione del nuovo sito istituzionale del Ministro per l’innovazione tecnologica e la transizione digitale (MITD), un progetto che, sulla base dei principi promossi dalle Linee guida di design per i servizi web della Pubblica Amministrazione, ha completamente ridefinito l’architettura dell’informazione e l’identità visuale del portale, insieme ad alcune scelte tecnologiche di fondo e alle modalità di lavoro redazionali.
Frutto della collaborazione di Designers Italia con il team comunicazione del Dipartimento per la trasformazione digitale, il sito, ufficialmente online da giovedì 4 febbraio, si inserisce a pieno titolo nel processo di redesign dei siti della PA centrale, con l’intenzione di diventare un riferimento a disposizione delle amministrazioni italiane per quanto riguarda impostazione del lavoro, scelte progettuali, accessibilità e attenzione al content design.
Le fasi di ricerca
L’analisi del precedente sito MITD ha subito rivelato al team di riprogettazione alcune opportunità di miglioramento, come la mancanza di un efficace sistema di CMS (Content Management System) che offra ai redattori la possibilità di gestire i contenuti in maniera più flessibile; l’assenza di un motore di ricerca e di modalità di esplorazione orizzontale dei temi d’interesse per l’utente, la mancanza di gerarchia nei contenuti e, più in generale, la necessità di riprogettare l’esperienza utente in base a principi user centered.
Sui motori di ricerca il sito manteneva comunque un buon posizionamento per le principali parole chiave inerenti il tema “innovazione”, anche se per gli stakeholder la riprogettazione era l’occasione per sottolineare maggiormente le potenzialità comunicative del portale, offrendo piena riconoscibilità alle attività del Ministro e a quelle del Dipartimento, in particolare nel caso dei progetti condotti anche a livello internazionale.
Grazie agli strumenti messi a disposizione da Designers Italia, in particolare al kit Personas, in questo caso “adattato” per gli utenti di un sito web, il gruppo di lavoro del Dipartimento ha inoltre definito cinque profili utente:
- Vito, il responsabile tecnico zelante;
- Imma, la cittadina curiosa;
- Noa, lo startupper entusiasta;
- Gina, la dirigente interessata;
- Carlo, il giornalista specializzato.
Per ogni profilo, sono stati così individuati le necessità di fruizione, i canali di accesso, i dispositivi utilizzati, il grado di cultura digitale e quello di conoscenza della PA.
L’architettura dell’informazione
Dall’analisi dei bisogni, affiancata in questo caso da una sintetica valutazione funzionale condotta su siti dei Ministeri e di altri siti governativi (ma non solo), è stata individuata la funzione principale che sarà alla base dell’intera riprogettazione: “il sistema, ovvero il sito, permette di divulgare le attività del Ministro e del Dipartimento in maniera riconoscibile per un pubblico trasversale”. A sua volta, dalla funzione principale sono derivate una serie di macrofunzioni e sottofunzioni, utili per individuare una serie di tipologie di contenuto (content type) con relativi attributi, per poi definire una prima ipotesi dei percorsi di navigazione, da validare in fase di design UX/UI.
In particolare, per soddisfare i requisiti emersi nella fase di ricerca, sono state individuate le quattro sezioni principali del nuovo sito: “Ministro”, “Dipartimento”, “Progetti”, “Notizie”. Per favorire anche un’esplorazione orizzontale dei contenuti, oltre che per migliorare le possibilità di ricerca delle informazioni, sono stati inoltre individuati dieci content type:
- articolo
- comunicato stampa
- intervista (del Ministro)
- intervento (del Ministro)
- agenda (del Ministro)
- scheda informativa (o scheda generica)
- scheda progetto
- avviso pubblico
- scheda focus (o scheda di approfondimento)
- scheda posizioni lavorative
Particolare attenzione è stata inoltre riservata a fotografie e filmati, considerati come tipologia di contenuti ad hoc. Per ogni content type sono stati inoltre previsti precisi attributi, alcuni di loro trasversali a tutte le tipologie (titolo, data, categoria, argomento, target), altri obbligatori o facoltativi a seconda della funzioni del content type e delle esigenze redazionali (ad esempio: sottotitoli, sommari, citazioni ecc.). Una struttura flessibile e allo stesso tempo consistente, in modo da rendere l’esperienza utente coerente e costante durante tutta la navigazione del sito.
Il design UX/UI
Sulla base delle esperienze raccolte grazie ai modelli per i siti dei Comuni e per i siti delle scuole realizzati da Designers Italia, il team di riprogettazione ha consolidato, in una serie di iterazioni successive, l’impostazione delle pagine foglia delle varie tipologie di contenuto, con un approccio modulare completamente gestibile in autonomia dal redattore. Grazie alle informazioni ottenute con l’analisi delle Personas è stato inoltre possibile articolare al meglio i punti di accesso alle informazioni presenti sul sito, strutturando le notizie in base ad evidenze e content type, distinte tra le sezioni Ministro e Dipartimento ma raccolte, allo stesso tempo, nella sezione Notizie, che risulta così impostata come un vero e proprio quotidiano online.
Con l’obiettivo di semplificare l’accesso alle informazioni, sono stati inseriti anche alcuni elementi di personalizzazione e innovazione: per favorire la navigazione orizzontale, ad esempio, è stata introdotta la possibilità di esplorare i contenuti in base a temi e argomenti, un modo semplice e immediato di consultare l’articolazione di progetti, approfondimenti e notizie sulle diverse attività istituzionali anche grazie a delle liste di parole chiave e tipologie di contenuto.
La semplificazione ha riguardato anche le card informative, alleggerite nel design e adattate ai diversi content type; la possibilità di introdurre, nelle varie homepage di sezione, una fascia dedicata al racconto dell’attualità tramite i dati, ovvero tramite degli indicatori di performance che aumentino la trasparenza dell’azione amministrativa; la struttura stessa delle singole pagine foglia, pensate non esclusivamente in un’ottica gerarchica, e quindi “figlie” di una classica navigazione ad albero, ma come punti di accesso a tutti i contenuti del portale.
L’intera riprogettazione del sito MITD è stata condotta utilizzando le risorse messe a disposizione da Designers Italia, in particolare, per quanto riguarda il design UX/UI, il wireframe kit, utilizzato per prototipare strutture e flussi di navigazione; quello dedicato all’interfaccia utente (UI kit), usato invece per costruire un prototipo dettagliato che ha permesso diversi cicli di validazione e aggiustamento; e infine il corrispondente kit di sviluppo front end (Bootstrap Italia). Non potevano mancare, poi, gli elementi ormai ricorrenti di quello che potremmo definire come design system del digitale italiano: il colore “blu Italia” (hex ‘#0066cc’), il carattere Titillium Web, la struttura dei contenuti a fasce orizzontali consistenti, l’approccio mobile first e la costruzione della testata, elementi di uno stile riconoscibile e validato da cicli successivi di design.
Per rispondere al meglio a tutte le esigenze emerse in fase di progettazione, la scelta lato software si è orientata verso una soluzione CMS di tipo headless, ovvero un sistema che non comprende l’interfaccia di presentazione dei contenuti ma solo una componente back end per la loro creazione. Una tecnologia che, tramite API (application programming interface), permette di disaccoppiare completamente i contenuti dall’interfaccia con cui sono mostrati agli utenti, nonché di consentire la loro distribuzione su una pluralità di piattaforme, a partire da un unico CMS.
Oltre alle caratteristiche sopra citate, il sistema individuato offre anche un’assoluta flessibilità editoriale nella creazione dei contenuti, grazie a un insieme personalizzabile di blocchi modulari, che permette un completo controllo dei flussi di lavoro, facilità di utilizzo (e di riutilizzo), insieme ad ampie possibilità di editing collaborativo. La possibilità di modellare il CMS fino al più piccolo dettaglio, inoltre, è una caratteristica che lo rende performante anche in ottica SEO. Una soluzione al momento poco comune nelle Pubbliche Amministrazioni, ma che in prospettiva, soprattutto in un’ottica multicanale, permette di incrementare efficacia ed efficienza del lavoro di redazione.
