Realizzare interfacce pubbliche di qualità e più accessibili grazie al Design system del Paese

Scarica la trascrizione in formato ODT.

[...]

La parola a Maria Carolina Alker

Grazie 1000 Moira e buongiorno a tutte e tutti. Come già introdotto da da Moira, io mi chiamo Carolina Alker e sono una Content designer al Dipartimento per la trasformazione digitale. Oggi sono qui per aprire i lavori di questo secondo appuntamento del ciclo di webinar dedicati alla all'esperienza del cittadino nei servizi pubblici, dalla misura alla pratica. Questo nostro incontro odierno sarà incentrato sulla tematica della realizzazione di siti internet e servizi pubblici digitali che siano di qualità, accessibili e inclusivi. Questa realizzazione è possibile grazie all'adozione degli strumenti e delle risorse del del Design system del Paese.

Come molti di voi già già sapranno, lo scopo della misura 1.4.1 del PNRR è proprio quello di migliorare l'esperienza del cittadino nei servizi pubblici, quindi nell'utilizzo dei servizi digitali, investendo proprio sul digitale. Per raggiungere questo importante obiettivo è richiesto l'impegno da parte di tutti gli enti e gli attori coinvolti sul territorio. Proprio per implementare siti e servizi digitali che siano coerenti, semplici da usare e inclusivi. Oggi che cosa faremo? Oggi presenteremo nel dettaglio tutti i passaggi necessari, gli strumenti e le risorse messe a disposizione da Designers Italia per raggiungere con successo questo obiettivo.

Ma che cosa è Designers Italia? Designers Italia è un progetto che mira ad essere il punto di riferimento per la progettazione dei servizi digitali della Pubblica Amministrazione ed ha come obiettivo principale quello di diffondere una cultura progettuale centrata sulle necessità delle persone. Mettendo quindi le persone al al centro e mettendo a disposizione tutti gli strumenti operativi e di indirizzo dedicati agli enti e ai fornitori.

Quindi nel webinar di oggi riprenderemo un tema che già è stato introdotto nello scorso incontro per chi di voi fosse stato presente, che è proprio quello del Design system del Paese. Nello specifico interverranno Francesco Mascia, mio collega e UI/UX designer al Dipartimento, che vi introdurrà il tema su come usare questa risorsa per progettare con qualità in modo accessibile e inclusivo e analizzerete le varie fasi del progetto e introducendo i concetti fondamentali di "by design" e "by default". Seguirà poi l'intervento di Daniele Tabellini, sempre un'altro mio collega UI/UX designer al Dipartimento, che scenderà più nel vivo approfondendo i dettagli pratici e vi mostrerà l'applicazione di questa importante risorsa del Design system del Paese. Io non voglio rubare altro tempo e passerei la parola a Francesco e auguro a tutti un buon lavoro, grazie.

La parola a Francesco Mascia

Grazie Carolina, buongiorno a tutte e tutti. Io sono Francesco Mascia, UI/UX designer presso il Dipartimento per la trasformazione digitale. Mi occupo di progettare siti, APP e piattaforme pubbliche che siano semplici, usabili, inclusive ed accessibili a tutte le persone, curandone chiaramente l'esperienza utente e l'interfaccia. Abbiamo già parlato oggi di Designers Italia e del suo obiettivo principale, che è piuttosto ambizioso no? È quello di diffondere la cultura della progettazione, come? Mettendo a disposizione degli strumenti dedicati sia a diverse figure professionali, ma anche agli enti e i suoi fornitori. Uno tra questi strumenti è appunto il Design system del Paese, che va immaginato come un contenitore di mattoncini che consentono di creare delle costruzioni sempre diverse con delle combinazioni infinite. Come vedete queste informazioni si possono approfondire proprio all'interno del sito Designers Italia. A chi si rivolge il Design system? A diverse figure, come ho anticipato prima. Quindi queste figure possono essere designers, sviluppatori, responsabili di progetto e i loro fornitori. Il Design system mette a disposizione delle librerie, come ad esempio UI Kit Italia, o dei template, dei modelli, per costruire interfacce digitali con uno stile definito e coerente, oltre che componenti e codice open source di sviluppo.

Sempre navigando sul sito possiamo approfondire anche un'altro argomento molto importante, quindi per i fornitori e il responsabile del progetto è importante quanto ci dice il CAD, ovvero il Codice dell'Amministrazione Digitale che, per chi non lo sapesse, è il punto di riferimento normativo che fornisce indicazioni sui servizi digitali e le loro interfacce. Leggiamo proprio insieme cosa dice il CAD, ovvero che "le pubbliche amministrazioni realizzano siti istituzionali che rispettano i principi di accessibilità, nonché di elevata usabilità e reperibilità anche da parte delle persone disabili, completezza di informazione, chiarezza di linguaggio, affidabilità, semplicità di consultazione, qualità, omogeneità ed interoperabilità." Sempre dall'articolo 53, si dice anche che si devono realizzare nell'ambito dello stesso sito internet o servizio digitale, interfacce coerenti nello stile e nello nell'esperienza d'uso, privilegiando le indicazioni e gli strumenti previsti su Designers Italia. Quindi il Design system cosa fa? Ci fornisce indicazioni pratiche di supporto alla progettazione delle interfacce e dell'esperienza utente.

