Tre generazioni di linee guida, strumenti e processi per portare accessibilità, usabilità e qualità nei servizi pubblici digitali

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 […] (Curtis, 2024)

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.

Indice dei contenuti

• La nascita del design system: la versione alfa (2015–2017)
• Consolidamento e crescita: la seconda generazione (2017–2021)
• L’innovazione di .italia: la terza generazione (2021–oggi)
• Prospettive future per il design system .italia
• Cronologia delle risorse del design system .italia
• Alcune fonti per la storia del design system .italia

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.

“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.” (Sinni-Ruggeri, 2022)

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 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. (Attias, 2018)

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.

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”.

Progettare con qualità: l’accessibilità al centro del design system del Paese

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/.

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.

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.

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à).

Verso Design system .italia: come è nato il nome del design system del Paese

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 13.000 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 10.000 persone al mese a (+56,5% rispetto allo stesso periodo nel 2023) per un totale di oltre 16.000 visite (+69,4%) e 45.000 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 24.000 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.

• Scopri come usare Design system .italia 🇮🇹
• Scopri come contribuire a Design system .italia 🇮🇹

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):

• Capitolo “User interface” delle Linee guida di design, consultabili su Docs Italia. Superate dalle Linee guida di design (2022) emesse ex Art 53 del CAD e dalla pubblicazione del Manuale operativo di design. Versioni da 2017.1 a 2020.1.

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):

• UI Kit Italia v3, nativo Figma, è disponibile dalla community Figma e, anche convertito nel formato aperto Sketch*, dalla repository /italia/design-ui-kit/. Versioni da 3.0.0-alpha.1 (2023) a 3.4.0 del 7 marzo 2024 (changelog UI Kit Italia).
  * La conversione è automatizzata, lanciando il tool fig2sketch al rilascio con un’azione GitHub anch’essa messa a disposizione della community.
• Design Tokens Italia, esportati da UI Kit Italia, i design tokens di .italia sono pubblicati nella repository /italia/design-tokens-italia/ a disposizione di designer e sviluppatori. Versioni da 1.0.0 (2023) a 1.2.0 del 12 dicembre 2023 (changelog Design Tokens Italia).
• I layout ad alta definizione, i prototipi e le librerie componenti del modello Comuni v2 (changelog UI Kit Comuni), e dei modelli ASL (changelog UI Kit ASL) e Musei civici (changelog UI Kit Musei civici) v1 sono rilasciati nella community Figma e, anche convertiti nel formato aperto Sketch, nelle rispettive repository. Usano ed estendono UI Kit Italia v3.

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 v5.0.4 del 2 maggio 2024 (changelog).
• 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).

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):

• Vabanesi, M. & Tabellini D. , Zaia, F. Dietro le quinte del sito MITD, dalla ricerca alla pubblicazione online (2a parte), 16 marzo 2021, Medium
• Zaia, F. & team Designers Italia. Ripartire da approccio e processo: la progettazione di servizi pubblici digitali, 21 agosto 2021, Medium
• Al via l’aggiornamento del design system del Paese, 23 dicembre 2021, Designers Italia
• Tabellini, D., & Caccavello, F. Progettare con qualità: l’accessibilità al centro del design system del Paese, 5 luglio 2022, Medium
• Stagi, A. Bootstrap Italia per il design system del Paese, 6 luglio 2022, Medium
• Design system: pubblicata la versione ufficiale dello UI Kit Italia, 4 maggio 2023, Designers Italia
• Designers Italia si rinnova!, 15 maggio 2023, Designers Italia
• Prendi parte anche tu all’evoluzione del design system del Paese, 25 settembre 2023, Designers Italia
• Ciao .italia: la terza generazione del design system ha un nome ed entra in fase beta, 8 marzo 2024, Designers Italia

Seconda generazione (2017–2021):

• Fabbri, L., & De Santi, M. Servizi pubblici a misura di cittadino, nasce la community dei designer, 1 giugno 2017, Medium
• De Blasis, D. Le griglie: alla scoperta dello UI kit di Designers Italia, partendo dalle basi, 14 febbraio 2018, Medium
• De Santi, M. & Fabbri, L. Towards a new generation of public services: Designers Italia’s design kits, 23 aprile, 2018
• Lucci, G. & Tabellini, D. Un progetto non comune: un prototipo di sito web per i Comuni italiani, 15 gennaio 2019, Medium
• De Santi, M. Diario di bordo #1: l’app IO prende il largo, 28 aprile 2020, Medium

