Il design system del Paese per realizzare siti e servizi dei Comuni

Scarica la trascrizione in formato ODT.

Mauro Savini

Benvenuti a questo nuovo webinar organizzato da ANCI in collaborazione con il Dipartimento per la trasformazione digitale della Presidenza del Consiglio dei ministri.

Si tratta di un webinar particolare, importante, anche rispetto agli altri, perché è il primo webinar di un vero e proprio ciclo, chiamato appunto "Esperienza del cittadino nei servizi pubblici dalla Misura alla pratica" che ha l'obiettivo, partendo dalla misura 1.4.1 del PNRR, di parlare dell'importanza della progettazione dei servizi pubblici digitali. E in particolare, quindi, affronterà il tema di quali sono le risorse del modello comuni e come si usano e introdurrà il tema del design system del Paese, cioè l'insieme delle indicazioni e delle risorse utili a realizzare le interfacce di siti e servizi pubblici di qualità.

È un ciclo di incontri che sarà tenuto dagli esperti di Designers Italia, del Dipartimento e che andrà avanti per un po' di mesi, con uno/due appuntamenti al mese. Vi posso già dare le date dei prossimi due appuntamenti che saranno il 28 novembre e il 13 dicembre sempre alle 11. Per quello del 28 novembre, alla fine di questo webinar vi metteremo in chat anche il link per la registrazione, in modo che possiate subito registrarvi. In particolare, nei primi due appuntamenti, come poi vi spiegheranno le persone che seguiranno il mio intervento introduttivo, si parlerà in particolare di interfacce, per poi andare sul tema dei servizi. Vi do al solito qualche indicazione operativa prima di partire con gli interventi. Innanzitutto, per chi poi lo chiederà, questo webinar sarà registrato e disponibile sul sito e anche sul canale YouTube di ANCI, al massimo entro domani. Potete porre delle domande e dei quesiti a cui poi cercheremo di dare risposta già durante l'evento di oggi. Per quelle poi per cui non facciamo in tempo risponderanno gli esperti del Dipartimento in separata sede, eventualmente anche sistematizzando poi le risposte in risorse online. Vi chiedo solo quando ponete delle domande di indicare nome, cognome e ente di appartenenza, in modo che possiamo, in qualche modo, soprattutto se ci sono quesiti un po' più specifici, individuarvi e rispondervi anche in successivamente. Ne approfitto anche per dare un'informazione fuori tema, ma credo importante per tutti i Comuni. Proprio ieri, è stato approvato in Commissione Bilancio del Senato nella fase di discussione della Legge di Bilancio, un emendamento di ANCI che elimina il taglio di 100 milioni di euro, che era previsto nel 2024 sulla spesa informatica dei Comuni. Questo era un aspetto su cui ci eravamo battuti nelle scorse settimane, e quindi penso possa essere una notizia positiva per tutti. Ultima cosa: per chi avesse bisogno dell'attestato di partecipazione, anche qui può scrivere in chat, indicando ovviamente nome, cognome ed ente di appartenenza. Mi taccio e do la parola subito a Simone Jacca del Dipartimento per la trasformazione digitale. Grazie e buon webinar.

Simone Jacca

Buongiorno a tutti, grazie Mauro. Sono Simone Iacca, Responsabile della Misura 141, "Esperienza del cittadino nei servizi pubblici”. Dico due parole molto veloci, poi lascio al team di Designers Italia il racconto del webinar di oggi. Come sapete la misura nasce più di un anno fa con il primo bando e poi il secondo di pochi mesi dopo. Ha avuto subito un ottimo successo in termini di adesione e partecipazione. Più di 6.500 Comuni hanno aderito. Ora siamo già nella fase di implementazione per molti Comuni e quindi trovavamo importante e necessario dare anche un taglio più pragmatico a quello che è l'oggetto della Misura. Da qui l'idea di un ciclo di eventi "Dalla misura alla pratica", proprio per condividere con voi tutti gli strumenti che abbiamo messo a disposizione e il modello stesso, proprio con lo scopo di raggiungere gli obiettivi che questa Misura si è data: alzare la qualità del sito e dei servizi digitali. Lo faremo raccontandovi gli strumenti: oggi partendo da design system e poi, negli eventi successivi, tutti gli altri. E, al contempo, intendiamo anche promuovere una cultura della progettazione all'interno della Pubblica Amministrazione, che metta le persone al centro, che è un'altra mission del Dipartimento e di Designers Italia. Io mi fermo qua. Ci tenevo a condividere con voi l'obiettivo che ci siamo dati in questi eventi, e che per noi sono molto, molto importanti.

Lascio la parola a Marco Maria Pedrazzo, Head of design del Dipartimento e Product Owner (PO) del progetto Designers Italia. Grazie.

Marco Maria Pedrazzo

Grazie Simone. Buongiorno a tutti. È veramente un piacere essere qui davanti a voi oggi. Faccio un piccolo cappello che inizia a entrare nel tecnico, raccontandovi che, come molti di voi già sapranno, Designers Italia ha una storia, che parte da un po' più lontano - dal 2017. È un progetto che nasce in collaborazione con AGID per facilitare una cultura progettuale che sia centrata e che parta dalla necessità delle persone. Da allora ha fatto un po' di strada. Ad oggi raggiungiamo una comunità di pratica di oltre 20.000 professionisti e questo ciclo di webinar è proprio un esempio plastico di cosa intendiamo per comunità di pratica. Oggi parleremo di come, per raggiungere l'obiettivo di una PA più vicina, semplice e utile per le persone di oggi e di domani, siano importanti tanto degli strumenti pratici che servono a progettare e realizzare servizi pubblici, quanto che ci siano modi e luoghi affinché una comunità di pratica si scambi informazioni e buone pratiche. Ed è questo che fa Designers Italia. In particolare, oggi vi parliamo del modello di sito e di servizi dedicati ai Comuni.