Navigando il sito è possibile anche accedere a un'altro importante strumento che è il Manuale operativo di design, il quale fornisce indicazioni pratiche che aiutano ad applicare queste norme di riferimento. E ve lo vorrei condividere anche questo, eccolo qua. Il manuale operativo mi fa venire anche in mente un'altra domanda: che da il titolo a questo webinar: ovvero cosa significa qualità? Creare servizi digitali e le loro interfacce che siano semplici da utilizzare, che siano equi, che siano inclusivi e progettati a partire dai bisogni reali delle persone… Queste sono caratteristiche, è molto importante, che sono certificabili e reali e che derivano quindi da delle normative come quelle che abbiamo visto prima. Si parla di caratteristiche che sono testate e studiate, mettendo proprio le persone al centro della progettazione. Qualità significa anche fare progettazione dall'inizio e per tutte le fasi del progetto, quindi "by design", dalla raccolta dei requisiti alla progettazione di contenuti, all'esperienza utente, alla prototipazione e lo sviluppo di software, fino all'uso e alla validazione, alla manutenzione, facendo qualità, quindi prestando grossa attenzione dall'inizio sino alla fine. E inoltre nelle fasi del progetto si dovrebbero utilizzare degli strumenti e degli automatismi che hanno invece altre qualità, "by default", è importante cioè utilizzare kit, componenti, template, framework o documentazione che sono già testate e verificate anche in ottica di accessibilità, per esempio. E quindi risparmiando tempo e soldi pubblici. Riassumendo questo concetto, quindi, cosa possiamo affermare? Che il Design system progettato con qualità by design è una risorsa che ha qualità insite anche come l'accessibilità o la privacy, già impostate by default. È importante dire anche un'altra cosa, ovvero che un buon progettista chiaramente deve utilizzare il Design system con coscienza, altrimenti, ad esempio, potrebbe non essere garantita una qualità come l'accessibilità. Progettare interfacce è un atto di responsabilità, progettarlo per tutti i cittadini lo è ancora di più. Progettare significa infatti decidere continuamente chi includere. O escludere. Sia dall'esperienza d'uso che dalla fruizione, a seconda delle proprie caratteristiche, conoscenze o capacità o condizioni di disabilità, che possono essere temporanee o meno. Nel caso di servizi pubblici digitali, significa che tutti i cittadini e le cittadine devono poter avere un'esperienza d'uso soddisfacente, piena, usufruendo di siti o di applicativi o servizi in maniera semplice e chiara. Quindi non dobbiamo discriminare e lasciare indietro nessuno. Quindi si parla tanto, presumo abbiate già sentito parlare di questo approccio, di Universal design, di progettazione universale, che ha come obiettivo quello che sto raccontando: che il prodotto servizi digitali siano accessibili a ogni categoria di persone, al di là dall'eventuale presenza appunto di disabilità. Inoltre ricordiamoci che dal 2025 tutti, anche i privati, dovranno devono essere accessibili secondo la normativa. Volendo approfondire proprio il tema di accessibilità dal Design system abbiamo proprio una sezione all'interno dei fondamenti. Come potete vedere, si parla proprio di questo, di cosa sia l'accessibilità. Essere accessibili è importante, non solo perché lo dicono le norme o le linee guida o perché abbiamo tecniche e tecnologie che lo permettono. È importante dire che — parlavamo prima di diffondere una cultura di progettazione — si tratta proprio di un cambio culturale che stiamo cercando di affermare. Quindi non ratificare a valle uno stato di conformità, ma fare accessibile sin dall'inizio. Semplificare. Togliere un passaggio a partire da soluzioni già validate, by default, che possano essere curate nel corso di un progetto, quindi by design, per poi scoprire, paradossalmente, che si tratta di opzioni più economiche ed efficaci. I servizi digitali, devono essere progettati in modo da includere, già dalle basi della progettazione, i requisiti di accessibilità. E le fasi di progettazione antecedenti allo sviluppo possono e devono includere le considerazioni e le strategie relative alle l'accessibilità. Qualità però non significa solo accessibilità, ma qualità significa anche rispettare la privacy, ad esempio.

Anche il principio della privacy può essere by design, quindi quando si parla di progettazione dei dati fin dall'inizio, e prevede che la protezione dei dati personali dei cittadini e degli utenti sia integrata e presente lungo tutto il ciclo di progettazione del prodotto. Ma la privacy è anche by default. Ovvero quando si parla di protezione dei dati per impostazioni predefinite no, e prevede che prodotti e servizi rispettino questi principi generali di protezione dei dati personali, come ad esempio il principio di minimizzazione dei dati o quello di limitazione delle finalità.

Tutti questi aspetti chiaramente non li approfondiremo oggi, ma mi interessa farvi sapere che esiste ad esempio anche un kit, un kit sulla privacy e poi il collega Daniele vi mostrerà ad esempio un'applicazione di questo approccio che trova una soluzione anche nella realizzazione della nuova componente del Video player, quindi non vi anticipo altro.

Qualità. La qualità va anche mantenuta. Come si può mantenere la qualità? Significa essere open. La qualità si mantiene facendo partecipazione. Per raggiungere dunque l'obiettivo di una PA più vicina, più semplice e utile per le persone, mon sono solo importanti gli strumenti pratici come quelli che vi ho anticipato prima. Ma anche che ci siano dei modi e dei luoghi affinché una comunità si scambi informazioni e buone pratiche. Questo significa essere open, significa fare ricerca, significa ascolto dei reali bisogni dell'utente, ma anche sviluppo open source. Significa avere licenze aperte, open data, open design, ma anche apertura alla partecipazione e ai feedback. Cultura del feedback. Parliamo di soldi pubblici, il codice deve essere pubblico. Torno sul sito, vi mostro anche un'altra importante modello che è quello di contribuzione, e anche su questo poi lascerò approfondire Daniele. Possiamo accedere a un modello di contribuzione sul sito e cosa dà? Dà delle indicazioni operative, quindi pratiche, su come contribuire all'evoluzione del paese, sia contribuendo a tutte le parti che compongono il Design system, quindi alla documentazione. Ma anche contribuendo alle risorse per i Designers. Quindi riportando i propri feedback sul kit di UI Italia o su Design tokens Italia, oppure contribuendo anche ai framework per sviluppatori. Abbiamo infatti delle librerie come Bootstrap Italia. E oppure anche contribuire a librerie community-driven, come quelle per React e Angular che sono ancora in evoluzione. Questa parte abilita quindi il by default no?