Prima generazione (2015–2017):

• Online le Linee guida di design per i siti web della PA, 21 novembre 2015, AGID
• Maggio, R. Presentazione del nuovo sito governo.it, Reggia di Venaria, video su YouTube del 21 novembre 2015
• Sinni, G. Un carattere per l’identità italiana, 18 gennaio 2016, Medium
• Quaratino, F. Eppur si Muove. Perché non è solo una questione di linee guida e perché è importante avere delle linee guida, 4 aprile 2016, Medium
• Sinni, G. La pubblica utilità è open source, autunno 2016, rivista Progetto Grafico n. 30 “Tecnologie aperte”

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.

Copertina: rielaborazione di un’immagine di Tara Evans su Unsplash

Verso Design system .italia: dalle origini al design system aperto della PA was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

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à
• Dieci punti per fare meglio
• Il futuro appartiene alle persone
• Il futuro è una questione culturale

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

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

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.

Si tratta di un lavoro aperto, ed è possibile partecipare alle attività in corso, commentando o provando l’ultima versione rilasciata nella community Figma; vi invitiamo ad approfondire alcune caratteristiche guardando il video del Community lab dedicato; o seguire gli aggiornamenti sui canali e sul piano attività di Designers Italia, dove scoprire in anteprima quando avverranno i primi rilasci di kit e design token su repository GitHub dedicate, in special modo se interessati a provarli su altri strumenti come Sketch o Adobe XD.

7. Fatto bene è realizzato con 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à.

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

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.

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

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

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?

Progettare con qualità: l’accessibilità al centro del design system del Paese was originally published in Designers Italia on Medium, where people are continuing the conversation by highlighting and responding to this story.

Un perduto documentario parodia animata sul tema della mucca pazza; due art director italiani in missione per conto della compagnia che non dormiva; una valigia di magliette pronta a esplodere; un viaggio iniziatico nella Barcellona di inizio millennio in compagnia di Joshua Davis, i Buena Vista Social Club, Compay Segundo e Tim Burton.

Bozza. Draft. English translation soon, maybe.

Conservo vivida nella memoria l’immagine di Joshua Davis che mi da una pacca sulla spalla. Eravamo nella tribuna dell’OFFF a Barcellona, era inizio maggio del 2001. Avevo due trecce di capelli lunghi e capivo ben poco di quel che mi blaterava Joshua in slang statunitense. Annuivo e sorridevo, il mio inglese faceva acqua da tutte le parti. Ho sempre immaginato fossero complimenti, bei complimenti credo dall’espressione facciale.

Ricordo anche le facce di Hector Ayuso e della sua squadra, una notte a cena tardi in uno strettissimo vicolo del Barrio Gotico. Luci al neon e tapas. Mi chiedo se immaginavano già allora che la loro creatura sarebbe diventata uno dei festival più longevi degli anni zero.

OFFF Barcelona | A festival of creativity, art and digital design

Quella prima edizione del 2001 aveva il formato anche di concorso internazionale: quel “Online Flash Film Festival” da cui l’acronimo OFFF arrivato fino a oggi: 350 partecipanti e 90 finalisti per cortometraggi realizzati con tecnologia Macromedia Flash, all’epoca uno strumento rivoluzionario e oggi decisamente un vago ricordo piuttosto bistrattato. Il concorso era una sfida anche di leggerezza e pacatezza digitale per l’epoca: tra i requisiti quello di far pesare i propri lavori meno di 1.5MB.

OFFF, online flash film festival OFFF, online flash film festival

“We are all Mad About You!”

Eravamo nella capitale catalana per vincere con il documentario animato “Mad About You” (M.A.Y.), la nostra parodia satirica sul tema della mucca pazza.

Eravamo andati talmente sicuri di M.A.Y., assemblato con passione in un lungo mese di fuori orario notturni o fine settimana ai computer, da portarci in aereo una valigia di magliette con grafiche a tema. Da regalare. R e g a l a r e. Un’intera valigia pronta ad esplodere all’acclamazione. Eravamo decisamente il sogno di due rockstar wannabe.

Vincere, vincere. Yes, vincemmo 🥇il primo premio nella categoria documentari, e grandi onori e cotillon. Per capirne la portata il festival intero si chiuse con la frase dal palco “We are all Mad About You!”.