Toccheremo alla fine del webinar la relazione con il design system. E, per introdurre un pochettino il tema, possiamo fare una piccola analogia. Se ci immaginiamo il design system come i mattoncini dei Lego, possiamo utilizzarli in tanti modi. Questi mattoncini di Lego ci aiutano a costruire le interfacce. Utilizzati attraverso il modello di sito e servizio, abbiamo una sorta di guida passo passo, un modello di riferimento, una scatola, diciamo preconfezionata, che ci aiuta attraverso dei template predefiniti pronti all'uso, di cui Francesco vi descriverà a minuti il dettaglio in tutte le parti, le istruzioni e quanto viene dato. Chiuderemo con Daniele che invece toccherà come utilizzare questi mattoncini in una sorta di gioco libero per continuare a creare dei servizi di qualità oltre a quanto già preconfezionato.

Detto questo, direi che siamo pronti per entrare nell'argomento, quindi passo la palla a Francesco.

Francesco Improta

Grazie Marco Maria e buongiorno a tutti. Io sono Francesco Improta e mi occupo per Designers Italia della progettazione e dello sviluppo dei modelli, quindi nell'ambito della Misura 1.4.1.

Partendo dal sito di Designers Italia possiamo esplorare la sezione dedicata, in questo caso al modello Comuni, dove vengono raccolte tutte le informazioni relative a che cos'è il modello, cosa permette di fare e quindi anche quali sono gli strumenti che Designers Italia, il Dipartimento per la trasformazione digitale, mette a disposizione di enti e fornitori per la realizzazione. La pagina dedicata al modello Comuni, dopo una breve introduzione sulla necessità di realizzare un'esperienza digitale efficace, ci permette già di avere una visione di quali sono le risorse pronte all'uso dedicate alla progettazione di queste esperienze digitali. Il modello di sito si compone di tante risorse che abbiamo messo a disposizione: un documento di architettura dell'informazione che serve a costruire e organizzare tutti i contenuti in un prodotto digitale; ci sono risorse più tecniche come i template HTML, quindi pagine web pronte all'uso per essere implementate da fornitori o direttamente anche dagli enti che hanno dei team interni dedicati proprio allo sviluppo dei propri prodotti; ci sono poi i temi dedicati ai software che permettono di gestire contenuti, quindi come WordPress o Drupal, due programmi che permettono di gestire i contenuti. Noi forniamo dei temi già pronti, che sono molto utilizzati a livello nazionale nei Comuni. Ci sono poi le risorse dedicate all'interfaccia, che possono essere le librerie dei componenti, i prototipi interattivi per navigare esempi di siti e servizi e tutta la parte poi dedicata ai servizi che oggi tratteremo superficialmente - andremo più nello specifico del sito. Quindi utilizzare queste risorse significa in sostanza adottare il modello di sito.

Abbiamo anche predisposto una guida passo passo per adottare il modello di sito. Cosa vuol dire passo passo? Vuol dire identificare delle attività da svolgere per arrivare all'utilizzo corretto degli strumenti che abbiamo messo a disposizione. Brevemente, le attività sono state suddivise in quattro fasi: comprendere lo stato dell'arte, che vuol dire definire gli obiettivi del progetto, il perimetro di lavoro; definire l'architettura, come strutturiamo i contenuti, come organizziamo le informazioni sul sito, anche partendo da uno storico predefinito per ogni comune, e poi abbiamo la parte dedicata alla realizzazione dell'interfaccia e a valutare l'adesione al modello. Per ciascuna di queste fasi, quindi, noi mettiamo a disposizione degli strumenti. Oggi andiamo nel dettaglio della fase numero 3, cioè quella di realizzazione dell'interfaccia. All'interno di questa fase trovate tutti i dettagli. Quindi, come vedete, man mano che andiamo a navigare sezioni più specifiche, questo sito vi permette di comprendere appieno ogni singolo passo, proprio come una guida che vi supporta in ogni momento della fase di realizzazione. Qui vengono spiegate un pochino più nel dettaglio quelle risorse che io vi ho già introdotto, le librerie, i template, i temi per i sistemi di gestione contenuti. E ci sono anche i link alle risorse operative. Andando quindi nel dettaglio di una risorsa operativa introduciamo i layout, ovvero le schermate di esempio delle principali pagine del modello Comuni. Queste schermate, quindi questi layout, sono state realizzate con un programma di design, un tool di design che si chiama Figma, che è molto diffuso, a cui potete accedere, enti o fornitori, in maniera diretta per poter navigare e visualizzare come devono essere mostrate le informazioni. In questo caso, le pagine sono organizzate tramite un menù che vi permette di navigare tutte le principali sezioni. Noi in questo caso stiamo vedendo un dettaglio della home page. Sono state realizzate sia le versioni mobile che le versioni desktop, dando dei riferimenti di linea generale per lo sviluppo e l'implementazione del modello.

Un altro esempio di pagina che andiamo a vedere è quella per i documenti e i dati. Ci sono sia contenuti di esempio realistici, ad alta fedeltà. Ecco perché viene utilizzato il termine layout hi-fi, cioè high fidelity, quindi alta fedeltà. Perché oltre all'aspetto grafico c'è anche un aspetto di quali contenuti e come devono essere organizzati. È chiaro che si tratta di buone pratiche, di esempi, una sorta di linea guida. Ci sono i casi specifici di implementazione dei singoli enti. Noi forniamo, comunque, del supporto anche nella gestione della personalizzazione, tramite le nostre risorse. Andando a vedere cosa è possibile visualizzare ci sono dentro questo strumento anche la possibilità di avere una preview, cioè un'anteprima di come il sito viene mostrato all'interno poi del device, nel suo contesto finale, cioè ovvero il telefonino piuttosto che un laptop o un computer desktop. Questo è molto importante perché gli enti che vorranno personalizzare, sempre nel contesto del modello proposto, anche, non so, i colori piuttosto che la disposizione di alcune sezioni, avranno la possibilità di consultare un'anteprima che vi permetterà anche di avere un feedback, un riscontro dagli utenti, dalle persone che utilizzeranno, poi, il prodotto finale. Qui stiamo vedendo quindi l'anteprima navigabile di un home page. Possiamo vedere invece in quest'altra schermata l'anteprima della pagina dedicata ad una scheda di servizio, ad esempio, quindi l'iscrizione alla scuola dell'infanzia. Come vedete abbiamo provveduto anche a popolare queste pagine di esempio con contenuti realistici, proprio per dare un'idea di qual è l'esperienza finale. Nel caso dei servizi ci sono, ad esempio, le indicazioni su tempi, scadenze, costi, la possibilità di accedere al servizio online e tutte le altre informazioni di servizio.

