Daniele Tabellini Design Technologist / Artist / Design system .italia / Digital Experience Lab at UNIRSM Design Daniele Tabellini Wed, 22 May 2024 00:00:00 +0000 https://danieletabellini.com/ Verso Design system .italia: dalle origini al design system aperto della Pubblica Amministrazione Wed, 22 May 2024 00:00:00 +0000 https://danieletabellini.com/it/idee/verso-design-system-italia/ Tre generazioni di linee guida, strumenti e processi per portare accessibilità, usabilità e qualità nei servizi pubblici digitali

Pubblicato su Designers Italia (Medium) il 22 maggio 2024

Design system .italia”, “.it” e mano con chiave meccanica. Tre gomitoli di lana e un filo che dipana una lunga storia. Copertina: rielaborazione di un’immagine di Tara Evans su Unsplash

Read in english…

Premessa

Un’esperienza d’uso semplice e di qualità è un diritto in quest’epoca di trasformazione digitale della Pubblica Amministrazione (PA). I siti internet e i servizi digitali pubblici devono essere progettati tenendo conto delle esigenze di tutte le persone, garantendo l’accesso senza discriminazioni basate su caratteristiche personali, conoscenze o condizioni di disabilità, temporanee o permanenti.

Le interfacce digitali della PA devono essere semplici e utili, sia che siano rivolte alla cittadinanza per erogare servizi e fornire informazioni, sia che siano ad uso interno di chi lavora nel settore pubblico. In entrambi i casi, devono consentire a tutte le persone un’esperienza di cittadinanza piena, equa e inclusiva.

Design system .italia è nato proprio per agevolare le PA e i loro fornitori nel raggiungere questo obiettivo, rispondendo al requisito 4.5 delle Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione del 2022 che prescrive interfacce coerenti nello stile e nell’esperienza d’uso privilegiando quanto previsto su Designers Italia.

Design system .italia è il sistema di progettazione open source dello Stato che fornisce indicazioni e strumenti per realizzare interfacce ed esperienze digitali pubbliche di qualità.

Ma come è stato il processo che ha portato al design system del Paese, .italia?

Design system generation: a stable and sufficient core library of assets, docs, tools and practices delivered for use by designers […] and/or developers […]

Prendendo come riferimento questa definizione di “generazione di un design system” — una libreria stabile e sufficiente di risorse, documentazione, strumenti e pratiche rilasciate per designer e sviluppatori — possiamo individuarne tre evoluzioni dal 2015 ad oggi.

Timeline delle tre evoluzioni: prima dal 2015 al 2017; seconda dal 2017 al 2021; terza dal 2021 ad oggi.

Indice dei contenuti

La nascita del design system: la versione alfa (2015–2017)

In sintesi: prime linee guida di design, approccio open e sforzi iniziali per la coerenza dei siti web della PA.

Sebbene non fosse ancora un vero e proprio design system, questa generazione fu il primo tentativo di rendere coerenti per identità visiva, usabilità ed esperienza utente migliaia di siti web della Pubblica Amministrazione, ripensando un approccio responsabile e olistico, come si diceva allora, al progetto digitale per la pubblica utilità.

Nell’ambito dell’iniziativa “Italia Login”, promossa dal Governo Italiano e curata da AGID, furono redatte le prime Linee guida di design per i siti web della PA (2015) con il contributo di un ampio steering committee di esperti ed esperte. In quella versione alfa, pubblicata sul sito design.italia.it, c’erano i primi elementi di un’identità visiva “ridotta ai minimi termini” (Sinni, 2016) per l’Italia digitale, in uso ancora oggi: il colore istituzionale Blu Italia #0066cc, le griglie Bootstrap e il carattere tipografico open source Titillium Web. Inoltre, il processo aperto e partecipato per la loro stesura, segnò l’inizio per la PA dell’uso di repository sulla piattaforma GitHub per discutere e collaborare.

Per un design dei servizi della Pubblica Amministrazione. Il sito delle prime Linee guida di design. Linee guida di design versione alfa (2015)

With a technological system not updated for almost sixteen years, a geological era from a digital point of view, it was immediately clear that it would not be possible to continue updating the site only at the interface level as had been done until then.

Il redesign del sito governo.it (2015) fu il primo progetto pilota d’applicazione, cui ne seguirono molti altri, centrali e locali, rappresentando allora una risposta all’obsolescenza con un approccio radicale e non solo aggiornamenti dell’interfaccia.

Dal 2016, la governance del progetto passò al Team per la trasformazione digitale, struttura dell’allora Commissario straordinario per l’attuazione dell’agenda digitale.

Consolidamento e crescita: la seconda generazione (2017–2021)

In sintesi: rilascio della prima versione stabile delle linee guida di design; consolidamento di Designers Italia; prime versioni di strumenti operativi e modelli.

Con la guida del Team per la trasformazione digitale e la collaborazione di AGID, si consolidarono la community e i progetti Designers Italia e Developers Italia. Nel 2017 fu rilasciata la prima versione stabile delle Linee guida di design per i siti web della PA, dando il via a una riscrittura completa che ne estese la portata all’intero ciclo di progettazione dei servizi digitali, accogliendo fin dalla versione 2018.1 anche il protocollo eGlu per i test di usabilità. Le indicazioni e gli strumenti su Designers Italia iniziarono ad essere raccontati come il “design system della PA”.

Il disegno dell’interfaccia. La versione 2020.1 delle Linee guida di design. Linee guida di design v2020.1

Il digitale non è di destra o di sinistra, non è Real Madrid o Barcellona: un buon digitale è trasparenza, efficienza, inclusione, lotta alla corruzione, una sanità e una scuola migliori, occupazione e soprattutto futuro.

Furono definiti molti nuovi strumenti (es. Docs Italia per ospitare le linee guida) e processi, come le consultazioni pubbliche su Forum Italia per rilasciare nuove linee guida tecniche. Tra queste ultime, le Linee guida per l’acquisizione e il riuso di software per la PA, ancora oggi riferimento fondamentale a supporto degli art. 68 e 69 del Codice dell’amministrazione digitale (CAD) che prescrivono alle pubbliche amministrazioni di rilasciare con licenza aperta il software da esse sviluppato o commissionato.

Sul sito designers.italia.it, la cui architettura dell’informazione fu evoluta nella seconda metà di questa generazione per divulgare un processo ideale di progettazione a 5 fasi a supporto delle linee guida di design, furono rilasciati kit e nuovi strumenti per la prototipazione e la progettazione (UI Kit) e lo sviluppo (Bootstrap Italia) delle interfacce. Vennero inoltre rilasciate per il riuso le prime versioni complete dei modelli di sito istituzionale per le scuole e per i Comuni: dalla ricerca quantitativa e qualitativa al service design, dai contenuti agli scenari d’uso, dal design fino allo sviluppo delle interfacce, utilizzando ed estendendo a ogni lavorazione gli strumenti stessi di Designers Italia. La community cominciò, inoltre, a guidare la produzione di ulteriori strumenti aperti, come ad esempio il kit di sviluppo per React.

Progettiamo servizi pubblici digitali per risolvere i problemi dei cittadini e restituire il buonumore. Il sito Designers Italia, circa 2020. Il sito designers.italia.it a fine 2020
Anteprima di UI Kit v2, pulsanti e mockup. UI Kit v2, anteprima

L’idea, i cui semi si potevano trovare fin dalla prima generazione, di un unico punto di accesso per tutti i servizi digitali del Paese, cominciò a diventare realtà con l’uscita di app IO (2020), a guida PagoPA, vincitrice negli anni seguenti della XVII edizione del Premio Compasso d’Oro (2022).

