Buone pratiche¶

L’approccio di Designers Italia si riflette in un insieme di buone pratiche da adottare per progettare in modo virtuoso la trasformazione digitale dei servizi pubblici, raggiungere standard di qualità internazionali e supportare il raggiungimento dei requisiti richiesti a livello normativo. Queste buone pratiche, a loro volta, sono ordinate in relazione alle diverse fasi del processo progettuale presentato più avanti.

• Prioritizzare gli obiettivi e individuare i requisiti del progetto in funzione di essi;
• Definire il perimetro del progetto bilanciando desiderabilità, fattibilità e opportunità;
• Favorire equità e pari opportunità come requisiti imprescindibili;
• Documentare i progetti e i processi in modo chiaro e aperto;
• Definire sin dal principio i KPI, ovvero gli indicatori di risultato, e le strategie per il futuro monitoraggio della performance di una soluzione digitale;
• Immedesimarsi e ascoltare gli utenti per comprendere comportamenti ed esigenze;
• Considerare tutte le tipologie di utenti per minimizzare gli elementi limitanti;
• Coinvolgere nel processo tutti gli stakeholder interessati dal progetto;
• Progettare in ottica multicanale, armonizzando l’esperienza utente delle diverse modalità di fruizione del servizio;
• Rispettare gli standard di qualità e rifarsi ai buoni esempi già esistenti, senza reinventare la ruota;
• Ridurre la complessità di procedure e processi al minimo utile, favorendo l’approccio once only da e verso il cittadino;
• Sfruttare piattaforme e infrastrutture tecnologiche pubbliche esistenti;
• Tenere un approccio open source: riusare soluzioni e condividere risultati con licenze aperte;
• Testare con gli utenti le soluzioni proposte durante tutto il processo, dai prototipi a diversi livelli di fedeltà fino al prodotto realizzato;
• Valutare ciclicamente la performance e la conformità delle soluzioni secondo criteri chiari.

Organizzare il progetto e la sua gestione¶

L’obiettivo principale di questa fase è impostare l’organizzazione del progetto dal punto di vista gestionale e operativo. Serve quindi a capire che attività dovranno essere svolte, così da individuare le competenze necessarie, allocare correttamente le risorse interne ed esterne e stimare adeguatamente i tempi. I kit messi a disposizione in questa fase sono propedeutici alla pianificazione operativa, ma anche alla gestione della privacy, dell’approccio open source e dell’integrazione con le piattaforme abilitanti, per aiutare le amministrazioni a definire gli standard di qualità, usabilità e accessibilità da raggiungere e quindi i termini dell’ingaggio del o dei fornitori.

Comprendere il contesto d’uso del servizio pubblico¶

Questa fase consiste in attività di ricerca e analisi e si focalizza su acquisire consapevolezza del quadro entro cui il servizio digitale si inserisce. Serve ad indagare l’esperienza del cittadino nella situazione attuale, comprendendo i processi e gli attori coinvolti nell’erogazione del servizio pubblico, mappando poi l’esperienza d’uso dal punto di vista dell’utente. I kit messi a disposizione in questa fase consentono di schematizzare le figure e gli elementi coinvolti nell’erogazione del servizio pubblico, svolgere ricerca documentale e sul campo, qualitativa e quantitativa, per poi definire gli utenti-tipo (cittadini o operatori pubblici) e il modo in cui allo stato attuale utilizzano, percepiscono e interagiscono con il servizio.

Progettare i processi e i touchpoint del servizio¶

L’obiettivo di questa fase è definire in dettaglio tutti i flussi di interazione tra l’utente e il servizio. Serve a definire l’esperienza dell’utente mappando i punti di contatto (touchpoint) al servizio, tramite i quali avverrà l’interazione vera e propria, per poi impostare la struttura di base dell’interfaccia utente, tenendo presenti i contenuti e le funzionalità necessari all’utente per raggiungere il suo obiettivo. I kit da utilizzare in questa fase servono a ideare con utenti e stakeholder soluzioni per migliorare il servizio pubblico esistente, a progettare le loro componenti digitali, a schematizzare la loro struttura e i relativi contenuti, e infine a prototipare i flussi di interazione.

Realizzare l’interfaccia utente del servizio¶

In questa fase il focus è su attività di costruzione e sviluppo del touchpoint digitale attraverso il quale l’utente interagirà con il servizio pubblico. Serve a comporre letteralmente i componenti dell’interfaccia utente tenendo presenti temi grafici e di interazione, per testare e sviluppare il cosiddetto front-end del servizio. Le risorse di questi kit forniscono gli strumenti operativi per disegnare e sviluppare l’interfaccia di un touchpoint digitale. Ci sono a disposizione librerie, template e modelli per costruire interfacce digitali con uno stile visivo definito e coerente, oltre che componenti e codice open source di sviluppo, le fondamenta di un vero e proprio design system nazionale in divenire.

Validare la soluzione ottenuta¶

Questa fase riguarda attività di valutazione e monitoraggio; l’obiettivo non è soltanto quello di valutare l’adesione a quanto previsto dalle normative dedicate rispetto a usabilità e accessibilità, ma soprattutto quello di misurare l’effettivo utilizzo del servizio digitale da parte del cittadino, in modo da individuare aree da far evolvere e ottimizzare. I kit proposti servono a pianificare e svolgere i test di usabilità, verificare l’accessibilità e monitorare le performance dei servizi tramite attività di web analytics.

Come rispettare la privacy sin dalla progettazione di un sito o servizio digitale¶

Progettare i servizi digitali comporta in primo luogo il rispetto di due principi fondamentali richiamati dall’articolo 25 del GDPR:

• il rispetto del principio di protezione dei dati fin dalla progettazione, cosiddetto “Privacy by design”;
• il rispetto del principio di “protezione dei dati per impostazione predefinita”, cosiddetto “Privacy by default”.

Questi principi impongono, infatti, alla Pubblica Amministrazione di integrare le considerazioni sulla protezione dei dati nelle operazioni e nei sistemi di trattamento fin dalla fase iniziale, anziché considerare la protezione dei dati una questione di conformità di cui occuparsi all’ultimo minuto.

Come indicato dal considerando 78 del GDPR tali misure, da applicarsi anche in ambito degli appalti pubblici,

“potrebbero consistere, tra l’altro, nel ridurre al minimo il trattamento dei dati personali, pseudonimizzare i dati personali il più presto possibile, offrire trasparenza per quanto riguarda le funzioni e il trattamento di dati personali, consentire all’interessato di controllare il trattamento dei dati e consentire al titolare del trattamento di creare e migliorare caratteristiche di sicurezza. In fase di sviluppo, progettazione, selezione e utilizzo di applicazioni, servizi e prodotti basati sul trattamento di dati personali o che trattano dati personali per svolgere le loro funzioni, i produttori dei prodotti, dei servizi e delle applicazioni dovrebbero essere incoraggiati a tenere conto del diritto alla protezione dei dati allorché sviluppano e progettano tali prodotti, servizi e applicazioni e, tenuto debito conto dello stato dell’arte, a far sì che i titolari del trattamento e i responsabili del trattamento possano adempiere ai loro obblighi di protezione dei dati.”

Il Comitato Europeo per la Protezione dei dati (EDPB - European Data Protection Board), cioè l’organo che garantisce l’applicazione coerente del Regolamento a norma dell’articolo 70 GDPR, fornisce linee guida, raccomandazioni e best practice che potranno aiutarti nell’implementazione dei tuoi servizi.

Consulta anche gli strumenti messi a disposizione dal nostro Garante per la protezione dei dati che è l’Autorità nazionale deputata all’attuazione del GDPR.

Ti segnaliamo, per esempio, questi documenti che potrebbe essere utile consultare per la progettazione di servizi digitali, ricordando di confrontarti sempre con il team privacy interno e il tuo Responsabile per la Protezione dei Dati (Data Protection Officer):

• le Linee Guida n. 4/2019 sulla “Data Protection By Design e By Default” (adottate il 20 ottobre 2020);
• le Linee Guida WP260 rev.01 sulla trasparenza (adottate il 29 novembre 2019 - versione emendata del 11 aprile 2018);
• se il servizio digitale che stai progettando prevede anche trattamenti di dati personali nell’ambito dei rapporti di lavoro, ti suggeriamo di consultare il Parere 2/2017 WP249 sul trattamento dei dati sul posto di lavoro . Anche se antecedente, il GDPR si considera attuale per la maggior parte degli aspetti trattati: ricordati che le informazioni generate sul posto di lavoro godono di una particolare tutela;
• le Linee Guida sull’utilizzo dei cookie e di altri strumenti di tracciamento del 10 giugno 2021.

Progetta e sviluppa servizi digitali sicuri, nel rispetto di quanto indicato dalle Linee Guida di design per i siti internet e i servizi digitali della PA ricordandoti che, come chiarito dal Garante per la protezione dei dati personali nel parere espresso su queste Linee guida, nell’ambito dei requisiti di sicurezza cui sono tenuti i vari soggetti coinvolti nel trattamento occorre sempre valutare in concreto i rischi che possono derivare, in particolare, dalla distruzione, dalla perdita, dalla modifica, dalla divulgazione non autorizzata o dall’accesso, in modo accidentale o illegale, ai dati personali trasmessi, conservati o comunque trattati.

In particolare, ricorda che in presenza di un rischio elevato per i diritti e le libertà delle persone fisiche, considerati la natura, l’oggetto, il contesto e le finalità del trattamento, il titolare, ai sensi dell’art. 35 del GDPR, deve effettuare, prima di procedere al trattamento,una valutazione d’impatto sulla protezione dei dati, consultando preventivamente il Garante al ricorrere delle condizioni previste dall’art. 36 del GDPR.

Per approfondire, consulta la pagina informativa del Garante e le Linee guida in materia di valutazione d’impatto sulla protezione dei dati e determinazione della possibilità che il trattamento «possa presentare un rischio elevato» ai fini del regolamento (UE) 2016/679, WP 248 rev. 01, adottate dal Comitato europeo per la protezione dei dati il 4 aprile 2017, come modificate e adottate da ultimo il 4 ottobre 2017.

Richiedi il consenso quando necessario¶

Il GDPR prevede che le pubbliche amministrazioni possano trattare dati personali quando «è necessario per adempiere un obbligo legale al quale è soggetto il titolare del trattamento», oppure quando «il trattamento è necessario per l’esecuzione di un compito di interesse pubblico o connesso all’esercizio di pubblici poteri di cui è investito il titolare del trattamento» (art. 6, par. 1, lett. c ed e del GDPR). Al fine di adempiere i predetti “obblighi legali” o “compiti di interesse pubblico o connessi all’esercizio di poteri pubblici”, i soggetti pubblici non devono richiedere alcun consenso (o autorizzazione) agli interessati per il trattamento dei loro dati personali, in quanto in tali casi, anche il consenso potrebbe non costituire un valido presupposto alla luce dell’evidente squilibrio tra l’interessato e il titolare del trattamento (considerando n. 43 del GDPR[1]).

A prescindere dalla necessità o meno di richiedere il consenso, la pubblica amministrazione deve in ogni caso rispettare i principi di «minimizzazione» e di «finalità del trattamento», in base ai quali i dati devono essere – rispettivamente – «adeguati, pertinenti e limitati a quanto necessario rispetto alle finalità per le quali sono trattati» e «raccolti per finalità determinate, esplicite e legittime, e successivamente trattati in modo che non sia incompatibile con tali finalità» (art. 5, par. 1, lett. c e b del GDPR).

Pertanto, ciascuna Pubblica Amministrazione è tenuta a verificare, in primo luogo, se esiste un’idonea base giuridica che consenta il trattamento dei dati personali per le finalità del servizio che intende realizzare.

Qui di seguito trovi alcuni “casi d’uso” che possono aiutarti a valutare se il consenso è la corretta base giuridica per l’iniziativa o il servizio che intendi proporre.