Ora lascerei la parola a Daniele Tabellini, che vi spiegherà nel pratico quali sono i vantaggi nell'adottare il Design system con degli esempi. Ci spiegherà perché non si parte più da zero. Prego. Passo la parola a Daniele.

### La parola a Daniele Tabellini

Ciao Buongiorno, condivido lo schermo un secondo dovreste vedere il mio schermo. Io sono Daniele Tabellini. Sono un UI/UX designer, o meglio un progettista di interfaccia ed esperienza utente. Ringrazio Francesco per questa introduzione di alto livello sul Design system del Paese e sulle risorse di Designers Italia. Ho un compito ingrato, ma anche molto divertente: farvi scendere nel pratico, farvelo vedere. Noi ne parliamo molto, chi ha partecipato al primo webinar sa che un primo cappello introduttivo l'ho fatto io, Francesco ha introdotto i temi by design e by default, cioè strumenti progettati by design per avere insite intrinseche qualità che chi usa poi quegli strumenti si ritrova by default nei propri progetti. E ovviamente deve continuare a fare by design bene riguardo a molti temi come l'accessibilità, la sicurezza e la privacy. Vi voglio solo mettere l'attenzione su due cose: uno, che cos'è un Design system? È un'insieme di indicazioni e risorse per migliorare l'efficienza e la qualità quando realizziamo (fase realizzare) l'interfaccia utente, quindi il punto di contatto tra utente e servizio. Nel nostro caso spesso parliamo di cittadini che si "interfacciano con l'interfaccia", ma nessuno vieta che siano anche dipendenti pubblici nel caso di backoffice, interfacce progettate per software o back end. L'interfaccia ed esperienza utente non sono un sinonimo: interfaccia, è proprio l'interfaccia, il posto di contatto. E l'esperienza utente, è l'esperienza che fa l'utente anche attraverso l'interfaccia, ma attraverso anche tutto quello quello che viene prima. E l'altro punto che mi serve mettervi l'attenzione è sul tema responsabilità: chi progetta interfacce, chi realizza interfacce, non solo chi parte dall'inizio, analizza i bisogni e tutto il resto... ha una grossa responsabilità, perché l'interfaccia è un grande momento possibile di esclusione in cui si può decidere, volendo o non volendo, chi escludere dalla fruizione di quel servizio.

Allora entriamo nella parte pratica. Vi ho detto Francesco che il Design system contiene quello che si potrebbe chiamare un ecosistema di risorse. Se entrate nelle pagine della documentazione che vive sul sito Designers Italia, sotto Design system, e andate e cliccate sul numero di versione, oppure se andate su Fondamento / Versionamento. Mi è utile questa pagina per invitarvi a leggerla e capire che stiamo versionando, e capire cosa voglia anche dire tutte le risorse che fanno parte dell'ecosistema Design system del Paese. È un ecosistema perché è fatto da una documentazione che è questa, che è fatto da da alcune guide (Come iniziare, Come contribuire), da alcune schede di alto livello (Princípi e intenzioni, Accessibilità, Linguaggio, usare il linguaggio, eccetera), o da guide più più operative (griglie, tipografia eccetera eccetera). E da componenti, i famosi mattoncini come si diceva nel primo webinar, che servono a costruire le cose, a costruire le interfacce, le esperienze utente. È un ecosistema, dicevo, perché è fatto da questa documentazione, che è un po' un momento di sintesi che parla a tutti, parla il linguaggio di tutti, sia designer che sviluppatori che responsabili progetto che altri tipi di stakeholder coinvolti nella progettazione di interfacce utente, e da una serie di risorse come UI Kit Italia, che vi faccio vedere, che è un kit... qui lo stiamo vedendo all'interno di una community che è quella dello strumento su cui è basato, che si chiama Figma, che non è altro che, vedete qui a sinistra ricarcla un po' la struttura della documentazione, quindi i fondamenti, vi aprono un fondamento Tipografia con le regole tipografiche che un designer può può usare, può adattare.

Con i componenti, ne apro uno a caso, il modo di mettere un avatar o il modo di fare una card. Ok, si può vedere, navigare, copiare da qui. Io vedo "Open in figma" perché ovviamente ne sono il proprietario, insieme ai miei colleghi. Ma se voi andate al link che trovate sul sito Designers Italia nelle risorse "Come iniziare per designer" vi accorgerete che qui avrete la possibilità di copiarvelo, "forcarvelo" o "remixarlo" come si dice in termine tecnico, e poterlo utilizzare e ne vedremo un esempio. Una delle altre risorse dell'ecosistema è quella, il contraltare in sviluppo, quindi UI Kit Italia serve a progettare prototipare, e vedremo come, il Bootstrap Italia è il principale framework di sviluppo delle interfacce, quindi nello stesso modo questo è un piccolo sito di documentazione dove trovare per esempio la tipografia. Con il modo di realizzare il codice e tutte le istruzioni per realizzare lo stesso tipo di approccio tipografico. Ci sono i componenti, apriamone, uno a caso, l'avatar che avevo aperto in UI Kit Italia, con tutte le note su come si sviluppa, come si cura l'accessibilità eccetera. La documentazione è un po' il momento di sintesi. Design tokens Italia, scusatemi, ne stavo saltando uno, che non mi faccio vedere in questo momento è un punto di contatto. Ed è... i "tokens" fondamentalmente sono quelli che si chiamano delle "piccole variabili di verità", cioè contengono informazioni. Informazioni come: il colore blu Italia è 0066CC, in codice esadecimale. Questa informazione esiste un modo di astrarla dallo strumento per designer e dallo strumento per sviluppo e metterla in un file strutturato di dati, un po' come se fosse un open data fondamentalmente. E crearla e anche usarla come un punto di contatto tra design e sviluppo. Sul design c'è da dire che UI Kit Italia non vive soltanto nello strumento su cui è basato. Se andate su la scheda per designer vedete che c'è anche un accesso con altri formati e changelog. Ha un repository dedicato, un repository dedicato.