Tornammo in patria con un ‘oscar’ con cui consolidare un po’ di fama negli ambienti emergenti del digital design, tra i fantomatici webdesigner-nuovi-creatori-di-contenuti, come ci chiamava più d’uno in quegli anni della prima bolla Internet. Servì anche a giustificare le spese della missione non lo nego, mai autorizzata ufficialmente, per la compagnia che non dormiva, quella dell’albero elettronico. L’agenzia web delle banane allora prima per crescita in Italia. Il nostro day-job. Il claim the-no-sleeping-company decisamente faceva al caso nostro, letterale.

Grazie

Io e Francesco Kko Buso eravamo giovani e belli. Belli come si è a meta dei venti, almeno quando hai l’assurda fortuna di essere libero, di poter creare quello che desideri. E proprio grazie a Francesco ci meritammo, il giorno prima di tornare in Italia, un concerto dei Buena Vista Social Club al completo, nella formazione originale con Compay Segundo. Era un bellissimo teatro-club che avrei poi imparato a conoscere quando Barcellona per un po di tempo sarebbe diventata una seconda casa, negli anni successivi della mia lunga collaborazione con ROJO. Oggi non esistono più, ne il teatro con quei lunghi drappi rossi e spalti ubriachi di vita, ne ROJO.

Non credo di avere mai ringraziato Francesco a dovere per quella notte e quel concerto. Quella notte fu l’inizio di molte cose e sogni per me. Varrà questo breve racconto come ringraziamento? :-P

M.A.Y. is back! Do you wanna play M.A.Y.?

Oggi, 21 anni dopo quell’avventura, nello stesso giorno che inizia OFFF 2022 a Barcellona, mi sembra un’ottima occasione per aggiungere che sono finalmente riuscito a trovare il tempo per ‘restaurare’ Mad About You, questa piccola perla del mio primo portfolio da young-Flash-guru che ci fece vincere un festival internazionale. Il restauro è stato possibile grazie a Ruffle, il player Flash scritto in Rust per i tempi moderni.

Quindi. Anni di leggende e denunce perdute. Un decennio di bando alla tecnologia Flash (che sia stata boicottata proprio per non farvi vedere M.A.Y.? :-D). Rullo di tamburi ta ta ta ta ta da din din din. Chi giura di averlo visto in qualche rassegna nei cinema dei primi anni zero, in qualche sito internet underground o parte di alcune playlist video redatte da gruppi di vegani assassini. Torna finalmente online, nella sua forma interattiva originale, e in tutto il suo pluripremiato splendore — è stato anche terzo premio Adbusters nel 2003 al Mini-Doc Award —, il perduto Mad About You, solo M.A.Y. per i cultori. Non solo una canzone degli Hooverphonic o un verso di Sting, ma anche la parodia satirica e crudele della nosra amica matta come un cavallo, la mucca Daisy The Cow.

Solo su, ta dannnn si alzi il sipario, calino le luci, aprite questa pagina (e cliccate play se non parte da solo perché lo state guardando da dispositivi mobile!)

Mad About You - nasonero studio

Appendice

Alla fine della visione c’è una ciliegina sul tortino: un tastierino numerico nell’angolo in basso a destra per navigare tra le scene. M.A.Y. non è un’animazione lineare, ma un piccolo mondo interattivo con nove ambienti. Il regista che controlla e dirige la riproduzione è un algoritmo che detta i tempi e guida cambi, musica, effetti sonori e dialoghi.

Mi è piuttosto complicato farvi capire cosa è stato Macromedia Flash per la mia generazione di designer giovani padawan. Provate a chiederlo a Tim Burton, quell’anno partecipò anche lui alla prima edizione dell’OFFF.

C u space cowboys 🤠 🌠

“We are all Mad About You!” (OFFF 2001) was originally published in DesignDraft on Medium, where people are continuing the conversation by highlighting and responding to this story.

Indice

Capitolo I: io (il lato esistenziale del fare didattica per il design)
Capitolo II: come (l’approccio metodologico e gli strumenti)
Capitolo III: loro (gli studenti e una selezione di progetti)
Capitolo IIII: imparo (la didattica come progetto)
Capitolo IIIII: qualcosa (i progetti diventati tesi)

Appendice: le variazioni significative (no, niente spoiler)

— «Prof. ma allora posso fare un progetto per dimostrare l’esistenza di Dio?», fa la giovane designer-in-progress.