[1] Attenzione: Con decreto legge 8 ottobre 2021, n. 139, convertito, con modificazioni, dalla legge 3 dicembre 2021, n. 205, è stato novellato l’articolo 2-ter del Codice in materia dei dati personali, recato dal decreto legislativo n. 196 del 2003. La modifica concerne la base giuridica del trattamento dei dati da parte di un’amministrazione pubblica (o alcuni soggetti equiparati). In particolare, la novella normativa annovera anche “gli atti amministrativi generali”, oltre la norma di legge e regolamento, tra le basi giuridiche “fermo restando ogni altro obbligo previsto dal Regolamento e dal codice”. Inoltre, nel rispetto dell’articolo 6 del GDPR, il trattamento è anche consentito qualora lo stesso sia «necessario per l’adempimento di un compito svolto nel pubblico interesse o per l’esercizio di pubblici poteri». La novella normativa ha inciso anche sulla disciplina relativa alla comunicazione e diffusione dei dati da parte delle pubbliche amministrazioni. In particolare, ora è previsto che: 1) la comunicazione dei dati fra titolari che effettuano trattamenti di dati personali è ammessa per quelli diversi da quelli ricompresi nelle particolari categorie di dati o relativi a condanne penali o reati, se prevista da una norma di legge o di regolamento ovvero da atto amministrativo generale oppure quando è necessaria per l’adempimento di un compito svolto nel pubblico interesse o per l’esercizio di pubblici poteri; 2) la diffusione e la comunicazione di dati personali a soggetti che intendano trattarli per altre finalità sono ammesse se previste da una norma di legge o di regolamento ovvero da atto amministrativo generale; 3) la diffusione e la comunicazione di dati personali, trattati per l’esecuzione di un compito di interesse pubblico o connesso all’esercizio dei pubblici poteri, a soggetti che intendano trattarli per altre finalità in assenza di base normativa primaria o secondaria o di base amministrativa generale è ammessa purché ne sia data notizia al Garante almeno dieci giorni prima della diffusione e della comunicazione di dati personali. Si ricorda che, secondo il lessico normativo di riferimento, per «comunicazione» si intende la resa a conoscenza dei dati personali a uno o più soggetti determinati; per «diffusione», la resa a conoscenza dei dati personali a soggetti indeterminati, in qualunque forma, anche mediante la loro messa a disposizione o consultazione.

Le basi del sito web: architettura, informativa privacy, riferimenti DPO¶

L’architettura di un sito o servizio digitale è privacy oriented e tiene in considerazione:

• la presenza di tracker (Google Webfont o relativi a social network) che comportano un’indebita e non trasparente trasmissione a terzi dei dati di navigazione, quali indirizzi IP e orario di connessione;
• l’utilizzo di social plug in, che presentano diversi gradi di invasività;
• le modalità di autenticazione (minimizzazione dei dati raccolti attraverso l’autenticazione SPID, social log in);
• la presenza di cookie e tracker.

L’informativa sul trattamento dei dati personali deve essere reperibile sul sito e specifica per i singoli servizi offerti che comportano raccolta di dati personali

L’informativa (disciplinata nello specifico dagli artt. 13 e 14 del GDPR) deve essere fornita all’interessato prima di effettuare il trattamento, quindi prima della raccolta dei dati (se raccolti direttamente presso l’interessato: articolo 13 del GDPR). Fornisci, quindi, al momento della raccolta dei dati personali il link all’informativa o, in alternativa, metti a disposizione le informazioni sul trattamento dei dati sulla stessa pagina in cui raccogli i dati personali.

Il link all’informativa dovrebbe essere visibile su ogni pagina del sito tramite una dicitura di uso comune (come “Privacy”, “Informativa sulla privacy” o “Informativa sulla protezione dei dati”).

Ricorda, inoltre, che le informazioni sul trattamento dei dati personali fornite agli utenti devono essere concise, trasparenti, intelligibili e facilmente accessibili, nonché formulate con un linguaggio semplice e chiaro, specialmente nel caso di informazioni destinate ai minori (articolo 12 del GDPR): ciò significa che devi fare in modo che i destinatari del tuo sito o servizio riescano sempre a fruire e comprendere l’informativa.

Se offri il servizio tramite applicazione mobile, metti a disposizione l’informativa (specifica per il servizio tramite APP) presso gli store prima del download e rendi sempre accessibile l’accesso all’informativa anche una volta che è stata installata (ad esempio includendo un’opzione “Privacy”/”Protezione dei dati” nella funzione di menù dell’app).

Per un’informativa chiara, utilizza le icone vincitrici del contest ”Informative chiare” lanciato del Garante Privacy.

Per approfondire consulta le Linee guida sulla trasparenza ai sensi del regolamento 2016/679 adottate dal “Gruppo di lavoro articolo 29” il 29 novembre 2017 e modificate l’11 aprile 2018, WP260 rev.01, fatte proprie dal Comitato europeo per la protezione dei dati con “Endorsement 1/2018” del 25 maggio 2018.

Il sito contiene i dati di riferimento del Responsabile per la Protezione dei Dati

La designazione di un Responsabile per la Protezione dei Dati è finalizzata a facilitare l’attuazione della normativa da parte del titolare/responsabile (articolo 39 GDPR) ed è obbligatoria quando il trattamento è effettuato da un’autorità pubblica o da un organismo pubblico (articolo 37 GDPR).

Controlla quindi che i dati di contatto del RPD/DPO siano contenuti all’interno dell’informativa pubblicata sul sito. Come chiarito dal Garante per la protezione dei dati personali nel parere espresso sulle Linee guida di design per i siti internet e i servizi digitali della PA:

• la pubblicazione di tali dati di contatto deve essere effettuata sul sito web dell’amministrazione, all’interno di una sezione facilmente riconoscibile dall’utente e accessibile già dalla homepage, oltre che nell’ambito della sezione dedicata all’organigramma dell’ente e ai relativi contatti;
• non è necessario che, tra i dati oggetto di pubblicazione, vi sia anche il nominativo del RPD, non essendo questa informazione indispensabile a fini di contatto da parte di chiunque sia interessato: al contrario, risulta imprescindibile che tra i dati di contatto vi sia quantomeno un indirizzo di posta elettronica ordinaria (e, eventualmente, un indirizzo di posta elettronica certificata).

Puoi approfondire l’argomento tramite la pagina informativa ufficiale predisposta dal Garante per la protezione dei dati personali.

Version control e release del manuale operativo di design¶

I nuovi contenuti e le modifiche a contenuti esistenti - dopo essere approvati - vengono pubblicati nella versione «bozza» del manuale operativo, disponibile per una discussione pubblica e revisione da parte della community. Solo successivamente, in occasione di una nuova release del manuale, il team di Designers Italia valuta eventualmente di consolidare e farle confluire, dopo eventuali modifiche, nella versione ufficiale «stabile».

Stile della documentazione¶

Il manuale operativo di design è stato redatto seguendo la style-guide (guida di stile) di redazione dei testi pubblici. In particolare:

• linguaggio semplice e comprensibile a un pubblico ampio;
• brevità e uso di elenchi;
• ricorso ad esempi, meglio se supportati da immagini e collegamenti.

Consultazione della documentazione¶

La documentazione è disponibile su Docs Italia, la piattaforma di gestione della documentazione pubblica gestita dal Dipartimento per la trasformazione digitale. Tutti i documenti di Docs Italia possono essere fruiti anche in formato .epub e .pdf.

Sviluppo collaborativo del Manuale operativo di design¶

Il presente manuale è un documento pubblico, e chiunque può partecipare al processo di revisione e aggiornamento attraverso gli strumenti messi a disposizione attraverso GitHub, in particolare le issues (per le discussioni) e le pull request (per le proposte di modifica).

I contenuti del manuale sono redatti in file .rst e possono essere aggiornati via GitHub. Qui è disponibile una guida alla sintassi RST.

Altre risorse per l’editing in formato .rst:

Il Manuale operativo di design si colloca all’interno di un sistema in continua evoluzione e si basa su una logica di miglioramento continuo. Poiché i contenuti presenti all’interno del manuale operativo di design evolvono continuamente, diventa fondamentale introdurre il versionamento che consente di tenere traccia dei diversi rilasci nel tempo. Grazie al versionamento, chi realizza siti e servizi aderenti alle Linee guida a norma CAD di riferimento, può citare una precisa versione del manuale operativo di design che utilizza (da citare, ad esempio, quando si partecipa a un bando di gara).

Miglioramento di siti e servizi digitali esistenti¶

Rientrano in questa categoria quei progetti che insistono su strutture esistenti per aggiornare la tecnologia e/o inserire nuove funzionalità, senza rivoluzionare il servizio stesso. Sono esempi di questa tipologia la riprogettazione dell’esperienza utente di un servizio digitale sul sito di un Comune, oppure la modifica di un sistema di prenotazione in un applicativo di back office.

In questi casi è opportuno:

• raccogliere tutti i dati disponibili relativi all’utilizzo attuale dei servizi (tramite web analytics, interviste utente oppure test di usabilità);
• analizzare i dati per capire quali sono le maggiori criticità e opportunità di miglioramento.

Sulla base di questi elementi sarà possibile:

• mappare l’attuale esperienza utente dei diversi profili coinvolti (user journey);
• evidenziare le criticità e immaginare quali percorsi è necessario migliorare.

Riprogettazione di servizi esistenti in chiave digitale¶

Rientrano in questa categoria quei progetti che mirano a portare dei servizi erogati analogicamente anche su canali digitali. Sebbene possano sembrare meno complessi nella progettazione, non è mai né sufficiente, né opportuno per il cittadino, ricalcare puramente gli step dello user journey analogico per rappresentarli in digitale. Ogni volta che si progetta un servizio digitale, è opportuno analizzare e riprogettare anche il processo che ne è alla base, in modo da non fare una semplice trasposizione in digitale di processi analogici, e tenere in considerazione anche le altre forme di interazione offerte al cittadino per la fruizione del medesimo servizio (per esempio attraverso uffici aperti al pubblico).

Possiamo distinguere diverse forme di relazione tra canali digitali e canali tradizionali di offerta di un servizio:

• servizi digitali che arricchiscono e supportano i canali fisici (ad esempio, il servizio digitale che permette di prendere un appuntamento per il rinnovo della carta d’identità in Comune);
• servizi digitali alternativi ai canali fisici (per esempio il servizio che permette di ottenere un certificato on line in alternativa ad andare a richiederlo allo sportello di un Comune);
• servizi digitali in sostituzione dei canali fisici (per esempio una procedura on line di partecipazione a bandi pubblici che sostituisce la consegna di un modulo cartaceo).

In questi casi, è opportuno:

• adottare una prospettiva più ampia in fase iniziale, per capire al meglio le necessità degli utenti coinvolti (personas) e le potenzialità delle piattaforme digitali nel migliorare la loro esperienza d’uso;
• comprendere l’intero sistema che supporta l’erogazione del servizio (system map), verificare quali aspetti possono essere digitalizzati e quali no e capire come le due dimensioni si integrano;
• identificare le funzionalità chiave del servizio digitale e iniziare la progettazione partendo dalla costruzione di scenari e flussi di interazione che faranno da riferimenti per tutte le attività di progettazione e realizzazione, da svolgere in parallelo;
• durante la prototipazione è bene verificare con gli utenti gli avanzamenti, in modo da validare la direzione progettuale e l’usabilità del servizio (test di usabilità).

Creazione di nuovi servizi¶

Rientrano in questa categoria quei progetti che mirano a erogare servizi che non hanno al momento dell’avvio dei lavori un corrispettivo né nello spazio fisico, né in digitale. Sono esempi di questa tipologia la realizzazione di uno sportello digitale dedicato alle segnalazioni dei disservizi pubblici geo-localizzati, o i servizi di telemedicina.

L’attività di creazione di nuovi servizi necessita uno sguardo ancora più ampio:

• partire dalla mappatura di tutti gli stakeholder coinvolti e delle loro reciproche relazioni e comprendere l’ecosistema per identificare quali attori sia necessario coinvolgere o attivare, e quali dinamiche possano facilitare (o rendere molto difficile) la costruzione e l’implementazione del progetto;
• raccogliere tramite attività di ricerca sul campo (intervista e osservazione) il punto di vista degli utenti per capire al meglio le loro attuali criticità e necessità.

I risultati della fase di analisi dell’ecosistema e di ricerca possono essere utilizzati per facilitare una o più sessioni di sessioni di co-progettazione (co-design workshop) dove stakeholder, progettisti e utenti vengono invitati a dialogare e svolgere una serie di esercizi di ideazione per dare forma a delle proposte in modo collaborativo, convergendo su una o più soluzioni. I risultati della fase di progettazione possono essere a loro volta formalizzati in una serie di proposte di design (architettura dell’informazione, flussi di interazione), da prototipare e validare prima di procedere all’esecuzione finale del progetto.

Il punto di riferimento per la costruzione di un percorso di design dei servizi è Designers Italia che, oltre al presente manuale operativo di design, offre kit ed esempi di applicazione.

Casi studio¶