Nel 2019 fu istituito il Dipartimento per la trasformazione digitale, che ereditò la governance del progetto Designers Italia.

L’innovazione di .italia: la terza generazione (2021–oggi)

In sintesi: revisione completa per definire il design system nazionale, accessibile by design; nuovo sito Designers Italia e PNRR; rilascio di risorse e modelli aggiornati in collaborazione con la community.

Dopo il redesign di innovazione.gov.it (2021), la casa digitale del Dipartimento per la trasformazione digitale, che mostrò una rinnovata attenzione a usabilità, accessibilità e privacy, questa generazione entrò nel vivo con l’avvio di una completa revisione delle risorse per le interfacce, progetto ambizioso di ammodernamento tecnologico e di accessibilità, ma anche di visione e gestione del progetto, per arrivare a definire e mettere a sistema il design system nazionale, accessibile by design.

La pubblicazione di un decalogo per la qualità dei servizi pubblici digitali e l’uscita delle Linee guida di design per i siti internet e i servizi digitali della PA (2022) emesse da AGID ai sensi del CAD, che prevedono le indicazioni e gli strumenti operativi disponibili su Designers Italia come supporto evolutivo per la loro applicazione, fissarono l’orizzonte delle lavorazioni. Arrivarono nuove versioni di UI Kit Italia, Bootstrap Italia (aggiornato a Bootstrap 5), e il nuovo Design Tokens Italia, in tempo per abilitare le interfacce delle nuove versioni dei modelli di siti e servizi digitali di Designers Italia promossi dal PNRR su una platea di circa 16.000 scuole e Comuni con la misura M1C1.1.4.1 “Esperienza del cittadino nei servizi pubblici”.

Linee guida di design. La norma che devi rispettare in ogni fornitura di siti e servizi digitali per la Pubblica Amministrazione. Dalla sezione norme e riferimenti del sito Designers Italia. Linee guida di design (2022), emesse ex. art. 53 del Cad

Nella primavera 2023, dopo una fase beta dal nome in codice “Prossima”, fu lanciato il nuovo sito Designers Italia, rinnovato nei contenuti e nello stack tecnologico, “mette a disposizione conoscenza e strumenti per creare i servizi digitali” della PA. Costruito anche per essere un buon esempio di applicazione del design system del Paese, seguendo tutto il processo dalla ricerca fino alla validazione con le persone, ne ospita la documentazione nella sezione /design-system/.

Partecipa alla trasformazione digitale della PA. La homepage del sito Designers Italia nei formati desktop e mobile. Il nuovo sito designers.italia.it (2023)

Si consolidò così anche l’uso di versionamento semantico e del changelog. La documentazione divenne la fonte di verità, presentando i componenti come un tutt’uno: istruzioni, design e codice. Nacque quindi il design system .italia come lo conosciamo oggi, un vero e proprio design system pubblico per il Paese, dai princípi alle indicazioni operative, dai fondamenti di scrittura per l’esperienza utente fino ai componenti per realizzare prototipi e prodotti finali.

Scopri e usa il design system del Paese. La sezione dedicata sul sito Designers Italia. Design system .italia: la documentazione
Scopri e usa il design system del Paese. La sezione dedicata sul sito Designers Italia. Design system .italia: la documentazione dei componenti

L’open source si conferma una scelta di campo, con processi di miglioramento continuo del design system gestiti con trasparenza e coinvolgimento della community, nel contesto del nuovo modello di contribuzione, nelle lavagne pubbliche di gestione del progetto dove è possibile seguire e discutere segnalazioni, priorità e attività in lavorazione.

Lavagna pubblica con segnalazioni e attività dalle repository del design system .italia Design system .italia: board pubblica per la gestione del progetto

Per cambiare la visione dell’accessibilità digitale, da adempimento a opportunità, in questa generazione è stato scelto di metterla al centro del progetto considerando “l’accessibilità by design parte di ogni processo e risorsa del design system del Paese, non solo come un orizzonte ideale o una risposta alle norme. Nel design system trovi risorse quindi accessibili by default per PA e fornitori, da cui partire per realizzare siti e servizi facili da usare e inclusivi, con più efficacia, minor tempo e costi” (dal fondamento Accessibilità).

Tra le novità di questi primi mesi del 2024, segnaliamo il consolidamento del fondamento Identità, l’inizio di una fase di sperimentazione del nuovo carattere Titillium Sans Pro (descritto nel fondamento Tipografia) e l’arrivo dei nuovi kit di sviluppo per Angular e React in collaborazione con la community. Senza contare la pubblicazione su Designers Italia dei modelli per le Aziende sanitarie locali (ASL) e i Musei civici che usano ed estendono anch’essi il design system .italia.

La diffusione di questa terza generazione del design system .italia è oggi testimoniata da numeri significativi:

  • 3 schede “Come iniziare” e 4 schede “Come contribuire” rivolte a responsabili di progetto, designer e sviluppatori;
  • 16 “Fondamenti” e 54 “Componenti”, con 1 kit per designer e 3 framework per sviluppatori;
  • UI Kit Italia usato da oltre 4.000 persone della community Figma nell’ultimo anno;
  • Bootstrap Italia usato come dipendenza in più di 390 progetti software open source su GitHub;
  • nell’ambito del PNRR, l’84% dei Comuni e l’81% delle scuole italiane, per un totale di più di 13000 amministrazioni, hanno aderito per realizzare i loro siti e servizi basandosi su .italia, con circa il 38,5% di questi che oggi ha già adottato il design system .italia nel nuovo sito (pari al 32% del totale dei Comuni e delle scuole italiane);
  • il nuovo sito designers.italia.it, basato sul design system .italia, visitato da più di 10000 persone al mese a (+56,5% rispetto allo stesso periodo nel 2023) per un totale di oltre 16000 visite (+69,4%) e 45000 pageview (+102,7%), con una durata media della visita di circa 3 minuti e mezzo (+220,9%) e un bounce rate (persone che lasciano il sito dopo una sola pagina) del 4% (-90%).

Prospettive future per il design system .italia

Nell’ottica del miglioramento continuo tipico dei progetti open source, il design system .italia è ora in una nuova fase di validazione che prevede la verifica di accessibilità e coerenza dei 54 componenti esistenti, che porterà al rilascio della versione 1.0.0 della documentazione.

A seguire, saranno messe in campo nei prossimi mesi azioni di ricerca per creare occasioni di confronto con chi queste risorse le utilizza in prima persona, per continuare a plasmare il futuro di .italia insieme all’intera community di Designers Italia che si è costituita in questi anni e che, ad oggi, conta più di 24000 persone.

Infatti, se possiamo oggi raccontare questa storia è grazie al lavoro e alla passione della community, moltissime persone che lavorano per la PA e per i suoi fornitori, nell’ambito della progettazione e dello sviluppo, persone del settore o appassionate, responsabili progetto o docenti, anche studenti, che in questi anni ci hanno messo pezzi, idee e qualità. Non potendo citarle tutte, le ringraziamo qui in un enorme abbraccio collettivo.

Se vuoi dare il tuo contributo a questo progetto aperto e in costante evoluzione, prendi parte alla community di Designers Italia.

UI Kit Italia v3, panoramica di stili e componenti Design system .italia: UI Kit Italia v3 (community Figma, repo GitHub)

Cronologia delle risorse del design system .italia

Una panoramica dei principali rilasci e risorse del design system .italia nelle tre generazioni, per documentazione 📚, design 📐 e sviluppo 💾 .

Le risorse correnti fanno riferimento alla terza generazione.

Documentazione 📚