Tutti si fanno attenti — «Eh, direi che se ci riesci si diventa famosi: San Marino centro dell’universo.»

Chi sono io per stroncare l’entusiasmo?

Capitolo I: io

Copertina

È settembre 2018 e sono in aereo direzione New York. Quello che cercherò di raccontarvi è quella parte dell’esperienza professionale degli ultimi cinque anni che mi porta a passare molto tempo sui mezzi di trasporto tra la Repubblica di San Marino e le colline pisane, passando per Firenze e Bologna. Una volta la settimana andata e ritorno per un semestre fatto di dodici settimane, più esami e consigli di laurea.

Perché vi dovrebbe interessare? Perché quello che faccio con i ragazzi è fargli avere idee. Idee su cui lavoriamo con approccio open source e con un po’ di spirito di “estemporaneità strutturata”. Idee su cui io, ma anche voi, anche loro, un giorno potrebbero costruire altri artefatti e altre idee.

Vediamo, da dove partire.

Incipit

2:49pm a New York, 20:49 a Crespina, 7:49 del pomeriggio all’aeroporto di Londra. In volo sull’atlantico, meno di 5 ore alla città che non dorme mai. Chissà se riesco a tracciare tutta la struttura di questo testo. Quello che mi manca è un io narrante. Io? Loro? Una terza voce? Erika? Il tecnico dei computer metallaro dei primi anni in università?

Prima dei 40

Il mio laboratorio aveva già cambiato un paio di nomi, Laboratorio di Sistemi Interattivi la prima esperienza di docenza a contratto, A/A, Anno Accademico, 2013–14, Laboratorio di Interaction Design 2, A/A, Anno Accademico, 2014–15. Tutte maiuscole come si confà ai nomi di un laboratorio magistrale. L’ultimo laboratorio magistrale per essere esatti prima della tesi specialistica, quella che in inglese si chiama Master Degree, 8 crediti formativi e più di 100 ore di formazione in design.

Siamo nella più antica repubblica parlamentare del mondo, fuori dall’Europa ma a mezz’ora di auto dalla costa romagnola. Un antico monastero, nascosto tra i vicoli della Città di San Marino, è la sede di una piccola ma agguerrita scuola di design che da un po’ di tempo si firma design.UNIRSM.
Erika mi ha fatto notare che sembra Hogwarts, fai un passo dal binario di una stazione del treno (Rimini) e sei catapultato in un altrove dove studiare magia (design) fatto per buona parte di pietre e giardini in cima ad una montagna (Titano). Tre torri dominano il territorio circostante, le prime due si raggiungono attraversando il Passo delle Streghe (quale altro) la terza è lì da oltre mille anni.

Tra apprendisti stregoni, docenti col cappello a punta e tuttofare siamo alcune centinaia da ogni dove. Conosco molti nomi, i rapporti sono cordiali e schietti, condividiamo l’avventura dell’isolamento, siamo a più di 600 metri sul mare e in inverno certe volte le nuvole tutt’intorno tagliano fuori il mondo. Quelle notti, dall’alto del borgo, il paesaggio diventa come in certi libri (di magia appunto), Terramare a perdita d’occhio.

Per arrivare dal paesino toscano dove vivo sulle colline pisane, Crespina, ogni settimana impiego 5 ore, 3 treni, 1 bus da spendere con gli auricolari nelle orecchie a preparar lezioni, racconti e codici sorgenti.

Perché un’apprendista stregone dovrebbe venire fin quassù a studiare design? Mumble mumble mumble. Se applichiamo la parsimonia del rasoio di Occam alle molte risposte possibili — scegliere è progettare no? — direi per il Laboratorio di Design del Prodotto 1 di Massimo Barbierato alla laurea triennale, un semestre a testa bassa e mani sporche su materiali come la cioccolata.
Ah e poi arrivano parecchie menzioni d’onore (junior), da quel noto premio milanese a forma di compasso (d’oro), se vale.