Un'altra pagina molto importante può essere quella dedicata alle novità, cioè ai contenuti editoriali. Anche in questo caso, ecco le immagini - sempre, comunque, a titolo esemplificativo - ci sono dei contenuti che danno un'idea sempre dell'esperienza. Ora tutte queste pagine, che vi sto mostrando, chiaramente, da che cosa sono composte? Da quello che Marco Maria ha introdotto prima, ovvero i singoli pezzettini Lego, se vogliamo fare questo esempio, che sono gli elementi dell'interfaccia. Gli elementi dell'interfaccia fanno parte di un'altra risorsa che noi chiamiamo "libreria dei componenti". La libreria dei componenti è un insieme di oggetti che fanno parte dell'interfaccia utente. Sono tutti blocchi di contenuto, blocchi di testo, elementi di navigazione, che costruiscono e sono la base di un prodotto digitale. Perché è importante avere una libreria di questo tipo? Perché permette la costruzione di pagine nuove rispetto a quelle che vengono fornite nel modello, cioè quelle che vi ho appena mostrato e permettono una personalizzazione di questi elementi. Abbiamo, ad esempio, il componente principale di navigazione che è l'header che noi diamo in questa libreria, cioè in questa raccolta di elementi. Lo prevediamo con un colore di partenza, un verde, ma che può essere personalizzato, così come il logo del singolo ente, che può essere sostituito. Chiaramente, in questa costruzione, in questa personalizzazione, è molto importante seguire le linee guida già definite dal modello e anche le linee guida del design system, che sarà approfondito più avanti. Altri elementi sono, ad esempio, il menù di navigazione, oppure la parte dedicata, in questo caso a un oggetto molto utilizzato, ovvero le card, cioè tutti i blocchettini di testo e contenuto che sono utilizzati per costruire tanti elementi informativi dell'interfaccia.

Tutte queste risorse sono dedicate alla parte di progettazione o, se vogliamo definirla. di design. Ma c'è poi una parte dedicata anche alla tecnologia web, cioè proprio alla piattaforma web. Nel senso che tutto il lavoro di progettazione del sito, di personalizzazione, viene fatto negli strumenti che vi ho appena illustrato e poi ci sarà la necessità di adottarli e implementarli per il web. Noi in questo caso abbiamo messo a disposizione varie tipologie di risorse, ovvero i template HTML, che rimangono in qualche misura agnostici dalla tecnologia, che sarà adottata dalla piattaforma, e che ogni ente adotta. Sappiamo che oggi per il web ci sono tantissime tecnologie differenti, che possono essere usate a livello di sviluppo. Il template fornito in questo indice di risorse può essere usato con qualunque tecnologia. Qui troviamo una raccolta dei principali template, che corrispondono alle pagine che vi ho mostrato nello strumento di progettazione grafica. Abbiamo ad esempio la homepage, quindi la pagina, in questo caso principale del sito, dove viene quindi ricostruita con tutti i contenuti di esempio e da un'idea del risultato finale. Questi template, in alcune parti, sono anche navigabili, ovvero sono collegati tra loro. Quindi io, se voglio andare a vedere com'è la pagina dei servizi, posso cliccarci e navigare, quasi ad avere una sorta di sito d'esempio responsivo, visitabile in qualunque browser web. Questo è molto importante perché, soprattutto i fornitori che supportano gli enti nella realizzazione, hanno la possibilità di usare il codice già messo a disposizione. Questi template sono costruiti con l'ausilio anche di un'altra risorsa, che oggi non vedremo, ma che è molto importante per noi: la libreria Bootstrap Italia sulla quale sono proprio state costruite tutte queste pagine.

Ho accennato all'inizio anche alle risorse dedicate, in questo caso, ai sistemi di gestione contenuti. Uno su tutti è la piattaforma di WordPress che è molto conosciuta, molto utilizzata. Qui stiamo vedendo una demo di questo tema che noi mettiamo a disposizione per questa piattaforma, che in sostanza è la replica fedele dei template che abbiamo visto fino adesso, con la differenza che tutti i contenuti che possono essere gestiti in questa piattaforma utilizzano un'interfaccia già pronta all'uso, l'interfaccia appunto di WordPress. L'interfaccia di WordPress, se non la conoscete, è un programma che consente di personalizzare i contenuti del sito utilizzando tutta l'impostazione grafica e di architettura che noi forniamo con il modello. Ad esempio, è possibile cambiare in questo campo il nome del Comune, oppure andare a cambiare direttamente lo stemma. Qualunque modifica, quindi, viene fatta tramite questa interfaccia ha un riscontro visivo oggettivo nella sua versione visibile di sito pubblico. Altri elementi che è possibile fare con un tema CMS, come questo che vi sto mostrando, è quella di inserire direttamente le schede servizi e di modificarle, oppure di eliminarle. Questo facilita di gran lunga l'adozione finale del modello di sito per i Comuni, perché comunque vi permette di avere un prodotto vero e proprio che necessita soltanto dell'inserimento e del popolamento dei contenuti.

Questi strumenti che noi mettiamo a disposizione sono stati realizzati da Designers Italia, ma ottengono il supporto anche della comunità web. Questo per noi è molto importante e abbiamo deciso di pubblicare tutte queste risorse su una piattaforma open source, cioè di condivisione aperta del codice, che si chiama GitHub, che è molto conosciuta nell'ambito della comunità dedicata allo sviluppo e all'implementazione di prodotti digitali in generale. Su questa piattaforma mettiamo a disposizione tutte le informazioni su come poi andare a utilizzare, installare, personalizzare. Quindi informazioni tecniche, che però sono condivise in maniera totalmente aperta e quindi trasparente. Anche gli stessi fornitori o enti che già stanno adottando il nostro modello utilizzano questa piattaforma per comunicare con il team di Designers Italia, aprendo richieste di migliorie, segnalando bug, risolvendo in maniera collaborativa i problemi che normalmente si possono riscontrare. Troviamo sia raccolte le informazioni per i template HTML, che per quanto riguarda la piattaforma, ad esempio WordPress, che è una delle due piattaforme che sono state realizzate. La seconda è Drupal che è un pochino meno diffusa, ma che comunque ha un buon utilizzo.