La raccolta di casi studio consiste nell’analisi delle soluzioni progettuali esistenti relative al contesto d’uso preso in esame, ha la finalità di identificare i punti di forza e di debolezza e individuare le buone pratiche a cui fare riferimento durante la progettazione. Le soluzioni esistenti vanno analizzate a livello di esperienza d’uso e interazioni con l’interfaccia relative al servizio e touchpoint che si sta progettando. I casi studio di servizi o prodotti digitali, possono comprendere sia soluzioni strettamente pertinenti all’ ambito di ricerca, sia afferire ad altri ambiti, ma presentare caratteristiche affini. Si definiscono dei criteri per orientare la ricerca e facilitare la selezione dei casi da prendere in esame, ad esempio in base alla grandezza dell’ente che eroga un servizio, alla categoria di servizi o considerando gli aspetti tecnologici; per poi, anche leggendo blog e articoli comparativi, stilare una prima lista di casi da approfondire. Quindi per ciascuno si va a ripercorrere l’esperienza di interazione dell’utente con il servizio tramite l’interfaccia digitale esaminando i flussi, collezionando le schermate e riassumendo i dettagli rilevanti per identificare poi le pratiche da seguire e quelle da evitare. In generale è importante riportare alcune informazioni generali su ciascuna soluzione, schematizzare gli step in cui è suddivisa l’interazione, e indicare a che tipo di funzione cercano di assolvere. Va descritto il modo in cui l’interfaccia indica all’utente cosa fare e come fornisce feedback rispetto alle azioni intraprese; le informazioni che vengono richieste all’utente e le modalità di accesso alle e fruizione delle informazioni. Anche prendendo in considerazione le recensioni degli utenti, qualora presenti online.

Per praticità nella comparazione e valutazione, le informazioni circa ciascun caso studio vengono spesso sintetizzate in un template standard, molto focalizzato sulla parte dell’interfaccia visiva.

Pianificare l’indagine¶

Per essere efficace, la raccolta di informazioni tramite questionario deve essere concepita accuratamente: spesso si ha infatti un’unica occasione di reperire le informazioni necessarie. Per questa ragione spesso è auspicabile iniziare facendo un pilota con degli stakeholder interni.

• Innanzitutto bisogna definire gli obiettivi dell’indagine e i temi da investigare, così da capire qual è il target più appropriato per fornire le informazioni o il punto di vista necessario.
• È importante pensare sin dal principio a come reclutare i partecipanti attraverso i canali a disposizione e valutare quale sia un numero ragionevole di rispondenti per soddisfare gli obiettivi della ricerca.
• Bisogna quantificare il numero di potenziali rispondenti che ci si aspetta di raggiungere e quanti si pensa che effettivamente risponderanno. Per i questionari online agli utenti, si consiglia di indirizzare tra i 50-100 partecipanti, per avere un minimo ragionevole di risposte, considerando che almeno la metà potrebbe non rispondere.
• È necessario anche stabilire un piano di somministrazione, che chiarisca la data di erogazione, un eventuale contatto di sollecito e la data ultima entro cui ci si aspetta di terminare la raccolta dei dati, per passare poi all’analisi.

Progettare il questionario¶

Il questionario deve essere strutturato in modo da affrontare prima i temi più ampi e semplici, per poi approfondire i temi più complessi. Si suggerisce di fare prima uno scheletro in un documento di testo e consolidarlo, per poi passare alla creazione del vero e proprio modulo online. È bene riflettere sulla strategia migliore per estrapolare le informazioni che servono; ad esempio, nel porre le domande, bisogna contestualizzarle fornendo esempi o descrizioni e valutare attentamente quali siano le modalità e le opzioni di risposta più appropriate.

Una volta scelto lo strumento più adatto, è utile inserire, prima delle domande, un messaggio introduttivo per spiegare l’intento e la durata dell’indagine. È preferibile non superare le 5-6 domande per ciascuna sezione, in modo da non sovraccaricare il rispondente.

È necessario aggiungere anche una parte dedicata al consenso informato al trattamento dei dati, prestando particolare attenzione agli obblighi legati alla privacy, in special modo rispetto alla possibile richiesta di dati di contatto nelle conclusioni e dipendenti dallo strumento online individuato per la somministrazione del questionario. Nel dubbio, è bene parlarne con il responsabile della protezione dei dati della propria amministrazione.

Analizzare e sintetizzare i dati raccolti¶

Si possono analizzare i dati raccolti con tecniche quanti-qualitative e rielaborare le informazioni in maniera da rispondere alle domande di ricerca. Si possono sfruttare gli strumenti di rappresentazione di grafici integrate nella piattaforma che si sta utilizzando, o anche esportare un foglio di lavoro e utilizzare strumenti di visualizzazione dati più avanzati e personalizzabili. Vai al kit di Designers Italia dedicato ai Questionari online.

Le personas in ambito pubblico¶

L’identificazione e modellazione delle personas è particolarmente efficace quando focalizzata in maniera puntuale sul contesto d’uso che si sta esplorando. Infatti, questo strumento non si pone l’obiettivo di narrare personaggi completi a 360 gradi, ma piuttosto di sintetizzare i tratti chiave relativi all’ambito e alla tipologia di servizio per cui si sta progettando. In particolare, nell’ambito della Pubblica Amministrazione e dell’erogazione dei servizi al cittadino si delineano alcuni aspetti chiave da tenere in considerazione quando si applica questa tecnica:

• la progettazione dei servizi pubblici richiede un approccio non solo user-centred ma anche sistemico, perciò spesso ci si trova a definire i profili non solo degli utenti finali del servizio, ma di una varietà di attori coinvolti nella sua erogazione e fruizione. Per questo motivo questa tecnica può essere utilizzata anche per delineare i profili di operatori pubblici, enti e aziende;
• in generale quando si parla di profili utenti nell’ambito della progettazione per la trasformazione digitale dei servizi al cittadino, ci sono 3 dimensioni chiave da esplorare: il rapporto con il digitale, la conoscenza dell’ambito pubblico e la frequenza d’uso del servizio. Questi macro-temi sono rilevanti rispetto a tutti gli stakeholder;
• gli attori coinvolti nell’ecosistema di servizio sono di diverso tipo: cittadini, imprese, enti e operatori pubblici, quindi per ciascun gruppo si possono poi declinare i 3 macro-temi sopracitati, e identificare i diversi criteri che aiutano a caratterizzarli.

Definizione¶

Per usabilità si intende «il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza, soddisfazione in uno specifico contesto d’uso» (ISO 9241-210:2010). L’usabilità focalizza la dimensione funzionale dell’interazione tra un sistema (ad es. un sito web) e l’utente, in relazione a precisi obiettivi e contesti d’uso. Non è una caratteristica del sistema, ma una proprietà risultante (dall’interazione tra sistema e persona). In questo senso è fondamentale utilizzare un approccio user centered (centrato sull’utente) per cui la progettazione del sistema sia guidata dall’analisi e dalla conoscenza articolata dei bisogni, delle caratteristiche degli utilizzatori e dei contesti d’uso. Nella progettazione è necessario pensare a chi utilizzerà realmente il servizio, e il modello di riferimento del progettista deve coincidere con quello dell’effettivo utilizzatore.

L’aderenza in fase progettuale e implementativa ai criteri di usabilità consente al cittadino di:

• esercitare i propri diritti
• ridurre gli errori e aumentare la soddisfazione di fruizione

Inoltre l’usabilità consente alle PA di:

• evitare la produzione di servizi inadeguati

• aiutare i cittadini a trovare facilmente ciò che cercano sui siti

• aumentare la fiducia dei cittadini nei confronti dell’amministrazione

  Data l’importanza che l’usabilità riveste nell’interazione tra utente e applicazione web, è necessario riservare la massima attenzione alla progettazione orientata all’usabilità e alla relativa misurazione, mediante un processo di inclusione degli utenti sin dalla fase di progettazione dei servizi, secondo un modello centrato sugli utenti (user-centered).

Usabilità come costrutto misurabile¶

Efficacia, efficienza e soddisfazione dell’utente sono proprietà misurabili e osservabili attraverso questionari, interviste e scale di misurazione, una volta stabilite le tipologie di utenti e gli obiettivi che essi devono raggiungere. Gli standard definiscono come segue i fattori misurabili:

• l’efficacia: è il grado in cui una persona riesce a completare le operazioni richieste per raggiungere il proprio obiettivo in modo corretto e completo
• l’efficienza: corrisponde alla quantità di risorse che la persona spende nelle operazioni richieste per raggiungere un dato obiettivo
• la soddisfazione soggettiva: è la dimensione più complessa da valutare e da raggiungere, poiché riguarda il livello di gratificazione che l’esperienza d’uso offre. Un sistema può funzionare molto bene ma può non bastare a rendere l’interazione confortevole e piacevole. Rientrano in questa dimensione aspetti come l’estetica, la qualità relazionale

La misurazione del livello di usabilità dei siti web deve essere effettuata a partire dalla fase di prototipazione dell’interfaccia grafica.

Le statistiche d’uso di siti già online forniscono indicazioni utili, seppur parziali, sull’efficacia dei contenuti. È essenziale anche consentire agli utenti di poter inviare facilmente, e in via informale, commenti e opinioni sul sito dell’amministrazione.

Criteri di valutazione¶

Per garantire la fruibilità delle informazioni e contribuire a migliorare l’usabilità dei siti e delle applicazioni, le pubbliche amministrazioni sono tenute a rispettare i criteri qui elencati:

Percezione

Le informazioni e i comandi necessari per l’esecuzione delle attività devono essere sempre disponibili e percettibili.

Comprensibilità

Le informazioni e i comandi necessari per l’esecuzione delle attività devono essere facili da capire e da usare.

Operabilità

Le informazioni e i comandi devono consentire una scelta immediata delle azioni necessarie al raggiungimento dell’obiettivo.

Coerenza

I simboli, i messaggi e le azioni devono avere lo stesso significato in tutto il sito.

Tutela della salute

Il sito deve possedere caratteristiche idonee a salvaguardare il benessere psicofisico dell’utente.

Sicurezza

Il sito deve possedere caratteristiche idonee a fornire transazioni e dati affidabili, gestiti con adeguati livelli di sicurezza.

Trasparenza

Il sito deve comunicare all’utente lo stato, gli effetti delle azioni compiute e le informazioni necessarie per la corretta valutazione delle modifiche effettuate sul sito stesso.

Facilità di apprendimento

Il sito deve possedere caratteristiche di utilizzo di facile e rapido apprendimento.

Aiuto e documentazione

Le funzionalità di aiuto, quali le guide in linea e la documentazione sul funzionamento del sito devono essere di facile reperimento e collegate alle azioni svolte dall’utente.

Tolleranza agli errori

Il sito deve essere configurato in modo da prevenire gli errori; ove questi, comunque, si manifestino, occorre segnalarli chiaramente e indicare le azioni necessarie per porvi rimedio.

Protocollo eGLU LG per la realizzazione di test di usabilità¶

Il protocollo eGLU LG è distribuito con licenza Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). È stato realizzato dal gruppo di lavoro per la revisione del protocollo eGLU del Gruppo di Lavoro per l’Usabilità (GLU).

Il Protocollo eGLU LG, versione 2018.1, è uno strumento pensato per coloro che lavorano nella gestione dei siti istituzionali e tematici di tutte le pubbliche amministrazioni e che può essere utilmente adottato anche da chi, nelle PA; realizza servizi online, siti web, software.

Questo protocollo ha due obiettivi:

• descrivere una procedura per incoraggiare il coinvolgimento diretto e l’osservazione di utenti nella valutazione dei siti e dei servizi online. In tal modo si potranno raccogliere evidenze sulle criticità, senza necessariamente far ricorso a risorse esterne. Tali evidenze potranno dar luogo a modifiche immediate delle criticità più evidenti e a investimenti successivi in redesign e valutazioni effettuate tramite esperti.
• favorire una maggiore attenzione da parte degli operatori pubblici sul tema dell’usabilità, anche in riferimento a disposizioni esistenti (si vedano i criteri di valutazione di cui all’allegato B del Decreto Ministeriale 8 luglio 2005, in attuazione della Legge 9 gennaio 2004, n. 4., criteri illustrati in questa sezione delle Linee Guida).

Poiché nata dalla fusione delle procedure 2.1 (generalista) e M (mobile), la procedura eGLU LG, versione 2018.1, qui delineata è, nelle sue linee generali, indipendente dalla tecnologia e dal mezzo. Ciò significa che è pronta per essere applicata, eventualmente con minimi aggiustamenti, a una varietà di prodotti e servizi su diversi canali distributivi e con diverse tecnologie: siti web informativi, servizi online erogati attraverso tecnologie web, documenti cartacei e modulistica finalizzati alla comprensione e all’utilizzo da parte di un ampio pubblico, applicazioni multipiattaforma (applicazioni software che possono essere usate in un ambiente web-based da desktop e da tablet, o in concorso con un’apposita App), App specifiche per tablet o smartphone.