Terza generazione .italia (2021–oggi):

  • Design system .italia vive in una sezione del sito Designers Italia. Da privilegiare per realizzare interfacce coerenti nello stile e nell’esperienza d’uso come prescritto dalle Linee guida di design (2022), emesse ex Art 53 del CAD. Versioni da 1.0.0-alpha.1 (2022) a 1.0.0-beta.2 del 29 marzo 2024 (changelog documentazione).

Seconda generazione (2017–2021):

Prima generazione (2015–2017):

  • Linee guida di design per i siti web della PA alfa (2015), consultabili allora sul sito design.italia.it.

Design 📐

Terza generazione .italia (2021–oggi):

Seconda generazione (2017–2021):

  • UI Kit v2, nativo Sketch, era disponibile dalla repository GitHub /italia/design-ui-kit/ e in anteprima su Invision. La versione “2”, scelta allora senza un precedente rilascio “1”, indicava la consapevolezza di un cambiamento generazionale significativo. Deprecato dall’uscita della v3 nel 2023, è disponibile per fini di archiviazione dal ramo “2.x” e dalla repository dei prototipi storici archiviati.
  • I layout hi-fi e i prototipi per le v1 dei modelli delle scuole e dei Comuni, nativi Sketch, vengono rilasciati su GitHub e in anteprima su Invision. Usano ed estendono UI Kit v2. Oggi deprecati, sono disponibili per consultazione dalla repository dei prototipi storici archiviati.

Prima generazione (2015–2017):

  • Non esistevano kit dedicati, specifiche di design di alcuni componenti erano indicate nelle Linee guida di design alfa.

Sviluppo 💾

Terza generazione .italia (2021–oggi):

  • Bootstrap Italia v2 viene portato a Bootstrap 5 con un ampio refactoring di componenti, codice e stack tecnologico. Il focus delle lavorazioni è sull’accessibilità. Vengono aggiunti nuovi componenti (eg. nuovo Megamenu e Video player). Versioni da 2.0.0-rc.1 (2022 su repository dedicata -next) a v2.8.5 dell’8 maggio 2024 (changelog Bootstrap Italia). All’inizio della terza generazione viene aggiornata inoltre la v1, con fix di accessibilità e dipendenze oltre a prime evolutive. Versioni da 1.5.0 (2022) a 1.6.4 del 13 luglio 2022, deprecata dal 2023 a favore della v2.
  • I template HTML per le v2 dei modelli delle scuole (changelog template scuole) e dei Comuni (changelog template Comuni) vengono rilasciati su GitHub, usano ed estendono Bootstrap Italia.
  • React Kit v5 viene aggiornato a Bootstrap Italia v2, con un importante refactoring a cura anche della community. Versioni da 5.0.0-7 (2023) a 5.0.4 del 2 maggio 2024 (changelog React kit).
  • Angular Kit v1, viene aggiornato a Bootstrap Italia v2, con un importante refactoring a cura della community. Versioni da 1.0.0-0 (2022) alla 1.0.2 dell’8 aprile 2024 (changelog Angular kit).

Seconda generazione (2017–2021):

  • Esce Bootstrap Italia v1, basato su Bootstrap 4, con il sito di documentazione dedicato. Raccoglie da subito una nutrita comunità di contributori. Versioni da 0.0.1 (2018) a 1.4.3 del 28 maggio 2021.
  • I template HTML per le v1 dei modelli delle scuole e dei Comuni vengono rilasciati su GitHub, usano ed estendono Bootstrap Italia.
  • In parallelo la community porta avanti ulteriori progetti open, tra cui si segnala il React Kit, con la propria documentazione su Storybook. Versioni fino a 4.0.2 del 27 dicembre 2021. Inoltre, in questa generazione, le prime idee per un Angular Kit con versioni fino a 0.13.0 del 14 settembre 2018.

Prima generazione (2015–2017):

  • Il codice HTML (e CSS) di alcuni componenti era scaricabile dalle Linee guida di design alfa.
  • A valle delle prime applicazioni avviene un primo tentativo di astrarre un kit di sviluppo, il Design web toolkit, con il sito di documentazione dedicato. Manutenuto da una piccola community di pratica, viene deprecato nel 2019 a favore di Bootstrap Italia. Versioni fino a 1.0.0-alpha del 24 maggio 2017.

Alcune fonti per la storia del design system .italia

Terza generazione .italia (2021–oggi):

Seconda generazione (2017–2021):

Prima generazione (2015–2017):

Altri riferimenti utili

  • Letture propedeutiche in .italia: il fondamento Princìpi e intenzioni per i perché; Identità e Accessibilità per i riferimenti minimi; Come iniziare per portarti avanti, in particolare se sei designer, sviluppatore e/o responsabile di progetti per la PA.
  • Le persone sono al centro del progetto: per creare esperienze utili ed efficaci si parte sempre dalla ricerca e dai bisogni delle persone. Puoi usare le Risorse per progettare e il Manuale operativo di design di Designers Italia per allargare l’orizzonte all’intero processo di progettazione, oltre l’esperienza d’uso e l’interfaccia.
  • Il design system .italia si rivolge a due target: le persone che realizzano esperienze, in amministrazioni e loro fornitori; le persone che fruiscono esperienze, cittadinanza e dipendenti pubblici, da considerare al centro del progetto.
  • La “materia” del digitale è codice, pixel, contenuti, semantica, buone pratiche e rispetto degli standard, da curare costantemente con approccio di miglioramento continuo. Design system .italia si occupa proprio di questa materia, fino al codice dei componenti per comporre le interfacce, disponibile per più framework di sviluppo.
  • L’approccio aperto (open) è una scelta di campo: non solo un obbligo per la PA, open source, open design e le corrette licenze aperte sono una scelta per trasparenza, condivisione, riuso e apertura ai contributi di tutta la community. Design system .italia è un bene pubblico. Questa storia è legata a doppio filo a quella di normativa e riferimenti: all’evolversi di Linee guida di design, Linee guida sull’accessibilità, CAD, European Accessibility Act, GDPR, Piani triennali, indici europei sulla qualità dei servizi pubblici e norme tecniche o standard di riferimento EN, UNI, WCAG.

Read in english…

Alcuni diritti riservati

]]> The journey of Design System .italia: Open design for digital public services Thu, 01 Aug 2024 00:00:00 +0000 https://danieletabellini.com/en/ideas/verso-design-system-italia/ Three generations of guidelines, tools and processes to enhance accessibility, usability, and quality in Italy’s Public Administration digital services and websites.

Published on OpenSource.net on August 1st, 2024

The journey of Design System .italia: Open design for digital public services

Leggi in italiano…

Intro

In this age of digital transformation, a simple and high-quality user experience is a right for all users. Italy’s Public Administration (PA) websites and digital services must be built with accessibility at their core. This means ensuring everyone can use them, regardless of background, technical knowledge, or disability (whether temporary or permanent).

Design System .italia was created to empower Italy’s Public Administrations (PAs) and their IT suppliers to achieve this very goal. It directly addresses requirement 4.5 of the 2022 “Linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione” (Design Guidelines for Public Administration Websites and Digital Services). This requirement mandates consistent interfaces in both style and user experience, with a preference for components offered through the Designers Italia project website.

Design System .italia is the Italian State’s Open Source Design System that provides guidance and tools to create quality public digital interfaces and experiences.

How did Design System .italia emerge?

Design system generation: A stable and sufficient core library of assets, docs, tools, and practices delivered for use by designers […] and/or developers […]

Taking this definition of “design system generation” as a reference — a stable and sufficient library of resources, documentation, tools and practices released for designers and developers — Italy’s design landscape evolved through three distinct phases from 2015 to the present.

Timeline of the three evolutions: first from 2015 to 2017; second from 2017 to 2021; third from 2021 to the present.

Table of Contents