Anzi, introdurvi il tema GitHub e repository mi è interessante per quello che vi racconto. Quindi il kit UI quando viene rilasciata una nuova versione, ad esempio il 23 ottobre è stata rilasciata la versione 3.2.0, vive sì sulla Community Figma, che è la community di designer che usano quello strumento e su cui viene costruito, ma vive anche su questa repository in maniera automatica. Dove esiste sia il file figma che il file in altri formati. In questo momento abbiamo già implementato da circa un anno e stiamo testando il formato Sketch, che viene generato in automatico. Stiamo cercando di fare anche innovazione tecnologica in tutti questi strumenti che vi mostro, creando automatismi che restano a prescindere dagli utenti dai maintainer, a prescindere da noi, se viene generata una nuova versione si crea in automatico una nuova versione in vari formati che mantengono più o meno inalterate le caratteristiche. E stiamo facendo proprio test in questi in questi mesi. E qui GitHub per chi non lo conosce, per chi di voi non è uno sviluppatore, chi non l'ho mai comprato, è una piattaforma che serve a sviluppare progetti open source. Nasce per il software fondamentalmente. È solo l'interfaccia web di un protocollo, Git, che nasce all'origine da Linus Torvald per creare in maniera collaborativa un sistema operativo intero, che è Linux. Oggi è un punto di riferimento per lo sviluppo open source e anche per la progettazione open source e open design oserei dire. Noi lo stiamo usando, ve lo faccio vedere. Vi spiego anche il motivo per cui lo usiamo: lo stiamo usando in molti modi e... Tutti gli strumenti che vi mostro, il kit UI, Bootstrap Italia, Design Tokens Italia e altri che vi mostrerò, esistono sotto forma di repository, sotto l'Organizzazione Italia. Questa per esempio è design-ui-kit, che è un repository, o in italiano sarebbe "cassetto di file". Questo è un po' come se fosse un cassetto di file versionati con tutta la history, ed esistono possibilità di collaborare.

Quando abbiamo analizzato in questi due anni — io sono il referente tecnico dell'aggiornamento delle risorse Design system del Paese, un po' il capo tecnico — quando due anni fa abbiamo cominciato a strutturare meglio questo progetto Design system del Paese, abbiamo visto che l'ecosistema delle risorse, quindi la documentazione che serve a tutta la fase realizzare, UI Kit Italia, che serve ai designer per prototipare o ai content designer per fare progettazione di contenuto o per fare anche test di usabilità prima nel passare allo sviluppo. Design Tokens Italia vi dicevo che è un punto di contatto. Bootstrap Italia, che è il primo framework principale di sviluppo, avevano tutti in comune una cosa, che era proprio GitHub. Vedete? Non scendo nel dettaglio di questo schema però: tutti i blocchetti neri sono su GitHub, perché il sorgente del sito di Designers dove vive la documentazione è su GitHub; UI Kit Italia ha la sua vita anche sulla Repository con il versionamenti e gli altri formati, Design Tokens Italia è esportato in automatico da UI Kit Italia su GitHub, e Bootstrap Italia, Ovviamente il sorgente essendo di sviluppo, vive su GitHub. Abbiamo quindi deciso di creare un modello di contribuzione e di sviluppo, anche di lavoro nostro, che fosse aperto e vivesse su GitHub. Lo vedremo meglio tra poco.

Torno un attimo sul sito Designers Italia, e mi serve questa immagine qua per introdurvi un concetto che è questo: il Design system del Paese è un ecosistema di risorse, o meglio una scatola di mattoncini che permette di montare che cosa? Dei flussi e dell'esperienza utente, come quelli per esempio che molti di voi conoscono, essendo enti o fornitori che hanno aderito alla misura 1.4.1 presenti nel Modello Comuni. A che cosa serve montare flussi ed esperienze sia a livello prototipo che a livello di prodotto? Ovviamente per realizzare prodotti, questo è un Design system completo che arriva fino al prodotto sviluppato, quindi a Bootstrap Italia, è il primo framework contiene proprio il prodotto. Ma serve anche a testare soluzioni molto velocemente. Molto più velocemente, perché è molto più facile fare prototipi. Serve a velocizzare il lavoro di tutta la fase realizzare. Perché passare da un prototipo in design a un prototipo in sviluppo, a parità di mattoncini, cioè se un mattoncino come ve ne faccio vedere uno che può essere per esempio il componente Chips, quello che permette di etichettare... il classico componente "argomenti" o "tag", o da usare per i filtri. Io ho una documentazione che mi spiega quando usarlo, come usarlo, a cosa fare attenzione mentre lo uso, sia a livello di contenuto che di design che di scelta di usare questo o altri componenti, ho la documentazione di tutte le varianti di questo componente, istruzioni operative lato design di come è fatto e che cosa sono i singoli elementi con le specifiche sulle misure, lato sviluppo la possibilità di avere il codice. Basta copiare e incollare fondamentalmente in un progetto di sviluppo che usa Bootstrap Italia e già ho lo stesso componente in versione prodotto. Ho la possibilità qui già dalla documentazione, di astrarlo con questo tasto qui a destra e vederlo in una scheda a sé del browser, per poterlo testare, ad esempio con strumenti di verifica automatica dell'accessibilità come può essere Wave, o testarlo con utenti, o testarlo con esperti di accessibilità. Se io ho tutto questo ovviamente è molto più veloce fare le cose, questo è uno dei benefici più evidenti.