La procedura eGLU, di seguito descritta, per brevità fa più spesso riferimento ai siti. Ma può allo stesso modo essere adattata alla più ampia varietà di dispositivi, situazioni, canali e materiali.

La procedura di osservazione degli utenti si svolge con le seguenti modalità:

• il conduttore dell’osservazione stila dei compiti da sottoporre ad alcuni partecipanti. I compiti, chiamati task dagli esperti, possono riguardare, per esempio, la ricerca di specifiche informazioni, la compilazione di moduli online, lo scaricamento di documenti;
• alcuni utenti vengono selezionati e invitati a partecipare;
• si chiede a ciascun utente di eseguire i task assegnati. Durante l’osservazione non si pongono domande dirette, ma si osservano le persone interagire col sito e le eventuali difficoltà che incontrano. I task possono essere eseguiti con successo o meno. Al termine dell’esecuzione si usano dei questionari per raccogliere informazioni sul gradimento e sulla facilità d’uso percepita;
• sulla base dei dati raccolti si può avere un’idea dei punti di forza del sito e delle sue criticità. Questo consente di apportare da subito modifiche in base ai problemi riscontrati, di approfondire le criticità con test avanzati condotti da esperti o di confrontare fra loro le criticità di versioni successive del medesimo prodotto.

La procedura contempla l’uso di 10 allegati, disponibili nel kit Test di usabilità.

L’intera procedura, se condotta correttamente, può essere considerata un test minimo di usabilità, benché semplificato e di primo livello (esplorativo), e può essere svolta anche da non esperti.

Per raccogliere e analizzare dati in modo più approfondito o per svolgere test con obiettivi più complessi è opportuno, nonché necessario, rivolgersi a un esperto di usabilità.

Il protocollo eGLU LG, versione 2018.1, serve così anche a dare al personale delle PA una visione più realistica dei problemi di interazione presenti in un sito web o in un servizio online. Tale consapevolezza, fondata su una cultura centrata sull’utente, è il perno principale utile a riferire poi, a chi deve decidere del redesign, dove e come dovranno operare gli esperti.

Premessa¶

Questa guida ha l’obiettivo di aiutare chi si occupa a vario titolo di touchpoint (punti di contatto) e servizi digitali di una pubblica amministrazione a:

• comprendere il funzionamento di una piattaforma di web analytics
• capire come collezionare i principali indicatori di performance di un sito o servizio
• capire come interpretare determinati set di dati per trarre informazioni utili rispetto al comportamento degli utenti e il loro livello di soddisfazione
• comprendere quali azioni migliorative applicare ai contenuti, ai metadati e alla struttura del sito in base ai risultati dell’analisi dei dati
• comprendere come configurare una piattaforma di web analytics su uno o più siti
• comprendere come produrre e distribuire un report di analytics, per condividere i dati di utilizzo con i vari stakeholder e il team di lavoro interno
• comprendere come una lettura sistematica dei dati possa influenzare positivamente la comprensione dei comportamenti online degli utenti e consentire l’avvio di azioni migliorative dei servizi digitali

Introduzione¶

L’analisi delle performance di un ambiente digitale è un’attività cruciale per comprendere in che maniera touchpoint e servizi rispondono in maniera adeguata ai bisogni informativi e/o di servizio degli utenti.

Questa tipologia di analisi consente di rispondere, ad esempio, in modo puntuale alle seguenti domande:

• Quanti utenti visitano il sito/servizio, per quanto tempo e quali e quante pagine visitano?
• Quali sono le principali aree geografiche da cui provengono i visitatori del sito?
• Quali sono i contenuti più visitati dagli utenti in un dato intervallo di tempo?
• In quale momento della settimana o dell’anno il sito registra il maggiore o il minore numero di visite? Queste oscillazioni sono causate da un’eventuale stagionalità delle tematiche trattate o coincidono con la pubblicazione di nuovi contenuti?
• Quali sono i termini tramite cui gli utenti arrivano al sito mendiante un motore di ricerca? Rappresentano per la maggior parte il nome/dominio del sito oppure fanno riferimento a informazioni/servizi trattati al suo interno?
• Quali sono i principali termini di ricerca digitati nel motore di ricerca interno del sito, se presente?
• In che percentuale gli utenti visitano il sito da dispositivi mobili?

Le risposte a tali domande derivano dall’analisi continuativa di indicatori di performance che offrono ad esempio informazioni su quali siano volumi di traffico, il comportamento degli utenti, la qualità dei contenuti pubblicati e l’efficienza tecnologica del sito o del servizio nel suo complesso.

Metriche e dimensioni¶

I dati generati dalle piattaforme di web analytics sono il frutto di combinazioni eterogenee di metriche (dati quantitativi) e dimensioni (attributi qualitativi dei dati). È bene sottolineare che il numero reale dei visitatori conteggiati per un dato intervallo di tempo è soggetto a distorsioni — per eccesso o per difetto — dovute al fatto che il calcolo degli utenti in web analytics è basato su cookies e tende quindi a generare più o meno utenti unici al variare di determinate circostanze (accesso al sito da dispositivi diversi, browser diversi, cancellazione dei cookies). Di seguito una panoramica delle principali metriche e dimensioni utilizzate per l’analisi del traffico web. Si precisa che la nomenclatura di metriche e dimensioni può variare a seconda della piattaforma di raccolta utilizzata.

Analizzare le ricerche degli utenti¶

Le ricerche degli utenti sono quasi sempre il più ampio vettore di traffico verso i contenuti web. Per questa ragione, non soltanto è fondamentale fare in modo che le pagine di un sito siano “ottimizzate” per essere trovate dagli utenti attraverso i motori di ricerca, ma è altrettanto importante analizzare i dati di web analytics provenienti dalle ricerche interne ed esterne al sito per conoscere le performance dei singoli contenuti.

Di seguito i principali indicatori da tenere in considerazione quando si analizzano le ricerche degli utenti e le relative azioni migliorative che si possono intraprendere:

La segmentazione¶

La segmentazione in web analytics consiste nell’isolare dal traffico web aggregato sottoinsiemi di visite (o di utenti unici) che condividono attributi (qualitativi e/o quantitativi) comuni. La segmentazione del traffico in sottogruppi, ha l’obiettivo di far emergere il “valore” di uno specifico insieme di utenti rispetto al traffico aggregato - che è tipicamente quello più rappresentato nei report, ma meno rappresentativo delle specificità dei singoli gruppi di utenza.

Nelle principali piattaforme di web analytics la segmentazione può essere applicata utilizzando segmenti preimpostati (laddove disponibili) oppure creando dei segmenti di utenza ad hoc. Si possono creare segmenti sulla base di attributi demografici dei visitatori, delle tecnologie utilizzate per navigare il sito, del comportamento, della data di prima visita dell’utente, delle sorgenti di traffico, e così via.

Il traffico «segmentato» può essere poi quindi comparato nei rapporti e nelle configurazioni dashboard (pannelli dinamici di analisi dei dati).

Per maggiori dettagli sulla segmentazione utenti si rimanda al Kit Web Analytics.

Cosa fare per adempiere alla normativa sui cookie¶

Per approfondimenti si rimanda al sito del Garante della Privacy.

La reportistica¶

Un’analisi sistematica dei dati statistici di performance e soddisfazione utente è fondamentale per decidere quali azioni migliorative intraprendere su un servizio digitale.

È altrettanto fondamentale la creazione di una reportistica ad hoc che abbia la finalità di essere condivisa all’interno di un team di lavoro (o con altri stakeholder). In linea generale è possibile creare e inviare report customizzati direttamente dalle principali piattaforme di web analytics.

Per un approfondimento sul tema, si rimanda al Kit Web Analytics.

Strumenti di web analytics: Web Analytics Italia¶

In questa sezione puoi trovare informazioni e alcuni link di approfondimento che ti aiuteranno a comprendere come adottare uno strumento di web analytics per i tuoi siti e servizi digitali.

Esistono numerosi software open source per la raccolta e l’analisi dei dati di traffico di siti e servizi digitali, che è possibile utilizzare per ottenere informazioni statistiche relative all’uso di una soluzione digitale e nel rispetto della normativa vigente, quali ad esempio Matomo analytics e Plausible analytics.

A partire dalla prima metà del 2020, è disponibile inoltre gratuitamente una soluzione di web analytics open source dedicata alle pubbliche amministrazioni italiane, Web Analytics Italia (WAI).

Il servizio WAI si colloca nel contesto delle Linee guida di design per i siti internet e i servizi digitali della PA italiana, oltre che nel Piano Triennale per l’Informatica nella PA.

Nel paragrafo seguente ti proponiamo inoltre una serie di link di approfondimento per comprendere come installare/configurare le principali piattaforme di web analytics open source sopra menzionate.

Contenuti, persone e contesto¶

Progettare una buona architettura dell’informazione significa soddisfare i bisogni degli utenti, creando e organizzando l’informazione per dare senso alle cose, nel rispetto del contesto organizzativo e di fruizione dei servizi.

Definizione e organizzazione dei contenuti¶

Uno dei principi dell’architettura dell’informazione è tenere conto del contesto e delle funzioni delle organizzazioni e dei servizi che esprimono. Questo significa che è possibile definire, come vedremo, standard di architettura dell’informazione specifici per il mondo della Pubblica Amministrazione. In secondo luogo, sarà possibile avviare un’attività di modellazione più specifica, partendo da una segmentazione degli enti e delle funzioni ad esse associate. In pratica, l’organizzazione della conoscenza all’interno della Pubblica Amministrazione ha alcune regole generali che è bene conoscere e che devono essere utilizzate in ogni ambito; e alcune regole (standard) che si possono applicare all’interno di ambiti specifici. Per fare un esempio, è possibile definire uno standard per l’architettura dell’informazione dei Comuni italiani, senza che sia necessario affrontare il problema per ciascuno dei migliaia dei siti web dei Comuni italiani. L’utilizzo di standard nella definizione di contenuti, dati e nella loro classificazione è alla base di concetti come l’interoperabilità e in definitiva rappresenta la creazione di un linguaggio digitale comune alla Pubblica Amministrazione italiana. L’ architettura dell’informazione partecipa alla fase di progettazione e prototipazione di un sito o di un servizio digitale attraverso strumenti come il wireframe kit (che contiene modelli di content type e pattern di interazione) e il kit per la definizione dei sistemi di navigazione e dei modelli di contenuto di un sito

I content type (tipologie di contenuto)¶

In fase di progettazione, i contenuti digitali devono essere organizzati in diverse tipologie, o content type. Esempi di content type sono una scheda di presentazione di un servizio, un form (modulo) per inserire dati anagrafici, una notizia o una scheda di presentazione di un evento. Sulla base delle funzioni che deve svolgere un sito, è possibile definire una lista delle tipologie di contenuto. Vediamone alcuni.

Esempi di content type	Funzioni principali
Scheda unità organizzativa	Descrive una unità organizzativa come un ufficio o una funzione politica, definendone le caratteristiche, gli obiettivi e le persone che ne fanno parte
Scheda luogo	Descrive un luogo rilevante per la Pubblica Amministrazione e gli utenti a cui si rivolge, definendone le coordinate geografiche e altri aspetti come le modalità di accesso da parte dei cittadini
Evento	Descrive un evento, definendone le caratteristiche, il luogo e le date e dando la possibilità di rappresentarlo attraverso una mappa e un calendario
Notizia	Descrive un contenuto di tipo informativo legato all’attualità
Scheda servizio	Descrive il servizio e fa capire all’utente come utilizzarlo, nella sua forma tradizionale e/o digitale

In una fase iniziale di progettazione, per ciascuno dei content type occorre riportare le caratteristiche essenziali ad avviare il processo di prototipazione. Successivamente si procederà a definire i dettagli della struttura dati e a una progressiva evoluzione del prototipo (comprensivo delle funzioni di front-end e di back-end) come riportato in figura.

I sistemi di navigazione¶

Un sito web presenta abitualmente un sistema di navigazione principale (menù di navigazione), che a sua volta può essere organizzato in uno o più livelli e che genera il menù di navigazione di un sito web. La struttura di navigazione può essere riprodotta anche attraverso la creazione di breadcrumb (link di navigazione), normalmente posizionati nella parte alta di ciascuna delle pagine web di cui si compone il sito. Ad esempio, nella pagina dedicata all’ufficio anagrafe di un sito web di un Comune potremmo trovare il link di navigazione Amministrazione/Uffici/Ufficio anagrafe.