The Dawn of Design System: Alpha Version (2015–2017)

Building Consistency: the alpha version wasn’t a complete design system yet, but it marked the first effort to unify the visual identity, usability and user experience of thousands of Italian Public Administration websites. This phase emphasized a responsible and holistic approach to digital design for public services, a critical shift at the time.

As part of the “Italia Login” initiative, promoted by the Italian Government and curated by AGID (Agenzia per l’Italia Digitale – Agency for Digital Italy), the first “Linee guida di design per i siti web della PA” (Design Guidelines for PA Websites) (2015) were drafted by a large steering committee of experts. The alpha version, published on design.italia.it, introduced the first building blocks of a streamlined visual identity for digital Italy. These core elements, still in use today, include the institutional color Blu Italia (#0066cc), the Bootstrap grid system, and the Open Source typeface Titillium Web. Moreover, the open and participatory process for their drafting marked the beginning for the Italian PA of the use of repositories on the GitHub platform to discuss and collaborate.

For a design of public administration services. The site of the first Design Guidelines. Linee guida di design (Design Guidelines) alpha version (2015)

With a technological system not updated for almost sixteen years, a geological era from a digital point of view, it was immediately clear that it would not be possible to continue updating the site only at the interface level as had been done until then.

In 2015, the government took a bold step by redesigning the governo.it website, making it the first pilot project in this initiative. This wasn’t just an interface refresh, it was a radical response to obsolescence, sparking a wave of similar transformations for central and local government websites across Italy.

In 2016, the governance of the project passed to the Digital Transformation Team, a structure of the then Special Commissioner for the implementation of the Digital Agenda in Italy.

Consolidation and Growth: Second Generation (2017–2021)

The Digital Transformation Team, with AGID’s support, established Designers Italia and Developers Italia as both vibrant communities and projects. In 2017, a significant step forward came with the release of the first stable version of the Design Guidelines for PA Websites. This wasn’t a minor update; it marked a comprehensive revision, extending the guidelines to cover the entire digital service design process. The “eGlu” protocol for usability testing was also integrated starting with version 2018.1. Designers Italia’s guidelines and tools solidified their role as the official “Design System” for Italy’s Public Administration.

The design of the interface. The 2020.1 version of the Design Guidelines. Linee guida di design (Design Guidelines) v2020.1

Digital is neither right nor left, it’s not Real Madrid or Barcelona: good digital is transparency, efficiency, inclusion, fight against corruption, better healthcare and education, employment, and above all, the future.

Many new tools (e.g., Docs Italia to host the guidelines) and processes were defined, such as public consultations on Forum Italia to release new technical guidelines. Among the latter, the “Linee guida per l’acquisizione e il riuso di software per la PA” (Guidelines for the Acquisition and Reuse of Software for the PA), still a fundamental reference today in support of Articles 68 and 69 of the “Codice dell’amministrazione digitale” (CAD) (Digital Administration Code), mandating Italian public administrations to release software they develop or commission under an open license.

The designers.italia.it website (in Italian) underwent an information architecture upgrade during this generation. The designers.italia.it website upgrade transformed it into a powerful platform for showcasing the ideal five-phase design process supporting the design guidelines. The website upgrade was further bolstered by the release of new tools: a UI Kit for streamlined prototyping and design, and the framework Bootstrap Italia for efficient interface development. This generation also saw the launch of the first complete, reusable website templates for Italian schools and local governments. These templates encompassed the entire design process, from user research to service design, content planning, usage scenarios and interface development. Each step leveraged and extended the Designers Italia toolset, promoting consistent and efficient design practices across Italian public institutions. The community also began to guide the production of additional open tools, such as the React development kit.

We design digital public services to solve citizens' problems and restore good humour. The Designers Italia website, circa 2020. The designers.italia.it website at the end of 2020
UI Kit v2 preview, buttons and mockups. UI Kit v2, preview

The concept of a unified access point for all Italian digital services, a notion present even in the first generation, started to materialize with the release of the IO app (2020), led by PagoPA, winner in the following years of the 17th edition of the Compasso d’Oro Award (2022).

In 2019, the government established the Department for Digital Transformation, which inherited governance of the Designers Italia project.

The Innovation of .italia: Third Generation (2021–today)

In 2021, Italy’s Department for Digital Transformation revamped innovazione.gov.it, their digital home, with a focus on usability, accessibility and privacy. This marked the beginning of a new push to modernize the government’s digital infrastructure and make it more accessible. The project goes beyond just technology; it’s also about establishing a clear vision and management system for Italy’s national Design System, ensuring accessibility is built into everything they create.

To guide this ambitious project, two key resources were released in 2022: Guidelines outlining quality standards for digital public services and the “Linee guida di design per i siti internet e i servizi digitali della PA” (Design Guidelines for PA Websites and Digital Services) by AGID. By law, all government agencies (PAs) must follow the ‘Design Guidelines for PA Websites and Digital Services’. Designers Italia offers a toolkit and set of rules to support them in complying with this obligation. The arrival of new versions of UI Kit Italia, Bootstrap Italia (updated to Bootstrap 5), and Design Tokens Italia perfectly with the launch of the new Designers Italia website and service models, all driven by the PNRR (Italy’s National Recovery and Resilience Plan) to about 16,000 Italian schools and local governments with the initiative called M1C1.1.4.1 “Citizen Experience in Public Services.”

Design Guidelines. The standard you have to comply with in any provision of digital sites and services for the public administration. From the standards and references section of the Designers Italia website. Linee guida di design (Design Guidelines, 2022), issued under Art. 53 of the CAD

In spring 2023, after a beta phase with the code name “Prossima” (Next), the new Designers Italia website launched, with a refresh for both the content and technological stack, “making knowledge and tools available to create digital services” of the Italian PA. This website, in Italian only, showcases the application of Italy’s national Design System. Developed through a rigorous process – from user research to real-world validation – the site serves as an example of the Design System in action. All the relevant documentation can be found in the dedicated /design-system/ section.

Participate in the digital transformation of PA. The homepage of the Designers Italia website in desktop and mobile formats. The new designers.italia.it website (2023)

The project also adopted semantic versioning and a detailed changelog. The documentation became the source of truth presenting the components as a whole: instructions, design and code. Through this development process, we created the Design System .italia you see today. It’s a comprehensive public Design System for Italy, offering everything from core principles and operational guidelines to UX writing fundamentals and components for building prototypes and final products.

Discover and use the Italy's design system. The dedicated section on the Designers Italia website. Design system .italia: the docs
Accordion. An Accordion is a list of headings that can expand to show hidden content, useful for optimising page space and creating links to related content. From the documentation of .italy available from the Designers Italia site. Design system .italia: component detail

The project fully upholds Open Source principles. This means continuous improvement through transparent processes and active community involvement. A new contribution model allows everyone to participate. Public project management boards provide clear visibility into reports, priorities and ongoing work, fostering discussions and collaboration.

Public board with reports and activities from the repositories of the design system .italy Design system .italia: the public board for project management

This generation shifts the vision of digital accessibility in Italy from compliance to opportunity by integrating ‘accessibility by design‘ into every process and resource of the national Design System. Accessibility is no longer an ideal or just a regulatory response; it’s woven into the very fabric of the Design System: “Every design decision for a digital interface is a choice about who gets to participate. Our choices – from complexity to accessibility features – determine whether someone can use the service based on their background, skills, or even temporary limitations.”

The first few months of 2024 have been busy for the Design System. The Identity foundation has been solidified, laying a strong groundwork for future endeavors. The experimentation phase for the new Titillium Sans Pro typeface, detailed in the Typography foundation, is now underway. Collaboration with the community has yielded new development kits for Angular and React, further expanding the system’s capabilities. Designers Italia has gone a step further by publishing design models and templates specifically tailored for Italian Local Health Authorities (ASL) and Civic Museums. This demonstrates the Design System’s flexibility and its potential for even wider adoption.

Measuring the impact

Design System .italia’s third generation has seen explosive growth. The numbers tell the story:

Learning Resources:

Community Enganement:

  • UI Kit Italia has been used by over 4,000 people in the Figma community within the past year.
  • More than 390 Open Source software projects on GitHub list Bootstrap Italia as a dependency.

National Implementation (PNRR):

  • As part of the PNRR initiative, 84% of Italian local governments and 81% of Italian schools (over 13,000 administrations in total) have joined to create their websites and digital services based on Design System .italia.
  • Of these, about 38.5% have already implemented Design System .italia in their new websites. This translates to roughly 32% of all Italian local governments and schools.

Website Performance:

  • The new designers.italia.it website, built with Design System .italia, has seen significant growth:
    • Monthly visits have increased by 56.5% compared to the same period in 2023, reaching over 10,000 unique visits.
    • Total visits have risen by **69.4*% to over **16,000**.
    • Pageviews have jumped by 102.7% to 45,000.
    • Average visit duration grew by 220.9% to around 3.5 minutes.
    • The bounce rate decreased by 90% to just 4%.

What’s next

With a view to the continuous improvement typical of Open Source projects, Design System .italia has entered a new validation phase that involves verifying the accessibility and consistency of the 54 existing components, which will lead to the release of version 1.0.0 of the documentation.

Subsequently, research actions will be put in place in the coming months to create opportunities for discussion with those who use these resources firsthand, to continue shaping the future of .italia together with the entire Designers Italia community established over these years and which, to date, has more than 24,000 members.

This story wouldn’t be possible without the dedication and passion of a remarkable community. Designers, developers, public sector employees, industry professionals, enthusiasts, project managers, educators and students — from all over Italy — have contributed their ideas, expertise and commitment over the years. While we cannot name them all, we extend our heartfelt gratitude to this incredible collective force.

How to get involved

If you want to be part of this open and ever-evolving project, join the Designers Italia community.

UI Kit Italy v3, overview of styles and components Design system .italia: UI Kit Italia v3 (Figma Community, GitHub Repo)

Chronology of Design System .italia resources

An overview of the main releases and resources of the Design System .italia in the three generations, for documentation 📚, design 📐 and development 💾 .

The current resources refer to the third generation.

Documentation 📚

Third generation .italia (2021–today):

  • Design system .italia lives in a section of the Designers Italia website. To be preferred for creating interfaces consistent in style and user experience as prescribed by the “Linee guida di design” (Design Guidelines) (2022), issued ex Art 53 of the CAD. Versions from 1.0.0-alpha.1 (2022) to 1.0.0-beta.2of March 29, 2024 (documentation changelog).

Second generation (2017–2021):

  • “User interface” chapter of the Design Guidelines, available on Docs Italia. Superseded by the Design Guidelines (2022) issued ex Art 53 of the CAD and by the publication of the “Manuale operativo di design” (Design Operational Manual). Versions from 2017.1 to 2020.1.

Prima generazione (2015–2017):

  • “Linee guida di design per i siti web della PA” (Design Guidelines for PA Websites) alpha (2015), then available on the design.italia.it website.

Design 📐

Third generation .italia (2021–today):

Second generation (2017–2021):

  • UI Kit v2, native Sketch, was available from the GitHub repository /italia/design-ui-kit/ and in preview on Invision. The “2” version, chosen then without a previous “1” release, indicated the awareness of a significant generational change. Deprecated since the release of v3 in 2023, it is available for archival purposes from the “2.x” branch and from the repository of archived historical prototypes.
  • The hi-fi layouts and prototypes for the v1 of the school and municipality models, native Sketch, are released on GitHub and in preview on Invision. They use and extend UI Kit v2. Now deprecated, they are available for consultation from the repository of archived historical prototypes.

First generation (2015–2017):

  • There were no dedicated kits, design specifications for some components were indicated in the alpha Design Guidelines.

Development 💾

Third generation .italia (2021–today):

  • Bootstrap Italia v2 is brought to Bootstrap 5 with extensive component, code, and technology stack refactoring. The focus of the work is on accessibility. New components are added (e.g., new Megamenu and Video player). Versions from 2.0.0-rc.1 (2022 on dedicated -next repository) to v2.8.5 of May 8, 2024 (Bootstrap Italia changelog). At the beginning of the third generation, v1 is also updated, with accessibility and dependency fixes as well as first evolutions. Versions from 1.5.0 (2022) to 1.6.4 of July 13, 2022, deprecated since 2023 in favor of v2.
  • The HTML templates for the v2 of the school models (school templates changelog) and Municipalities (municipality templates changelog) are released on GitHub, they use and extend Bootstrap Italia.
  • React Kit v5 is updated to Bootstrap Italia v2, with important refactoring also by community. Versions from 5.0.0-7 (2023) to 5.0.4 of May 2, 2024 (React kit changelog).
  • Angular Kit v1, is updated to Bootstrap Italia v2, with important refactoring also by community. Versions from 1.0.0-0 (2022) to 1.0.2 of April 8, 2024 (Angular kit changelog).

Seconda generazione (2017–2021):

  • Bootstrap Italia v1 is released, based on Bootstrap 4, with a dedicated documentation website. It immediately gathers a large community of contributors. Versions from 0.0.1 (2018) to 1.4.3 of May 28, 2021.
  • The HTML templates for the v1 of the school and municipality models are released on GitHub, they use and extend Bootstrap Italia.
  • In parallel, the community pursues other open projects, among which the React Kit stands out, with its own documentation on Storybook. Versions up to 4.0.2 of December 27, 2021. n this generation, the first ideas for an Angular Kit with versions up to 0.13.0 of September 14, 2018.

First generation (2015–2017):

  • The HTML (and CSS) code for some components was downloadable from the alpha Design Guidelines.
  • Following the first applications, a first attempt is made to abstract a development kit, the Design web toolkit, with a dedicated documentation website. Maintained by a small community of practice, it is deprecated in 2019 in favor of Bootstrap Italia. Versions up to 1.0.0-alpha of May 24, 2017.

Sources for the history of Design System .italia (Italian language)

Third generation .italia (2021–Today):

Second generation (2017–2021):

First generation (2015–2017):

Other useful references

  • Propaedeutic readings in .italia: the Principles and Intentions foundation for the whys; Identity and Accessibility for the minimum references; How to Get Started to get you ahead, especially if you are a designer, developer, and/or project manager for the PA.
  • People are at the center of the project: to create useful and effective experiences always start from research and people’s needs. You can use the Resources for Designing and the Designers Italia “Manuale operativo di design” (Design Operational Manual) to broaden the horizon to the entire design process, beyond the user experience and interface.
  • The Design System .italia addresses two targets: the people who create experiences, in administrations and their suppliers; the people who use experiences, citizens and public employees, to be considered at the center of the project.
  • The “matter” of digital is code, pixels, content, semantics, best practices, and compliance with standards, to be constantly cared for with a continuous improvement approach. Design System .italia deals precisely with this matter, down to the code of the components to compose the interfaces, available for multiple development frameworks.
  • The open approach is a field choice: not only an obligation for the PA, open source, open design, and the correct open licenses are a choice for transparency, sharing, reuse, and openness to contributions from the entire community. Design System .italia is a public good.
  • This story is inextricably linked to that of regulations and references: to the evolution of “Linee guida di design” (Design Guidelines), “Linee guida di accessibilità” (Accessibility Guidelines), CAD, European Accessibility Act, GDPR, “Piani triennali” (Three-year Plans), European indices on the quality of public services, and EN, UNI, WCAG reference technical standards or norms.

Translation note

Original Italian article on Designers Italia Medium blog: “Verso Design system .italia: dalle origini al design system aperto della Pubblica Amministrazione“. Published by Daniele Tabellini (@fupete) on May 22, 2024.

Translation reviewed and edited by Nicole Martinelli.

The original article, as this, is licensed under the Creative Commons Attribution 4.0 International (CC BY-SA 4.0) license.

The translation aims to make the content accessible to a wider, international audience. Some Italian terms and names of official guidelines and plans have been kept in their original form, with English translations provided in parentheses for clarity.

Leggi in italiano…

Some rights reserved

]]> Progettare con qualità: l’accessibilità al centro del design system del Paese Wed, 10 Jan 2024 00:00:00 +0000 https://danieletabellini.com/it/idee/progettare-con-qualita/ Dieci suggerimenti ideali e pratici per realizzare servizi pubblici digitali semplici, accessibili e inclusivi