Vi apro un attimo UI Kit Italia, che è questo, questa è la versione kit Italia da dentro, quindi non dalla presentazione Community, ma se me lo copio e lo uso. Se vado a usarlo come libreria o direttamente quindi ho le stesse cose, ho anche una pagina extra playground per esempio, dove posso cominciare a costruire cose. Qui ho appoggiato stamattina per esempio i due header che ho preso dal menu asset qui a sinistra. Ci posso attaccare, appoggiare elementi sia versione desktop che mobile. Quindi c'è una accordion, posso costruirmi una griglia? La versione mobile? Posso velocemente creare una specie di puzzle. Tutti sappiamo giocare ai puzzle o alle lego. Senza togliere niente al lavoro di un UI designer. Io sono un UI designer, lo faccio da molti anni. Ma arrivare a fare prototipi di intere pagine o di interi siti, anche funzionanti perché magari sono collegati vedete queste righe dicono che se premo qua vado a quest'altra schermata, se premo qua vado a questa. Questa è la simulazione, per esempio. È un piccolo template creato veramente in un numero di minuti abbastanza relativo, molto velocemente, che stiamo usando per fare dei video tutorial, che simula per esempio il nuovo player video di cui raccontava Francesco, e il nuovo Overlay che garantisce di rispettare l'accessibilità. Che è ovviamente un overlay che non esiste solo in grafica. Ha anche in sviluppo molte funzionalità, tipo bloccare qualunque contatto con la piattaforma di terze parti. Però, se io ho la possibilità di creare prototipi molto velocemente così, ovviamente ne guadagno in efficienza, ovviamente ho...

vi dirò una cosa che nessuno dice mai: un Design system non è una scorciatoia, non serve a fare direttamente grafica, o a fare direttamente l'interfaccia in alta qualità, saltando tutto quello che è un buon progetto, la ricerca. O saltando tutto quello che è esperienza utente. In realtà non è questo. Un Design system serve a creare una grammatica comune di riferimento che sia di qualità, by default, tra tutta la community di enti e fornitori. Su che cosa? Sul dominio delle interfacce utente, sulla progettazione e realizzazione delle interfacce. Quindi sul pezzo finale del buon processo. Contiene buoni esempi, e Designers Italia e tutti anche gli esempi che ci sono in giro, ma gli stessi componenti sono buoni esempi, di che cosa sia fare dei pezzettini già validati con cui costruire, e che tutti possono usare come primer. Quindi facilità d'uso, velocità, qualità però non scorciatoia, anzi opportunità. Si semplifica sì la fase realizzare.

Torno sul sito Designers perché ho bisogno di un'immagine. Designers Italia ovviamente comprende tutto il processo, non soltanto tutto il processo di progettare un servizio o un sito, non soltanto la parte finale delle interfacce o delle esperienze utente. Noi amiamo dire che ci piace usare un processo a 5 fasi. Ce ne sono solo ce ne sono molti modelli di come si progetta bene. Nel nostro modello, astratto, che stiamo da qualche anno portando avanti per la Pubblica Amministrazione italiana, le fasi sono 5: organizzare il progetto, comprendere lo scenario d'uso, quali sono i bisogni, fare ricerca utente, progettare il servizio facendo prototipi di solito di bassa qualità, perché tutto quello che è estetica o alta qualità può essere rumoroso nella fase della progettazione. Questo è il Design system, non a caso c'è la stessa icona, realizzare il progetto, nel nostro caso il punto di contatto col cittadino o col dipendente. E validare la soluzione. Test di usabilità, verifica di accessibilità, testo con panel di utenti. Ecco, quello che fa il Design system è realizzare, strutturare, creare, un'ontologia, creare una guida su come velocizzare o rendere più di qualità la fase realizzare, che è questa qua, l'interfaccia utente. Ma non è qui. Questo è l'immaginetta che noi ovviamente usiamo per astrarre un concetto: che il processo iterativo si rivalida, si riorganizza, si ricomprende, si riprogetta in continuazione. Sarebbe molto bello fosse possibile disegnarla come un frattale, perché la fase validare che è qui in realtà è un po' dovunque. E la fase comprendere e progettare è una fase che è un po' dovunque, un po' dovunque. Ve lo spiego: io organizzo il progetto, valido la mia organizzazione, e riorganizzo, riorganizzo e comprendo, valido quello che ho compreso, riorganizzo o ricomprendo, e via di seguito. Cioè la fase di validazione, ma anche la fase di comprensione e progettazione e organizzazione, sono in continua interazione, devono essere per forza di cose in continua interazione. Avere quindi una fase realizzare che è più semplice, non vuol dire avere una fase da prendere come scorciatoia, salto direttamente al Design system, ma vuol dire avere molto più tempo per fare queste altre cose. Avere più possibilità di fare più realizzare, di realizzare più prototipi da testare, avere molta più possibilità di fare ricerca utente, di fare organizzazione dei contenuti. Perché questa realizzare deve da una parte costare effettivamente meno perché ci vuole meno tempo a parità di qualità. E dall'altra c'è più tempo per fare altre cose. Vi faccio degli esempi pratici. Come ve li faccio? Ve li faccio mostrandovi il dietro le quinte, e il dietro le quinte di che cosa. Il dietro le quinte del sito Designers Italia.