Ok dicevo, il Laboratorio di Sistemi Interattivi mia prima esperienza strutturata di insegnamento universitario, quindici anni di professione alle spalle come designer, art director, artista, hacker e chi più ne ha più ne metta, A/A 2013–14, chiamato dal direttore Alberto Bassi e da Gianni Sinni a insegnare arti oscure: interaction design, creative coding e physical computing.
L’idea è stata di far didattica vicino alle mie corde artistiche, disegno e performance: usare l’alchimia del design generativo e degli algoritmi di design procedurale per creare piccole macchine software che arricchissero il gesto e l’espressività durante il disegnare, magari dal vivo, in contesti performativi. Il primo syllabus, racchiuso nel titolo Generative Design Drawing, chiedeva di progettare interfacce e strumenti di disegno digitale per performance live alla I Biennale del Disegno di Rimini, e di realizzare esercizi di stile in motion design per decine di buffi titoli di testa di film come Trainspotting e serie come Six Feet Under.

Il laboratorio è diventato Interaction Design 2 al secondo A/A di docenza. La seconda volta è venuta diversa, la seconda viene sempre meglio ok, un po’ più morta sul piano del coraggio ma sicuramente più solida. Stavo imparando, e stavano imparando loro.
Di quel semestre dal titolo Data, Art and Meaning sottovoce si parla ancora negli stretti corridoi del monastero. Ogni tanto sulle scale incontri un piccolo gruppo di studenti dall’aria sospetta, se ti avvicini e ascolti senza farti notare c’è sempre una recluta ben informata che racconta la leggenda di Andrea Giacobone che aveva accesso ai log completi del server centrale. Si dice che prima o poi verrà realizzato il suo progetto di installazione per l’ingresso della scuola: usare il flusso dati sulla rete universitaria per comandare pompe idrauliche a far scorrere liquidi colorati in lunghi fasci di tubi trasparenti attaccati alle pareti e al soffitto, su su fino ai giardini e oltre in giro per la città. Un bel po’ cyberpunk, sì. Qualcuno si domanda se Andrea sia venuto a conoscenza di segreti sull’uso della rete in università — crear leggende è progettare no? — ad un certo punto su GitHub Andrea e Francesca… no questa non ve la racconto.

Ed eccoci all’autunno 2015, si avvicina il laboratorio del nuovo A/A, il terzo inverno–primavera in fila a salire e scendere dalla città incantata. Con Michele Zannoni nuovo gran maestro della laurea magistrale il nome cambia ancora: Laboratorio Design di Sistemi Interattivi per l’Informazione. Forma breve DSII.

14:30, chiamata video Firenze studio Lcd — Città di San Marino, design.UNIRSM, 14° piove, camicia di jeans sdrucita io, girocollo nero modello Silicon Valley dall’altra parte del video, spettinati e barbuti entrambi.
 — «Ricorda che sei l’ultimo esame,» fa Michele, serio.
Sottolinea ultimo.
 — «ok»
 — «il tuo laboratorio chiude il percorso di studi a San Marino.
Devi fargli valorizzare quanto hanno fatto e prepararli al percorso di tesi, nel frattempo li introduci alle arti oscure.» (sì non ha proprio detto arti oscure)

Mi presenta davanti un syllabus bianco dove sarebbe bello, penso-al-volo-mentre-Michele-continua-a-parlare, insegnare ai ragazzi modi di progettare artefatti che agiscano con efficacia in sistemi complessi, costruire strumenti multimediali e mixed-media per interpretare il mondo, per leggere i segnali che ci circondano, per provare a esplorare futuri possibili attraverso la creazione e il collegamento di idee e persone, magari introdurli a qualche pozione o storia da iniziati durante l’anno che Corto Maltese l’ho letto fin troppo bene.

Michele-intanto-mi-guarda-aspetta-un-commento…

Scrivere un syllabus non è altro che scrivere una storia, una storia che costruisce relazioni in potenza tra il mondo che conosci, e quello che vorresti ci fosse. Come tessere una ragnatela di possibilità tra gli studenti coinvolti e i progetti, le storie e le persone che gli farai incontrare nello svolgersi dell’avventura.

Ha a che fare con lavorare su quell’invisibile delle parole di Bifo:

Other futures and other worlds are always already inscribed within the present, despite power’s attempt to keep them invisible.¹

Come si trasforma un laboratorio in quello che negli Stati Uniti chiamano Advanced Interaction Design — in concreto una decina di settimane davanti a computer BYOD* e aggeggi elettronici nella piccola stanza di un vecchio monastero, otto ore a settimana, due giorni di seguito — in un’esperienza finale che chiuda il cerchio? Sto-parlando-ad-alta-voce, in un punto di svolta somma di molti pezzi precedenti che ci-metto-del-mio evidenzi la libertà di scelta nel progettare, la responsabilità nel farlo, il ruolo che da designer e artisti dovranno avere nella società per migliorarla? O almeno per non peggiorare le cose.