Daniele Tabellini del Dipartimento per la trasformazione digitale
Fabrizio Caccavello di AGID - Agenzia per l’Italia Digitale

Pubblicato su Designers Italia (Medium) il 5 luglio 2022

Apertura e collaborazione Photo John Schnobrich, Chaitanya Tvs

Caselle di testo, spunte, pulsanti, menù a tendina: a prima vista un form, una scheda da compilare online, è quanto di più elementare il web possa offrire. Eppure nel contesto della trasformazione digitale, in particolare nella progettazione e nello sviluppo di servizi pubblici digitali, i componenti dell’interfaccia digitale che permettono di costruire moduli per lo scambio di informazioni tra utente e Pubblica Amministrazione svolgono una funzione fondamentale: abilitano esperienze di cittadinanza, ovvero consentono alle persone di esercitare i propri diritti e adempiere ai propri doveri completamente online, senza alcuna preclusione.

L’accessibilità è prima di tutto una questione di attenzione: al significato delle scelte, ai dettagli tecnologici, ma anche e soprattutto agli altri, alle persone e ai loro bisogni. In quest’ottica, un progetto digitale accessibile è un progetto digitale di qualità, un progetto “fatto bene”. Ed è per questo che, negli ultimi mesi, per tornare ai form ad esempio, nell’aggiornamento del design system del Paese sono state fatte scelte tecniche che favoriscono l’utilizzo di codice markup HTML semantico standard, anziché sovrascrivere i componenti con oggetti più “eleganti”, al solo scopo decorativo. Questo per garantire che le interfacce, che sono tra le più importanti per l’interazione con i servizi digitali, siano il più possibile compatibili con qualunque ambiente, e con il maggior numero di casi d’uso.