La struttura di navigazione di base aiuta l’utente ad orientarsi e a comprendere rapidamente l’organizzazione delle informazioni presenti sul sito.

Accanto al sistema di navigazione primario, esistono diversi altri sistemi per connettere contenuti, costruire percorsi di navigazione e permettere agli utenti di raggiungere i propri scopi. Ad esempio, in un sito che ha una sezione dedicata agli eventi, questi vengono classificati definendo le coordinate geografiche e il periodo temporale, e questo rende possibile offrire una rappresentazione mediante mappe e calendari. Allo stesso modo, se si definisce un vocabolario controllato di argomenti che interessano agli utenti di un Comune (es. casa) e si classificano tutti i contenuti usando questi argomenti, sarà possibile generare liste di contenuti che condividono questa proprietà e, in definitiva, facilitare la navigazione e la ricerca per gli utenti.

Pagina standard per il sito di un Comune che raggruppa tutti i contenuti del sito che condividono l’etichetta “Cantieri”

Un altro caso tipico di relazione tra contenuti è quella relativa ai flussi di fruizione di un servizio web. Prendiamo ad esempio il servizio che abilita il pagamento di una multa: attraverso una serie di passaggi sequenziali l’utente sarà condotto dal login a un documento (la multa) e da qui a un form che consente l’inserimento dei dati di pagamento.

Rappresentazione del flusso di fruizione di un servizio digitale: percorso di navigazione e relazioni tra contenuti.

Home page, pagine di ricerca e aree personali¶

Home page, pagine di ricerca e aree personali sono tre punti di ingresso chiave per comprendere e accedere al sistema. La home page di un sito ha la funzione di punto di ingresso, ed è tipicamente il luogo in cui l’utente ottiene una visione chiara della missione di un sito e delle sue funzioni chiave. Un modo semplice per organizzare la home page è definire una struttura coerente rispetto al sistema di navigazione principale, per esempio attraverso un layout (impostazione e disposizione dei contenuti di una pagina) a fasce.

Header

Apertura (descrive la funzione principale del sito, o “missione”)

Sezione 1 Riporta contenuti rilevanti contenuti nella sezione e consente accesso agli altri

Sezione 2 Riporta contenuti rilevanti contenuti nella sezione e consente accesso agli altri

Sezione 3 Riporta contenuti rilevanti contenuti nella sezione e consente accesso agli altri

…

Footer

Modello di home page di un sito web organizzato in quattro sezioni principali e prototipo della home page di un sito scolastico che segue questo approccio

I siti web che offrono servizi digitali ai cittadini mettono a disposizione un’area personale dell’utente a cui si accede mediante identità digitale e che possiede un proprio sistema di navigazione contestuale. In termini generali, l’area personale serve a gestire l’interazione di un utente con il sistema. Un modo semplice per organizzare un’area personale è prevedere un’area messaggi, un’area che mostra la lista delle procedure in corso dei servizi attivati e un’area destinata ad archiviare l’esito delle azioni compiute in passato (es. lista dei pagamenti, dei documenti ricevuti, delle iscrizioni fatte).

messaggi

Servizi disponibili in corso di attivazione attivi

Documenti e pagamenti lista pagamenti lista documenti e certificati ottenuti

Il motore di ricerca ha il compito di fornire liste di risultati corrispondenti alle ricerche formulate dall’utente cercando tra i testi del sito e/o utilizzando i sistemi di classificazione (come ad esempio categorie e tag) del sistema.

Partendo dal testo che l’utente ha iniziato a generare, la funzione di autocompletamento permette di indirizzare l’utente, suggerendo possibili ricerche. Il filtering (funzionalità di filtraggio) è il processo di raggruppamento dei contenuti di un sito in sottoinsiemi più piccoli, lavorando su una o più dimensioni semantiche contemporaneamente (filtri multipli). Se abbiamo ben strutturato i contenuti, saremo in grado di proporre all’utente la possibilità di usare dei filtri (per categorie, per tipologia di contenuto, per autore, per data…) per raffinare progressivamente la ricerca e raggiungere il risultato. I sistemi di filtering possono svolgere anche la funzione di un sistema di navigazione, aiutando l’utente a prendere consapevolezza dell’ambiente informativo in cui si muove, di ciò che può trovare e di quali sono le migliori strategie per trovarlo.

Il sorting (ordinamento) è invece il criterio secondo il quale i risultati di ricerca vengono ordinati. Per esempio, un utente che intende trovare dei bandi pubblici potrebbe ricercare un argomento specifico e successivamente voler ordinare i risultati sulla base della data, in modo da poter vedere tra i primi risultati quelli più recenti.

Ontologie e standard¶

L’emergere del web come ambiente aperto di comunicazione e condivisione di informazioni ha favorito la nascita di un approccio alla modellazione dell’informazione più astratto rispetto allo specifico sistema (o punto di contatto con l’utente) che si sta progettando. Pensare ai contenuti come indipendenti dalla piattaforma che li ospita permette di renderli disponibili, per esempio attraverso API (Application Programming Interface), per l’utilizzo da parte di altri o per la progettazione di altri punti di contatto con il cittadino (per esempio una app) utilizzando quanto previsto nelle linee guida relative alla interoperabilità.

Per questo motivo è bene costruire content type e sistemi di classificazione sulla base di strutture formali di rappresentazione della realtà più astratte, che possiamo esprimere in termini di ontologie e di vocabolari controllati. Facciamo un esempio: un sito della Pubblica Amministrazione prevede normalmente content type per definire un ufficio (es. Ufficio anagrafe), un luogo (es. Palazzo Chigi) o un ruolo (es. direttore dipartimento). Queste informazioni possono essere modellate utilizzando le ontologie relative a persone, organizzazioni e luoghi ( vedi alcune ontologie già disponibili). L’ eventuale informazione relativa a un titolo di studio di una persona che lavora per la Pubblica Amministrazione può essere espressa attraverso un vocabolario controllato, e anche in questo caso ne esiste già uno.

I fattori on-page¶

Le parole chiave¶

La scelta di termini chiave più strategici e salienti rispetto ai contenuti pubblicati è uno fra i fattori che concorrono al buon posizionamento di un sito fra i risultati dei motori di ricerca.

Il lavoro di identificazione dei termini chiave o keyword più idonei a rappresentare i contenuti di un touchpoint o servizio digitale è un lavoro iterativo che deve tenere conto di:

• quali sono le parole che meglio potrebbero descrivere le informazioni presenti nel sito
• quali sono i loro volumi di ricerca
• in che maniera i concetti espressi nel sito potrebbero potenzialmente essere cercati dagli utenti sui motori di ricerca

Di seguito alcuni metodi per identificare set di keyword salienti:

Google suggest

Google ricerche correlate

• Google Trends
• Ubersuggest
• Adwords keywordplanner

I fattori off-page¶

Strumenti di diagnostica SEO: Search Console¶

Search Console è una risorsa online che consente di monitorare, gestire e ottimizzare la presenza di un sito o di un’applicazione mobile nei risultati di ricerca Google.

Search Console consente ad esempio di ottenere indicazioni sull’aspetto di un sito web nei risultati di ricerca Google o informazioni rispetto al traffico di ricerca; permette di verificare lo stato di indicizzazione delle pagine così come di monitorare e correggere problemi di varia natura legati al sito.

Con Search Console è possibile:

• verificare lo stato di indicizzazione dei contenuti del sito
• verificare lo stato della scansione dei crawler di Google sulle pagine del sito ed eventuali errori
• testare i file robots.txt
• testare la sitemap del sito, se presente
• gestire i parametri URL durante la scansione dei crawler
• rimuovere temporaneamente le URL di un sito dai risultati di ricerca
• informare Google rispetto al cambiamento di dominio di un sito
• informare Google di un eventuale passaggio del sito da protocollo http a https
• sapere per quali termini chiave (query) è stato visualizzato il sito nei risultati di ricerca Google
• conoscere i backlinks del sito e relativi anchor
• monitorare i link interni
• monitorare il corretto funzionamento del tag hreflang nel caso di siti multilingua
• monitorare e correggere i problemi di usabilità del sito su dispositivi mobili
• verificare la corretta implementazione di eventuali dati strutturati e schede informative (rich cards)
• rilevare criticità nell’HTML per favorire e migliorare l’esperienza utente sul sito
• rilevare e correggere eventuali criticità correlate alle pagine AMP (accelerated mobile pages)
• monitorare e risolvere i problemi di malware o spam per tenere pulito il tuo sito

Scrivere per le persone¶

Un linguaggio semplice è un ingrediente indispensabile per rendere siti e servizi della della Pubblica Amministrazione più efficaci e inclusivi

Ecco alcuni degli obiettivi da porsi quando si scrive per i cittadini:

• scrivi documenti semplici e lineari, che tengano conto in primis dei bisogni del lettore
• usa un linguaggio semplice e chiaro, seguendo le indicazioni della Guida al linguaggio della Pubblica Amministrazione su stile, tono di voce, uso delle parole
• organizza contenuti e documenti in modo che siano facili da trovare durante la navigazione
• presta particolare attenzione ai testi delle interfacce utente (definiti in gergo microcopy): la qualità e la pertinenza di label (etichette di navigazione), call to action (inviti all’azione) e altri testi che accompagnano e spiegano le interfacce grafiche, come ad esempio i tooltip (messaggi a comparsa) o i testi che spiegano i contenuti da inserire all’interno di un modulo.

Prima di creare un contenuto, devi avere ben chiaro:

• chi sono gli utenti a cui ti rivolgi;
• qual è lo scopo della loro visita, ovvero qual è il bisogno a cui il tuo contenuto deve rispondere.

Per individuare chi sono i tuoi utenti target (o categorie di utenti) e quali sono i loro bisogni, puoi utilizzare strumenti di user research, come ad esempio:

• sessioni partecipative con gli utenti (puoi usare il kit per le interviste utenti);
• i dati di web analytics (puoi usare il kit Web analytics);
• gli A/B test e i test di usabilità (puoi usare il kit test usabilità).

Puoi utilizzare le informazioni che raccogli per costruire delle personas, ovvero dei profili rappresentativi di categorie di utenti del tuo sito o servizio, e ipotizzare delle *user journey*, cioè delle rappresentazioni sintetiche delle fasi che compongono l’interazione dell’utente con un servizio.

Definire chi sono gli utenti e quali sono i loro bisogni è necessario in tutte le fasi in cui lavori al contenuto, ovvero:

• la progettazione;
• la scrittura;
• la gestione.

Contenuti efficaci dovrebbero essere immediatamente comprensibili e fruibili dagli utenti, a prescindere dall’età, le competenze e le abilità.

Utilizza strumenti, metodi di lavoro e modelli presenti nel kit di Designers Italia dedicato ai contenuti e al linguaggio

Progettare i contenuti¶

La fase di progettazione dei contenuti contribuisce a modellare l’ambiente cognitivo nel quale gli utenti si muoveranno alla ricerca di informazioni.

Il linguaggio infatti:

• dà forma all’ecosistema di informazioni dentro cui l’utente si muove (es. il nome delle voci del menu di navigazione e dei filtri di una sezione di ricerca);
• guida l’utente che deve fare un’azione fornendogli le informazioni di cui ha bisogno (es. la scheda e/o guida introduttiva ad un servizio);
• contribuisce, come parte dell’interfaccia utente, a dare forma al servizio (es. i testi che accompagnano l’utente che sta compilando un form on line);
• è esso stesso un elemento chiave del servizio (es. Il documento “pagella” che viene letto da un genitore nel sito di una scuola).

Il punto di partenza per avviare il lavoro di progettazione dei contenuti può essere un workshop dedicato al linguaggio e ai contenuti (in cui coinvolgere stakeholder e utenti del servizio) e in particolare la realizzazione di una mappatura dei bisogni informativi dell’utente.

Le priorità sono le seguenti:

• di cosa hanno bisogno le persone/gli utenti?
• quali sono i contenuti e le informazioni, da mettere in rilievo?
• che parole usano le persone per chiamare un servizio? che nome dare dunque ai contenuti e ai servizi?
• che nome dare a contenuti e servizi?

Per dare risposta a questa domande devi entrare nel processo di prototipazione, dove il servizio prende forma (o viene ri-progettato). La progettazione di un servizio beneficia della presenza di un design system di riferimento ovvero regole e componenti standard fanno sì che in fase di creazione di un nuovo servizio non sia necessario reinventare ogni volta la ruota.

Tra questi rientrano anche una serie di design pattern (modelli di progettazione), ossia veri e propri modelli che offrono indicazioni su come strutturare e organizzare i contenuti (content type e content pattern).

Scrivere e riscrivere¶