Cosa c'è alla radice di tutte queste risorse che io vi ho illustrato? C'è in sostanza il design system del Paese, ovvero la risorsa centrale che detta un po' tutte le linee guida su come sviluppare prodotti e servizi. Su questo punto passo la parola al mio collega Daniele che vi spiegherà un pochino più nel dettaglio di che cosa si tratta.

Daniele Tabellini

Grazie Francesco, prendo la condivisione. Salve. Grazie a Francesco e a Marco Maria Pedrazzo per quanto viene prima. Sono Daniele Tabellini, mi occupo di UI e UX design, cioè di progettazione di interfaccia ed esperienza utente al Dipartimento per la trasformazione digitale e da un paio d'anni sono il responsabile tecnico dell'aggiornamento del design system del Paese, che ora vi introduco. Ci tenevo però a farvi una piccola premessa: ci state vedendo usare il sito Designers Italia come sfondo, senza usare slide, fondamentalmente, senza usare una vera e propria presentazione. Non è un caso. E non la stiamo facendo per pigrizia, per non aver voglia di fare presentazioni, ma per dimostrare una qualità di questo nuovo sito, uscito un anno fa in questa versione e che stiamo continuando ad evolvere. Diciamolo meglio: per dimostrarvi la volontà enciclopedica di questo sito. Vuole essere la risorsa dove voi fornitori o enti potete trovare la risposta a molte delle domande, senza farcene, nemmeno. È talmente approfondito e pieno di dettagli che basta cercare. Quindi per rispondere a una domanda che ho visto: i link a tutti i file Figma che state vedendo, o alle risorse che il mio collega Francesco vi ha mostrato, sono nel sito, basta entrare dentro le sezioni, dentro le risorse, e ci trovate tutto quello che vi stiamo facendo vedere. Questo sito ha la volontà di essere uno strumento in sé. Uno strumento a disposizione vostra, della community di persone, enti, fornitori e professionisti che sta cambiando il modo di progettare siti e servizi digitali per la Pubblica Amministrazione in Italia. Detto questo, sempre sul sito. se vado dentro la sezione Design System, ne approfitto per raccontarvi cos'è. La frase principale di cos'è un design system, per chi di voi non lo sapesse, o per chi di voi non fa il mio lavoro, quello di uno sviluppatore di interfacce, è un insieme di guide, indicazioni, istruzioni e risorse, i famosi mattoncini di cui parlava Marco Maria Pedrazzo per costruire cose, realizzare veri e propri prodotti. Stiamo parlando di realizzare, questa è la parte fondamentale, realizzare interfacce. Non soltanto progettarla, quindi, ma arrivare fino alla vera e propria interfaccia realizzata del sito. È come questa che stiamo vedendo di Designers Italia, che utilizza il design system del Paese. Il design system del Paese vive in questa sezione del sito Designers Italia. Ci vive come documentazione dello stesso design system del Paese. Ora vi faccio vedere le quattro sezioni fondamentali: come iniziare, i fondamenti, i componenti, e come contribuire. Speriamo l'anno prossimo (NdR 2024) ospiti anche due nuove sezioni importantissime che sono i design pattern, che sarebbe i modi standard di creare piccole scatole di costruzione, non interi modelli come può essere il modello comune, ma piccoli modelli come può essere una login, come si fa un sito, una login o un sito della Pubblica Amministrazione. Tutte le risorse che trovate, come quelle dei modelli, hanno una caratteristica: non sono fatte a caso, ma si basano sulla ricerca. Si basano su progettazione, analisi, euristiche, test di usabilità e analisi, anche di tutte le cose che riguardano l'accessibilità che è importantissima nella progettazione delle interfacce o che riguardano il GDPR, la privacy nel caso di alcuni componenti. Non stiamo parlando di grafica. La grafica è quindi l'aspetto visivo, è solo un pezzo di quello che è un design system. Stiamo parlando di esperienza, stiamo parlando di progettare cose efficaci, che funzionano.