Ma si tratta solo di un dettaglio dell’approccio e di quanto realizzato nei mesi scorsi: come, e soprattutto perché, siamo arrivati fino a qui? E che direzione abbiamo intrapreso? Quello che segue è il racconto di una parte dell’avventura, iniziata a dicembre 2021, dal Dipartimento per la trasformazione digitale e AgID per aggiornare il design system del Paese. Un’iniziativa che mira a ottimizzare le risorse digitali messe a disposizione dei cittadini da parte della Pubblica Amministrazione, rendendole semplici, accessibili e inclusive.

Indice dei contenuti:

Progettare interfacce è un atto di responsabilità

Progettare e sviluppare interfacce digitali significa decidere continuamente chi includere, o escludere, dall’esperienza d’uso e fruizione, a seconda delle proprie caratteristiche, conoscenze, capacità o condizioni di disabilità, temporanee o meno. Nel caso di servizi pubblici digitali, è una scelta che porta con sé una grande responsabilità: tutte le cittadine e i cittadini devono poter avere un’esperienza d’uso piena e soddisfacente, potendone usufruire in modo semplice e chiaro, senza discriminazione e senza lasciare indietro nessuno. Non solo perché lo dicono le norme sull’accessibilità, le linee guida o perché ci sono tecniche e tecnologie che lo permettono.

L’aggiornamento del design system del Paese, uno strumento open, aperto, sia come codice sorgente sia come progetto, ha così l’obiettivo di aiutare la Pubblica Amministrazione italiana a soddisfare i requisiti normativi, ma soprattutto a progettare e sviluppare interfacce ed esperienze d’uso dei servizi pubblici digitali coerenti e inclusive, su una pluralità di dispositivi. In una parola a realizzare progetti di qualità.

Ma cosa si intende quando parliamo di qualità?

La Qualità… sappiamo cos’è, eppure non lo sappiamo. Questo è contraddittorio. Alcune cose sono meglio di altre cioè hanno più Qualità. Ma quando provi a dire in cosa consiste la Qualità astraendo dalle cose che la posseggono, paff, le parole ti sfuggono di mano. Ma se nessuno sa cos’è, ai fini pratici non esiste per niente. Invece esiste eccome. Su cos’altro sono basati i voti, se no? Perché mai la gente pagherebbe una fortuna per certe cose, e ne getterebbe altre nella spazzatura? Ovviamente alcune cose sono meglio di altre… Ma in cosa consiste il “meglio”?

— Lo zen e l’arte della manutenzione della motocicletta, Robert M. Pirsig

L’accessibilità è un tema di cultura del fare, e fare bene. Non è solo considerare l’accessibilità tra le priorità progettuali, ma “fare”, perché è solo così che si scoprono le necessità reali e i compromessi necessari della qualità manifesta di cui parla Robert Pirsig. È il cambio culturale che stiamo cercando di affermare: non ratificare a valle uno stato di conformità, ma fare accessibile. Semplificare, togliere un passaggio, partire da soluzioni già validate (by default) che possano essere curate nel corso di un progetto (by design), per poi scoprire, paradossalmente, che si tratta di opzioni economiche ed efficaci.

Dieci punti per fare meglio

Cos’è la qualità? Image Sean Sinclair

Per definire cosa sia la qualità, che cosa voglia dire “fatto bene” nel contesto di oltre 22.000 enti pubblici, in particolar modo sul tema accessibilità, il Dipartimento per la trasformazione digitale e AgID, supportati dai progetti Designers Italia e Developers Italia, oltre che da un fornitore tecnico ad hoc, hanno definito una serie di principi, un’agenda in 10 punti, per collegare l’ideale con il pratico. Principi all’interno dei quali il design system del Paese si colloca in maniera importante e trasversale.

1. Fatto bene guarda oltre l’oggi

Se noi prendessimo un sito internet accessibile nel ‘95/’96 (ovvero rispetto ai pochi standard disponibili all’epoca), probabilmente ancora oggi sarebbe accessibile. Ecco perché bisogna fare bene, e fare accessibile, perché significa progettare servizi pubblici digitali pronti per il futuro.

Progettando il sito innovazione.gov.it, ad esempio, abbiamo provato a prevenire criticità futuribili di accessibilità, fin dai requisiti del progetto. Un’attenzione che ci ha permesso di approfondire l’esperienza d’uso della redazione che ne avrebbe curato i contenuti, e scegliere quindi di predisporre automatismi, come quello a supporto dell’inserimento corretto dei collegamenti esterni (poche righe di codice), che contribuissero ad aumentare accessibilità e qualità generale del progetto nel tempo.

2. Fatto bene è by design e by default

Il tema accessibilità non può rispondere solo a meri, anche se necessari, adempimenti burocratici. Dall’inizio e per tutte le fasi del progetto se ne deve tener conto, by design: dalla raccolta requisiti al progetto di contenuti e dell’esperienza utente, dalla prototipazione e sviluppo software fino all’uso, alla validazione e alla manutenzione, e per tutti i profili coinvolti.