Vorrei dire che la qualità by design è iterativa, non è mai una qualità ottenuta una tantum. Tanto più per alcune caratteristiche come l'accessibilità o la privacy. Faccio un esempio pratico: se state usando uno dei temi CMS messi a disposizione per uno dei modelli, o ne avete realizzato uno, il giorno che installate un nuovo plugin e dovete rifare un ciclo di interazione. Sarà accessibile il prodotto di quel plugin che mi cambia le cose nella grafica. Violerà la privacy degli utenti? Il giorno che decidete di mettere i contenuti multimediali da una fonte di terze parti, tipo video che arrivano da una terze parti, che non "hostate" voi sul vostro server, ve lo state chiedendo se inficiate la qualità? Dovete rifare il pezzo. Sto inserendo problematiche di accessibilità? Sì o no? Devo rifare verifiche con utenti... devo pormi problemi… Avere più tempo per fare queste cose vuol dire, per esempio, che noi sul sito Designers Italia abbiamo fatto il processo ideale. Prima o poi anche racconteremo in pubblico, con un bell'articolo di approfondimento, partendo dall'architettura, partendo dalle ricerche utente, dalle analisi euristiche. Ci siamo permessi di fare analisi e test su modellizzazione di pagine. Abbiamo fatto scelte di architettura e scelte progettuali di esperienza utente, partendo dalla carta, e poi riportandola qua in lavagne, astraendo completamente dalla grafica o dalla prototipazione. Modellizzando l'interfaccia utente, l'esperienza dell'utente, quindi la sequenza di contenuti in pagina molto prima di porsi problemi di come erano graficamente.

Avere un Design system non è una scorciatoia, è una solidità strutturale. Avere una fondamenta che ti permette di non preoccuparti dell'estetica, o non preoccuparti se non in parte che è quella di branding, di personalizzazione. Ma puoi farlo con molta più calma. Non devi per ogni singola cosa riperdere tantissimo tempo.

Approfitto che sono su questo file per farvi vedere per esempio che una delle interazioni, — questa è una prototipazione di media qualità per esempio,— una delle prototipazioni più interessanti è stata quella del di uno dei componenti più semplici da fare, un modulo di feedback, a vederlo in grafica. Ciao, questa pagina è stata utile? Sì, no. Ecco, prototipare, chiedersi, prima su carta, poi con gli utenti, poi con gli stakeholder, com'era questo modulo di feedback? Dove portava? E ne troverete un esempio in ogni pagina del sito Designers Italia. È stata una bella sfida. Così come quella di chiedersi e inventare nuovi componenti. Non componenti piccoli atomi, ma componenti aggregati, componenti che servissero una funzione. Ne trovate un esempio chi ha navigato il sito Designers Italia, e vi invito di nuovo a farlo, nel sito ci sono tutte le risposte, è stato fatto con una volontà enciclopedica. Molte cose che sicuramente state chiedendo in chat mentre parlo hanno risposta nel sito. I link dove sono? Qual è la sequenza delle cose allora? Ok, in ogni pagina, perché voi ci arrivate da Google o ci arrivate da un motore di ricerca o ci arrivate navigando. C'è un piccolo canguro (Kangaroo), che noi abbiamo chiamato così perché serve a saltare trasversalmente tali pagine, che ti dice per chi è quella contenuta di quella pagina, in quale fase è, il tipo, gli argomenti di cui parla, eccetera eccetera. Abbiamo fatto diversi prototipi a bassa qualità o a media qualità, e li abbiamo testati prima tra noi, poi con gli stakeholder, poi con gli utenti e con chi ha fatto le analisi euristiche del sito precedente.

Quando siamo arrivati alla progettazione Hi-fI, che è la progettazione di alta qualità (Hi-fi = alta qualità), avevamo già le idee chiare. Questa fase è durata un po' ma non tantissimo proprio perché avevamo il Design system, cioè creare layout di pagina così, e sapere che svilupparli non porterà via tantissimo tempo, perché gli stessi stili, componenti, grafica, sequenze, griglie, li avrai già responsive, già responsivi a vari device, direttamente su il framework di sviluppo, ovviamente ci permetteva di andare più veloci.

Questo è il nostro progetto, ad esempio, del sito Designers che, vi svelo un segreto, è fatto ovviamente a verticali, progetto, norme e riferimenti, modelli eccetera eccetera, Design system, risorse per progettare, community, divise in livelli di navigazione. Abbiamo fatto delle scelte che sarebbe auspicabile che facessero tutti: nei primi livelli di navigazione, quindi le copertine, il primo livello della sezione, ad esempio la sezione progetto. Nei secondi livelli, per esempio visione e ammissione o le linee guida di design, usare un linguaggio comprensibile da tutti e non portare le persone fuori dal sito, che era uno dei limiti delle analisi euristiche e delle ricerche utente fatte tantissimo sul sito precedente, che aveva link e dispersione e parlava a operativi e non la stessa lingua fin dall'inizio, mescolando linguaggi e target. Scendendo, approfondendo i livelli, terzo, quarto, eccetera, ovviamente ci sono in alcune sezioni, in altre no, si scende più sul piano operativo. Questa è la sezione Design system. Progettazione UI, progettazione dell'interfaccia. Una scelta interessante secondo me, porsi un problema di linguaggio e anche di architettura che influenza sul linguaggio. Però una scelta come se ne possono fare altre.

Mi è utile essere in questo file intanto per dirvi che sta usando il Design system del Paese, cioè uno può ottenere prototipi, preview molto velocemente di che cosa vuole visualizzare e testarle, che è una cosa fondamentale. Testare, avere più tempo per testare, serve a questo. Ok, mi è utile per farvi vedere un esempio di cosa voglia dire continuo miglioramento. Anche noi stiamo migliorando le risorse mentre le usiamo. Queste sono le quattro card dei contenuti principali che sono sul sito, quindi un contenuto media, il contenuto evento, il contenuto notizia, il contenuto approfondimento. La sequenza qui degli elementi, quindi titolo, immagine data, titolo, durata eccetera, titolo durata, eccetera fino agli argomenti, è una sequenza che abbiamo già visto, che era quella corretta, perché nei primi prototipi seguivamo invece l'approccio che seguono molti di voi o seguono altri di mettere come primi elementi ad esempio i tag, o le categorie, un po' come l'occhiello mutuato della carta stampata, no? Invito Designers Italia - Wired Next Fest. Il problema qual'è? Che quando lo testi con utenti, o ti poni un problema di come lo legge chi ascolta, per esempio il sito, o chi salta contenuti per vedere o leggere solo quello che gli interessa, se legge nella prima cosa sulla card la categoria rischia di leggere in più card invito, invito, invito, invito, ... non avendo distinzione. Deve per forza approfondire in realtà gli elementi.