Vi faccio vedere che cos'è una scheda fondamento. Vado anche abbastanza veloce perché mi piacerebbe che trovaste il tempo, finito questo webinar, di girarvi il sito da soli. Un po' come se fosse un'enciclopedia, ve lo ripeto, un po' come se fosse una specie di enciclopedia di cosa fare, quali sono i mattoncini e come poterli usare. Ve le faccio vedere uno a caso, uno degli ultimi inseriti: il fondamento colori, cioè come i siti e i servizi pubblici della Pubblica Amministrazione in Italia possono o devono usare i colori. È un insieme di istruzioni. Le schede fondamento sono delle schede da leggere e che contengono informazioni: in questo caso i principi che guidano l'uso dei colori, come usarli, quali sono i colori principali, i colori primari, i colori di risalto, con un tentativo di spiegarlo sempre, anche in un linguaggio non soltanto per operativi, quindi non soltanto con termini informatici. Istruzioni molto chiare tipo che cosa va bene fare, quali sono le combinazioni, di testo - sfondo corretto e quale no. Note di approfondimento e dove trovare ulteriori approfondimenti. Per chi di voi sa qualcosa sull'accessibilità, sa anche che l'utilizzo dei colori è una delle cose che impatta di più sulla progettazione. Non l'unico, ovviamente ce ne sono tantissime sull'accessibilità e qui c'è un tentativo, un primo tentativo e questo primo non lo dico a caso, perché questa documentazione in tutto il design system è in continua evoluzione. Tutti i fondamenti sono fatti così e tra un po' vi faccio vedere il principale. Il primo principio, intenzioni qui a sinistra, però prima di passare a quello vi faccio vedere anche come è fatto un componente. Un design system, il nostro in particolare, e quasi tutti, sono fatti di fondamenti e componenti. Un componente - ne prendo uno che conoscete tutti - un componente sarebbe un vero mattoncino, è un elemento. Prendo la testata di un sito, un po' come questa sopra che vedete qua. Ne avete visti tantissimi. Una scheda componente divisa in tre sezioni, uso e accessibilità, progettazione e sviluppo. Non è un caso che uso accessibilità, è la prima per dare risalto all'importanza che il termine accessibilità ha per noi, oltre agli obblighi di legge. Nell'anteprima possiamo vedere tutte le varianti di questo componente. Ne prendo una che sicuramente riconoscete che è questa: il classico header, che vediamo un po' dovunque, personalizzato a volte nei colori, nei contenuti, ma che conoscete bene. Questa anteprima la possiamo vedere anche a varie risoluzioni, quindi mobile, con tutto il suo funzionamento, tablet, eccetera. Vi ripeto, questa non è grafica, non è progettazione, ma è prodotto vero e proprio. Questo è codice che sta funzionando dentro la documentazione, tanto che è possibile premere su questo tasto a destra ed estrarla, astrarla dalla documentazione e vederla da sola in una finestra di un browser e quindi per esempio poterne testare l'accessibilità, il funzionamento, astratta da tutto quello che è documentazione; la scheda progettazione che contiene informazioni su questo componente informazioni, proprio come quelle delle Lego, tendenzialmente che cosa sono i pezzi e che cosa servono nelle varie varianti. E la scheda che sotto contiene anche altri tipi di informazioni, tipo, come si comporta, qual è l'interazione, quali sono le specifiche di misure del componente e una scheda sviluppo. Vi apro la stessa variante dell'header completa, così è facile riconoscerla, che contiene il codice. Contiene esattamente il codice nel framework Bootstrap Italia, che è la risorsa di sviluppo dell’ecosistema design system del Paese che è possibile copiarsi e mettersi dentro il proprio framework di sviluppo oppure andare alle istruzioni di sviluppo con questa. Detto questo, va mostrato a grandi linee come sono fatti, i libretti di istruzione di un fondamento e di un componente. Mi piacerebbe portarvi qui, su questa scheda che è principi e intenzioni per raccontarvi fondamentalmente i perché: perché è stato fatto in questi ultimi anni e perché è importante usarlo. Ce ne sono alcuni, ce ne sono molti, in questa scheda. Mi interessa mettervi l'attenzione su un paio, sinceramente in questo primo momento e poi eventualmente possiamo approfondire con le domande e approfondiremo anche nei webinar successivi. Il principale è questo: sono molti anni che ne sentite parlare - il Dipartimento ora, il Team per la trasformazione digitale prima, Developers Italia e Designers Italia - di un tema importantissimo, che voi tutti conoscete bene. In Italia abbiamo più di 22.000 enti, voi siete molti di questi e abbiamo, si stima più di 100.000 siti e servizi della Pubblica Amministrazione. Fino a pochi anni fa non ci si poneva il problema che un cittadino trovava un pulsante o un campo di ricerca fatto in maniere diverse in questi 100.000 siti e servizi sempre diversi. Doveva ogni volta reinventare la ruota. Spostandosi dal punto di vista utente centrico negli ultimi anni è stato fatto un lavoro importante di ricerca, di coerenza. Un lavoro importante, non soltanto grafico, come è fatto quel campo, ma per avvicinarsi alle persone, anche sulla lingua. Qui a sinistra io non ve li aprirò, ma se vedete nei fondamenti ce ne sono alcuni che è facile capire che non sono grafica o sviluppo, ma sono contenuto. Come si scrive? Qual è il tono di voce con cui si parla il cittadino o si progetta un'interfaccia verso il cittadino, o che il cittadino deve utilizzare? Quale linguaggio si usa? Quali sono i microtesti dell'interfaccia? Quindi, come si scrive il piccolo testo in un pulsante. Si dà del tu, si dà del lei, si parla direttamente? Si usano verbi? Per rendere efficiente la progettazione, voi tutti - fornitori ed enti - sapete che l'efficacia, i tempi sono soldi e soldi che si possono spendere in altre cose e se si risparmiano non è per forza solo risparmio, si possono spendere in test di usabilità, in una migliore ricerca iniziale per analizzare i bisogni. Le stime più recenti in tutto il mondo, ci dicono che utilizzare un design system fa risparmiare circa il 30% in progettazione dell'interfaccia e, in alcuni casi, oltre il 45% in sviluppo dell'interfaccia. Non si deve reinventare la ruota ogni volta .E specialmente in un campo come il nostro, della Pubblica Amministrazione, in cui i constraints (NdR limiti) sono tantissimi, dall'accessibilità alla privacy, sono più difficili da misurare, anche se indiscutibili. Più difficili da misurare, anche se indiscutibili, sono l'aumento della qualità del risultato finale e la riduzione dei bug. E su questo non ho tempo di approfondire oggi, ma vi dico che il 28 di novembre, nel secondo webinar di questo ciclo, alle 11 faremo un intero webinar raccontandovi proprio le qualità che si possono tenere utilizzando il design system del Paese: le qualità insite by design, come può essere l'accessibilità, il GDPR, eccetera, dentro questi mattoncini che permettono a chi li utilizza, fornitori o ente che parla con fornitore, gli chiede di utilizzarlo, di ottenere by default quelle qualità. Ad esempio, partendo con tutti i componenti già validati per l'accessibilità. Componenti ovviamente che poi vanno montati in maniera accessibile, vanno utilizzati curandone l'accessibilità, ma che partano accessibili. C'è un fondamento molto interessante: "accessibilità" che racconta non solo che cosa raggiungiamo, ma come noi testiamo l'accessibilità di questi componenti, ed è una cosa interessante per gli operativi, tra voi che si occupano di accessibilità. Non sto a leggervi gli altri, anche se il titolo è molto interessante "per cambiare la visione dell'accessibilità", tanto per rimanere in tema, "da adempimento alle opportunità". E questa è una cosa fondamentale. Vi invito a venire al secondo webinar e parleremo estensivamente di questo. Partiamo dai perché dicevo e vediamo come iniziare a usarlo. E qui panoramica "come iniziare". Vi voglio solo mettere l'accento su una cosa. Un design system è uno strumento, un insieme di risorse, di mattoncini pensate per persone che fanno operatività, quindi designer e sviluppatori, progettisti, persone che sviluppano codice. Però vi faccio osservare che qui c'è anche una scheda che è per responsabili progetto. Perché? Perché è importante che chi scrive bandi, chi fa il project manager di progetti, lato fornitore o che ne so, responsabile sistemi informativi di un Comune o di un ente, è importante che sappia come è fatto il design system del Paese, sappia che è una risorsa aperta, a cui tutti possono partecipare, sappia la qualità che ottiene by default, se invita un fornitore ad utilizzarlo. Invitare a utilizzarlo non vuol dire che lo deve utilizzare per forza as is, cioè così com'è. Essendo una risorsa aperta con licenze open source, come dovrebbero essere tutte le risorse per la Pubblica Amministrazione, è ovviamente aperto a contributi e sarebbe anche molto interessante che i contributi, come sta cominciando a succedere, arrivassero anche up stream. Se un fornitore, lo modifica o aggiunge funzionalità sarebbe importante facesse anche proposte up stream verso di noi, verso i mantainer delle risorse o di design o di sviluppo per integrare queste modifiche e questa evoluzione nel design system.