E ogni fase del progetto deve avere i suoi automatismi predefiniti, by default: è importante l’uso di kit, componenti, template, framework, documentazione, come le risorse messe già a disposizione grazie al design system del Paese, che permetta di risparmiare tempo e soldi pubblici, partendo con delle componenti già accessibili.

L’accessibilità costa? Aspettare segnalazioni e sanzioni per correggere progetti in corsa, oppure ampiamente conclusi, è sicuramente più oneroso per una Pubblica Amministrazione, mentre fare le cose bene è un investimento che si ripaga da solo nel breve e medio periodo. “Fare accessibile” deve essere il mantra della PA e dei suoi fornitori, sulla falsariga del principio che si applica alla sicurezza e alla privacy, altri due temi della progettazione dei servizi digitali da affrontare by design e by default.

3. Fatto bene è open e partecipazione

Mettere attenzione nel progettare per il pubblico significa prima di tutto aprirsi: ricerca e ascolto dei bisogni dell’utente, ma anche sviluppo open source e licenze aperte, open data, open design, apertura alla partecipazione e ai feedback.

Soldi pubblici, codice e progetto pubblico.

Non solo codice pubblico, come chiede ad esempio la campagna omonima della FSFE (Free Software Foundation Europe), e come portato avanti da anni nella Pubblica Amministrazione con il Catalogo e le linee guida sul riuso e sulle licenze dal progetto Developers Italia; non solo codice pubblico, dicevamo, ma anche iniziare a porsi il problema di come nel mondo del design, del progetto, si debba fare open design e partecipazione con modalità più strutturali.

Il concetto e le strategie dell’accessibilità nascono nell’organizzazione internazionale W3C (World Wide Web Consortium), che stabilisce le regole tecniche con cui si fanno i prodotti accessibili. Il processo di lavoro del W3C è un ottimo esempio di open by default, un processo che prevede il coinvolgimento di gruppi di lavoro eterogenei e contributori esterni, e che è reso possibile solo grazie alla partecipazione e al miglioramento continuo. Non c’è un punto di arrivo ultimo, se non ideale, ma un processo in divenire, iterazione dopo iterazione, aprendo a cercare feedback e contributi, verso il meglio.

La scelta di usare strumenti aperti e collaborativi per l’aggiornamento del design system del Paese va esattamente in questa direzione: repository GitHub per le lavorazioni di sviluppo, e rilasci delle versioni intermedie di lavorazione dei kit di progettazione interfaccia, per cercare commenti, segnalazioni e contributi. Nelle prossime settimane saranno inoltre rilasciati su Designers Italia diversi altri strumenti di questo aggiornamento: documenti di analisi, liste di cose da fare, censimenti e report che vogliamo far diventare patrimonio della community.

4. Fatto bene è a norma

L’Italia è all’avanguardia rispetto alla normativa sull’accessibilità, la Legge n. 4/2004 fu promulgata quando a livello europeo l’accessibilità era un tema ancora poco rilevante, e il recente European Accessibility Act non era nei sogni dei legislatori. Gli aggiornamenti successivi, così come le linee guida sull’accessibilità degli strumenti informatici, messe a disposizione da AgID rispetto alla Direttiva UE 2016/2012, sono i riferimenti normativi da tener presenti quando si parla di accessibilità.

Il livello di conformità richiesto per i siti della Pubblica Amministrazione italiana, dalla norma tecnica europea armonizzata UNI EN 301 549, corrisponde ai livelli “A” e “AA” della W3C Recommendation WCAG 2.1. La specifica WCAG 2.1 è disponibile in lingua italiana.

Ma la normativa sull’accessibilità, con il Decreto Legge 76/2020, è stata estesa anche ai soggetti privati che offrono servizi al pubblico attraverso siti web o applicazioni mobili e che abbiano un fatturato medio superiore a cinquecento milioni di euro negli ultimi tre anni di attività. Si è voluto insomma anticipare alle grandi organizzazioni private il percorso verso l’accessibilità che comunque verrà attivato per tutti i soggetti privati con l’European Accessibility Act a partire dal 2025.

Sono inoltre prossime alla pubblicazione anche le nuove linee guida di design per i siti internet e i servizi digitali della Pubblica Amministrazione, previste ai sensi dell’art. 53 del CAD (Codice Amministrazione Digitale), dove ad esempio i concetti di by default e by design saranno ben evidenti. Contestualmente alla loro uscita verrà rilasciato un corposo “Manuale operativo di design”, tramite Designers Italia, con casi d’uso e indicazioni a supporto.

5. Fatto bene è aiutato dal design system del Paese

Il design system del Paese è un insieme di principi, risorse e «pezzi già pronti», pensato per progettare e sviluppare esperienze utente, di cittadinanza. A parità di qualità, grazie al riuso e alla condivisione di buone pratiche, è possibile anche raggiungere l’obiettivo del minore costo. Da dicembre 2021 stiamo aggiornando questa risorsa dalle fondamenta, in termini tecnologici e di accessibilità, ma anche di visione e gestione. Abbiamo infatti affiancato al cuore delle attività pratiche una serie di attività di più alto livello, come l’inizio di un’articolata ricerca utente su utilizzatori e contributori, e una pianificazione di epiche e obiettivi di medio-lungo periodo.

Il design system del Paese è oggi composto da un kit per progettare interfacce (kit UI), un kit per sviluppare interfacce (il framework Bootstrap Italia in primis) e un insieme di modelli standard per progettare e realizzare siti web e servizi digitali per diverse tipologie di Enti. Queste risorse aggiornate, man mano che le nuove versioni diventeranno stabili nelle prossime settimane, saranno messe a disposizione di tutti tramite il sito web Designers Italia, che ci auspichiamo ospiti presto, come riferimento ufficiale, la documentazione di tutto il design system del Paese: dai principi al design, dallo sviluppo alle indicazioni sull’accessibilità, dai componenti ai pattern validati con gli utenti.

6. Fatto bene è immaginato con il kit UI

UI Kit Italia Profilo di Designers Italia nella community Figma e kit UI

Il kit per la progettazione di interfacce del design system del Paese lo abbiamo ricostruito da zero usando le ultime tecnologie disponibili e in coordinamento con il kit di sviluppo, con un occhio attento al tema open design. Fin dai primi rilasci ha indicazioni di accessibilità utili ai designer per comprendere le caratteristiche legate alla specificità della prototipazione, come ad esempio l’uso dei colori. Stiamo anche immaginando di integrare strumenti per favorire l’utilizzo della semantica corretta degli oggetti e per etichettare i mockup.

Questa nuova versione, costruita utilizzando Figma e cercando di sfruttare tutte le potenzialità di collaborazione e automazione, ha numeri importanti: si tratta di oltre 600 componenti, comprese le varianti, divisi nelle tre macrocategorie foundations (fondamenta intese per esempio come griglie, tipografia e icone), components (componenti intesi come “pezzi” dell’interfaccia come pulsanti, liste e testata) e forms (tutti i componenti utili allo sviluppo di moduli).

Un occhio di riguardo è stato messo nel sincronizzare tutti i componenti con i kit di sviluppo, per avere prototipi più realistici e per semplificare il passaggio agli sviluppatori. In prospettiva, e in un’ottica open, è previsto che avvengano rilasci interoperabili verso altri strumenti, come Sketch o Adobe XD, con esportazioni sulla repository GitHub dedicata.