Si itera lato design. Alla fine del design si lasciano indicazioni per gli sviluppatori o per chi viene dopo di noi. Si può usare il Design system per creare soluzioni come questi, che sono strumenti per la progettazione. Mentre lo progettavamo, una volta individuati il layout di pagina, li abbiamo vuotati di contenuto e creato un file che permettesse a chi scriveva contenuti di testare i contenuti. Quindi di scrivere i contenuti ben prima che ci fosse il Content Management System o il prodotto sviluppato. Qui vedete tutta l'alberatura con i contenuti reali. In modo da poter lavorare in parallelo.

Si itera durante lo sviluppo. Vi faccio vedere un esempio. Questi sono è una board che serviva a valutare il risultato di un primo ciclo di test di usabilità fatto con la Conferenza Stato regioni del sito Designers Italia. Fatto a metà dell'anno scorso. Ne abbiamo fatti diversi. Ora tra poco ne partirà un'altro ciclo di test di usabilità di tutto il sito Designers Italia. Mi interessava farvi vedere una delle cose scoperte. Questo era già prodotto, noi abbiamo rilasciato il sito prossima.designers.italia.it sei mesi prima. Era praticamente quattro o 5 mesi prima del rilascio del sito nuovo Designers Italia. E ne abbiamo aperto i feedback. Abbiamo scoperto per esempio con esperti di accessibilità, che il megamenu, questo menu che trovate sul sito Designers Italia, aveva dei problemi di accessibilità. Perché? Perché se io non vedo i colori non posso fare distinzione tra le voci attive e non attive. Perché se io vedo molto ingrandito non ho distinzione se è un testo cliccabile o meno tra queste due. Se io navigavo da tastiera non c'era possibilità di navigare nel modo corretto a livello di accessibilità. E quindi l'abbiamo evoluto. Questo è quello che è online, adesso a valle dei test di usabilità. E nelle prossime settimane lo integreremo in Bootstrap Italia che ancora non ha quel megamenu aggiornato. Gli stessi strumenti sono in continua evoluzione. Che non è un gli manca qualità, è un continuo evolvere la qualità.

Ok, torno qui sulla scheda Design system, fondamento accessibilità. Perché mi interessa andare verso la fine. Ho 5 minuti per raccontarvi alcuni concetti fondamentali e poi sono aperto a rispondere, come tutti i miei colleghi, alle vostre domande. Il fondamento è accessibilità, ... salto tutto quello che vi ha raccontato Francesco, tranne dirvi che i profili coinvolti in accessibilità sono tutti, chi organizza il progetto e si pone problemi di requisiti, chi fa design e si deve porre problemi non solo di contrasto colori del testo, ma il contrasto colore degli elementi, la gerarchia, cose come l'ordine degli elementi che avete visto nelle card, eccetera, eccetera. Gli sviluppatori ovviamente coinvolti in primo piano, lo sviluppo impatta tanto sull'accessibilità. Ma chi lo cura e lo manutiene dopo. Non mettere testi alternativi alle immagini, sbagliare la gerarchia dei contenuti dopo, eccetera, eccetera.

Però mi interessava venire qua per venire su questo pezzo. Standard, open design e partecipazione. Noi stiamo cercando di mettere tanto l'attenzione su questo concetto di open design. Non più solo open source lato sviluppo, ma progettare in maniera aperta. E questo fondamento, come altri, se veli navigate, hanno dei workflow, rendiamo esplicito come noi testiamo e validiamo le soluzioni man mano che le facciamo. Ad esempio, questo è il workflow che gli sviluppatori e i designer usano su Bootstrap Italia. E quindi di conseguenza anche sugli altri framework, community-maintainer o community-driven come diceva Francesco, React e Angular, per testare l'accessibilità dei singoli componenti che by default mi ritrovo se uso il Design system. Ovviamente mi trovo l'accessibilità by default di un componente astratto dal suo contesto, poi dovrò usarlo bene, by design, io nel mio progetto e continuare a mantenerne l'accessibilità o migliorarlo. E se scopro cose, posso anche segnalarle e migliorarle a monte. Perché mi è utile farvi vedere questa cosa: per dirvi che ci sono workshop pubblici che noi rilasciamo; che i test automatici sono fondamentali, non c'entra niente l'intelligenza artificiale qua e ci deve essere un umano, esperto o meno. Non tutti devono diventare esperti, qui c'è scritto più volte che è necessario coinvolgere gli esperti. Però mi interesserebbe far passare il concetto che, non solo serve coinvolgere gli esperti nelle parti critiche, pago un bonifico, iscrivo un figlio a scuola... lì ci vuole per forza un esperto per essere sicuri che non ci siano problemi di accessibilità. Però se parto by default col Design system, e ogni tanto faccio questo giro di test, automatici, manuali, tutti possono imparare a fare un giro con la tastiera, a navigare il sito con la tastiera, e che cosa verificare? L'ingrandimento. Progettare responsivo, cioè che si adatta alla viewport, significa prima di tutto non soltanto progettare in modo che tutti i device hanno accesso, ma progettare in modo che a qualunque ingrandimento, anche molto alto per esempio per una persona ipovedente, i contenuti funzionano bene. Progettare col lettore di schermo: non tutti lo possono o devono imparare a fare, ma sarebbe interessante che tutti lo facessero almeno qualche volta. Questa è la soluzione che suggeriamo con gli esperti di AgID più diffusa. Ovviamente non è l'unica e non è garanzia che sia accessibile, però, anche prima di coinvolgere un esperto, già fare questo giro sicuramente aumenterebbe la qualità by design. Noi la facciamo spesso sui componenti. Sarà la distinzione tra la beta del design che uscirà a fine anno. Non è che l'alfa non è stabile, l'alfa semplicemente è con la documentazione non completa e alcuni componenti hanno ancora scritto "in stesura". Come questa. Però le risorse sono tutte stabili e usate da migliaia di pubbliche amministrazioni. La beta uscirà a fine anno, si spera con la documentazione completa o inizio 2024. La versione ufficiale sarà solo un'altro giro di interazione di interazione, scusatemi, di test di accessibilità, verifica e accessibilità, e un'altro giro di test di usabilità con gli utenti, con un panel di utenti rappresentativi però facendo test di usabilità veri.