Nella scheda "come iniziare" per responsabile i progetti c'è il perché utilizzarlo e ci sono anche dei riferimenti operativi, sia normativi. L'articolo 4.8 delle Linee guida di design invita a mettere in tutti i bandi la scritta che si deve usare determinate risorse. Vado veloce perché vi ripeto, questa è un'enciclopedia, questi webinar possono essere soltanto un incipit a invogliarvi a studiare un po' come a scuola dovrebbe essere. Però è interessante in questo fondamento, per responsabile progetto, come iniziare a usare il design system del Paese o a capire cos'è, "oltre alla norma, per fare bene", "il risparmio di tempi e costi" che rimanda a quello che ci dicevamo prima, i principi e intenzioni, e una cosa, che sottolineava già il mio collega Marco Maria Pedrazzo: la forza della community. Non si è soli, quando si usa il design system nel Paese. Si è all'interno di una community di pratica che vive su Forum Italia. Qui c'è un link, ma anche sulla community Slack che vive sugli stessi repository GitHub che sono i luoghi, che vi faceva vedere Francesco, dove viene fatta la contribuzione e l'evoluzione del design system, in cui si discute, si fanno proposte, si rimandano proposte (up stream).

Scendo nel concreto e vi racconto anche un aneddoto molto pratico, senza rimanere così in alto. Vado ad un componente che è il "video player". Il video player è stato aggiunto di recente, una specie di mattoncino aggiunto un mesetto fa. Forse avete visto la news sul sito Designers Italia o nelle mailing list. È un componente che serve a mostrare video sui propri siti web. Perché ve lo racconto? Perché parto da questo per raccontarvi la fase operativa. Nel prossimo webinar scenderemo più in dettaglio, e vi racconteremo molti più aspetti pratici. Però vi racconto questo perché mi permette di spiegarvi che noi stessi siamo i primi utilizzatori. Voi tutti saprete che mostrare video da hosting di terze parti, come può essere YouTube, è molto complicato per una Pubblica Amministrazione, se vuole essere a norma sia con l'accessibilità sia col GDPR. Il design system del Paese da qualche tempo ha anche un componente a disposizione di tutti, di cui esiste il codice. È facile usarlo. Apro la stessa variante, quella con overlay di consenso. Quando c'è questo overlay presente - nel sito Designers, lo trovate in tutti i video - se girate e non avete mai accettato, potete accettare i cookie di YouTube una volta per un solo video o per tutti i video. Il componente si prende in carico di non farti avere nessun contatto con i server di terze parti, né cookie né di altro tipo finché non accetti. Se non accetti finisce lì, permettendo di essere completamente compliant con il GDPR, ma oltre a questo è anche completamente accessibile. Ve lo faccio vedere in funzione nella nostra sezione "media", anche questa aggiunta di recente. Non ho mai accettato i cookie su questo sito. Posso accettare per questo, o accettare per tutti i video, i cookie di YouTube. Una volta che li ho accettati, posso vedermi il video. Qui nel footer vedete c'è un comando "gestione cookie" che mi porta alla privacy policy, dove abbiamo implementato utilizzando i metodi di quel componente, un sistema per poter revocare l'autorizzazione che ho appena dato. In questo modo, questo sito non ha nessun altro tipo di cookie. Non abbiamo nemmeno bisogno del famoso e non noiosissimo cookie banner.

Allora dove siamo con il design system del Paese oggi? Vi racconteremo molti altri componenti, anelli di come usarlo. Invito i designer e gli sviluppatori tra voi intanto a navigare “come iniziare per designer e per sviluppatori”. Non sto a spiegarvi perché è stato costruito per voi, cioè facciamo lo stesso lavoro; quindi, non sto a spiegarvi in dettaglio per ora. Il secondo webinar è più per voi.

Per raccontarvi dove siamo apro un ultimo fondamento che vi faccio vedere oggi, che è "versionamento". Tutte le risorse dell'ecosistema design system del Paese seguono quello che si chiama versionamento semantico. Cioè hanno questi numeri versione costruiti in maniera significativa, cioè con significato, non sono messi a caso. Non è versione 1,2,3, come a volte vediamo fare, ma è "patch minor major" che vorrebbe dire piccola correzione, correzione che inserisce i motivi, eccetera, eccetera. Lo stato delle risorse principali del design system del Paese in questo momento è questo. La documentazione di questo sito è in alpha, ma uscirà dall'alpha e diventerà beta usabile in produzione, anche se già lo è, diciamocelo tra noi e entro fine anno, quindi nelle prossime due o tre settimane.