Così tante possibilità in quel titolo Laboratorio Design…

¹ Berardi, Francesco ‘Bifo’. 2017, Verso Books. Futurability. The Age of Impotence and the Horizon of Possibility.

Il titolo è un inizio

Il titolo è un inizio, e allora inventiamone uno, un titolo informale da scrivere sotto il nome ufficiale e da raccontare fuori di qui, qualcosa che apra possibilità e sia l’inizio della narrazione. Una scusa insomma, per fare le cose per bene. Eccolo.

Making visible, expressive computational approaches to meaning

Making. Creare. Fare. Costruire. Rendere.
Visible. Il visibile. Le cose visibili, osservabili. Ciò che vedi, la realtà.
Making visible. Costruire il visibile.
Expressive. Espressivo, estemporaneo.
Computational. Computazionali. Fatti col computer. Codificati.
Approaches. Approcci. Esplorazioni.
To meaning. Al significato. Ai significati. Alla creazione di senso.

Vedo cose (mio nonno o del perché rendere visibile l’invisibile)

Mio nonno era un pittore macchiaiolo, allievo di Renato Natali, questa è la storia che ho sentito da quando sono nato. Pittore macchiaiolo, macchie di colori ad olio pazientemente stratificate e tirate sulla tela, una ad una, giorno dopo giorno, a cercare luce e vita. Intere settimane di lavoro su ogni quadro, molti quadri disegnati allo stesso tempo, in parallelo, almeno un quadro a settimana finito. Un pittore a cottimo, molto bravo secondo me. C’ha mantenuto una famiglia, la mia, a modo suo sì certo ma deve aver funzionato in qualche misura se siamo arrivati ad oggi.

Una vecchia marina del porto di Livorno a casa dei miei genitori, nel corridoio lungo di cui avevo paura da piccolo, una striscia dymo in plastica lucida rossa con le lettere bianche è attaccata al centro del passe-partout in basso — ⟪Al piccolo Daniele per il suo onomastico⟫ — era il 1975, il mio primo onomastico.

Nonno è morto ero un adolescente all’uscita dal suo ultimo giorno di scuola delle medie, dopo l’esame, nessuna festa quei giorni per la mia promozione. C’era il sole in Via Magenta, una di quelle giornate terse in cui la luce è più luce, vivida. Ricordo bene l’odore pungente anni prima di trementina e Gommina Linetti mentre mi teneva in collo sulle gambe, lui a dipingere cose ferme, poggiate li attorno alla rinfusa, un violino rotto oggi appeso nella mia libreria, una mela, delle ciliegie, un drappo rosso, uno dei tanti gatti.
Gesti lievi e misurati ad intervalli regolari avvicinavano il pennello o una piccola pezza di stoffa sudicia alla tela. Unghie lunghe e sporche. Anelli d’oro con pietre, grossi. Dita nodose. Occhiali spessi e pochi capelli ma sguardo da bambino.

Mi chiedo ancora cosa vedesse in quelle interminabili ore a osservare oggetti inanimati. Ne cercava l’anima? Era un posto magico il suo studio, pieno di luce, di quella luce bianca che abbacina che ho visto solo nei vicoli livornesi, piante qui e là, e gatti, una corte interna di una casa bassa a piano terra credo, bianco e verde. Bianco e verde.

Proust scriveva che ⟪Il vero viaggio di scoperta non consiste nel trovare nuove terre ma nell’avere nuovi occhi⟫, ecco io credo che mio nonno ogni giorno si alzasse con nuovi occhi, curioso di osservare ancora una volta quelli oggetti di ieri per continuare a cercare di renderli visibili, a se. Agli altri.

Il brief è già metà

Quindi il brief. Quella parte del syllabus che in un laboratorio di una laurea magistrale in design è in fondo la simulazione di una committenza ideale. Il potere più grande di un docente in design che arriva dalla professione è proprio lì, simulare principalmente a se stesso la miglior richiesta che potrebbe auspicarsi di ricevere da un committente. Il brief ideale.

Making visible, expressive computational approaches to meaning

Intro
Scrivere algoritmi e progettare strumenti analogici e digitali per la ricerca, raccolta, visualizzazione e remix di informazioni e dati in tempo reale → coding, data, api, scraping, sensors, remix