Gestire i contenuti¶

Gestire i contenuti significa tenere aggiornati e migliorare i propri contenuti per:

• rispondere in modo più efficace ai bisogni degli utenti;
• evitare refusi, errori o incongruenze;
• rispondere a nuovi bisogni informativi di cui non si era tenuto conto;
• gestire i processi di pubblicazione ed evitare le duplicazioni.

In genere questa attività richiede:

• la capacità di tenere un inventario di contenuti;
• la capacità di organizzare un processo di produzione di nuovi contenuti o di revisione di contenuti esistenti.

Una corretta gestione dei contenuti è fondamentale anche per la gestione di attività «straordinarie», come la migrazione dei contenuti ad un nuovo sito web, o la traduzione di una parte dei contenuti del proprio sito.

I documenti¶

Scrivere e pubblicare i documenti amministrativi e tecnici della Pubblica Amministrazione

La dematerializzazione dei documenti, ovvero l’uso di documenti elettronici al posto di quelli cartacei, è un punto cardine della trasformazione digitale della Pubblica Amministrazione. I documenti elettronici sono destinati a diventare il principale mezzo per veicolare informazioni, sia all’interno della PA che verso i cittadini.

I contenuti - e quindi anche i documenti - sono una delle componenti che concorrono a definire la qualità dell’esperienza di fruizione dei servizi digitali da parte del cittadino. Per questo motivo devono essere prodotti secondo criteri di semplicità, devono essere facili da trovare e da leggere e usare un linguaggio comprensibile per il cittadino. La qualità e la semplicità dei contenuti deve essere periodicamente verificata con attività di ricerca utente come A/B test e test di usabilità da parte degli utenti - cittadini, imprese e dipendenti della Pubblica Amministrazione.

I wireframe¶

Un wireframe è una illustrazione dell’interfaccia di una pagina, che ha come obiettivi:

• organizzare gli elementi interattivi e i blocchi di contenuto nello spazio disponibile sullo schermo;
• evidenziare le funzionalità disponibili;
• mostrare la sequenza di passaggi (Flusso di interazione) che l’utente deve fare per concludere un processo.

Date queste priorità, i wireframe non comprendono stili, colore o grafica, motivo per cui possono essere definiti prototipi a bassa definizione.

Figura 1 - Un esempio di “wireframe”, o prototipo a “bassa fedeltà”.

La finalità di condurre progressivamente l’utente al raggiungimento dei propri obiettivim - mettendo in evidenza le relazioni tra i contenuti e i flussi di interazione - è assolta in modo specifico dai prototipi interattivi: questi sono sequenze di wireframe, connessi fra loro attraverso link e menu di navigazione che permettono di simulare il percorso interattivo dell’utente.

Figura 2

Wireframe interattivo (user flow) per il rinnovo della carta di identità:

1. Entro sul sito dedicato al rinnovo della carta d’identità
2. Seleziono la richiesta di rinnovo
3. Seleziono il Comune di appartenenza
4. Scelgo una data e ora tra quelle disponibili nel calendario
5. Ricevo conferma della prenotazione dell’appuntamento

La prototipazione attraverso wireframe fa largo utilizzo di pattern, ovvero di modelli di rappresentazione dei contenuti e forme di interazione standard nel mondo web.

Il kit Prototipazione¶

Il kit Prototipazione di Designers Italia, offre una serie di pattern che definiscono alcuni modelli di contenuto e forme di interazione tipiche dei siti e servizi della Pubblica amministrazione italiana e che facilitano il processo di prototipazione di un servizio, offrendo una solida base da cui partire. Esempi di pattern sono il content type “scheda servizio”, che definisce il modello di presentazione di un servizio pubblico, oppure le modalità di interrogazione di un motore di ricerca.

Figura 3 - Tipi di content type presenti nel kit Prototipazione

Figura 4 - Pattern di ricerca: user flow

I modelli di pagina e di interazione sono costruiti attraverso una libreria di componenti rappresentati da pulsanti, campi di input, blocchi di testo, ecc. I componenti sono “i mattoncini” attraverso cui si costruiscono le interfacce, gli elementi base della grammatica che regola l’interazione tra l’utente e il sistema.

Figura 5 - Un esempio di composizione dei componenti del kit Prototipazione per creare o adattare un content type alle esigenze del prototipo. Il software scelto per costruire il Wireframe Kit è Sketch , uno strumento che permette la gestione dinamica dei simboli e la condivisione della libreria in modo trasversale a tutti i file su cui si intende lavorare. Sketch permette di cambiare le caratteristiche dei singoli elementi e personalizzarli in modo rapido e intuitivo. Alternativamente, è possibile importare il file Sketch in altri programmi di prototipazione, come Adobe XD , Studio , o Figma .

Nella risorsa kit wireframe all’interno del kit dedicato alla prototipazione, il focus è sulle tipologie di componenti e non sulle loro caratteristiche specifiche, che saranno oggetto di definizione nella successiva fase di prototipazione ad alta fedeltà.

Per costruire un wireframe si possono usare diversi metodi: oltre ai numerosi software specifici presenti sul mercato, da cui utilizzare la libreria di Designers Italia, è possibile realizzarli anche in modo analogico, facendo semplici disegni o utilizzando il kit per i wireframe di carta. Per progettare la sequenza delle schermate di un sito o di una app utilizzando il queste risorse, sarà quindi sufficiente scegliere e assemblare i componenti e i pattern di cui il kit è composto.

Il kit è realizzato con il software Sketch, ma può essere esportato e utilizzato con altri software di prototipazione; è pubblicato su Github, una piattaforma che permette di visionare tutte le fasi di progettazione e sviluppo grazie al controllo di versione.

Una volta costruito, testato e migliorato il prototipo a bassa fedeltà, si può passare quindi alla realizzazione di un prototipo ad alta fedeltà per agevolare la comprensione e la condivisione del progetto, realizzare test di usabilità e facilitare l’avvio della fase di sviluppo.

A supporto della realizzazione del prototipo ad alta fedeltà, è possibile utilizzare le seguenti risorse:

• la sezione del manuale operativo di design relativa alla progettazione dell’interfaccia utente e all’architettura dell’informazione;
• il kit Progettazione interfaccia di Designers Italia, un set di componenti visive già pronte per assemblare l’interfaccia di un sito o di un’app;
• la sezione del manuale operativo relativa al content design e il kit Contenuti e linguaggio.

Definizione¶

Per accessibilità si intende la capacità dei sistemi informatici, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, dal maggior numero possibile di persone, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari.

Nessun utente deve essere discriminato e deve quindi poter accedere alle informazioni e ai servizi digitali erogati dalla Pubblica amministrazione.

Principi per l’accessibilità¶

L’accessibilità è caratterizzata da quattro solidi principi:

• percepibile
• utilizzabile
• comprensibile
• robusto

Sono quindi conformi i servizi realizzati tramite sistemi informatici, inclusi i siti web e le applicazioni mobili, che presentano le caratteristiche di accessibilità al contenuto e fruibilità delle informazioni.

Linee guida e criteri di successo¶

Le linee guida sull’accessibilità degli strumenti informatici riportano quanto descritto nell’articolo 11 della legge n. 4/2004 e referenziano la norma UNI EN 301549:2018 che stabilisce uno standard europeo per garantire il rispetto dei principi e dei requisiti di accessibilità per prodotti e servizi ICT, quali:

• hardware
• web
• documenti non web
• software
• applicazioni Mobili
• documentazione e servizi di supporto
• postazioni di lavoro a disposizione del dipendente con disabilità

La norma armonizzata riflette lo standard W3C Web Content Accessibility Guidelines (WCAG) 2.1

Come rilasciare una dichiarazione di accessibilità¶

Le pubbliche amministrazioni hanno l’obbligo di pubblicare una dichiarazione di accessibilità per ciascun sito e applicazione mobile. A tale scopo, l’Agenzia per l’Italia Digitale ha predisposto una procedura online conforme all’Allegato 1 delle Linee Guida.

Le informazioni presenti nella dichiarazione devono essere ricavate da:

• un’autovalutazione effettuata direttamente dal soggetto erogatore;
• una valutazione effettuata da terzi;
• una valutazione effettuata con il “Modello di autovalutazione”, Allegato 2 delle Linee Guida.

Il Responsabile della Transizione Digitale del soggetto erogatore, riceve il link che deve essere esposto con la dicitura “Dichiarazione di accessibilità”:

• nel footer, per quanto riguarda i siti web;
• nella sezione dedicata alle informazioni generali riportate nello store, per quanto riguarda l’applicazione mobile.

L’accesso alla piattaforma è possibile solo se la mail istituzionale del Responsabile della Transizione Digitale è correttamente indicizzata sul catalogo IPA.

Meccanismo di feedback e procedura di attuazione¶

Le pubbliche amministrazioni devono rendere disponibile un meccanismo che consenta a chiunque di segnalare i problemi di accessibilità e richiedere un intervento tempestivo da parte dell’amministrazione.

In caso di assenza del meccanismo di feedback, di soluzione insoddisfacente o mancata risposta entro 30 giorni dalla segnalazione, l’utente può far ricorso al Difensore Civico per il Digitale tramite la procedura di attuazione presente sulla dichiarazione pubblicata dall’ente erogatore.

Obiettivi accessibilità¶

Entro il 31 marzo di ogni anno le PA devono pubblicare nei propri siti web gli “Obiettivi di accessibilità per l’anno corrente”. Per tale scopo, l’Agenzia per l’Italia Digitale ha predisposto un’applicazione online per ricevere dalle amministrazioni gli obiettivi.

Gli obiettivi vanno pubblicati sui siti delle PA nella sezione “amministrazione trasparente/Altri contenuti/Accessibilità e Catalogo di dati, metadati e banche dati”.

Normativa¶

La normativa completa e aggiornata sull’accessibilità è disponibile sul sito dell’Agenzia per l’Italia digitale.

FAQ¶

Sono disponibili ulteriori approfondimenti sull’accessibilità nella sezione FAQ del sito dell’Agenzia per l’Italia digitale.

Gli obiettivi¶

Lo scopo dell’interfaccia di un sito o servizio è quello di aiutare l’utente a raggiungere ciò che cerca in modo naturale e immediato, in modo trasparente. Per questo, la coerenza dei vari elementi che la compongono tra le varie sezioni, pagine e servizi, anche su diversi dispositivi, è un elemento fondante per la creazione di prodotti efficaci e semplici da usare.

Punti cardine di una buona interfaccia sono l’inclusività, l’accessibilità e la tolleranza agli errori: deve essere comprensibile e usabile da tutti i cittadini, non ci si deve aspettare che l’utente abbia sempre chiaro ciò che vuole, sappia comprendere appieno eventuali istruzioni, o che sia in grado di decifrare colori, simboli ed elementi non familiari. In questo ambito, il designer ha lo scopo di progettare interfacce che sappiano accompagnare il cittadino nel percorso di ricerca e utilizzo del sito o servizio, prevenendo e correggendo eventuali errori e tenendo in considerazione tutte le buone pratiche e le regole che permettono di rispondere a modalità di utilizzo da parte di utenti ad esempio con disabilità, con difficoltà di comprensione tecnologica, o che utilizzano dispositivi con limitate capacità o scarsa connettività.

In questa parte del manuale operativo di design ci concentriamo sugli aspetti più classici della costruzione dell’interfaccia, partendo da un prototipo grezzo per arrivare a un sito o a una app funzionante e pronta per essere usata da chiunque.

Da dove si parte¶

Il livello di dettaglio più basso viene definito attraverso la creazione di un prototipo (in inglese wireframe) dell’interfaccia utente, definendo una struttura di massima dell’esperienza utente durante il suo percorso nella ricerca e utilizzo del servizio.

La realizzazione di un prototipo a bassa fedeltà (in inglese low fidelity, abbr. low-fi) per un’interfaccia utente definisce:

• l’organizzazione degli elementi, interattivi e non, nello spazio della pagina;
• la collocazione dei blocchi di contenuto;
• la sequenza di passaggi che un utente deve compiere per concludere un’attività (flussi di interazione o user flows);
• le modalità di interazione o comportamento dell’utente con il prodotto.

Tutto questo viene progettato con attenzione agli aspetti di architettura dell’informazione e dei flussi di interazione, senza preoccuparsi in questa fase delle soluzioni di dettaglio che definiscono le interfacce dal punto di vista grafico. Durante questa attività di base infatti viene concretizzata la struttura portante dell’esperienza utente e le soluzioni ipotizzate in fase di ricerca.