Il kit UI che sarebbe la libreria componenti di base Figma, lo stesso strumento che avete visto di là, però vive anche su GitHub, in altri formati open source aperti; Design Tokens Italia, di cui vi parleremo più estensivamente nei prossimi webinar; Bootstrap Italia, che è la risorsa di sviluppo principale. Ce ne sono anche altri due che sono React e Angular, due kit community driven, cioè guidati dalla community, mantenuti nella community non direttamente da noi del progetto Designers Italia. Il core diciamo è questo. Le versioni sono queste oggi. Trovate tutti i changelog dovunque. Nelle prossime settimane arriveremo alla beta.

Finisco e chiudo questa prima panoramica, che introduce anche questo ciclo di webinar che scenderà più in dettaglio, su alcuni di questi fondamenti e risorse, portandovi su "come contribuire". Il design system è una risorsa aperta a disposizione pubblica, a disposizione tutti, i link per trovare le cose sono pubblici, non c'è niente di nascosto. Le licenze sono aperte, come richiede anche il Codice dell'amministrazione digitale (CAD).

Esiste un modello di contribuzione che trovate sempre qua, che spiega come potete contribuire o come la Community sta già contribuendo. Si può contribuire alla documentazione, al design, allo sviluppo, al Kit UI e Bootstrap Italia, alle risorse guidate dalla Community. Però mi interessa chiudere questa prima panoramica, portandovi su questi due link, "vai al piano attività", "attività in lavorazione" sempre sul sito, nella pagina "design system", "come contribuire", "modello di contribuzione" perché aprono - me li apre in due nuovi tab e ve li faccio vedere - due risorse, uno è il piano attività che vive nella pagina community di Designers Italia, dove trovate cosa stiamo facendo, quindi design system beta che entra esce entro Q4 2023 e che cosa abbiamo fatto negli anni passati, dal 2018 ad oggi, con tutti i link. Questo invece, che è l'altro link, "attività in lavorazione" che è proprio una dimostrazione pratica che l'open source, lavorare in open source, lavorare in open, si fa anche a livello di processo. Noi stessi stiamo lavorando con una board, una lavagna di lavorazione, che molti di voi che fanno project management riconosceranno, può essere anche un canvas a livello visivo che è completamente pubblica, dove gli utenti possono vedere, ma possono anche commentare le segnalazioni, i task, le attività aperte.

E chiudo portandoli sulla milestone della beta di fine anno, che si apre anche da qua, che vive su un GitHub e che è fatta al 42%. E qui ci sono tutte le cose aperte che stiamo facendo per continuare la documentazione. Spero di avervi dato degli input e penso che siamo arrivati alla fase di domande e risposte.

Sezione Domande & Risposte

Mauro Savini

Sì, grazie Daniele e grazie a tutti gli altri relatori. Allora sono arrivate diverse domande, c'è il tempo di rispondere ad alcune. Chiedo in particolare a Francesco Improta, se può rispondere ,adesso vado nell'ordine. La prima è dove si accede ai file Figma, se c'è appunto un link da cui fruirne.

Francesco Improta

Sì, grazie per la domanda. Assolutamente sì, ci sono diversi link, giusto per riepilogare, volevo condividervi appunto, dove sono, dove si accede a questi strumenti. I punti di accesso sono sostanzialmente due. Il primo lo trovate tra le risorse operative nel sito di Designers Italia. Quindi ci sono i link a Figma, alle risorse GitHub e anche template. Per poter personalizzare, scaricare, la propria versione dei layout, personalizzarla quindi, le risorse che vi ho mostrato di Figma sono disponibili in quella che questo strumento mette a disposizione come "Community", cioè dove sono pubblicati i progetti in maniera totalmente aperta. Quindi voi potete, esplorando, per rispondere appunto alla domanda di Nilde Cassano, è possibile andare nella sezione della Community, cercare Modello Comuni, o cercare, appunto, Designers Italia e aprire nel proprio Figma, quindi i designer, possono creare una propria versione del file. È importante, diciamo utilizzare questo come punto di accesso perché noi costantemente aggiorniamo e pubblichiamo delle novità. Quindi è possibile visualizzare il numero di versione, quando è stata pubblicata l'ultima, appunto, l'ultimo aggiornamento. Quindi questo per rispondere alla prima domanda.

Mauro Savini

Grazie, allora, prossima domanda l'aspetto grafico della home page deve essere completamente identico a quella presente nel template?

Francesco Improta

Allora, come ho detto durante il mio intervento l'aspetto grafico della homepage è un punto di partenza. Noi abbiamo visto che ci sono tante necessità di personalizzazione, una su tutte, l'identità del singolo Comune, ma anche, la struttura della home page, ovvero la disposizione contenuti e delle sezioni. C'è da valutare un unico aspetto, noi le risorse che abbiamo messo a disposizione le abbiamo realizzate seguendo, dei principi di buona progettazione, le abbiamo validate e testate con le persone e anche nell'ambito dell'accessibilità, quindi è chiaro che chiunque decida di adottarle così come sono. Può, tra virgolette, stare sicuro che quelle scelte siano state validate, si possono personalizzare nell'ambito anche poi di un contesto più generale di architettura dell'informazione che è un'altra delle risorse che mettiamo a disposizione. Però niente può calare, può prendere queste buone pratiche e calarle nella propria dimensione. Quindi, per rispondere alla domanda sinteticamente sì, è possibile? Il mio invito è quello comunque di rimanere in un ambito di, come dire, di seguire i principi generali che hanno sono stati alla base della progettazione di Designers Italia.

Mauro Savini

Grazie Francesco, allora poi ce ne sono un paio che riguardano l'assenza di molti template nel tema di WordPress e quindi la domanda è se verranno realizzati?