Una parte importante delle lavorazioni è stata dedicata all’integrazione di design token: piccoli elementi “di verità” utili a rappresentare decisioni di stile applicabili in modo coerente tra diversi progetti, framework e strumenti — un esempio di design token: color-blue-a06: #0066cc (valore) e color-primary:color-blu-a06 (decisione) — , che nelle prossime versioni di tutte le risorse afferenti al design system del Paese, siano di design o di sviluppo, ci auspichiamo rendano tutto più coerente, più facilmente aggiornabile, migliorabile e scalabile. I design token rispondono inoltre alle esigenze di personalizzazione emerse dalla ricerca.

Community lab: a che punto siamo con UI kit e design token?

7. Fatto bene è realizzato con Bootstrap Italia

Bootstrap Italia Repository, foglio validazione componenti e Documentazione di Bootstrap Italia

Bootstrap Italia è il kit per lo sviluppo di interfacce del design system del Paese. A distanza di anni, da quando fu rilasciata una prima versione, è evidente quanto sia stato importante pensare a un framework unico di sviluppo, basato sulle esigenze della Pubblica Amministrazione. Fu realizzato con quello che allora era il riferimento, il più utilizzato ma anche il più vicino ai requisiti di accessibilità: Bootstrap. E oggi, dopo aver inizialmente tolto la ruggine all’ultima versione basata su Bootstrap 4, anche integrando molti contributi della community, è in dirittura d’arrivo la nuova versione 2.0 portata su Bootstrap 5.

In questa nuova versione, oltre ad ereditare tutte le nuove caratteristiche di Bootstrap 5, Bootstrap Italia è ottimizzato per molti aspetti che riguardano specificatamente la Pubblica Amministrazione e l’accessibilità. Abbiamo validato, o per meglio dire, stiamo validando e continueremo a migliorare ogni componente, cercando anche di fornire documentazione con indicazioni per l’implementazione laddove necessario.

Durante queste lavorazioni sono state fatte scelte di rottura, consapevoli che la semplicità sia un valore, che sia più facile cioè da manutenere e realizzare, come il dettaglio con cui si apre l’articolo sull’usare markup HTML semantico standard per molti componenti dei form o, altro esempio interessante, come scegliere di integrare la soluzione dei colleghi inglesi Accessible autocomplete, un plugin che permette di cercare e scegliere risposte da una lunga lista, progettato e sviluppato per l’accessibilità.

Community lab: scopriamo Bootstrap Italia 2.0

Bootstrap Italia 2.0 è stato progettato per essere scalabile come richiesto dalle risultanze della ricerca: basti citare come esempi l’uso di Javascript puro per tutte le funzionalità, e l’integrazione di Rollup, che permette di integrare nel proprio progetto solo le parti necessarie del framework, con vantaggi di peso e velocità come si può approfondire in questo articolo. Anche in questo caso si tratta di un lavoro aperto, e vi invitiamo a partecipare ai lavori in corso provando o contribuendo all’ultima versione rilasciata di Bootstrap Italia 2.0 su GitHub.

8. Fatto bene segue modelli standard

Modelli di design Modelli standard per i siti e i servizi digitali dei Comuni e delle scuole

La progettazione di esperienze digitali semplici ed efficaci richiede tempo, risorse e molta ricerca. I modelli di siti e servizi digitali per gli enti (oggi scuole e Comuni) permettono di rispondere ai bisogni dei cittadini in modo rapido e a minor costo, sfruttando flussi e funzionalità validate dalla ricerca.

I modelli proposti da Designers Italia, comprendono l’architettura dell’informazione, i template HTML e i temi per CMS (Content Management System), su cui sono stati effettuati in questi mesi importanti lavori, anche per migliorarne l’accessibilità, corredati da una serie di guide pratiche a supporto. I modelli rappresentano precisamente il concetto della creazione di servizi digitali accessibili by default: partire con un intero modello validato e radicato nella ricerca utente.

I modelli per le scuole e i Comuni sono oggetto della misura 1.4.1 del PNRR “Esperienza dei servizi pubblici”. Seguire un modello non significa creare siti uniformi, ma coerenti. Il modello infatti nasce nel rispetto delle esigenze del cittadino e delle necessità di flessibilità degli enti, in questo ordine. Gli enti possono adattare il modello al contesto specifico rispettando comunque i criteri di conformità.

9. Fatto bene a volte… non basta

I «pezzi» del design system del Paese non sono tutto: l’accessibilità è principalmente una questione semantica, di significato degli elementi e dei comportamenti. L’utilizzo di componenti accessibili non rende automaticamente un applicativo accessibile, tuttavia sono un aiuto fondamentale per compiere by default un processo nel modo più ottimale possibile.

Il percorso costruito attraverso il design system è proprio incentrato sul concetto di accessibilità by default. Per ogni attività devono essere utilizzabili elementi, strutture, procedure, che sono già passati attraverso i necessari processi di validazione (documentazione, mockup, framework, template, ecc). Al termine del processo le attività di verifica e di ottimizzazione potranno essere più limitate, per poi liberare risorse per la gestione di casi più complessi o attivare supporti più innovativi.

10. Fatto bene ha bisogno di test e feedback

Nei prossimi anni ci aspettano molte sfide per scalare, dare governance chiara, rendere sostenibile e curare con efficacia il design system del Paese. Per raggiungere questo obiettivo abbiamo bisogno di tutta la community: l’ambiente in cui si muovono e vivono le persone non è quello ideale di utilizzo di un applicativo. Tutti noi utilizziamo applicativi in ambienti i più strani, mentre camminiamo, con il gelato in mano, con tecnologie assistive, magari con tecnologie assistive che oggi neanche immaginiamo.

La partecipazione agli Accessibility Days 2022: parte 1 e parte 2

Durante la partecipazione agli Accessibility Days, ci è stato ricordato il motto dei diritti delle persone con condizioni di disabilità: “Niente su di Noi, senza di Noi”. In autunno, proprio con l’aiuto del team degli Accessibility Days, ci siamo ripromessi di creare occasioni di confronto e test di usabilità, con particolare attenzione all’accessibilità, per raccogliere dati e migliorare piattaforme, siti e servizi pubblici digitali che utilizzano il design system del Paese. Con l’auspicio di riuscirci, e che diventi un’abitudine, per migliorare continuamente, insieme, con partecipazione e responsabilità.

Il futuro appartiene alle persone

Mani che collaborano per il meglio Photo Hannah Busing, Michael Dziedzic

Il design system del Paese è un progetto di interesse pubblico, aperto e partecipato. Ci piace pensare che questo progetto appartenga soprattutto a voi che state leggendo, che possiate farlo vostro, ognuno con le proprie competenze e livello di coinvolgimento, nella Pubblica Amministrazione centrale e sul territorio, e nei suoi fornitori. Partecipando alle lavorazioni, segnalando o proponendo miglioramenti, provandone le risorse e partecipando a test e presentazioni, rilasciando soluzioni alternative o analisi e revisioni, allo stesso modo pubbliche e open con le licenze aperte corrette, facendo domande e aiutandoci a diffondere consapevolezza sul progettare e sviluppare interfacce di cittadinanza di qualità, a tutti i livelli.

Il futuro è una questione culturale

Palloncini e bambina con occhiali VR Photo Giu Vicente, Olesia Bahrii

C’è ancora una domanda, però, che rimane forse irrisolta: chi sta insegnando a “fare accessibile” alla prossima generazione di designer e sviluppatori? Non vorremmo aprire un piccolo vaso di Pandora, ma nelle Università italiane dedicate all’ITC, alle discipline informatiche, o al design, quanti e quali corsi sono dedicati all’accessibilità? Siamo sicuri che in Italia ci siano molte eccellenze, ma la domanda, e la questione culturale che porta con sé, rimane d’importanza capitale: nei prossimi mesi troviamo un’occasione per parlarne, valorizzare esperienze virtuose e rilanciare?

Alcuni diritti riservati

]]>