Questa scelta assicura che l’attenzione sia incentrata sugli aspetti fondamentali della navigazione e della struttura, nel pieno rispetto dei requisiti di progetto e dei bisogni dei cittadini. In questo modo si incoraggia la discussione e il confronto sulle soluzioni proposte.

Altre informazioni sul processo di prototipazione e tutti i riferimenti al kit prototipazione di Designers Italia sono disponibili nel paragrafo precedente dedicato alla prototipazione. Di seguito affronteremo i principi e le indicazioni operative: come passare dal prototipo wireframe a realizzare il progetto vero e proprio, e di seguito lo sviluppo dell’interfaccia utente.

L’esperienza come identità¶

Il progetto dell’interfaccia utente serve a presentare informazioni e comportamenti in modo comprensibile e semplice, tenendo presente non soltanto l’aspetto estetico, ma soprattutto i bisogni dell’utente, ovvero quanto la rappresentazione grafica dei contenuti, degli elementi interattivi e delle modalità di interazione facilitino una risposta a questi bisogni, risultando in un’esperienza soddisfacente.

Tutto ciò che riguarda lo stile è soltanto una parte del prodotto. Sebbene la comunicazione visiva attiri giudizi soggettivi, le tematiche legate al gusto estetico non sono così fondamentali come si possa pensare, certamente forniscono degli indizi o creano delle emozioni, ma non sono sufficienti. Una chiara rappresentazione degli obiettivi dell’esperienza utente (user experience) sono invece le fondamenta imprescindibili di tutti quegli aspetti di interfaccia utente che fanno parte dell’identità del prodotto e che generano una risposta emozionale positiva.

L’interfaccia utente (user interface, in breve UI) è una conversazione tra l’utente e il prodotto, attraverso delle azioni che servono a far raggiungere degli obiettivi di progetto che rispondono ai bisogni dell’utente, il cittadino. La logica da utilizzare come metro di misura della bontà del progetto può essere quella di una conversazione tra due soggetti, il cittadino e il prodotto: la comunicazione è focalizzata sull’obiettivo da raggiungere, e deve essere efficace per ottenere una comprensione chiara, un’interazione semplice ed efficace, e una soddisfazione ottimale dei bisogni.

Come si usa il Design UI Kit¶

Il Design UI kit è realizzato seguendo un sistema a componenti, che può essere paragonato a un set di pezzi componibili, dimensionati in modo da poter essere assemblati e adattati.

Costruzione di un’interfaccia attraverso i principi di composizione.

Ogni componente ha un numero di proprietà ad esempio la forma e il colore che possono essere combinati o variati per comunicare un diverso significato. Si pensi ad esempio ad un pulsante: esso può essere, “primario” o “secondario”, in stato di “riposo” o “premuto”. Il modo in cui sono applicate queste proprietà o variazioni darà un significato differente al componente.

Variazioni di un’interfaccia.

Il software scelto per costruire lo UI Kit è Sketch.

La scelta di questo software è legata ad alcune caratteristiche fondamentali. In primo luogo, è possibile gestire la libreria di componenti in modo trasversale a tutti i file che si vogliono creare ed aggiornarla qualora vengano modificati i componenti. Inoltre, mettendo a disposizione una piattaforma di sviluppo collaborativo, permette di installare innumerevoli estensioni (plugin) a seconda delle esigenze di design.

Inoltre è possibile importare il file, e usarlo come libreria, in questo formato nei programmi per la prototipazione dell’interfaccia utente più diffusi, come Adobe XD, Studio, o Figma.

La tipografia¶

La principale famiglia di font usata nel design UI Kit è il Titillium Web. È stato scelto come carattere tipografico principale per i contenuti web, grazie all’altezza della x (x-height) ampia, alla struttura lineare e alla flessibilità d’uso essendo composto da 11 stili.

Il Titillium Web è stato realizzato come progetto didattico dagli studenti del corso in Type Design dell’Accademia di Belle Arti di Urbino.

Il font Titillium Web.

Un carattere tipografico secondario è il Roboto Mono, la variante monospaziata della famiglia Roboto. È stato introdotto per la chiarezza e leggibilità dei numeri pertanto è adatto ad essere utilizzato per la rappresentazione di numeri, calcoli matematici, numeri in tabelle, codice di programmazione.

Il font Roboto Mono.

Un terzo carattere tipografico con grazie (o serif) è il Lora, introdotto per la sua leggibilità e nato espressamente per la lettura su display.

Il font Lora.

Tutti questi caratteri tipografici sono rilasciati con licenza SIL Open Font License e sono scaricabili da Google Fonts, una piattaforma di distribuzione gratuita di font per il web.

Corpo del testo¶

Le dimensioni dei caratteri non devono essere utilizzate senza una logica, devono seguire una scala tipografica precisa e studiata appositamente per creare una gerarchia visiva.

Un esempio di scala tipografica.

La gerarchia serve a dare struttura ai contenuti per gestire al meglio la trasmissione di un messaggio e il suo impatto, e quando non viene utilizzata la comunicazione diventa meno efficace.

Un esempio di gerarchia.

La dimensione del corpo del testo, con riferimento ad esempio al font Titillium Web, non può essere inferiore a 16px per uno schermo di dispositivo mobile, e inferiore a 18px per schermi più grandi.

Si possono utilizzare in casi particolari misure inferiori solo in caso di didascalie, note, o testi di secondaria importanza che per lunghezza o posizionamento nella pagina richiedano dimensioni ridotte.

Il colore¶

Il colore è un elemento essenziale nella definizione di un’interfaccia: può servire a differenziare, connettere, evidenziare, nascondere. Contribuisce alla gerarchia visiva e può essere un elemento di supporto alla comunicazione.

La palette estesa¶

La palette può essere estesa, creando variazioni in termini di saturazione e luminosità dei colori scelti come “colore base”, da cui si possono generare tinte, ombre e toni.

Le tinte e le ombre consistono nell’aggiunta rispettivamente di bianco e di nero al colore di base, che significa variare i valori di saturazione (in inglese saturation, indicata con “S”) e luminosità (in inglese brightness, indicata con “B”).

Per esempio, dato un colore base con i valori H 93; S 100; B 50, si possono sottrarre 10 gradi di luminosità (B) per ottenere le variazioni più scure o aggiungere 10 gradi di luminosità (B) per quelle più chiare fino a un massimo di 80 gradi di luminosità.

Per ottenere le cosiddette “tinte” basta aumentare progressivamente di 4 gradi la luminosità (B) a partire da un valore di 80 e contemporaneamente diminuire la saturazione (S) di 15 gradi.

Un esempio di variazioni partendo dal colore base H 93, S 100, B 50 verso le tinte (in alto) e verso le ombre (in basso)

Per ottenere diversi toni è necessario diminuire contemporaneamente i valori di saturazione e luminosità di 10 gradi.

La palette delle Amministrazioni Centrali¶

Un esempio di schema cromatico costruito sui principi appena descritti è la palette realizzata con il colore base “Blu Italia” (codice esadecimale #0066CC).

Pensata per un design semplice e minimalista, è una palette costituita dalle variazioni del colore base, più le tinte neutre. Sono presenti anche colori che possiamo definire “utility colors”, ossia colori da utilizzare per i messaggi di feedback all’utente (errori o notifiche) o per la realizzazione di elementi grafici.

La palette del design UI Kit è piuttosto estesa: comprende molte variazioni in tinte, toni e ombre del colore base (il “Blu Italia”), e dei colori secondari e neutri, permettendo così una certa flessibilità di uso.

Un esempio di palette monocromatica estesa.

Un esempio di palette monocromatica estesa di colori per elementi in evidenza.

Un esempio di palette monocromatica estesa di colori neutri.

Le Griglie¶

All’interno dello spazio a disposizione, l’organizzazione del contenuto deve essere strutturata seguendo un sistema di griglie responsivo, per mantenere una efficace esperienza utente trasversalmente ai dispositivi utilizzati.

La griglia rappresenta la struttura invisibile che permette di organizzare i contenuti della pagina. Una griglia di impaginazione consiste in colonne di testo e immagini, separate da spazi intercolonna e contornate da margini esterni.

Un esempio di griglia applicata a diverse risoluzioni dello schermo.

Le dimensioni delle colonne vanno adattate ai cambiamenti della viewport, considerata come le dimensioni misurate px dello spazio visibile sul dispositivo: ogni colonna occuperà una percentuale di spazio specifica a seconda che sia visualizzata su dispositivi più o meno grandi, siano computer desktop, tablet, o mobile.

La disposizione dei contenuti, responsiva, a seconda delle dimensioni dello schermo, garantisce che i testi siano leggibili e l’interazione utente (ad esempio, l’utilizzo di form e controlli dinamici) rimanga agevole anche sugli schermi più piccoli o a percentuali di ingrandimento importanti.

La griglia orizzontale contribuisce alla consistenza del design e a determinare il pattern di lettura di un sito web. In un sistema condiviso come quello di un UI kit, è necessario avere una metrica comune, per mantenere coerenza anche tra diversi siti appartenenti a enti o pubbliche amministrazioni diverse.

La griglia orizzontale è definita sulla baseline del testo, ossia la linea di base dove poggiano le lettere del font scelto. La baseline diventa una griglia a cui ancorare non solo il testo ma anche gli oggetti del layout. La baseline è di 8px ed è basata sul carattere Titillium Web con corpo di dimensioni 16px.

Avendo come base la misura di 8 px e i suoi multipli per calcolare dimensioni, padding e margini dei vari elementi, si può ottenere un ritmo verticale armonico.

Un esempio di componente con baseline a 8px.

Le icone¶

Quando si utilizzano delle icone è necessario assicurare una chiara comprensione del loro significato. Pertanto ogni icona dovrà essere associata a un tooltip (un suggerimento contestuale) o a un piccolo testo che ne chiarisca l’azione. La stessa icona non dovrà essere utilizzata per indicare azioni diverse all’interno dello stesso contesto.

Al fine di garantire una coerenza visiva si consiglia di utilizzare icone provenienti da un unico set grafico come, ad esempio, quelle disponibili gratuitamente su Font Awesome o il set di icone in formato SVG incluso in Bootstrap Italia.

I componenti¶

Di seguito sono presentati per ogni categoria degli esempi di componenti dello UI Kit. Per avere un quadro completo del kit è possibile collegarsi al progetto UI Kit su InVision.

Pulsanti¶

Lo UI Kit contiene quattro tipologie di pulsanti, dal primary al quaternary, ordinati secondo una funzione gerarchica.

Un esempio di componente “Bottone” nelle sue varianti, ordinate gerarchicamente.

Tutte le azioni principali sono rappresentate dal pulsante “Primary”, a cui può essere associata una o più azioni secondarie attraverso l’uso degli altri pulsanti a disposizione.

Un esempio d’uso del pulsante “Primary” e “Secondary”. Il primario mostra l’azione più importante della pagina, il secondario rappresenta un’azione alternativa.

Un esempio d’uso di un pulsante “Primary” associato ad un altro gerarchicamente inferiore. In questo caso è stato usato un “Quaternary” dello UI Kit: l’utente cosi è indirizzato sul pulsante primario in modo inequivocabile.

Navigazione¶

I componenti che possiamo inserire all’interno della navigazione sono molteplici. Ad esempio, si riportano il componente “Tab” e il “Menu” per dispositivi mobili.

Nel kit sono costruite diverse varianti di “Tab” (controlli grafici di navigazione), sia le varianti per diverse dimensioni di schermo, sia per fondo chiaro e fondo scuro, con solo testo o solo icone, oppure con la presenta di entrambi.

È possibile vedere in figura il componente Tab con un esempio di applicazione nell’ambito di filtri di ricerca.

Un esempio di componente “Tab” applicato a filtri di ricerca.

Il componente “Menu” mobile mostrato nella figura seguente ha alcune utili varianti: oltre alla differenza di sfondo, c’è anche una distinzione del menu in sezioni con o senza intestazione.

Un esempio di menu per dispositivi mobili.

Data display¶

Nella categoria Data Display sono inseriti i componenti che hanno come funzionalità quella di mostrare informazioni in modo organizzato oppure evidenziato, come ad esempio gli “accordion” (elementi a scomparsa) o i “callout” (elementi richiamabili/attivabili con un click).

Un esempio di componente “Callout”.

Data entry¶

Esempi di componenti appartenenti alla categoria Data entry sono i campi di tipo “Input” che si utilizzano per costruire form. Il componente è costruito in modo da poter attivare o disattivare i diversi status: normale, avvertimento, errore, successo.

L’etichetta del campo è indicativa di cosa va inserito. All’attivazione del campo con il cursore, l’etichetta si sposta in alto.

Nel componente si possono attivare oltre gli stati di feedback, gestendo colori e icone, anche i relativi messaggi.

Un esempio di form contenente componenti “Input”.

Alcune attività preliminari alla fase di sviluppo¶

Durante le fasi iniziali dello sviluppo, è di fondamentale importanza dedicare tempo e risorse ad alcune attività che avranno impatto sull’intero ciclo di vita del progetto:

• un’analisi di componenti (librerie, linguaggi, documentazione, ecc.) e best practices già utilizzate e validate dalla comunità, che possano semplificare e standardizzare la realizzazione del servizio.
• una revisione dei requisiti di progetto con lo scopo di ottenere un documento di specifiche condiviso, che possa anche definire ruoli e responsabilità.
• la selezione di una metodologia di sviluppo agile ottimale per il team di lavoro, con una conseguente definizione precisa delle procedure di comunicazione, di testing e di rilascio cadenzato.

Contestualmente a questa fase di kick-off (avvio) tecnico, è auspicabile avviare sin da subito una fase di prototipazione avanzata, con la quale iniziare a validare in modo iterativo ogni progresso raggiunto. Questo obiettivo può essere ottenuto sia con classici test manuali, che attraverso un’adeguata continuous integration che faccia uso di test automatici.

In caso di applicazioni ad alta interattività o di grandi dimensioni, anche la metodologia di lavoro è fondamentale: un approccio BDD per la stesura delle funzionalità, e l’uso della stessa metodologia per l’applicazione di test funzionali, unit test e test di integrazione, possono essere elementi chiave per il buon funzionamento e la solidità dell’applicazione.

Approccio¶

Web design responsivo¶

Il sito web deve sempre essere progettato e sviluppato con un approccio responsive, con l’obiettivo di fornire un’esperienza d’uso ottimale indipendentemente dalla risoluzione dello schermo e dal tipo di dispositivo utilizzato, consentendo in ogni situazione facilità di lettura e navigazione.

Al concetto di responsive web design vanno associate pratiche di semplificazione delle interfacce in ottica mobile first, e un’attenzione particolare nel fornire un’esperienza soddisfacente anche a coloro che hanno difficoltà visive o motorie.

Mobile first¶

L’approccio mobile first è, assieme all’utilizzo di progressive enhancement trattato di seguito, una pratica oramai consolidata: consiste nel valutare in prima istanza l’esperienza e le necessità per gli utilizzatori di dispositivi mobili, per poi arricchire di elementi e funzionalità la composizione della pagina mano a mano che la dimensione, le capacità computazionali e di rete del dispositivo aumentano.

Un esempio di approccio mobile first.

Nell’approccio mobile first si parte dall’essenziale.

La forzatura nella progettazione di un’applicazione con ridotte disponibilità di spazio, di interazione, di velocità di caricamento costringe a stabilire delle priorità e a fare delle scelte che risulteranno utili all’usabilità del prodotto.

Per progressive enhancement si intende una pratica fondante per lo sviluppo di una nuova applicazione web flessibile e a prova di future evoluzioni di dispositivi e browser, con la quale la lavorazione inizia da un nucleo solido e irrinunciabile di contenuti che vengono via via arricchiti man mano che il dispositivo utilizzato dal cittadino è più performante e all’avanguardia.

Al contrario, nel caso della graceful degradation, con la programmazione ci si fa carico di verificare che l’interfaccia, inizialmente pensata per i dispositivi più moderni, rimanga navigabile e permetta comunque di accedere alle sue funzioni fondamentali anche man mano che viene fruita attraverso tecnologie meno moderne o meno interattive. In questo secondo caso, si può pensare anche in termini di tolleranza del sito all’assenza di alcune funzionalità.

Come si potrà notare, si tratta in fondo di due risposte diverse alla stessa esigenza: rendere il contenuto accessibile su dispositivi con diverse caratteristiche e potenzialità.

Feature detection¶

Tecnicamente, l’approccio appena analizzato può essere realizzato attraverso la cosiddetta feature detection (riconoscimento delle caratteristiche): il sito web può rilevare una varietà di proprietà che caratterizzano il metodo di accesso al sito da parte del cittadino.

Nota

Si prega di non confondere la feature detection con la pratica, in passato molto diffusa, di utilizzare lo user-agent (ovvero quale browser e quale sistema operativo è connesso) per differenziare i servizi forniti. È infatti scoraggiato l’utilizzo di user-agent a tale scopo, in quanto impreciso e difficilmente mantenibile vista la quantità di diversi dispositivi in costante uscita sul mercato.

Attraverso una feature detection puntuale, è possibile sapere come indirizzare ogni aspetto dell’informazione che si vuole trasmettere. Tali caratteristiche possono spaziare dallo schermo utilizzato, in termini di dimensioni, risoluzione e densità dei pixel, fino ai metodi di input (mouse, touch-screen, tastiera, input vocale, ecc.); senza dimenticare le opzioni per la stampa e le tecnologie di ausilio per le persone con disabilità.

Ad esempio, attraverso semplici media-queries nel CSS (Cascading Style Sheet), è possibile mostrare versioni diverse di una pagina web a seconda che il cittadino stia utilizzando uno smartphone, un televisore o voglia stampare la pagina stessa con la propria stampante.

Sia CSS che Javascript permettono di rilevare la presenza puntuale di determinate caratteristiche nei dispositivi usati.

Javascript permette di analizzare qualsiasi funzionalità presente tra le Web API (Application Programming Interface), oltre a poter conoscere praticamente ogni dettaglio dell’utente che è collegato. Ad esempio, attraverso la geo-localizzazione di un dispositivo, è possibile fornire un servizio più preciso a seconda della posizione dell’utente nello spazio, a patto che tale feature sia disponibile nel dispositivo utilizzato. Ecco come si può realizzare:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // è possibile ottenere la posizione
  })
} else {
  // il browser non può fornire la posizione
}