[Francesco Improta] Sappiamo che per quanto riguarda la risorsa del tema WordPress è stata pubblicata in maniera non completa al 100%, ovvero ci sono dei template di pagina che non sono disponibili e, lato Designers Italia, non saranno aggiunti. Quello su cui abbiamo puntato e stiamo puntando anche per quanto riguarda altri modelli è quello di lavorare al fianco della comunità web. Abbiamo ricevuto tantissimi contributi, soprattutto sul tema WordPress per i Comuni. Sappiamo che sarebbero questi template utili a tantissime persone come punto di partenza. È vero che ci sono stati anche tantissimi contributi che hanno migliorato i template già realizzati e quindi il mio invito è quello, a tutti coloro che decidono di utilizzare questo strumento e che ne hanno la possibilità, capacità, di collaborare attivamente con noi e anche, come dire, colmare queste piccole mancanze. Sì, scusami. Risponderei quindi anche a un'altra domanda che era relativa a Plum come altro CMS, a Plone, scusate, come altro CMS. Non è prevista attualmenteml'integrazione, ma sicuramente l'invito che faccio è lo stesso, cioè lì dove ci sono delle competenze tecniche specifiche, e quindi ci sono tecnologie che noi in questo momento non stiamo coprendo, il mio invito è sempre quello di, in questo caso, usare i template HTML che noi forniamo in maniera, come dire, agnostica, da qualunque tecnologia o piattaforma, usare quelli come linea guida e proporre, anche perché no, una versione per il CMS Plone basata sui template fatti.

Mauro Savini

Perfetto, allora abbiamo tempo per un altro paio di domande. Per caso c'è qualche risorsa dedicata alla possibile struttura adottabile del DB?

Francesco Improta

Allora, no. Sulla parte gestione database non abbiamo fornito risorse specifiche. Io credo che forse quella più vicina in questo caso possa essere il documento di architettura che definisce appunto la l'organizzazione delle informazioni e dei content type. Però, nello specifico di strutture di database, non siamo scesi così in profondità.

Mauro Savini

Ok, allora ultima domanda. Criticità sul motore di ricerca domanda, insomma, la possibilità di approfondire il tema ponendo il quesito sul Forum Italia oppure su GitHub se relativa al funzionamento di WordPress.

Francesco Improta

Sì, diciamo allora la criticità su questo, sul motore di ricerca. Sicuramente questa domanda meriterebbe un approfondimento e diciamo anche una condivisione un pochino più aperta, quindi il mio invito è quello di condividere o su canali specifici, cioè se si tratta di WordPress a condividerla su GitHub oppure su Forum Italia, se è diciamo più in linea generale su come deve funzionare la ricerca sul sito, in maniera tale che possiamo anche, rispondere e dare, come dire, la risposta in maniera aperta anche ad altre persone che stanno riscontrando magari la stessa criticità. Quindi il mio invito è andare a portare questo tema fuori dal webinar di oggi. E così che sia possibile approfondirla un pochino di più.

Mauro Savini

Grazie mille a Francesco Inprota per le risposte in diretta.

Francesco Improta

Grazie a tutti voi.

Marco Maria Pedrazzo

Aggiungerei magari due punti, viste le numerose domande e ne sono arrivate molte, relative a sezioni di sito o pagine, argomenti molto legati all'architettura dell'informazione. E su questo vorrei rassicurarvi che non rispondiamo oggi perché ci sarà un webinar dedicato. Nel frattempo, se avete delle urgenze su padigitale2026.gov.it potete accedere all'help desk e porre le questioni direttamente. Sui temi di comunità di pratica, quindi di espansione di temi per CMS non coperti o ulteriori elaborazioni sui temi WordPress, mi fa anche piacere citare un punto di contatto della comunità di pratica che oggi è stato sullo sfondo e che però è un po' il cuore pulsante di queste attività, che il Catalogo del riuso. Chiaramente, se vi trovaste in condizione di poter migliorare queste risorse, potete proporle direttamente a noi, nel caso siano in continuità oppure ripubblicarle, affinché siano anche altri gli enti che possono usufruire. Speriamo che questo webinar vi sia stato utile.

Per tirare un po' le fila, come diceva Francesco, tutto quello che avete visto è stato fatto coinvolgendo gli utenti in tutto il processo progettuale per raggiungere standard di usabilità e di accessibilità che l'obiettivo ultimo di queste interfacce. È funzionare bene, in maniera semplice per tutti gli utenti che hanno diritto di accedere a questi servizi pubblici e speriamo che quanto appreso oggi non sia soltanto un punto di arrivo, ma un punto di partenza che vada molto oltre la Misura, molto oltre quello che le norme, le Linee guida, come quelle di design per i servizi e siti della PA, richiedono, ma sia un modo per cercare di essere più di aiuto, più vicini, ai vostri cittadini.

Approfondiremo nel prossimo webinar il tema del design system, in particolare ci focalizzeremo sulle qualità che ha citato Daniele, l'accessibilità il 28 novembre alle 11:00. E poi seguiranno invece dei verticali, prossimamente dedicati ai temi dell'architettura e dell'informazione. Se volete ricevere aggiornamenti su rilasci, sui kit, sui modelli, su appuntamenti di formazione come questo, vi consiglio di iscrivervi alla nostra mailing list. Potete trovare il form dedicato nel piede nel footer del nostro sito che è designers.italia.it. Pubblicheremo anche gli aggiornamenti sui nostri canali Twitter, anzi, fu Twitter, ora X @Designers Ita e sui social del Dipartimento per la trasformazione digitale. Vi ringrazio tantissimo per l'attenzione. Ringrazio tantissimo anche ANCI per l'ospitalità e passo la parola per i per i saluti finali.

Mauro Savini

Grazie Marco Maria e grazie a tutte le persone di Designer in Italia che sono intervenute oggi e che con noi faranno questo percorso di diversi mesi. A proposito di questo, nella chat abbiamo pubblicato il link per registrarsi al prossimo evento del 28 novembre alle 11:00 del prossimo webinar, quindi potete iniziare a farlo da subito. Non mi resta che ringraziare tutti. I partecipanti anche oggi sono stati tantissimi, più di 700, segno che questi appuntamenti riscuotono interesse e vengono individuati come utili. E di questo siamo contenti.

Buon proseguimento di giornata a tutti e al prossimo appuntamento grazie.