Sviluppo
Progettare installazioni, performance comunicative e sistemi interattivi per misurare e rendere visibile l’invisibile → art, installation, performance, interaction, design, tangible

Brief
Evidenziare, far emergere, rendere tangibili e dotate di fisicità quelle caratteristiche immateriali che ogni istante intorno a noi, e attraverso noi, definiscono il carattere dei sistemi-comunità in cui viviamo e ci muoviamo, relazioniamo e percepiamo noi stessi, gli altri e il mondo: valori, energie, possibilità, relazioni, interazioni, reti, flussi, fantasmi, … → meaning, hermeneutic, hacking, networking

Strumenti
Partecipazione. Lapis e carta. Software e hardware open source (Git/GitHub, Atom, Processing, p5.js, Rawgraphs, OpenRefine, Arduino, …). Computer e device con approccio BYOD (* Bring Your Own Device). Laboratorio di fotografia e stampa 3D

Che l’idea sarebbe lo leggi e poi a testa bassa d’un fiato ti immagini quattro mesi di ricerca-conceptDesign-productDesign-presentazioni-documentazione-magariBusinessPlan-e-vDF (visioniDiFuturo, ndr)

Nel mentre stai correndo a fianco dei due temi principali e complementari del laboratorio che scorrono e si incrociano più volte.

L’interpretazione degli artefatti digitali, a cercare la propria voce. con un approccio leggero e postmoderno ispirato al lavoro di Roberto Simanowsky:

In postmodern times, interpretation is no longer about control or truth. It is not about solving the puzzle of meaning that a work of art represents. It is about suggesting, playing with ideas, reflecting, and sharing thoughts and feelings triggered by interaction with the artwork. Hermeneutics can be considered “a metatheory of the play of interpretations” (Vattimo 1997, 9). No single interpretation should be the end of this process, but there should also be no end to interpretation.²

E la computazione per il design, a imparare a leggere e scrivere. Utilizzando linguaggi e piattaforme di prototipazione open source; l’approccio comunque vada umanista e artistico ispirato al lavoro di Nick Montfort e compari:

First, to undestand code in a critical, humanistic way, the practice of scholarship should include programming: modifications, variations, elaborations, and ports of the original program, for instance. […]

Finally code is a cultural resource, not trivial and only instrumental, but bound up in social change, aesthetic projects, and the relationship of people to computers. Instead of being dismissed as cryptic and irrelevant to human concerns such as art and user experience, code should be valued as text with machine and human meanings, something produced and operating within culture.³

Ed ora sì ce ne sarebbero di cose, metodi e strumenti da descrivere e e bibliografie da sciorinare. Diciamo che mi appunto un post-it per il “Capitolo II: come”, il metodologico, li staranno meglio no?

Invece invece un buon modo di concludere questo primo capitolo sull’approccio esistenziale al far didattica per il design forse è qualche fotografia dalle settimane che scorrono. Seguimi, sono tre anni che tengo questo laboratorio iniziando sempre allo stesso modo…

² Simanowsky, Roberto. 2011, Minnesota University Press. Digital Art and Meaning. Reading Kinetic Poetry, Text Machines, Mapping Art, and Interactive Installations.

³ Montfort, Nick e AA.VV.. 2012, MIT Press. 10 PRINT CHR$(205.5+RND(1)); : GOTO 10

W1 (o settimana 1)

Installiamo d’acchito un piccolo vecchio e rumoroso computer dentro il proprio di ultima generazione, 64 kilobytes di memoria dinamica (cinquecentodocicimila bit 1 o 0) che portano indietro nel tempo di 36 anni, a quella vigilia di natale in cui mio babbo Gino tirò fuori dal baule della sua Mercedes amaranto un Commodore 64 nuovo di pacca. La macchina era di quelle tutta curve e interni in pelle, tanto zingaro gitano odore d’infanzia e lasagne la domenica, il C64 era della prima ondata era il 1982 e avevo 7 anni.

L’interfaccia blu per scrivere e mandare in RUN il programma-di-una-sola-riga one-liner per eccellenza del generative design grafico anni ’80: 10 PRINT CHR$(205.5+RND(1));: GOTO 10. Un anello (loop) in potenza infinito scritto in Basic che probabilmente possiamo considerare l’inizio di quello che oggi conosciamo come creative coding, via a scaricare il libro che ne porta il titolo e si comincia ad aprivi il terzo occhio.