CSS ha capacità più limitate, ma ad esempio attraverso la regola @support (in modo simile a quanto avviene per la più conosciuta regola @media), può verificare la corretta interpretazione di proprietà CSS da parte dei browser su cui viene usata. Ecco, ad esempio, come si può verificare attraverso il codice se il browser prevede il supporto della funzionalità CSS grid:

@supports not (display: grid) {
  .nome-classe {
    float: right;
  }
}

Esistono moltissimi strumenti per la feature detection e per le pratiche di polyfill e shim (librerie o frammenti di codice che riescono ad arginare le differenze tra i vari Browser nel pieno supporto di alcune funzionalità); di seguito ne sono riportate alcuni.

Il kit sviluppo interfaccia¶

Per avvicinarci alle esigenze di Pubbliche Amministrazioni e fornitori in questa fase, il progetto Designers Italia ha supportato la creazione di alcune librerie open source di ausilio per lo sviluppo di interfacce e il mantenimento di un design system solido e coerente: Bootstrap Italia React Kit oltre ad alcune risorse dedicati alla realizzazione dei modelli di siti per Comuni e scuole, sono oggi da considerare stabili e parte fondante del cosiddetto Design system italiano.

Bootstrap Italia è il principale punto di riferimento e il più moderno set di componenti disponibile per la costruzione di interfacce per servizi della PA, costruito sulle basi delle più recenti modifiche allo UI Kit e sulla libreria Bootstrap 4. Esso contiene codice HTML e CSS già pronto all’utilizzo per l’applicazione di tipografia, spaziature, design responsivo ed altri pattern di interfaccia conformi alle attuali Linee Guida. Bootstrap Italia recepisce le informazioni e i suggerimenti ricevuti e aggiorna il precedente Web Toolkit (oggi deprecato), secondo quanto rappresentato nella più recente versione dello UI Kit, semplificando lo sviluppo di un sito web rispondente a Linee guida, norme e obiettivi di usabilità e, in primis, che risponda in modo efficace ai bisogni dei cittadini.

• Bootstrap Italia

React kit contiene componenti programmati in linguaggio JavaScript, costruiti sulle basi di React, una libreria open source per sviluppo di applicazioni web e mobile ad alta interattività e scambio di dati.

• React Kit

Sulle fondamenta della libreria Bootstrap Italia, sono stati inoltre creati degli strumenti in ausilio alla realizzazione di siti di comuni e scuole, secondo i ripettivi modelli, frutto di una corposa fase di ricerca con diverse tipologie di utenti ed impiegati:

• Design dei siti web delle scuole italiane
• Design dei siti web dei comuni italiani

Tali strumenti si concretizzano sotto forma di un tema WordPress per il modello di siti delle scuole, e di template HTML nel caso del modello per siti dei i comuni. Questi strumenti, oltre a fornire codice già pronto all’uso, implementano in modo puntuale l’architettura dell’informazione, l’organizzazione della navigazione e dei contenuti previsti dai modelli.

• Sito di progetto per i siti dei comuni e template HTML
• Tema WordPress per le scuole

Bootstrap Italia¶

Bootstrap Italia contiene codice pronto all’uso, e descrive in dettaglio nella propria documentazione di progetto come iniziare ad utilizzare la libreria nel proprio sito, come aggiungere nuovi componenti, organizzare spazi e contenuti, ed altro ancora.

Permette di copiare frammenti di codice ed ottenere esattamente ciò che è mostrato nella documentazione del progetto, al cui interno sono presenti informazioni sull’utilizzo, componenti, esempi e progetti già realizzati grazie all’utilizzo della libreria.

Pulsanti¶

Ad esempio, per aggiungere un pulsante personalizzato è sufficiente aggiungere una classe CSS .btn, associandola a classi di tipo .btn-* per applicarne varianti di stile, dimensione, ed altro.

È possibile consultare tutti i dettagli nella pagina dedicata al componente “Bottone” nella documentazione.

Un esempio del componente “Bottone” nelle sue varianti.

Interfaccia a Tab (a schede)¶

Così come per i Bottoni, anche componenti più complessi come interfacce a “Tab” (o a “schede”), che mostrano il contenuto relativo al tab selezionato, possono essere realizzate semplicemente copiando il codice visibile nella documentazione di Bootstrap Italia, assicurandone così il funzionamento anche per utenti che usino la tastiera o dispositivi di comando vocale.

Un esempio del componente “Tab” nelle sue varianti.

Input Toggle¶

Bootstrap Italia recepisce anche scelte di design su componenti che non esistono nello standard web, come l’input di tipo “Toggle” (una sorta di “interruttore” a due stati), un componente che si sostituisce al più usato “Checkbox” rendendone l’aspetto più chiaro ed immediato.

Un esempio di componente “Toggle” nelle sue varianti.

<Button color="primary" size="sm" outline disabled>...</Button>

<it-button color="primary" size="sm" outline disabled>...</it-button>

Gli strumenti¶

I Web Kit sono disponibili a tutti sui repository dedicati:

• Bootstrap Italia
• React Kit
• Siti dei comuni: template HTML
• Siti delle scuole: tema WordPress

I kit seguono un processo di evoluzione e miglioramento continuo, e sono aggiornati secondo le regole del versionamento semantico, cioè una serie di convenzioni formali che sono d’ausilio a determinare la successione delle versioni di un software.

Puoi verificare lo stato di avanzamento e la roadmap di ogni kit all’interno del repo GitHub che lo ospita o su Designers Italia. Tutti i progetti della Pubblica Amministrazione sono tenuti a contribuire, sempre utilizzando GitHub, segnalando componenti mancanti, suggerendo errori e mettendo a disposizione di tutti i componenti già realizzati.

Strumenti di collaborazione¶

Per discussioni sul design è disponibile un canale dedicato su Forum Italia:

• Vai al canale dedicato alla User Interface

Per condividere informazioni, esperienze, fare domande in forma di chat, è possibile utilizzare la piattaforma Slack ufficiale di Developers Italia, dove è possibile trovare molti di coloro che stanno contribuendo attivamente ai progetti, nello specifico si segnalano i canali #design-dev #design-ui-kit e i canali relativi ai modelli scuole e Comuni:

• Vai allo Slack di Developers Italia

Per collaborare al design dei componenti o allo sviluppo di questi, alla manutenzione ordinaria o evolutiva, per portare il progetto verso altri framework di sviluppo interfaccia, o anche per dare un feedback su quanto già realizzato, è possibile utilizzare le issue di Github. Queste sono uno strumento di messaggistica molto simile alle email, che consiste in un messaggio pubblico su cui si può discutere con il resto del gruppo di lavoro.

Ogni repository ha la propria sezione dedicata alle Issues:

• Pagina delle issue del Wireframe Kit
• Pagina delle issue dello UI Kit
• Pagina delle issue del Web Toolkit
• Pagina delle issue di Bootstrap Italia
• Pagina delle issue del React Kit