Ok, finiamo, tornando al modello di contribuzione. E ovviamente... mi interessa una tabellina, per farvi vedere che la contribuzione è su GitHub, il modello di contribuzione si basa su guitab. Quindi la lista delle segnalazioni da controllare è lì. Per aprirne di nuove è lì. Ci sono modalità diverse a seconda se vuoi contribuire alla documentazione, al design e allo sviluppo. Si può contribuire in italiano o nella lingua franca dello sviluppo open, che è l'inglese. Noi ci siamo impegnati, da qualche tempo, a scrivere in italiano laddove ci sono temi legati ai contenuti della documentazione. Non avrebbe senso parlare in inglese di una documentazione in italiano.

Mi serve uno schema, che è in questo file di governance, per sintetizzare e andare verso la fine. Come si contribuisce? Si sceglie dove si vuol contribuire, alla documentazione, alla stesura di quei testi, a migliorarli, a un'eccezione, si può addirittura direttamente proporre direttamente modifiche di contenuto su una pagina. In fondo a ogni pagina del sito Designers Italia, che vi ripeto, ha una volontà enciclopedica e vuol diventare il Wikipedia di come si progettano siti e servizi fatti bene per la PA. Ma vi dico la verità, contiene indicazioni che sarebbero utili per tutti, più che la normativa europea ci porta verso estendere giustamente il progettare la qualità e bene anche per i privati, più sarà uno strumento in realtà universale. Si può proporre, in basso c'è "proponi una modifica". Si passa da GitHub sì, ma leggendo il modello di contribuzione è abbastanza facile capire come fare. Quindi documentazione, design o sviluppo, quindi UI Kit Italia, Design token Italia o Bootstrap Italia ed eventuali framework mantenuti dalla Community React e Angular. Si esplora la lista delle discussioni, se si vuol contribuire. Se trovo una discussione che parla del tema di mio interesse, partecipo. L'indicazione è partecipare, più che proporre nuove discussioni. Abbiamo bisogno e vediamo tutti i giorni persone che partecipano. Non ci sentiamo soli, ma più siamo e meglio è. Il Design system è un bene pubblico. Invio eventualmente un contributo, o valuto i contributi degli altri. Parlano del tema di mio interesse le segnalazioni? No, apro una nuova segnalazione e sono guidato da un form che mi permette di farlo.

Non è a caso quindi chiuderei su questo, che è la stessa cosa su cui ho chiuso il primo webinar, ma è molto interessante secondo me. Sempre dal modello di contribuzione potete arrivare a questa board. Che è una lavagna di gestione progetto vera e propria. Diceva Francesco Mascia: soldi pubblici, codice pubblico. Io direi: soldi pubblici, codice e progetto pubblico. Il progettare, realizzare, curare il progetto del Design system in open, per noi è anche creare un buon esempio di come si dovrebbe gestire un progetto. Quindi in questa board vi trovate i vari repository, Bootstrap Italia, Design tokens Italia, Designers Italia. Usando lo strumento nativo su cui sta nascendo questo Design system, che è GitHub stesso che mette a risposizione gratuitamente la possibilità di fare board di gestione progetto e molti automatismi anche di connessione. Vi apro un task non a caso, che è quello che stiamo usando per tracciare il finale di stesura del contenuto componenti per la beta. È possibile navigare, tutto questo che sto navigando è pubblico praticamente, e partecipare alle discussioni. E anche proporsi per fare modifiche. Io vi invito a farlo. Se vi siete persi in questa lunga dissertazione, vi gireremo una sitografia, ma avete capito, perché lo stiamo facendo da tempo che, stiamo navigando il sito. Quindi il 13 dicembre c'è il workshop sul linguaggio sull'architettura. Questi fondamenti saranno, se volete, un insight su cosa vi racconteranno, io ci andrei: tono di voce, linguaggio e micro testi. Questa è un'infarinatura, noi nelle prossime settimane metteremo a disposizione, insieme alla beta con la documentazione completa, anche un ciclo di tutorial più approfonditi su come si fanno le cose ai vari livelli, per responsabili progetto, per design, per sviluppatori, per fare test. Vi invito tutti a darci feedback su tutti i canali, Forum Italia, slack, eccetera. O a produrre voi stessi contenuti. La Community ha bisogno di contenuti di istruzione. Molti di voi sono operativi che sanno come si fanno le cose, come si usano queste risorse, perché le usano tutti i giorni. Scrivete articoli, fate video tutorial e segnalate che l'avete fatto. Noi siamo qui per curare una community di persone che progetta e migliora la qualità dei servizi pubblici. Passerei alle domande, grazie, spero di essere stato chiaro e non lunghissimo.

[...]