Daniele T. on Twitter

10PrintWall - quick&dirt 10print porting in @p5js for #DSII2016 lab @unirsm - https://t.co/lcIlcvlbGB #p5js S to png

Esercitarsi a scrivere porting e “variazioni significative” di 10 PRINT in altri linguaggi diventerà la meditazione del mattino nelle settimane seguenti, un auto-déjà-vu-a-comando per tornare ogni volta qui in W1 e non perdere il filo d’Arianna del laboratorio, a ricordarsi l’inizio dell’avventura.

Ecco un altro post-it, devo prevedere un appendice al libro con tutte le variazioni di questi anni ben ordinate e classificate, con immagini e sorgenti ragionati. Ci starebbe bene. Magari consolidare e descrivere cosa intendo per “variazione significativa”…

W2+ (o dalla settimana 2, ovvero ecco le creature selvagge)

E poi incontriamo le formidabili creature selvagge Processing, p5.js, Arduino, lingue e librerie open source in costante evoluzione pensate per essere usate come sketchbook di appunti, dove scrivere-software o disegnare-hardware nel contesto delle arti visive e del design, con lo stesso approccio con cui scarabocchiereste appunti su pezzetti di carta alla rinfusa a matita mentre ricevete un brief telefonico da un committente che non sa di cosa sta parlando.

E malatempora a chi non conosce i Radiohead!

Arrivano John Maeda e i suoi allievi Fry/Reas e ci si slancia avanti portati dall’entusiasmo per molte settimane.

Filmografia iniziale e necessaria Hulk, Minority Report, Tron (uh Ken Perlin e quel rumore che sintetizza immagini…), Tron 2.0.

Colonna sonora Radiohead e John Cage.

W5+ (o dalla settimana 5, ovvero l’inizio della fine)

In parallelo il lavoro sul progetto finale inizia qui e prosegue per più di metà del laboratorio, ogni studente con le proprie inclinazioni e ispirazioni è responsabile di progettare una risposta al brief sull’invisibile. Possibilmente senza far saltare in aria la vecchia repubblica o scoperchiare troppi vasi di Pandora nel mentre. Obiettivo l’esame e in alcuni casi la proposta di tesi.

Dopo settimane di mondo digitale si inquadra il progetto tornando qualche giorno a grandi e disordinati appunti visivi scritti a mano, pennarelli e grandi fogli al muro per rompere il ghiaccio, un processo collettivo da affrontare con coraggio, apertura e partecipazione per lavorare su idee e relazioni. Parafrasando un libro della mia formazione questa fase si potrebbe chiamare “Lo zen e l’arte della manutenzione delle idee”, sottotitolo “Tempeste di cervelli nell’epoca dell’iperconnessione”, che poi non si capisce perché non si possa dire “Belle giornate terse di cervelli bla bla”…

Le presentazioni degli avanzamenti, — dalle idee alla ricerca dati, dalla documentazione agli algoritmi e le logiche di trasformazione, dai primi prototipi al progetto completo con un occhio di riguardo ai progetti tangibili e inclusivi — settimana dopo settimana pensate per metterli in difficoltà, a raccontare e difendere lavori altrui e attaccare il proprio, seguendo Marcel Duchamp:

I always put myself in self-contradiction, just to avoid following my own taste.⁴

Cercare la contraddizione come scintilla necessaria al progettare, per cercare di capire se in profondità si può incidere con più efficacia sul senso del mondo. Se si può spingere l’asticella più in là dell’avere una buona idea e dell’usare gli strumenti giusti.

Bene imparare per tempo a mettersi in discussione.

⁴ Marcel Duchamp, da un appunto sul libro di Bruno Munari… XXX citazione da sistemare

つづくContinua…

Sto rivedendo il capitolo II sull’approccio metodologico e scrivendo il capitolo III sugli studenti ed i loro progetti… ETA inizio 2019, a presto.

Titoli di coda

Queste mie storie su Medium (i testi e le immagini inedite) hanno alcuni diritti riservati, occhio alla licenza. Sono inoltre bozze di lavoro, come tali potrebbero cambiarvi sotto gli occhi. Grazie della lettura, spero abbiate trovato cose interessanti, commenti sono benvenuti.

Progetti per rendere visibile l’invisibile was originally published in DesignDraft on Medium, where people are continuing the conversation by highlighting and responding to this story.