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 Key Performance Indicators (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.

Principi¶

Un servizio pubblico digitale può essere considerato di qualità se è conforme ad alcuni principi standard, definiti a livello nazionale ed europeo:

Centralità dell’utente - Servizi progettati con il coinvolgimento dei cittadini e sulla base delle loro necessità, per rendere i servizi mobile-friendly e fruibili, anche in termini di assistenza online e possibilità di lasciare feedback.

Trasparenza - Informazioni chiare sulle responsabilità delle amministrazioni e sulle modalità di erogazione dei servizi, soprattutto in merito all’uso e al trattamento dei dati personali e alla spiegazione dei processi.

Accessibilità - Servizi facilmente utilizzabili e informazioni facili da trovare e comprendere da tutte le persone, a prescindere da possibili condizioni di disabilità che rendano necessario l’utilizzo di strumenti assistivi o di particolari configurazioni del sistema.

Once only - I siti e i servizi non dovrebbero chiedere agli utenti informazioni già fornite, ma riutilizzare internamente le informazioni già comunicate dall’utente attraverso l’integrazione con le piattaforme previste.

Open source - Mettere le soluzioni progettate e le relative documentazioni a disposizione della community con licenza aperta, così da poter essere riutilizzate da altre pubbliche amministrazioni con esigenze simili.

Digital first - Il servizio deve essere organizzato sfruttando il digitale come canale primario, sfruttando le piattaforme abilitanti disponibili, le infrastrutture IT esistenti e considerando altri punti di contatto con il cittadino in modo da abbracciare un’ottica multicanale.

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 (Legge 9 gennaio 2004, n. 4, art. 2).

Per «tecnologie assistive» si intendono gli strumenti e le soluzioni tecniche, hardware e software, che permettono alla persona con disabilità, superando o riducendo le condizioni di svantaggio, di accedere alle informazioni e ai servizi erogati dai sistemi informatici (Legge 9 gennaio 2004, n. 4, art. 2).

Quando si parla di accessibilità digitale, spesso si tende a considerarla come un requisito esclusivo per le persone con disabilità. Tuttavia, questa concezione è errata. L’accessibilità digitale riguarda tutti i cittadini, comprese, in particolare, le persone con disabilità.

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

Accessibilità by design¶

I servizi digitali devono essere progettati in modo da includere già dalle basi della progettazione i requisiti di accessibilità.

Progettare accessibile è necessario per sostanziare i principi generali legati all’inclusione e al design for all, che spesso, pur essendo teoricamente presenti, non trovano una reale applicazione esecutiva.

Le fasi di progettazione antecedenti allo sviluppo possono e devono quindi includere le considerazioni e le strategie relative all’accessibilità, che i designer devono poter applicare ai progetti in base agli specifici ruoli professionali.

In particolare, i designers devono:

1. prevedere paradigmi di interazione che includono differenti modalità di presentazione e di fruizione delle funzionalità e dei contenuti conformemente al livello AA delle WCAG nella versione referenziate dalle Linee guida di accessibilità e dalla norma tecnica UNI CEI EN 310549 oggi in vigore;
2. individuare, insieme agli sviluppatori, i framework che mettono a disposizione in fase di implementazione tutte le caratteristiche di accessibilità previste dal livello AA delle WCAG nella versione referenziate dalle Linee guida di accessibilità e dalla norma tecnica UNI CEI EN 310549 oggi in vigore;
3. pianificare test di accessibilità automatici e, dove possibile, test condotti da utenti di diverse tecnologie assistive, sia sui prototipi in sviluppo che sul servizio digitale prima del rilascio;
4. definire flussi di lavoro che mantengano l’accessibilità nel tempo, coinvolgendo le figure professionali che aggiornano il servizio digitale con testi, immagini e contenuti multimediali, prevedendo per loro momenti di formazione specifica;
5. progettare meccanismi di documentazione del servizio che siano conformi al livello AA delle WCAG nella versione referenziate dalle Linee guida di accessibilità e dalla norma tecnica UNI CEI EN 310549 oggi in vigore.

Il principio di accessibilità by design - cioè fin dalle basi della progettazione - è quindi la scelta fondamentale per creare servizi digitali accessibili e deve essere inoltre associata al principio di accessibilità by default, cioè il principio secondo cui ogni tipo di documentazione e risorsa a supporto (manuali, schemi wireframe e mockup a diversa definizione, framework di sviluppo, template HTML per modelli standard, linee guida…) dovrebbe contenere i requisiti di accessibilità necessari per fare in modo che ogni istanza applicativa abbia basi strutturali efficaci.

Il design system .italia, strumento fondamentale per la progettazione di servizi pubblici digitali, è stato sviluppato in quest’ottica, con ben tre cicli di verifiche di accessibilità e coerenza sui 55 componenti, seguendo un workflow definito nel tempo insieme agli esperti di accessibilità di AgID. Abbiamo inoltre messo a disposizione di tutti questo processo di verifica, così che le PA e i loro fornitori possano replicarlo per verificare l’accessibilità dei componenti nel contesto dei siti e servizi digitali che stanno sviluppando.

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 e approfondimenti¶

Puoi approfondire il tema accessibilità e consultare la normativa di riferimento nella sezione Accessibilità del sito di AgID.

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.

Tipologie di progetto in base agli attori coinvolti nel servizio¶

Servizi Government-to-Citizen (G2C)

Quei progetti che riguardano l’erogazione di servizi digitali da parte del Governo direttamente alla Cittadinanza (G2C), ovvero da enti centrali. Questi progetti spesso si focalizzano sul migliorare l’esperienza delle persone nella fruizione dei servizi pubblici e nell’esercizio dei propri diritti e doveri. Possono riguardare ambiti diversi della vita civica, come la salute, l’istruzione, il trasporto, la sicurezza.

Servizi Government-To-Government (G2G)

Quei progetti che riguardano l’erogazione di servizi digitali da parte di un’organizzazione governativa verso un’altra organizzazione governativa (G2G) ovvero da un ente pubblico verso un altro ente pubblico, sia esso centrale o locale. Questi progetti possono riguardare la progettazione di infrastrutture tecnologiche e servizi IT, che ottimizzino i flussi di scambio tra enti diversi, sia a livello di granularità che di ambito, pensati per massimizzare l’efficienza della macchina pubblica, come ad esempio progettare il sistema nazionale di interoperabilità (PDND).

Servizi Government-To-Government-To-Citizen (G2G2C)

In alcuni casi il progetto può riguardare soluzioni, prodotti digitali o servizi erogato da un ente governativo, per altri enti che lo sfrutteranno per erogare servizi direttamente alla cittadinanza (G2G2C). In questi casi è necessario adottare un’ottica che abbracci la progettazione di una soluzione utile e semplice da implementare, capace di veicolare un impatto positivo sull’esperienza del cittadino nei servizi pubblici. In questo tipo di progetti e prodotti è importante considerare il punto di vista, e raccogliere le esigenze, dei diversi stakeholder che hanno un ruolo nel veicolare l’esperienza d’uso immaginata. Ad esempio, i modelli di sito di Designers Italia, forniti dal Dipartimento per la trasformazione digitale, alle pubbliche amministrazioni locali che, a loro volta, li utilizzeranno per offrire servizi informativi alla cittadinanza, sono comodi per gli enti, utili per i fornitori, semplici da usare per i cittadini.

Servizi che coinvolgono aziende private

Ci sono anche progetti riguardanti ecosistemi di servizio in cui aziende private giocano un ruolo nell’erogazione del servizio, come ad esempio fornitori IT che forniscono soluzioni, strumenti e piattaforme digitali agli enti, o direttamente alla cittadinanza, come ad esempio il sistema nazionale d’identità digitale (SPID, CIE, eIDAS), che coinvolge gli Identity Provider privati. In questi progetti è importare perseguire un approccio sistemico, capace di indirizzare equamente i benefici verso i diversi attori e creare scambi virtuosi di valore.

Tipologie di progetto in base al focus¶

Un progetto può focalizzarsi su alcuni elementi piuttosto che altri del servizio e dell’ecosistema, ad esempio:

• i touchpoint, ovvero i punti di contatto, tra gli utenti finali e il servizio, come i siti internet che consentono l’esperienza di fruizione, o anche le interfacce delle piattaforme di back-office che consentono agli operatori pubblici lo svolgimento delle loro mansioni;
• l’organizzazione e il miglioramento dei contenuti di un sito informativo per la cittadinanza e le imprese (ad esempio: sito del Comune) o per altri enti (ad esempio: sito della Piattaforma Digitale Nazionale Dati);
• la progettazione dei flussi di interazione e dell’esperienza d’uso di un servizio digitale attraverso i diversi step del processo e l’interazione con i vari touchpoint dell’ecosistema (ad esempio: servizio prenotazioni online CUP);
• i processi sottostanti l’erogazione di un servizio, e le infrastrutture necessarie alla sua implementazione (ad esempio: le anagrafi centrali nazionali ANPR, ANIS, ecc).

Tipologie di progetto in base all’ambito di intervento¶

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.

La fase di riprogettazione può presentare numerose criticità per quanto riguarda l’accessibilità. Infatti, se non si presta particolare attenzione ai requisiti di accessibilità, è possibile che a seguito di aggiornamenti di elementi del design system o di migrazioni incomplete di dati e metadati, alcune funzionalità diventino non accessibili. Ad esempio, se sono state istanziate etichette nascoste che non vengono mantenute nella riprogettazione, alcune funzionalità potrebbero risultare non accessibili a chi usa un lettore di schermo.

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

In relazione all’accessibilità, la trasposizione digitale dello user-journey analogico tipicamente non è conforme ai requisiti normativi. Si pensi, ad esempio, alla trasposizione dei moduli cartacei in documenti PDF da stampare e compilare con la penna e caricare firmati. Questi documenti difficilmente possono essere conformi ai requisiti di accessibilità. La progettazione del servizio in modo indipendente dallo user-journey analogico potrebbe prevedere la compilazione di un modulo online pienamente accessibile.

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.

Coordinatore di progetto¶

In un progetto di trasformazione digitale è fondamentale individuare un coordinatore di progetto che:

• formi e coordini un gruppo di lavoro interdisciplinare (interno o tramite forniture) con l’ampiezza e le competenze adatto alle caratteristiche del progetto;
• rappresenti gli obiettivi dell’amministrazione;
• abbia ben presente l’obiettivo del progetto, come raggiungerlo e misuri costantemente l’andamento del progetto.
• favorisca la collaborazione e gestisca le relazioni con tutti gli attori coinvolti;
• metta gli utenti al centro del processo di progettazione;
• abbia dimestichezza con l’ambito di servizio in cui si svolge il progetto o si avvalga di referenti tecnici;
• definisca gli strumenti (quali, come e quando usarli), i tempi e costi (project management), privilegiando strumenti di lavoro open source, aperti e collaborativi, ispirati da una metodologia agile;
• imposti le ritualità della gestione del progetto (le riunioni cicliche legate ai contenuti di progetto, gli incontri di stato avanzamento lavori, le retrospettive a valle della conclusione di un ciclo di progettazione).

Questo coordinatore può essere il Responsabile della transizione al digitale (RTD). Nel caso di progetti svolti tramite forniture esterne, può essere il Responsabile unico del procedimento (RUP) o il Direttore all’esecuzione del contratto (DEC).

In ogni caso, anche quando non fosse possibile individuare questa competenza di dominio tra le figure preposte, è bene che chi possiede la responsabilità formale del progetto si avvalga di referenti tecnici all’interno del gruppo di lavoro, lasciando loro lo spazio per contribuire rispetto alla loro competenza.

Ad esempio, in un progetto di definizione del servizio di fatturazione elettronica, è bene individuare una persona che conosca bene i processi di fatturazione e sia in grado di guidare gli esecutori del progetto fornendo consigli e indicazioni su come inviare e processare tali fatture, i dati che queste devono contenere, e così via.

Definire ruoli e responsabilità¶

Una gestione efficace e ben strutturata del progetto dipende in gran parte da una definizione chiara e univoca dei ruoli e delle responsabilità di tutti gli attori coinvolti. Per garantire che ogni attività venga completata con efficienza e che le risorse siano allocate correttamente, è fondamentale identificare e assegnare i responsabili in modo esplicito e condiviso. Questo processo aiuta a evitare sovrapposizioni nei compiti e a chiarire le aspettative tra i membri del team.

La mappa degli stakeholder e la matrice RACI sono strumenti utili a riassumere e condividere le responsabilità dei principali attori coinvolti nella progettazione.

Questi strumenti possono aiutare a rispondere ad alcune domande chiave, tra cui:

• Chi definisce gli obiettivi strategici e monitora l’andamento del progetto?
• Chi è responsabile della progettazione dell’esperienza utente?
• Chi si occupa dello sviluppo, dei test e delle integrazioni?
• Chi valuta i rilasci e ne misura l’impatto?

Definire processi, strumenti e rituali¶

Definire processi, strumenti e rituali condivisi aiuta a:

• creare un ambiente collaborativo e di continuo apprendimento, assicurandosi che i momenti di incontro siano gestiti in modo costruttivo e rispettoso e che il gruppo condivida un linguaggio comune;
• chiarire le modalità di decision making, ovvero come, da chi e con quali processi vengono prese le decisioni
• valutare e ribilanciare periodicamente i processi di lavoro, assicurando che siano sostenibili per il gruppo e efficaci al raggiungimento degli obiettivi.

I rituali sono processi e pratiche, sia formali che informali, adottati da un gruppo di lavoro per favorire allineamento, apprendimento e miglioramento continuo: ad esempio, gli stand-up meeting e altri incontri ricorrenti, retrospettive, ma anche modalità di definizione delle decisioni, sessioni di feedback reciproco, e altre pratiche simili. Strumenti e rituali sono fortemente correlati tra di loro e sono alla base dei processi di lavoro.

I rituali hanno cadenza definita, ad esempio:

• giornaliera, settimanale, bisettimanale: stand-up meeting, SAL (stato di avanzamento lavori), workshop operativi;
• trimestrale: retrospettive per analizzare risultati e migliorare i processi.

Per ogni rituale scelto è essenziale definire e condividere: obiettivo, cadenza, durata, responsabile dell’organizzazione, partecipanti, argomenti trattati e non trattati.

Gli strumenti possono essere suddivisi in tre categorie principali:

• gestione e pianificazione: per organizzare attività, timeline e deliverable (ad esempio: strumenti di project management);
• comunicazione: per interazioni rapide (ad esempio: chat) e comunicazioni ufficiali (ad esempio: email);
• archivio e condivisione: per documenti e materiali condivisi (ad esempio: piattaforme di archiviazione).

Gli strumenti scelti devono essere conformi alle normative GDPR e CAD e accessibili a tutte le persone coinvolte. Per ogni strumento scelto, è importante condividere linee guida di utilizzo, regole di netiquette e buone pratiche.

Curare la documentazione di progetto¶

Curare la documentazione del progetto è una pratica continua che rafforza il lavoro di squadra e l’efficacia operativa nel lungo termine.

La creazione di un documento di onboarding efficace è fondamentale non solo per i nuovi membri del gruppo, ma anche per garantire una continuità e stabilità nel progetto. Questo documento deve fornire una visione chiara e dettagliata del progetto e delle informazioni utili che contribuiranno a facilitare l’integrazione e l’efficienza operativa dei membri, vecchi e nuovi.

Un documento di onboarding efficace fornisce informazioni utili ai membri del gruppo di lavoro, quali:

• presentazione del progetto - obiettivi, contesto e la missione che si vuole raggiungere;
• metodo di lavoro - ruoli, strumenti e rituali adottati;
• riferimenti utili - link a materiali, repository e altre risorse rilevanti.

Investire tempo nella preparazione di questi documenti riduce il tempo necessario ai nuovi arrivati per essere operativi e favorisce una collaborazione più efficace. Ma il valore di un documento di onboarding non si limita ai nuovi membri, esso funge anche da strumento fondamentale durante i passaggi di consegna tra membri del gruppo.

In questo modo, il documento non solo migliora l’integrazione dei nuovi arrivati, ma diventa anche un elemento chiave per il mantenimento della coerenza e della continuità all’interno del progetto, contribuendo al suo successo complessivo.

Organizzare tavoli tecnici collaborativi¶

La creazione di tavoli tecnici collaborativi è un passo fondamentale per garantire progetti di trasformazione digitale efficaci e sinergici, in grado di raccordare le attività del governo centrale con le esigenze specifiche del territorio. I tavoli tecnici sono infatti un’opportunità per riunire diversi attori, facilitare la cooperazione e raccogliere diversi punti di vista.

Un tavolo tecnico è una sessione di co-progettazione in cui vari attori (tra cui progettisti, utenti, stakeholder della Pubblica Amministrazione e rappresentanti del settore privato) si riuniscono per discutere criticità e proporre soluzioni. La presenza di un facilitatore è consigliata per guidare la discussione, garantendo che tutti i partecipanti possano esprimere le proprie opinioni e contribuire attivamente al processo.

La corretta organizzazione di un tavolo tecnico collaborativo può fare la differenza nella qualità del servizio pubblico erogato. Promuovendo un ambiente di collaborazione e apertura, queste iniziative possono affrontare le criticità esistenti e costruire soluzioni più inclusive e sostenibili. In tal modo, si contribuisce a una governance più efficace e a un intervento mirato nella pubblica amministrazione, realizzando così una trasformazione digitale che risponde realmente alle esigenze del territorio.

Prendere decisioni¶

La capacità di prendere decisioni in modo efficace è un elemento chiave per il successo di qualsiasi progetto. Le decisioni devono essere basate su un’analisi accurata delle opzioni disponibili e su un allineamento agli obiettivi strategici delineati nel brief iniziale del progetto.

Uno degli strumenti più utili per prendere decisioni informate e strategiche è la matrice delle priorità. Questo strumento permette di valutare diverse opzioni sulla base di due criteri fondamentali, rappresentandoli su un diagramma a due assi:

• impatto, ovvero quanto un’opzione contribuisce al raggiungimento degli obiettivi del progetto. Varia da «basso» a «alto» e viene rappresentato sull’asse orizzontale;
• sforzo, ovvero il livello di risorse necessarie per implementare quell’opzione (in termini di tempo, costi e competenze). Varia da «basso» a «alto» e viene rappresentato sull’asse verticale.

Dall’incrocio di questi assi si ottengono quattro quadranti, ciascuno con una diversa implicazione decisionale:

• Alto impatto - Basso sforzo: opzioni prioritarie e immediate, di norma chiamati Quick win. Queste attività offrono un grande valore con uno sforzo minimo e dovrebbero essere eseguite per prime.
• Alto impatto - Alto sforzo: sono gli investimenti strategici. Queste opzioni richiedono una valutazione approfondita e pianificazione, in quanto rappresentano interventi significativi che, sebbene impegnativi, portano grandi benefici.
• Basso impatto - Basso sforzo: rappresentano le azioni tattiche. Possono essere eseguite se rimangono risorse disponibili, ma non dovrebbero essere prioritarie.
• Basso impatto - Alto sforzo: le azioni da evitare. Queste opzioni non giustificano le risorse necessarie per la loro realizzazione.

L’utilizzo della matrice delle priorità deve essere guidato dagli obiettivi descritti nel brief iniziale del progetto.

Rimane comunque importante coinvolgere gli stakeholder nel processo decisionale per garantire un consenso ampio e allineato agli obiettivi strategici. Strumenti come i tavoli tecnici collaborativi e le retrospettive periodiche possono essere utilizzati per discutere le priorità, verificare le ipotesi di impatto e sforzo e monitorare le decisioni prese nel tempo.

La matrice delle priorità, integrata con un approccio collaborativo, aiuta a creare un processo decisionale trasparente e orientato ai risultati, massimizzando l’efficacia delle risorse disponibili e il raggiungimento degli obiettivi del progetto.

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.

Designers Italia mette a disposizione kit di progettazione utili all’organizzazione e 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.

Designers Italia mette a disposizione kit di progettazione utili a comprendere il contesto d’uso del servizio, con strumenti 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.

Designers Italia mette a disposizione kit di progettazione utili a progettare i processi e i touchpoint del servizio, con strumenti che 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.

Designers Italia mette a disposizione kit di progettazione utili a realizzare e svilupparel’interfaccia utente.

Nel design system .italia ci sono, inoltre, 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.

Gli elementi del design system includono tutte le caratteristiche necessarie per poter sviluppare interfacce utente conformi ai requisiti di accessibilità digitale. Inoltre, la documentazione per ogni elemento include una sezione relativa all’accessibilità. Si segnala, tuttavia, che per garantire l’accessibilità delle interfacce utente non è sufficiente combinare i componenti disponibili: è indispensabile utilizzarli in conformità con le Linee guida per l’accessibilità (WCAG).

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.

Designers Italia mette a disposizione kit di progettazione utili a validare la soluzione ottenuta, con strumenti per pianificare e svolgere i test di usabilità, verificare l’accessibilità e monitorare le performance dei servizi tramite attività di web analytics.

Al fine di realizzare servizi accessibili è importante prevedere test di accessibilità agili già nelle fasi di validazione dei prototipi coinvolgendo esperti di accessibilità digitale e, dove possibile, utenti di tecnologie assistive. I risultati di tali test consentono di informare e orientare le fasi successive della progettazione, evitando di dover riprogettare intere sezioni dei servizi digitali qualora i test di accessibilità condotti sul prodotto finale evidenzino criticità da risolvere.

Identificare gli attori coinvolti¶

La mappa degli attori è uno strumento visivo che serve a rappresentare la varietà di individui e/o organizzazioni che influiscono sull’esperienza dell’utente nell’interazione con un determinato prodotto o servizio.

Questi attori sono suddivisi tra interni ed esterni alla Pubblica Amministrazione e vengono posizionati rispetto al centro del diagramma, dove è collocato l’utente, per indicare il tipo di influenza che esercitano: diretta o indiretta, debole o forte. Per esempio, semplificando lo schema, pensando ad un modello di servizio di istruzione scolastica al centro ci sarà lo studente con vicini gli insegnanti, che esercitano un’influenza diretta, e, in un cerchio più esterno, ci sarà tra gli altri il dirigente scolastico e il Ministero dell’istruzione e del Merito, che hanno un ruolo nel sistema ma non un’interazione diretta con lo studente.

Identificare le figure che influiscono sull’esperienza d’uso e il loro ruolo aiuta a progettare (o riprogettare) il servizio non solo per migliorare l’esperienza dell’utente finale, ma anche per definire come portare beneficio anche a tutti coloro che contribuiscono all’erogazione e/o allo svolgimento del progetto.

Formulare la proposta di valore¶

La proposta di valore è l’insieme dei benefici per le persone che usano un servizio della Pubblica Amministrazione e rappresenta il motivo per cui il servizio ha senso di esistere.

Mette in relazione gli obiettivi dei fruitori, le caratteristiche del servizio e cosa consente di fare, in modo da creare servizi di cui cittadini, organizzazioni e imprese hanno davvero bisogno e che desiderano usare.

La proposta di valore guida molte delle decisioni strategiche e operative su come il servizio viene progettato, erogato, comunicato e migliorato per soddisfare le aspettative degli utenti.

Per formulare la proposta di valore è utile quando possibile adottare un approccio di progettazione partecipata coinvolgendo sia il committente sia il fornitore nel processo e, per definirla, si devono tenere in considerazione i risultati della ricerca con gli utenti.

Inquadrare gli elementi costitutivi del servizio¶

Inquadrare gli elementi costituivi del servizio garantisce una visione strategica e sintetica del modo in cui un’organizzazione o un servizio genera valore nel tempo, considerando sia il livello economico che quello sociale, ambientale e politico.

Esplora tutti gli elementi che hanno un impatto in fase di erogazione (risorse, investimenti, attori, quadro normativo e processi necessari alla sua realizzazione) e gli elementi che ne permettono la fruizione, compresi gli aspetti relativi al monitoraggio della sua efficacia.

È un quadro di alto livello utile per allineare gli stakeholder sul modello di servizio offerto e valutarne la sostenibilità, in termini di bilanciamento tra impiego di risorse e impatto positivo, senza entrare nel dettaglio dei processi operativi o tecnici necessari ad erogarlo.

Per definire e condividere questo quadro con gli stakeholder è utile avvalersi di mappature e schemi di sintesi, come per esempio la proposta di valore, la mappa dell’offerta, quella degli attori e la mappa dell’ecosistema. A queste si possono aggiungere mappature del valore dato e portato a tutti gli attori del sistema e schemi che permettano di chiarire gli impatti economico, sociale, ambientale e politico e i riferimenti e gli impatti a livello normativo.

Mappare l’ecosistema¶

L’ecosistema di servizio è l’insieme di attori ed elementi che hanno un ruolo nell’erogazione e fruizione del servizio e che consentono lo scambio di valore tra le diverse parti (in forma di informazioni, documenti, denaro, dati, o altro).

La mappa dell’ecosistema serve a dare una panoramica di alto livello di questi flussi di scambio che, al di là del rapporto diretto ente-touchpoint-cittadino, possono coinvolgere terze parti, pubbliche o private, che agiscono nel back-office o nel front-office (come, ad esempio, altri enti, piattaforme IT, database centralizzati, operatori pubblici, poste, tabaccai, gestori di mobilità, ecc).

La mappa dell’ecosistema viene usata per:

• riflettere sulle relazioni esistenti in termini di equilibrio tra i flussi rappresentati;
• individuare criticità e debolezze del sistema, rispetto per esempio al ruolo dei diversi attori;
• ragionare su possibili opportunità di miglioramento.

Rappresentare i flussi di servizio¶

La Service blueprint è una mappa che dettaglia l’esperienza utente mettendola in relazione ai flussi che permettono il funzionamento del servizio. Visualizza i processi e i passaggi che avvengono tra il back-office, i touchpoint, gli attori coinvolti e l’utente finale.

Questo strumento è utile per far comprendere, a tutte le persone coinvolte nel progetto, le complessità e le interdipendenze tra i diversi elementi che concorrono all’erogazione di un servizio. La Service blueprint offre una visione obiettiva del funzionamento e può essere usata sia in fase di analisi dell’esistente sia in fase di definizione del progetto futuro. Lo strumento è utile anche per mostrare possibili criticità e le modalità di assistenza previste per risolverle.

Workshop di co-progettazione¶

Un workshop di co-progettazione è una sessione di lavoro di gruppo, durante la quale diversi soggetti (progettisti, utenti, stakeholder della Pubblica Amministrazione ed eventuali rappresentanti di aziende private) vengono invitati a discutere le criticità esistenti e individuare insieme delle possibili soluzioni progettuali, seguendo un percorso guidato da un facilitatore. Le sessioni possono essere organizzate dal vivo o online per permettere la partecipazione anche da remoto. L’attività di co-progettazione è preceduta da una serie di attività di ricerca e analisi del contesto, che aiutano a definire l’obiettivo del progetto su cui si sta lavorando e informano la sessione stessa.

I workshop risultano in particolare molto utili quando al termine di un’attività preliminare di ricerca si inizia la definizione di user story e requisiti per la progettazione del servizio, ovvero nel momento di passaggio tra la fase di analisi e quella di design e sviluppo della soluzione individuata.

I workshop hanno anche il beneficio di radunare ruoli che altrimenti rischiano di non incontrarsi mai, e avvicinare gli operatori della Pubblica Amministrazione ai cittadini che utilizzano i propri servizi attraverso la condivisione dei risultati della ricerca con gli utenti.

Content discovery¶

Organizzare una sessione di content discovery è il primo passo della progettazione dei contenuti. Lo scopo della sessione è di coinvolgere tutte le persone che lavorano con i contenuti che stai progettando o che potrebbero avere un interesse (ad esempio, le persone che lavorano nell’ufficio che offre un determinato servizio ai cittadini, o le persone che lavorano direttamente in supporto ai cittadini – come le helpline), in modo da raccogliere il maggior numero di informazioni possibile.

Prenota una sala riunioni o organizza una riunione online per un paio d’ore. Successivamente potrai decidere se le informazioni raccolte sono sufficienti o se è necessario organizzare altre sessioni. Assicurati di avere gli strumenti adatti per prendere note, come penne e post-it per le sessioni in presenza o lavagne collaborative per sessioni online. Fai più domande possibili per capire di più sull’argomento, gli utenti, quello che vogliono sapere e quali sono anche i loro comportamenti offline.

Alla fine della sessione avrai una serie di note. Analizzale il prima possibile a mente fresca e riassumile in un’email da inviare ai partecipanti, in modo da ricevere ulteriori spunti tardivi o correggere qualcosa che è stato interpretato male.

Alla fine della content discovery, avrai raccolto:

• informazioni sugli utenti e le loro necessità;
• il punto di vista e le conoscenze degli esperti dell’argomento;
• il punto di vista e le conoscenze dell’organizzazione in senso più ampio;
• un’idea delle informazioni che mancano ed è necessario approfondire.

Dati di ricerca (search keywords)¶

I dati di ricerca offrono informazioni sulle parole (keywords) che le persone usano per cercare i contenuti sul web. Esistono una serie di strumenti disponibili, alcuni gratuiti, altri a pagamento, che ti permettono di individuare le keyowrd usate per parlare di un determinato argomento.

I dati di ricerca esterni sono le parole che le persone usano sui motori di ricerca esterni, come Google. Individuare queste keyword è importante per capire come gli utenti cercano le informazioni prima di arrivare a una specifica istituzione.

I dati di ricerca interni, invece, sono le parole che le persone usano nella barra di ricerca del sito web di un’istituzione (come ad esempio il sito di un Comune).

Entrambi questi tipi di dati sono utili per iniziare a compilare una lista di termini usati dagli utenti, che serviranno successivamente per scrivere i contenuti ed effettuare scelte su titoli di pagina, filtri di ricerca, tag e voci del menu di navigazione.

Ricerca tramite analytics¶

Analizzare le metriche di un sito web esistente può fornire dati importanti che ci permettono di comprendere più a fondo i comportamenti degli utenti, i contenuti di cui hanno bisogno (quello che vogliono sapere) e i loro modelli mentali (come pensano).

Alcune metriche che puoi prendere in considerazione, in base agli scopi della ricerca, sono:

• referrals, per capire da dove vengono gli utenti e quali contenuti hanno reindirizzato ai tuoi (e quindi cosa stanno leggendo e il linguaggio usato per arrivare al tuo sito o servizio);
• numero di visite su una pagina, per capire la popolarità di un contenuto o scoprire quali contenuti sono difficili da trovare;
• bounce rate, per individuare le pagine da cui gli utenti escono dal sito (attenzione però, perché in alcuni casi potrebbe significare che gli utenti hanno trovato quello che cercavano);
• tempo speso su pagina (anche in questo caso, il giudizio della metrica dipenderà dallo scopo della pagina);
• ricerche su pagina, per individuare eventuali informazioni che gli utenti si aspettano di trovare in relazione a quel contenuto ma sono mancanti o difficili da individuare.

Puoi annotare queste metriche nel Modello di analisi dei contenuti di Designers Italia, particolarmente utile per svolgere una revisione dei contenuti.

Ricerca sui forum¶

I forum sono spazi dove gli utenti esprimono liberamente le loro opinioni, preoccupazioni e bisogni. Analizzando le discussioni, puoi ottenere una comprensione dettagliata delle esigenze degli utenti, delle loro sfide e delle soluzioni che cercano.

I forum ti permettono di identificare problemi comuni o domande frequenti che potrebbero non emergere da altre forme di ricerca, così da creare contenuti che rispondano direttamente ai bisogni degli utenti.

Osservando come gli utenti comunicano tra loro nei forum, puoi anche apprendere il linguaggio e il tono che risuona maggiormente con loro.

Prima di iniziare la ricerca sui forum, stabilisci cosa vuoi scoprire. Ad esempio:

• le parole che gli utenti usano per parlare di un determinato argomento;
• le 10 cose su cui gli utenti si interrogano maggiormente;
• qual è il grado di emotività degli utenti nei confronti dell’argomento e chi ne è più colpito.

In questo modo, otterrai:

• una lista di vocaboli da usare per scrivere i contenuti;
• una lista dei contenuti più importanti per gli utenti, che inciderà anche sull’organizzazione dei contenuti del sito o servizio e sulla visibilità;
• un’indicazione del tono di voce e dello stile da usare.

User stories per definire i contenuti¶

Le user stories sono brevi descrizioni, spesso strutturate in un formato standard, che rappresentano ciò che un utente desidera fare o ottenere.

La struttura tipica è: «Come [tipo di utente], voglio [obiettivo] in modo da [motivazione]».

Ad esempio, «Come utente nuovo, voglio trovare rapidamente informazioni di contatto, in modo da poter chiedere assistenza».

Formulare le user stories ti aiuta a capire gli obiettivi degli utenti, tenerli bene a mente, e progettare contenuti che rispondano a tali bisogni in modo chiaro e semplice.

Le user stories sono utili se hai una platea di diversi tipi di utenti, con necessità diverse per diversi tipi di contenuti e diversi livelli di dettaglio.

Job stories per definire i contenuti¶

Le job stories sono simili alle user stories, ma sono più focalizzate sul contesto e sulle motivazioni dietro un’azione. Si concentrano sul lavoro che l’utente deve svolgere piuttosto che sulla tipologia dell’utente.

La struttura tipica è: «Quando [situazione], voglio [motivazione], così posso [risultato desiderato]».

Ad esempio, «Quando ho un problema tecnico, voglio trovare una guida rapida, così posso risolverlo immediatamente».

Le job stories sono utili quando hai un’unica tipologia di utente e hai bisogno di concentrarti sul «perché» e «quando» l’utente intraprende un’azione, fornendo una comprensione più approfondita del contesto d’uso.

Criteri di accettazione¶

I criteri di accettazione sono delle condizioni che un contenuto deve soddisfare per essere considerato completo. Sono usati per definire in modo chiaro e verificabile cosa deve essere fatto affinché il lavoro di progettazione su una user story o una job story sia completato.

Stabilire dei criteri di accettazione ti aiuta a tenere traccia del progresso di un progetto e assicurarti di avere sempre bene in mente i bisogni degli utenti quando crei i contenuti.

I criteri di accettazione:

• descrivono il risultato finale che l’utente deve ottenere eseguendo l’azione o consumando un contenuto;
• stabiliscono le condizioni di successo o fallimento basate su ciò che l’utente vuole raggiungere nel contesto descritto;
• garantiscono che l’interazione soddisfi le aspettative dell’utente in termini di facilità e fluidità.

Sono importanti perché:

• definiscono in modo chiaro cosa deve essere sviluppato o realizzato, evitando ambiguità;
• rendono il lavoro verificabile, fornendo parametri oggettivi per stabilire se una storia è stata completata con successo;
• consentono a designer, sviluppatori e stakeholder di condividere una visione comune di cosa si aspetta l’utente, migliorando la comunicazione e la collaborazione;
• sono utilizzati come base per testare la soluzione e verificare che funzioni come previsto.

Definire l’architettura dell’informazione¶

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

Alberatura¶

L’alberatura, nota anche come struttura ad albero o sitemap, è la rappresentazione organizzativa dei contenuti di un sito web. Si tratta di una mappa gerarchica che descrive come le varie pagine e sezioni di un sito sono interconnesse. Questa struttura è fondamentale per la navigazione degli utenti e per l’ottimizzazione dei motori di ricerca (SEO).

L’alberatura segue una struttura gerarchica simile a un albero. La homepage è spesso vista come la radice, con rami che si estendono a sottosezioni e pagine più dettagliate.

Esempio di struttura ad albero di un sito web.

Una buona alberatura aiuta gli utenti, anche di tecnologie assistive, a trovare facilmente le informazioni di cui hanno bisogno, riducendo il numero di clic necessari e il carico cognitivo per raggiungere una pagina specifica.

La posizione di una pagina in alberatura influenzerà alcuni elementi chiave, come le breadcrumbs e le URL. Ad esempio, se nel sito di un Comune, la pagina dell’Ufficio Anagrafe è posizionata nella sezione “Amministrazione”, sotto la voce “Uffici””:

• le breadcrumbs della pagina saranno Home / Amministrazione / Uffici / Ufficio Anagarafe;
• l’URL della pagina sarà https://www.nomecomune.provincia.it/amministrazione/uffici/ufficio-anagrafe.

Flussi di interazione¶

Un altro caso di architettura dell’informazione sono i tipici flussi di interazione i servizi digitali. Al contrario di un sito web, i flussi di interazione non hanno una struttura ad albero, ma sono formati da una serie di passaggi sequenziali.

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

Ogni passaggio presenterà i contenuti e le informazioni necessarie per poter andare avanti nel flusso. Un buon flusso di interazione non sovraccarica l’utente, ma scandisce le informazioni necessarie su più schermate, mostrandole solo quando sono necessarie all’utente.

Per progettare i contenuti di un flusso di interazione in modo efficace, è fondamentale condurre una ricerca utente specifica che aiuti a comprendere i bisogni, i comportamenti e le aspettative degli utenti durante l’interazione con il servizio. Alcune attività di ricerca utili sono le interviste, sondaggi e questionari, mappatura dell’user journey e i test di usabilità.

Una volta raccolte le necessità informative degli utenti, è utile schematizzare i risultati usando i content wireframe. I content wireframe sono rappresentazioni schematiche, semplificate e visive di una pagina web o di un’interfaccia digitale, focalizzate sull’organizzazione e disposizione dei contenuti piuttosto che sul design grafico o sull’estetica.

Sistemi di navigazione¶

I sistemi di navigazione di un sito o servizio digitale sono le strutture e gli elementi che guidano gli utenti attraverso i contenuti e le funzionalità disponibili. Questi sistemi sono fondamentali per garantire un’esperienza utente fluida e intuitiva, permettendo agli utenti di trovare rapidamente le informazioni o le funzionalità che cercano.

Navigazione principale (o globale)

È la barra di navigazione principale che di solito si trova nella parte superiore del sito (header) o in un menu laterale. Fornisce accesso alle sezioni principali del sito o servizio. Garantisce che l’utente possa accedere rapidamente alle aree chiave del sito da qualsiasi pagina.

Navigazione secondaria (o locale)

È la navigazione che si trova all’interno di una sezione specifica del sito, fornendo accesso alle sottosezioni o ai contenuti correlati. Aiuta gli utenti a esplorare contenuti correlati senza dover tornare alla navigazione principale. Graficamente è generalmente rappresentata da un megamenu.

Navigazione contestuale

Avviene direttamente all’interno del contenuto, tramite link o elementi di navigazione che guidano l’utente verso contenuti correlati o approfondimenti: link nel testo, pulsanti «Scopri di più» / “Vai a…”, card, carousel.

Breadcrumb

Indicatori di un percorso di navigazione gerarchico che aiuta gli utenti a comprendere la loro posizione all’interno di un sito e a tornare facilmente ai livelli precedenti. Le breadcrumb sono poste a inizio pagina e rispecchiano l’alberatura del sito. Ad esempio, nella pagina dedicata all’ufficio anagrafe di un sito web di un Comune potremmo trovare le breadcrumb Home / Amministrazione / Uffici / Ufficio anagrafe.

Navigazione a step

Tipica di un flusso di servizio, la navigazione a step è usata in applicazioni e siti web per guidare gli utenti attraverso una sequenza di passaggi o fasi, in modo strutturato e lineare. Ogni passaggio rappresenta una fase specifica di un processo complesso, come la registrazione a un servizio, la compilazione di un modulo o il completamento di un pagamento. Viene generalmente resa a livello grafico con degli stepper.

Footer

La navigazione nel footer della pagina replica o integra la navigazione globale con link aggiuntivi, come le politiche di privacy, termini di servizio, la dichiarazione di accessibilità link ai social media, ecc.

Tipologie di contenuto (content type)¶

Le tipologie di contenuto, in inglese content type, sono scalette di contenuti standardizzati che generalmente coincidono con un tipo di pagina di un sito web. Le pagine che presentano contenuti della stessa tipologia vengono standardizzate per assicurare l’uniformità informativa sia all’interno dello stesso sito, sia sui siti di altri enti.

Ad esempio, la pagina di presentazione di un servizio di un Comune è standardizzabile in un content type. Ogni pagina servizio presenterà informazioni come il titolo del servizio, l’utenza a cui è rivolto, le modalità di accesso e i tempi di attesa, in un ordine fisso. Così, lo stesso utente, quando navigherà su altre pagine servizio dello stesso o di altri enti, saprà già dove trovare in pagina le informazioni che cerca.

Sulla base delle funzioni che deve svolgere un sito, è possibile definire una lista delle tipologie di contenuto.

I pezzi di contenuto di ciascun content type, detti attributi, vengono stabili tramite ricerca utente e derivano dai bisogni informativi degli utenti stessi. L’ordine di presentazione degli attribuiti dipenderà dall’importanza dell’informazione stessa: dalle più importanti alle meno importanti.

Una vota modellizzati i content type sotto forma di wireframe, è possibile procedere 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.

Ontologie e standard¶

Le ontologie, in informatica e scienze dell’informazione, sono strutture di dati che organizzano e rappresentano la conoscenza in un dominio specifico attraverso concetti e le relazioni tra di essi, facilitando la comprensione, la condivisione e l’utilizzo delle informazioni.

Le ontologie permettono:

• a diversi sistemi informatici di comprendere e condividere informazioni in modo coerente (interoperabilità);
• di migliorare le capacità di ricerca e recupero delle informazioni (ricerca semantica);
• l’integrazione di dati provenienti da fonti diverse, facilitando l’analisi e l’interpretazione delle informazioni.

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

Facciamo un esempio: un sito della Pubblica Amministrazione prevede normalmente content type per definire un ufficio (ad esempio, Ufficio anagrafe), un luogo (ad esempio, Palazzo Chigi) o un ruolo (ad esempio, Direttore di dipartimento). Queste informazioni possono essere modellate utilizzando le ontologie relative a persone, organizzazioni e luoghi. 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.

Vai su Schema, il catalogo nazionale per lo scambio di dati e informazioni tra pubbliche amministrazioni, e consulta le ontologie già disponibili

Vai agli standard per il patrimonio informativo pubblico

Vocabolari controllati e tassonomie¶

I vocabolari controllati sono insiemi predeterminati di termini o frasi standardizzati utilizzati per descrivere in modo consistente e univoco concetti, oggetti, e informazioni in un dominio specifico. L’uso di un vocabolario controllato assicura che tutti coloro che utilizzano i termini all’interno di un sistema o di una comunità li intendano nello stesso modo, riducendo al minimo le ambiguità e le interpretazioni errate.

Anche le tassonomie sono vocabolari controllati. Una tassonomia è un vocabolario controllato con una precisa struttura gerarchica: i termini della lista sono in relazione tra loro come genitore/figlio.

I vocabolari controllati sono molto utili per i siti web della Pubblica Amministrazione, poiché permettono di scegliere nomenclature adatte per categorizzare i contenuti, creare filtri di selezione e di ricerca e offrono un ottimo spunto per riflettere su voci di menu e di navigazione.

Ad esempio, i modelli di Designers Italia presentano vocabolari controllati come i luoghi della cultura, gli eventi culturali, i servizi pubblici.

Vai ai vocabolari controllati su Schema

Come leggono le persone sul web¶

Le persone leggono sul web in modo molto diverso rispetto alla lettura tradizionale su carta. Invece di leggere parola per parola, tendono a scansionare rapidamente il testo, cercando informazioni rilevanti in modo efficiente.

Secondo studi sull’usabilità, come quelli condotti da Jakob Nielsen, l’utente legge meno del 20% delle parole su una pagina web. Gli occhi si soffermano su parti specifiche del testo, piuttosto che seguire una lettura lineare.

Uno dei modelli di lettura più comuni sul web è l”F-Pattern, così chiamato perché il movimento degli occhi segue una forma simile alla lettera «F». Le persone iniziano a leggere dall’alto a sinistra, scansionano una riga orizzontale, poi si spostano in basso, leggono un’altra breve sezione orizzontale e infine scendono lungo il margine sinistro, scansionando verticalmente.

Rappresentazione dell’F-Pattern, il flusso di lettura più comune dei contenuti sul web.

Gli utenti dedicano pochi secondi a una pagina per decidere se proseguire la lettura o abbandonarla. I contenuti devono essere chiari e immediatamente comprensibili, con le informazioni principali ben visibili. Le persone cercano informazioni specifiche, ignorando parti del contenuto che non ritengono rilevanti. Questo le porta a saltare interi paragrafi o sezioni se non rispondono immediatamente alle loro domande o esigenze.

Inoltre, le persone che utilizzano tecnologie assistive non visive, come lettori di schermo vocali o display Braille, leggono una pagina web principalmente in due modi: esplorando la struttura gerarchica basata sulla semantica degli elementi (ad esempio, intestazioni, articoli, sezioni) oppure effettuando una lettura sequenziale rapida per individuare le parti di interesse. Se la pagina non è organizzata in modo chiaro e i titoli delle sezioni non sono esplicativi, questi utenti rischiano di saltare o ignorare sezioni importanti, compromettendo l’efficacia della pagina rispetto agli obiettivi per cui è stata progettata.

Le regole per un linguaggio semplice¶

Il linguaggio, il tono di voce e la formattazione dei contenuti sono quindi elementi cruciali dell’esperienza utente di un sito o servizio digitale. Una Pubblica Amministrazione che mette le persone al centro sa parlare in modo semplice, chiaro ed empatico.

Microtesti¶

I microtesti che accompagnano e descrivono gli elementi grafici delle interfacce di un sistema web, sono definiti in gergo tecnico microcopy. L’armonia e la pertinenza fra elementi grafici delle interfacce e microtesti contribuisce a garantire all’utente un usabilità ottimale del sistema. Per questa ragione, è importante verificare periodicamente l’efficacia delle etichette di navigazione attraverso test di usabilità o mediante degli A/B test. Per esempio, un tema da gestire in modo corretto a livello di microtesti è quello dei messaggi di errore. In questo ambito infatti, un buon uso dei testi consente all’utente di capire rapidamente la tipologia di errore, ridurre l’incertezza sull’affidabilità del sistema e in molti casi limitare la necessità di accesso ai canali di assistenza.

Scrittura collaborativa¶

La scrittura collaborativa, in inglese pair writing, consiste nello scrivere insieme a un’altra persona, allo stesso tempo davanti al computer o un foglio di carta.

L’altra persona, in base alle esigenze del progetto e la natura del contenuto che si sta scrivendo, può essere un altro designer o qualsiasi persona che ha una conoscenza approfondita del tema.

È un’ottima modalità di scrittura per creare velocemente contenuti senza dover creare e modificare numerose bozze o attendere lunghi cicli di approvazione.

Può essere difficile per una sola persona scrivere contenuti che sono sia corretti e sia facili da leggere. In ogni istituzione ci sono esperti di determinati argomenti che possono scrivere in maniera accurata. Tuttavia, non sono sempre in grado di spiegare un argomento in maniera semplice e chiara, proprio perché ne sanno troppo e la loro mente si focalizza sui dettagli. La scrittura collaborativa serve quindi a scrivere testi corretti, ma anche semplici da comprendere.

Content critique¶

Le content critique, spesso abbreviato in crit, sono sessioni collaborative di valutazione e feedback su contenuti in fase di sviluppo. L’obiettivo di queste sessioni è quello di migliorare la qualità del contenuto, basandosi su un’analisi critica costruttiva e sui suggerimenti di più persone.

Durante le sessioni, si verifica l’accuratezza fattuale e se il tono, lo stile e la struttura siano adatti al target e agli scopi.

Le content critique sono molto utili, perché:

• permettono di individuare aree di miglioramento che il singolo autore potrebbe non notare;
• ogni partecipante porta una visione e una sensibilità differente, il che arricchisce il processo di revisione. Questo aiuta a creare contenuti che siano rilevanti per un pubblico più ampio e che rispondano a diverse esigenze o domande;
• partecipare alle content crits aiuta i membri del team a migliorare le proprie competenze di scrittura, revisione e feedback.

Traduzione e localizzazione dei contenuti¶

Localizzare (rendere disponibile in più lingue) un sito o servizio digitale può essere molto importante per renderlo più efficace per tutti gli utenti, anche quelli che non conoscono o non hanno dimestichezza con la lingua e la cultura italiane.

Questo passaggio può essere particolarmente importante per i servizi pubblici, che si rivolgono spesso anche a cittadini di altre nazionalità, apolidi o a cittadini italiani ma che hanno diversi riferimenti linguistici o culturali.

Sono state identificate come prioritarie le seguenti lingue straniere: tedesco, sloveno, francese e inglese (Legge 15 dicembre 1999, n. 482, Norme in materia di tutela delle minoranze linguistiche storiche).

Quando si procede alla traduzione di un sito o di un servizio, la prima scelta da fare è se:

• tradurre l’intero sito (o l’intero servizio/applicazione);
• tradurne solo una parte, dove l’utilizzo di altre lingue è particolarmente rilevante (es. la sezione “visti” del sito del Ministero degli esteri, la sezione dedicata alle emergenze del sito di un ospedale, ecc.).

La scelta va fatta in considerazione:

• di una ricerca sugli utenti del sito o del servizio, che indaghi la lingua e i riferimenti culturali attraverso strumenti quantitativi (web analytics) e qualitativi (interviste utente, ad esempio);
• degli obiettivi che si vogliono perseguire con i propri contenuti (inclusione, efficienza del servizio, accessibilità, ecc.).

Per la creazione e la gestione di una versione multilingua di un sito è necessario organizzare un flusso di lavoro che preveda:

• la mappatura di tutti i contenuti;
• la scelta dei contenuti da tradurre, in base agli utenti e agli obiettivi da raggiungere;
• l’organizzazione all’interno del team del lavoro di traduzione e localizzazione dei contenuti;
• il test dell’efficacia dei contenuti tradotti (tramite A/B test, test di usabilità).

Se la traduzione riguarda solo alcune parti del sito:

• mostra in modo evidente l’interfaccia per scegliere la lingua alternativa;
• assicurati di tradurre anche il contesto, aggiungendo dei chiarimenti quando necessario, per non lasciare le informazioni isolate o dare per scontate altre informazioni che non sono tradotte.

“Tradurre” i contenuti di un sito o di una sezione di un sito non significa limitarsi a cambiare il testo dall’italiano alla lingua di destinazione, ma anche “localizzare” i contenuti, rendendoli comprensibili ed efficaci anche da chi parla un’altra lingua o ha una diversa cultura. Ad esempio:

• alcuni concetti o nomi possono non essere immediatamente comprensibili per un turista o un cittadino di altra nazionalità e vanno spiegati, oltre che tradotti (ad esempio, “il medico di base”, “gli esami di stato”, “l’Inps”, “l’Agenzia delle entrate”, ecc.);
• alcune espressioni possono avere un significato diverso se semplicemente tradotte in un’altra lingua (ad esempio, “timbra il biglietto” si potrebbe tradurre con “validate your ticket by stamping it at the machines” invece che con un semplice “stamp your ticket”);
• può essere necessario adattare alcuni contenuti in base alla cultura di chi legge (i concetti di “famiglia” e “congiunti”, ad esempio, potrebbero avere significati diversi e quindi in alcuni casi andare chiariti in base ai riferimenti culturali degli utenti a cui ci si rivolge).

In generale, si ritiene preferibile assegnare l’attività di traduzione ad agenzie certificate ed esperte nella traduzione per le comunità di lingua minoritaria, che assicurino il rispetto delle specificità linguistiche locali. Inoltre, quando possibile, si consiglia la consulenza di un esperto di localizzazione UX, per assicurare non la semplice traduzione testuale dei microtesti, ma il corretto adattamento degli aspetti di interazione delle interfacce alle convenzioni culturali della lingua di destinazione (per esempio, è necessario sapere che i pulsanti - le call to action vogliono il verbo all’infinito in lingua francese: “Scopri” diventa «Découvrir»).

I documenti vanno sul web¶

Principi come la trasparenza e l’open government fanno sì che qualsiasi testo, documento o legge della Pubblica Amministrazione sia considerato pubblico e di potenziale interesse per i cittadini.

Per questo motivo quasi tutti i contenuti della Pubblica Amministrazione già oggi vengono pubblicati sul web. Questo, però, non basta per informare i cittadini, per realizzare il concetto di trasparenza o per mettere in pratica una filosofia di open government: i contenuti ci sono ma sono troppo complessi, disorganizzati e difficili da trovare. Gran parte dei contenuti e dei documenti vengono scritti come se fossero a uso interno, senza impegno verso la semplificazione, l’accessibilità, l’inclusione.

La Pubblica Amministrazione deve iniziare a scrivere in modo semplice tutti i tipi di contenuto (compresi atti, norme, circolari), utilizzando come buone pratiche le regole di scrittura tipiche del web: questo, infatti, è il luogo dove i documenti verranno letti.

I contenuti di un buon documento dovrebbero essere:

• utili;
• comprensibili;
• ben organizzati;
• leggibili;
• accessibili.

Per approfondire: Guida al linguaggio della Pubblica Amministrazione

Tipi di documenti¶

Le pubbliche amministrazioni scrivono quotidianamente vari tipi di documenti, con scopi e destinatari diversi. La struttura e il modo in cui vengono presentate le informazioni determinano l’efficacia o meno del contenuto.

Per alcuni tipi di documento, è possibile individuare degli schemi fissi che è possibile sfruttare per creare nuovi testi. Ecco alcuni modelli che sono spesso usati dalla Pubblica Amministrazione:

Usa i suggerimenti e la struttura dei contenuti presenti in questi modelli per semplificare la scrittura di nuovi documenti.

Formato di lettura dei documenti elettronici¶

Prima di pubblicare un documento, le amministrazioni dovrebbero fare una riflessione sulla funzione che svolge e sulle esigenze degli utenti:

• Il documento verrà letto direttamente online?
• Deve poter essere scaricato?
• Deve poter essere modificato dagli utenti oppure no?

Partendo dall’idea che i documenti della Pubblica Amministrazione verranno letti online e, sempre più spesso, anche attraverso dispositivi mobili, il modo più naturale per rappresentarli è la forma di una pagina web. L’uso del formato Html presenta diversi vantaggi per l’utente, tra cui la possibilità di avere una pagina responsive (quindi leggibile anche sugli smartphone), consentire una buona indicizzazione del contenuto e dare la possibilità di condividere un punto specifico del documento tramite link interni.

Siccome le persone possono avere la necessità di salvare sul proprio dispositivo il contenuto e poi eventualmente stamparlo, è opportuno creare la funzione “Salva/stampa come Pdf” che consentirà di salvare documenti o form costruiti online.

L’idea di base è che tutta l’esperienza dell’utente avviene sul web, e la conversione in Pdf viene utilizzata solamente per una funzione specifica, che è quella di conservare sul proprio dispositivo il documento e stamparlo, se necessario.

In poche occasioni, l’amministrazione potrebbe avere la necessità di mettere a disposizione dell’utente dei documenti in formato aperto. In questo caso, per i formati di tipo documentale suggeriamo di condividere i documenti in formato Odt, mentre per i fogli di calcolo suggeriamo di utilizzare il formato Ods.

Quando per qualche motivo non è possibile mostrare il contenuto del documento in Html ma solo in formato Pdf (o in un altro formato di tipo documentale, come un Odt), è bene in ogni caso creare una pagina web che riporti almeno il titolo e la descrizione del documento Pdf che si intende pubblicare per favorire l’indicizzazione dei contenuti sul web.

Per i documenti non web specificare sempre con quale applicazione è possibile leggerli e fornire il collegamento per scaricare l’applicazione.

Modalità di produzione dei documenti¶

Le pubbliche amministrazioni hanno l’obbligo di conservare i documenti elettronici che producono o che ricevono, attraverso risorse interne o avvalendosi di soggetti esterni accreditati. Il processo di conservazione serve a garantire “autenticità, integrità, affidabilità, leggibilità, reperibilità” del documento stesso. Ma l’obiettivo principale di un documento è e resta quello di rispondere in modo semplice ai bisogni degli utenti per i quali è stato scritto, rispondendo a criteri di efficacia e inclusione. Dato che tutti i documenti della PA vengono pubblicati sul web, anche la modalità di creazione dei contenuti deve tener conto di questo fatto. Come abbiamo visto in precedenza, esistono essenzialmente due strade.

1. Creazione di un contenuto in formato Html in modo nativo

Con questo approccio, è possibile per esempio:

• creare un form online per raccogliere i dati altrimenti richiesti attraverso un documento Odt;
• creare una circolare online e poi dare all’utente la possibilità di convertirla in Pdf.

Questa strada è quella consigliata a tutti i livelli. Di seguito trovi l’approccio seguito dal progetto Docs Italia che, in modo coerente rispetto a questa impostazione, rappresenta una piattaforma a disposizione di tutte le amministrazioni per creare documenti e gestire i processi di consultazione come previsto dal CAD, art. 18.

2. Pubblicare sul web documenti di vario formato (Pdf, Odt e Ods)

In questo caso, è necessario accompagnare sempre i documenti con una pagina web che li descriva, con un titolo e una descrizione breve, in modo da favorire la fruibilità e l’indicizzazione del contenuto.

Di seguito trovi un approfondimento sulle buone pratiche per la gestione dei Pdf.

Testo alternativo (alt text) per le immagini¶

Il testo alternativo è un attributo HTML utilizzato per descrivere il contenuto e lo scopo di un’immagine. È fondamentale per gli utenti che utilizzano screen reader.

Come scrivere un testo alternativo:

• descrivi il contenuto chiave dell’immagine in modo conciso e chiaro;
• evita di iniziare con «Immagine di…» poiché gli screen reader identificano già l’elemento come un’immagine;
• se l’immagine è puramente decorativa, usa un alt text vuoto (alt=»«) per far sì che venga ignorata dagli screen reader.

Esempio: <img src=»foto-cane.jpg» alt=»Cane che gioca in un parco al tramonto»>

Sottotitoli per i video¶

I sottotitoli (closed captions) sono cruciali per garantire che i video siano accessibili a tutti. Seguire le best practice nella creazione dei sottotitoli assicura che il messaggio del video sia compreso da un pubblico più ampio, anche in condizioni in cui è difficile ascoltare l’audio.

Come impostare i sottotitoli:

• assicurati che i sottotitoli siano sincronizzati con l’audio del video;
• i sottotitoli devono includere non solo i dialoghi, ma anche descrizioni dei suoni importanti, come «suono della porta che si chiude»;
• includi descrizioni dei suoni significativi tra parentesi, come [suono della porta che si chiude] o [musica drammatica];
• assicurati che i sottotitoli rimangano sullo schermo abbastanza a lungo da essere letti comodamente;
• evita di sovraccaricare lo schermo con troppi sottotitoli. Spezza frasi lunghe in più righe, idealmente non più di 32 caratteri per riga;
• quando ci sono più persone che parlano, i sottotitoli devono chiarire chi sta parlando;
• usa la punteggiatura correttamente per riflettere il tono e il ritmo del discorso;
• se il video è destinato a un pubblico internazionale, offri sottotitoli in più lingue. Assicurati che le traduzioni siano accurate e mantenere lo stesso tono e contesto dell’originale;
• non inserire i sottotitoli direttamente sulla traccia video, ma crea un file apposito, in modo che gli utenti possano accenderli o spegnerli in base alle necessità e per assicurare che siano leggibili su vari tipi di disposititivo. I file di sottotitoli devono essere in formati standard per essere compatibili con la maggior parte delle piattaforme video, come .srt, .vtt, o .sub.

Trascrizioni per i video¶

Le trascrizioni sono documenti testuali separati dal video. Non sono sincronizzate in modo rigido con il tempo del video, anche se possono includere timestamp per riferirsi a specifici momenti del video. Sono utili per chi non può vedere o sentire il video, o per chi preferisce leggere il contenuto per vari motivi, come per scopi di ricerca, revisione o consultazione rapida.

Come impostare le trascrizioni:

• trascrivi ogni parola pronunciata nel video, includendo tutti i dialoghi, monologhi e voci fuori campo;
• indica chiaramente chi sta parlando, soprattutto se ci sono più persone coinvolte;
• descrivi tutti i suoni non verbali significativi, come musica, rumori ambientali, risate, applausi, o silenzi importanti. Inserisci questedescrizioni tra parentesi quadre o tonde per differenziarle dal dialogo, indicando anche il tono e l’intensità se rilevanti;
• fornisci una descrizione delle azioni visive importanti che contribuiscono alla narrazione o al contesto del video, come cambiamenti di scena, movimenti dei personaggi, o gesti importanti;
• in trascrizioni lunghe, è utile includi indicazioni temporali per allineare il testo con il momento esatto in cui avviene nel video;
• fornisci la trascrizione in formati accessibili, come file .txt, .pdf, o come testo direttamente inserito in una pagina web;
• collega la trascrizione direttamente al video o includi un link evidente che permetta agli utenti di scaricarla o visualizzarla facilmente.

Pubblicazione di contenuti prodotti dalla Pubblica Amministrazione¶

Tutti i contenuti pubblicati dalla Pubblica Amministrazione sono rilasciati per legge con una licenza open source, che ne permette l’utilizzo da parte di chiunque, anche per finalità commerciali.

Esistono molti tipi di licenze aperte che possono essere utilizzati per i contenuti della Pubblica Amministrazione. Per rendere più semplice l’utilizzo dei dati pubblicati da parte delle altre Pubbliche Amministrazioni e degli utenti, si suggerisce di indicare esplicitamente l’utilizzo della licenza Creative Commons Attribution 4.0 (codice SPDX: CC-BY-4.0).

Questa licenza riconosce la libertà di:

• condividere, ovvero riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato;
• modificare, ovvero fondere, trasformare il materiale e basarsi su di esso per le proprie opere per qualsiasi fine, anche commerciale.

Queste libertà sono subordinate al rispetto delle seguenti condizioni:

• attribuzione, ovvero dovere di riconoscere e menzionare la paternità dell’opera, di, fornire un link alla licenza e di indicare se ha subito delle modifiche;

Come seconda scelta, è anche utilizzabile la licenza Creative Commons Attribution-ShareAlike 4.0 (codice SPDX: CC-BY-SA-4.0), che introduce alla licenza precedente la cosiddetta clausola “share alike”:

• divieto di restrizioni aggiuntive, ovvero divieto di applicare termini legali o misure tecnologiche che impongano ad altri soggetti, ulteriori licenziatari dei medesimi dati o contenuti, dei vincoli giuridici su quanto la licenza consente loro di fare.

Quando i contenuti sono pubblicati all’interno di un sito web pubblico, le licenze di utilizzo possono essere indicate scrivendo nel footer:

“Tutti i contenuti presenti su questo sito web, salvo diversa specifica, si intendono rilasciati con licenza Creative Commons Attribution 4.0. I testi degli atti ufficiali sono, invece, in pubblico dominio (Creative Commons Zero).”

Nel caso della pubblicazione di documenti, si può fare una distinzione:

• Gli atti ufficiali della Pubblica Amministrazione non possono essere coperti da diritto d’autore. Per questi contenuti utilizza una dichiarazione esplicita di rilascio in pubblico dominio, applicando la dichiarazione presente nella licenza Creative Commons Zero, ovvero di chiarire che su di essi non insistono diritti d’autore di nessuno. In questo caso puoi scrivere:

  “Il presente contenuto è reso disponibile in pubblico dominio (licenza Creative Commons Zero).”

• Per tutti gli altri documenti è possibile adottare la licenza di Creative Commons Attiribution. In questo caso puoi scrivere:

  “Il presente contenuto è reso disponibile al pubblico nei termini di cui alla licenza Creative Commons Attribution 4.0. Il relativo contratto di licenza si intende concluso a seguito del semplice utilizzo del contenuto.”

• Sebbene sia sempre preferibile l’adozione di Creative Commons Attiribution, per motivate e comprovate ragioni in alcuni casi è possibile utilizzare altri tipi di licenze aperte. In questi casi si può precisare in calce l’indicazione:

  “Il presente contenuto è reso disponibile al pubblico nei termini di cui alla Licenza XXXX disponibile al seguente link: INSERIRE link al contenuto esteso della licenza. Il relativo contratto di licenza si intende concluso a seguito del semplice utilizzo del contenuto.”

Nota che le uniche licenze Creative Commons di tipo aperto sono la Creative Commons Zero, Creative Commons Attiribution e Creative Commons Attiribution-ShareAlike.

Pubblicazione di contenuti non prodotti dalla Pubblica Amministrazione¶

Quando pubblichi qualsiasi tipo di contenuto su un sito, un canale social, una newsletter, devi accertarti di averne il diritto. Per questo considera che:

• Tutte le immagini, i video e i file audio, salvo diversa indicazione, sono coperti da copyright, ovvero da diritto d’autore sulle immagini (inclusi i contenuti su canali come Youtube, Facebook, Twitter, Instagram etc.). Se intendi utilizzare contenuti protetti da copyright e rilasciati con una licenza non aperta devi richiedere l’autorizzazione al proprietario e conoscere i termini d’uso concessi. In questo caso l’attribuzione del copyright sotto il contenuto pubblicato dipende dal tipo di licenza acquisita.
• Alcuni contenuti sono pubblicati online con licenza Creative Commons (CC), un modo standardizzato per definire a quali diritti l’autore rinuncia e quali si riserva. I contenuti con licenza CC possono essere utilizzati liberamente a seconda del tipo di licenza espressa (utilizzo commerciale o non commerciale, possibilità di modifica del contenuto, ecc.), purché ci sia l’attribuzione al proprietario dei diritti.

Scrivi ad esempio: [Contenuto] di [nome autore], pubblicato sotto licenza [indicare licenza Creative Commons]

Per approfondire: Qual è il modo giusto di attribuire un’opera rilasciata con Creative Commons?

Consenso dei soggetti ritratti¶

Un altro tema da tenere in considerazione è quando pubblichi immagini o video all’interno di un sito o di un canale social che raffigurano dei soggetti riconoscibili. Queste immagini sono considerate dati personali e quindi regolate dalla normativa sulla privacy, che prevede che i soggetti pubblici ne possano fare uso soltanto per lo svolgimento delle proprie funzioni istituzionali.

• In caso di fotografie provenienti da archivi online, verifica attentamente cosa prevede la licenza di utilizzo. Nel caso della licenza Creative Commons Attribution 4.0, ad esempio, l’utilizzo delle immagini è vincolato al rispetto del diritto della riservatezza, dei diritti di immagine, dei diritti morali dei soggetti raffigurati.
• Nel caso di fotografie o video realizzati autonomamente, uno specifico consenso scritto è necessario nella maggior parte dei casi. La legge sul diritto d’autore prevede espressamente alcune eccezioni sul consenso, come le persone ritratte in eventi di pubblico interesse (una conferenza stampa, una manifestazione in piazza, un concerto), le persone famose (in base al pubblico interesse, come esponenti delle istituzioni, attori, personaggi pubblici), purché in contesti pubblici. Altre eccezioni riguardano “scopi di polizia, di giustizia, didattici o scientifici”.

In tutti gli altri casi la pubblicazione di fotografie o video in un sito deve essere sempre autorizzata dai soggetti ritratti con una liberatoria (qui trovi un modello pronto per l’utilizzo) in cui puoi specificare la destinazione del contenuto.

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

URL delle pagine¶

La URL di una pagina web appare come seconda linea testuale del risultato di ricerca (fra title e description).

Le URL delle pagine sono un elemento fondamentale nell’esperienza utente del sito. Le URL ottimali vengono dette «parlanti»: brevi, descrittive e che rispecchiano la struttura dei vari livelli del sito. Una buona URL, infatti, permette agli utenti e ai motori di ricerca di capire di cosa parla una pagina e dove si trova nel sito.

Le URL ottimali sono:

• brevi – ogni elemento dell’URL ha tra i 50 e i 60 caratteri, non più di 115;
• descrittive – danno un’idea del contenuto su pagina (contengono le parole chiave individuate);
• leggibili – scritti in minuscolo e separati da trattini (-);
• aderenti alla struttura del sito – presentano la posizione della pagina nel sito rispecchiando i livelli di alberatura.

Esempio della URL di una pagina del sito di un Comune che segue l’alberatura del modello Comuni di Designers Italia

È buona pratica l’utilizzo del file robots.txt per bloccare la scansione da parte dei crawler dei motori di ricerca delle URL con parametri dinamici (referral, ordinamenti, calendari…)

Ulteriori informazioni sulla struttura delle URL

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

Come configurare un sito web in Search Console

Centro assistenza Search Console

Come collegare Search Console a Google Analytics

L’inventario dei contenuti¶

Il primo passo consiste nella gestione ordinata dei contenuti (pagine, immagini, documenti o altro) spesso possibile attraverso il backend del proprio content management system (CMS) e la loro classificazione in content type e la loro organizzazione secondo un sistema di categorie o tag.

Ci sono situazioni particolari in cui può essere opportuno trasferire l’inventario dei contenuti (o una sua porzione) all’interno di un foglio di lavoro, come il Modello di analisi dei contenuti di Designers Italia. Per esempio in vista di una ottimizzazione SEO o di una riprogettazione del servizio, che potrebbe comportare la necessità di riclassificare i contenuti o introdurre nuovi criteri di classificazione. Un caso specifico è il processo di migrazione dei contenuti da un’infrastruttura tecnologica all’altra.

Revisionare i contenuti¶

L’attività più frequente per la gestione dei contenuti è il monitoraggio e l’ottimizzazione dei contenuti già esistenti. All’interno del kit Contenuti e linguaggio puoi trovare un modello di analisi contenuti da cui puoi prendere spunto per gestire la tua attività di revisione e monitoraggio dei contenuti.

L’analisi serve a:

• individuare pagine o contenuti da rimuovere;
• individuare contenuti da aggiornare;
• individuare contenuti assenti e che vanno realizzati;
• individuare la posizione di contenuti che devono migrare altrove;

L’analisi può prendere in esame, in diversi momenti e secondo gli obiettivi specifici, le seguenti dimensioni:

• tutte le pagine hanno uno scopo chiaro e definito?
• le informazioni sono immediatamente comprensibili?
• il linguaggio è semplice, chiaro, senza tecnicismi? Prova a leggere ad alta voce l’introduzione, per capire se il tuo testo è davvero efficace.
• Il testo è adatto alla lettura su dispositivi mobili?
• le informazioni sono organizzate bene all’interno della pagina?
• le informazioni sono aggiornate?
• i tag e i metadati sono trattati correttamente?
• ci sono titolo e sommario? Al loro interno trovi le giuste parole chiave? Introducono bene il contenuto della pagina?
• i documenti e le note sono trattati nel modo giusto?
• ci sono refusi o errori grammaticali?
• le etichette di navigazione nella pagina sono chiare? Riesci a capire dove ti porteranno?
• ci sono acronimi o delle maiuscole “di troppo”, che rendono meno chiaro il testo?
• sarebbe utile dividere le parti testuali in paragrafi o elenchi puntati?

In molti casi, il miglior modo di avviare l’analisi dei contenuti è fare dei test di usabilità con gli utenti di tipo task based, cioè concentrandosi sulla capacità dell’utente di raggiungere un risultato predeterminato. Questo tipo di analisi può far emergere problemi nella gestione delle informazioni. Per approfondire puoi consultare il kit dedicato ai test di usabilità.

Una seconda modalità di lavoro è quella degli A/B test, molto utile per avviare processi di miglioramento continuo delle interfacce utente (comprensive di label, microcopy e altri contenuti).

Infine, è utile avere sul proprio sito o servizio digitale un modulo di feedback sui contenuti, poiché fornisce un canale diretto per capire come vengono percepiti e quali miglioramenti possono essere apportati. Il feedback aiuta a identificare eventuali punti di debolezza, come informazioni poco chiare o contenuti non pertinenti, e a misurare la soddisfazione degli utenti, permettendo di adattare meglio i contenuti alle loro esigenze. Inoltre, coinvolgere gli utenti nel processo di miglioramento crea un senso di partecipazione e fiducia, rendendo il sito più efficace e user-friendly.

Migrare i contenuti¶

La migrazione dei contenuti è uno dei processi fondamentali del redesign di un sito web. Consiste nella riorganizzazione e nello spostamento dei contenuti (testi, immagini, video) dal vecchio sito alla struttura del nuovo.

Il redesign di un sito, infatti, è un’ottima opportunità per riorganizzare, riscrivere e ristrutturare i contenuti al fine di renderli più efficienti e allineati ai bisogni degli utenti.

Per migliorare l’efficacia della migrazione, si suggerisce di effettuare una serie di attività di perfezionamento e verifiche di performance del nuovo sito.

Pubblicare i contenuti¶

Il più delle volte la gestione dei contenuti avviene tramite sistemi di pubblicazione basati su Content management system (CMS), come ad esempio Wordpress o Drupal. Ma è possibile utilizzare altre modalità di pubblicazione e gestione dei contenuti: ad esempio, la piattaforma dove è ospitato questo manuale operativo utilizza GitHub come content management system e beneficia del suo version control system (versionamento).

È bene conoscere in modo approfondito gli strumenti di gestione dei contenuti, in modo da governare i processi di aggiornamento, classificazione e riclassificazione dei contenuti, e seguire le regole per una buona indicizzazione dei contenuti sui motori di ricerca.

Differenza tra scenari e user stories¶

Gli scenari sono le storie ad alto livello di indirizzo, aperte a tante ipotesi. Le user stories sono invece i passaggi più piccoli e dettagliati di uno scenario d’uso, che spiegano nello specifico i vari passaggi dell’interazione tra l’utente e l’interfaccia.

A questo punto della progettazione, è necessario scendere nel dettaglio delle azioni e definire le conseguenti risposte del sistema, in modo da mappare tutti i possibili percorsi che un utente può svolgere per raggiungere un obiettivo. Tali percorsi sono rappresentati dai flussi di interazione.

Elementi di composizione¶

Gli elementi che compongono un’interfaccia utente sono fondamentali per presentare le informazioni in modo chiaro e creare un’esperienza piacevole, che attiri e mantenga l’attenzione.

I principali elementi di composizione sono:

• il layout, per organizzare gli elementi su pagina e mantenere coerenza ed equilibrio visivo tramite l’uso di griglie;
• la palette dei colori, per definire l’identità visiva del prodotto, garantire la leggibilità dei contenuti e distinguere i diversi elementi dell’interfaccia;
• la tipografia, con la selezione dei font e la gerarchia tipografica, definisce lo stile e la leggibilità del testo, differenziando titoli, sottotitoli e paragrafi;
• le icone, come rappresentazioni grafiche di azioni, funzioni o contenuti, e le loro eventuali alternative o descrizioni accessibili, che devono essere coerenti e facilmente riconoscibili per garantire una comprensione immediata.

La combinazione di questi elementi permette di creare un’interfaccia unica che, da un lato, rispetta l’esigenza di identità del prodotto e, dall’altro, guida le persone al suo utilizzo.

Elementi interattivi¶

Gli elementi interattivi di un’interfaccia utente consentono alle persone di interagire direttamente con il prodotto digitale, rendendo l’esperienza d’uso dinamica e coinvolgente.

Pulsanti

I pulsanti, per esempio, sono elementi cliccabili o attivabili che permettono di eseguire azioni specifiche sulla pagina, come «Invia» o «Annulla». Questi devono presentare stati distinti per indicare se sono attivi, disabilitati o in hover. Per garantire l’accessibilità dell’interazione con gli elementi interattivi come i bottoni, gli stati non devono essere comunicati solo mediante elementi visivi, ma anche in modo tale che siano determinabili programmaticamente dalle tecnologie assistive. A tal fine, gestire gli attributi HTML per dichiarare lo stato degli elementi interattivi (ad esempio «checked» per le check box). Solo nel caso in cui non fossero disponibili specifici attributi HTML per definire uno stato, utilizzare gli attributi ARIA appropriati (ad esempio aria-expanded per dichiarare lo stato aperto/chiuso di un accordion).

Moduli (form)

I moduli (form) rappresentano un altro elemento chiave: campi di input, checkbox e select a tendina consentono agli utenti di inserire o selezionare dati. Questi devono essere accompagnati da etichette e istruzioni chiare per prevenire confusione, ed essere accompagnati da sistemi di validazione degli errori che ne guidino la risoluzione.

Quando si definiscono le etichette, è importante considerare che vengono utilizzate anche da persone che si avvalgono di tecnologie assistive, sia per la lettura vocale sia per il controllo tramite comandi vocali. Ad esempio, le persone che navigano utilizzando la voce, possono aver necessità di pronunciare il nome di un’etichetta per raggiungere uno specifico campo in un modulo. Pertanto, le etichette devono essere non solo facilmente leggibili visivamente, ma anche chiare e semplici da ascoltare e pronunciare. Ad esempio, un’etichetta composta esclusivamente da consonanti può risultare difficile da comprendere attraverso un lettore vocale e poco riconoscibile per un software di riconoscimento vocale quando pronunciata. Nel caso in cui sia necessario utilizzare etichette di questo tipo (ad esempio, per vincoli legali), è consigliabile integrarle con un nome esteso più facile da ascoltare e pronunciare.

Le istruzioni per l’utilizzo dei form devono essere progettate tenendo conto di diversi scenari d’uso. Ad esempio, durante l’uso in mobilità, alcune parti della pagina potrebbero non essere visibili come su uno schermo di grandi dimensioni. Inoltre, le persone che utilizzano tecnologie assistive, spesso navigano la pagina basandosi sulle relazioni logiche tra gli elementi piuttosto che sulle loro posizioni visive. Per queste ragioni, le istruzioni non devono fare riferimento esclusivamente al contesto visivo, ma devono includere indicazioni che menzionino esplicitamente i nomi degli elementi coinvolti, rendendole comprensibili anche in assenza di riferimenti spaziali. Ad esempio, il messaggio «Per proseguire, clicca sul pulsante rosso in alto a destra» contiene solo riferimenti visivi. Il seguente messaggio include sia caratteristiche visive sia informazioni di testo per individuare l’elemento: «Per proseguire, clicca sul bottone Avanti, in rosso in alto a destra».

Menu di navigazione

I menu di navigazione, come le barre di navigazione e le breadcrumb, guidano gli utenti attraverso le varie sezioni del prodotto, facilitando un’esplorazione semplice e intuitiva.

Link

I link permettono di navigare verso altre pagine o risorse e devono essere facilmente identificabili.

Questi elementi rappresentano solo una parte dei componenti interattivi utilizzabili in un’interfaccia. Quando implementati correttamente, con particolare attenzione anche al loro uso con tecnologie assistive, questi elementi non solo rendono l’interfaccia funzionale per tutte le persone, ma anche intuitiva e di facile utilizzo, migliorandone l’efficacia e l’esperienza d’uso.

Elementi testuali (microtesti)¶

I microtesti, in inglese microcopy, sono i testi dell’interfaccia che guidano le persone a navigare siti, app e altre esperienze digitali nel modo più intuitivo e semplice possibile. Progettare i microtesti come parte integrante dell’interfaccia è fondamentale per creare un prodotto o servizio facile da usare.

I principali tipi di microtesti per le interfacce sono:

• i testi di onboarding, che guidano alla registrazione, al primo accesso a un servizio o al primo uso di una funzionalità;
• i messaggi di errore, che informano le persone di eventuali problemi e come risolverli;
• i messaggi di conferma, che confermano di aver svolto correttamente un’azione;
• i tooltip, i testi che appaiono in sovrimpressione al passaggio del mouse, al tap o all’attivazione da tastiera, che danno maggiori informazioni sulle funzionalità di un prodotto;
• i segnaposto nei campi dei form e i messaggi di errore durante la loro validazione, per dare indicazioni chiare su come compilare senza commettere errori;
• gli empty state, ovvero i testi che indicano l’assenza di contenuti, come nei risultati di ricerca;
• i messaggi di caricamento, che spiegano alle persone cosa sta succedendo e perché si è in attesa;
• le notifiche del servizio o prodotto.

Layout di pagina¶

I layout sono rappresentazioni concrete e realistiche dell’interfaccia di un prodotto digitale. Tutti gli elementi sono realizzati con precisione: dai colori alla tipografia, dalla griglia e spaziature ai contenuti.

Questi artefatti rivestono un’importanza cruciale nel processo di progettazione e realizzazione. Permettono infatti di ottenere un’anteprima fedele del prodotto finale, sia prima dell’inizio della fase di sviluppo che durante il suo svolgimento.

Partendo dai wireframe o prototipi low-fi, gli elementi realizzati con semplici aree o blocchi di testo fittizio, vengono sostituiti con gli omologhi ad alta fedeltà.

La creazione dei layout delle pagine è un processo impegnativo: richiede un tempo considerevole e un’attenzione meticolosa ai dettagli. Realizzarli per tutte le tipologie di pagina presenti in un sito o servizio digitale non è, quindi, la strategia più efficiente.

È fondamentale, invece, identificare le tipologie di pagina di maggior valore sia per l’utente finale che per la natura del prodotto.

In quest’ottica, può rivelarsi vantaggioso organizzare le pagine secondo schemi ricorrenti (template). Per esempio, tutte le pagine che presentano un elenco di contenuti — come le liste di servizi, le notizie o i risultati di una ricerca — possono condividere lo stesso layout e aspetto dell’interfaccia.

Nella realizzazione dei layout in alta fedeltà, è fondamentale considerare i diversi dispositivi per cui si sta progettando, come specificato nel requisito 4.5 delle Linee guida di design. È quindi essenziale focalizzarsi sui dispositivi più utilizzati dagli utenti. Queste informazioni si possono ottenere facilmente durante la fase di ricerca condotta all’inizio del progetto.

Prototipi in alta fedeltà¶

In questa fase è utile realizzare anche i prototipi interattivi in alta fedeltà delle parti fondanti del progetto, adatti per esempio per svolgere test di usabilità per confermare o meno le scelte fatte sin qui e, in caso, migliorarle.

Se in precedenza hai realizzato i prototipi a bassa o media fedeltà tramite l’utilizzo dei wireframe, ora puoi convertirli in alta fedeltà utilizzando i layout di pagina.

Sia Figma che Sketch ti offrono la possibilità di creare un prototipo interattivo rapidamente, utilizzando i componenti già disponibili nello UI Kit Italia ed eliminando la necessità di uno strumento dedicato. Questa risorsa strategica riduce i tempi di realizzazione e ti permette di lavorare in alta fedeltà semplicemente assemblando l’interfaccia con elementi pronti all’uso.

Gli scenari da prototipare possono essere gli stessi che hai analizzato in bassa fedeltà, oppure puoi decidere di crearne di nuovi. L’importante è focalizzare l’attenzione sui casi d’uso identificati durante la ricerca.

Documentazione¶

La documentazione del design system .italia è organizzata in quattro sezioni: “Come iniziare”, “Come contribuire”, “Fondamenti”, “Componenti”.

La sezione “Come iniziare” aiuta a capire come utilizzare il design system in base al proprio ruolo: progettazione, sviluppo o gestione e pianificazione del progetto.

Nella sezione “Come contribuire” sono presentate le modalità per prendere parte all’evoluzione del design system. Anche questo, come tutti gli strumenti di Designers Italia, è uno strumento open source, aperto al contributo della comunità. In base al proprio ruolo, la sezione fornisce indicazioni e passi per contribuire alla documentazione, alle risorse di design e di sviluppo.

I “Fondamenti”, come suggerisce la parola stessa, contengono le basi per progettare e curare un servizio pubblico, senza dover partire da zero. La sezione presenta i valori alla base del design system (Princìpi e intenzioni), indicazioni sull’accessibilità, informazioni sulle interfacce e i design tokens, suggerimenti su come impostare il linguaggio e il tono di voce di un servizio e una pagina dedicata al versionamento semantico, le regole per costruire i numeri versione che permetteranno di far evolvere sempre più in modo trasparente e scalabile le diverse risorse del design system.

Infine, all’interno della sezione “Componenti” è possibile trovare tutti gli elementi pronti all’uso e già testati per realizzare un’interfaccia utente che sia semplice da usare e accessibile, come se fossero mattoncini da costruzione. Ogni componente ha una sua pagina dedicata, nella quale è possibile provarlo nelle diverse varianti e risoluzioni disponibili, anche per poter svolgere verifiche di accessibilità tecnica dedicate, leggere indicazioni e buone pratiche sull’uso corretto, trovare indicazioni sull’accessibilità e sui componenti alternativi, e accedere alle specifiche di design e al codice di sviluppo, pronto per essere copiato e usato.

Vai alla documentazione del design system .italia

Benefici del design system¶

Coerenza visiva e di comportamento

Utilizzando il design system .italia, le amministrazioni e i loro fornitori possono assicurare che tutti i loro siti web e applicazioni abbiano un’identità riconoscibile e coerente a quello che è un vero e proprio sistema integrato di identità aperta per la Pubblica Amministrazione italiana. Questo aiuta a creare un’esperienza utente più fluida, in cui gli utenti riconoscono immediatamente gli elementi e le interazioni standard, indipendentemente dal servizio pubblico che stanno utilizzando. Seguire un sistema integrato di identità per lo stile e l’esperienza d’uso dei servizi digitali pubblici ne migliora l’esperienza, li rende facilmente riconoscibili e aumenta la fiducia nelle persone che li utilizzano.

Efficienza e risparmio di tempo

Il design system .italia offre componenti predefiniti e testati che possono essere riutilizzati in diversi progetti. Prevede un approccio open all’evoluzione delle risorse e fa affidamento su un’ampia community di contributori con cui è possibile confrontarsi per la loro evoluzione. Questo può ridurre significativamente il tempo e le risorse necessarie per la progettazione e lo sviluppo, permettendo alle amministrazioni e ai loro fornitori di poter prototipare rapidamente soluzioni e concentrarsi su esigenze specifiche e funzionalità avanzate.

Miglioramento dell’accessibilità

L’approccio by design all’accessibilità del design system .italia, permette di realizzare siti e servizi partendo con risorse accessibili by default, che abilitano quindi un’applicazione più accessibile nel contesto d’uso. Questo è particolarmente importante per la Pubblica Amministrazione, che deve garantire inclusione e accesso universale alla cittadinanza, seguendo le norme, ma soprattutto realizzando siti e servizi di qualità per tutte le persone, indipendentemente dalle loro caratteristiche personali, conoscenze o condizioni di disabilità, temporanee o permanenti.

Aderenza agli standard

Il design system .italia segue gli standard di design e sviluppo web, rispettando i requisiti previsti dalle Linee guida di design per i siti internet e i servizi digitali della PA, emesse secondo quanto definito dall’articolo 53 del Codice per le Amministrazioni Digitali (CAD). Utilizzandolo, le pubbliche amministrazioni sono agevolate nel perseguire la conformità con queste normative, rispettando le migliori pratiche del settore e minimizzando il rischio di non conformità.

Migliore esperienza utente

Attraverso l’implementazione di un design coerente, intuitivo e di facile accesso, le amministrazioni pubbliche possono potenziare l’esperienza dei loro prodotti digitali. Questo rende la navigazione, la comprensione e l’uso dei siti e dei servizi più fluidi per gli utenti, incrementando così la loro soddisfazione e l’efficacia delle interazioni con il settore pubblico.

Approfondisci i benefici del design system .italia

Risorse operative¶

L’elenco delle risorse operative che fanno parte del design system .italia e che possono essere utilizzate sia per la fase di design che di sviluppo.

UI Kit Italia¶

È il kit dedicato alla realizzazione dell’interfaccia, disponibile sia per Figma che per Sketch. Fa parte del kit Costruzione interfaccia e mette a disposizione sia fondamenti, come griglie, colori, design tokens, tipografia, spaziature, sia componenti pronti all’uso.

UI Kit Italia è la risorsa principale per lavorare in alta fedeltà. Si tratta di una libreria di stili, icone e componenti che consente la creazione di layout di pagina e prototipi interattivi che simulano il comportamento di un prodotto digitale reale.

Il kit è organizzato in quattro sezioni principali:

• Fondamenti (Foundations) – i fondamenti visuali dell’interfaccia come griglie, colori, tipografia, spaziature;
• Navigazione (Navigation) – tutti i componenti dedicati alla navigazione di pagine e sezioni;
• Componenti (Components) – la lista completa dei componenti pronti per essere assemblati in un’interfaccia;
• Moduli (Forms) – gli elementi interattivi dedicati ai moduli, necessari per la compilazione e l’invio dei dati.

Questa suddivisione facilita l’identificazione degli elementi più adatti alle proprie esigenze. Lo stesso schema organizzativo viene utilizzato fin dall’inizio nel framework per lo sviluppo Bootstrap Italia, permettendo quindi a designer e sviluppatori di trovare ciò di cui hanno bisogno organizzato allo stesso modo.

Le pagine dedicate ai fondamenti sono organizzate per fornire dettagli approfonditi su come usare specifiche indicazioni o proprietà, come lo spazio all’interno di una griglia. Ogni foglio presentato sulla pagina mostra esempi di applicazione pratica e le relative spiegazioni, per favorire un utilizzo ottimale nel contesto specifico di ciascuno.

La pagina dedicata al fondamento griglia in UI Kit Italia.

Questa categoria comprende le pagine dedicate alle griglie e alla tipografia. È fondamentale non solo illustrare il loro funzionamento, ma anche spiegare le motivazioni dietro le scelte effettuate.

Le pagine dedicate ai componenti, navigazione e moduli sono progettate con l’idea di una libreria, dove si possono riutilizzare gli oggetti su vari layout di pagina o prototipi interattivi differenti, mantenendo una «relazione» con l’elemento originale. Questo concetto è simile ai componenti in Figma o simboli in Sketch.

La scheda del componente button in UI Kit Italia.

Per consentire la personalizzazione dei componenti, è possibile sfruttare le proprietà (properties) ad esso collegate. Queste sono definite durante la fase progettuale del componente e, in alcuni casi, seguono le specifiche tecniche della tecnologia che si può utilizzare.

È possibile modificare la variante di un componente utilizzando il pannelo delle proprietà (properties) in Figma.

La lista degli aggiornamenti, modifiche o correzioni è disponibile sia all’interno del kit, nella pagina “Intro & releases”, che allegata ad ogni nuovo rilascio.

Il kit è realizzato in Figma e reso disponibile anche per Sketch grazie all’utilizzo di “fig2sketch”, uno strumento automatico di conversione. Le due versioni differiscono in base alle specifiche funzionalità dello strumento, pur mantenendo la stessa lista di risorse e componenti riutilizzabili. È possibile scaricare l’ultima versione del kit per entrambi i software dal repository GitHub dedicato.

Vai allo UI Kit Italia su GitHub Vai allo UI Kit Italia su Figma community

Come contribuire al design system .italia¶

Il design system .italia è un progetto open source realizzato e mantenuto con approccio aperto e trasparente dal team di Designers Italia. È un progetto aperto ai contributi di tutte le persone, ciascuna secondo la propria esperienza e professionalità. Dalla documentazione alla segnalazione di problemi, da nuovi componenti al codice per lo sviluppo, è possibile prendere parte al miglioramento continuo del progetto.

Crediamo che siti e servizi digitali progettati in modo collaborativo siano migliori e che quindi il contributo della community sia fondamentale per far crescere la qualità dei siti e servizi della Pubblica Amministrazione italiana.

Scopri come contribuire

Vantaggi dell’utilizzo dei modelli¶

L’adozione dei modelli comporta i seguenti benefici principali:

• coerenza visiva - garantisce un’identità visiva uniforme tra i vari siti della pubblica amministrazione, aumentando il riconoscimento e la fiducia dei cittadini;
• esperienza utente ottimizzata - i modelli sono progettati seguendo le migliori pratiche di usabilità, assicurando un’interazione intuitiva ed efficace;
• conformità normativa - tutti i modelli rispettano le linee guida e le normative vigenti in materia di accessibilità e usabilità dei siti web pubblici;
• efficienza di risorse - l’utilizzo di modelli pronti all’uso riduce notevolmente i tempi e i costi di sviluppo per gli enti pubblici;
• flessibilità - pur mantenendo una struttura di base coerente, i modelli offrono ampia possibilità di personalizzazione per adattarsi alle esigenze specifiche di ogni ente.

I modelli di sito e servizi disponibili¶

I modelli di sito e servizi disponibili sono:

• Modello per i Comuni, progettato per soddisfare le esigenze informative e di servizio dei cittadini a livello comunale;
• Modello per le Scuole, ottimizzato per istituti scolastici di ogni ordine e grado, con sezioni dedicate a studenti, genitori e personale docente;
• Modello per le ASL, specificamente progettato per le Aziende Sanitarie Locali, con focus su informazioni sanitarie territoriali e servizi al cittadino;
• Modello per i Musei Civici, pensato per valorizzare il patrimonio culturale e facilitare la fruizione dei servizi museali.

Tutti i modelli sono facilmente adattabili e personalizzabili, sia nell’aspetto visivo che nei contenuti, per rispondere alle esigenze specifiche di ogni ente, mantenendo al contempo la coerenza con il design system .italia.

Vai ai modelli di Designers Italia

Attività preliminari¶

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:

• una analisi di componenti (librerie, linguaggi, documentazione, ecc.) e migliori pratiche già utilizzate e validate dalla community, che possano semplificare e standardizzare la realizzazione del servizio;
• una revisione dei requisiti di progetto con lo scopo di creare 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 tecnico, è preferibile 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 di sviluppo guidato dal comportamento (Behavior-driven development, abbreviato in 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.

Web design responsivo e accessibile¶

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, interazione e navigazione.

Al concetto di responsive web design vanno associate pratiche di semplificazione delle interfacce in ottica mobile first, e un’attenzione particolare va messa nel curarne l’accessibilità per fornire un’esperienza soddisfacente a tutte le persone, indipendentemente dalle loro caratteristiche personali, conoscenze o condizioni di disabilità, temporanee o permanenti, o dal loro uso di dispositivi con limitazioni o connessioni lente.

Mobile first¶

L’approccio mobile first 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.

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.

Progressive enhancement e Graceful degradation¶

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 fondamentale di contenuti che vengono via via arricchiti man mano che il dispositivo utilizzato dal cittadino è più performante e all’avanguardia.

Esiste anche una pratica che si muove in direzione opposta ma con lo stesso fine di rendere il contenuto fruibile su dispositivi con diverse caratteristiche e potenzialità: la graceful degradation. Con questo metodo 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 attraverso tecnologie meno moderne o interattive. In questo secondo caso, si può pensare anche in termini di tolleranza del sito all’assenza di alcune funzionalità.

Feature detection¶

Gli approcci allo sviluppo possono essere realizzati 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.

Attraverso una feature detection puntuale, puoi comprendere come indirizzare ogni aspetto dell’informazione che vuoi 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 (attraverso la regola @media), puoi mostrare versioni diverse di una pagina web a seconda che le persone stiano usando uno smartphone, un televisore o vogliano stampare la pagina stessa con la propria stampante:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

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

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Anche JavaScript ti permette di analizzare qualsiasi funzionalità presente tra le Web API (Application Programming Interface): 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 un esempio:

if ("geolocation" in navigator) {
  /* geolocalizzazione disponibile */
} else {
  /* geolocalizzazione NON disponibile */
}

Esistono anche librerie ed esempi di codice che hanno l’obiettivo di arginare le differenze tra i vari Browser fornendo il supporto di alcune funzionalità altrimenti mancanti, le cosiddette pratiche di polyfill e shim.

Si osservi che sebbene sia fondamentale rilevare alcune caratteristiche del metodo di accesso al sito da parte dell’utente per garantire un’esperienza ottimale e accessibile, non è opportuno tentare di identificare l’uso di specifiche tecnologie assistive per adattare di conseguenza l’esperienza di fruizione del servizio. La conformità alle linee guida WCAG non richiede la creazione di versioni specifiche per gli utenti che utilizzano tecnologie assistive, ma piuttosto l’applicazione dei principi del design for all, che promuovono una progettazione inclusiva per tutti gli utenti.

Verificare le feature disponibili con Can I use¶

Uno strumento molto utile per una verifica a monte delle feature disponibili nei browser è caniuse.com. Questo portale ti permette di ricercare e verificare se per i browser supportati è necessaria una gestione ad-hoc di determinate funzionalità oppure no.

Una volta individuati i dispositivi supportati e le feature da realizzare, è buona norma scegliere uno stack di sviluppo che ottimizzi il lavoro.

Strumenti e risorse per CSS e JavaScript¶

In ambito CSS, è ormai pressoché d’obbligo l’utilizzo di pre-processori (SASS, LESS, e PostCSS sono i più utilizzati), che migliorano la leggibilità e la modularità del codice sorgente, agevolando allo stesso tempo l’applicazione di pratiche virtuose quali l’utilizzo di Block Element Modifier (BEM), una metodologia per scrivere classi CSS “parlanti”, o di Autoprefixer per la gestione automatica di prefissi CSS a supporto dei vari motori di rendering presenti nei browser.

Per quanto riguarda Javascript invece, la scelta degli strumenti è talmente ampia e mutevole che delineare uno scenario ottimale in termini di framework o librerie non avrebbe senso senza un’analisi approfondita del progetto da realizzare. In questo ambito è necessaria una formazione continua, e un’attenzione particolare a ciò che permetta di ottenere codice modulare, scalabile e performante, senza appesantire l’esecuzione e l’interfaccia utente. Alcune risorse interessanti, in inglese, sono MDN e You don’t know JS.

Alcune pratiche sono comunque sempre raccomandabile, come la compressione del codice e il caricamento dei file JavaScript stessi in modo asincrono oppure al termine della pagina HTML, al fine di non bloccare il rendering della pagina stessa; o ancora, l’utilizzo di strumenti di analisi della sintassi come ESLint o StyleLint per rendere il codice leggibile e coerente con regole condivise dalla comunità degli sviluppatori.

Supporto browser¶

Come regola generale, per lo sviluppo di un sito web o servizio digitale per la Pubblica Amministrazione, è necessario assicurare la compatibilità con versioni dei browser che abbiano una penetrazione media tra la popolazione di almeno 1 persona ogni 100 abitanti. A questo proposito, puoiutilizzare come riferimento operativo la configurazione condivisa Browserslist dedicata alla Pubblica Amministrazione italiana.

È buona norma inoltre analizzare regolarmente le statistiche d’uso dei dispositivi e delle diverse risoluzioni che gli utenti adoperano per accedere al sito. Per fare questo, puoi avvalerti di diverse sorgenti di dati, tra le quali StatCounter.com che permette di filtrare i dati per paese e ti indica le versioni browser più usate in Italia.

Misurare le prestazioni¶

Le prestazioni di un sito o servizio digitale concorrono direttamente a una maggiore facilità d’uso e un’esperienza più soddisfacente per le persone. In questo senso, è bene differenziare due principali ambiti che possono avere impatto determinante sull’esperienza finale: i tempi di caricamento della pagina e le performance di esecuzione della pagina stessa.

Per analizzare i tempi di caricamento e rendering della pagina puoi utilizzare semplici strumenti online come Google PageSpeed e WebPagetest.org. Con questi strumenti, puoi verificare problemi di immediata risoluzione, come l’utilizzo di immagini esageratamente grandi o poco ottimizzate, oppure calibrare altri fattori, come sfruttare al meglio il caching del browser o dare priorità ai contenuti immediatamente visibili.

Per ottenere invece informazioni più dettagliate riguardo eventuali inefficienze di esecuzione del codice a runtime, puoi fare riferimento agli strumenti di analisi presenti nei principali browser (Google Chrome, Mozilla Firefox, Microsoft Edge) i quali possono dare indicazioni su eventuali problemi che avvengono durante la navigazione stessa di una singola pagina.

Chrome developer tools ti fornisce anche un’analisi approfondita di una pagina web nella sua sezione «Audits», permettendo di portare alla luce problemi in ambito di progressive web apps, performance, accessibilità, e utilizzo di best practices.

In caso di progettazione di progressive web apps ideate per essere usate principalmente su dispositivi mobili, è bene tenere a mente anche il concetto di offline first, fornendo un’esperienza di base anche in caso di limitata connettività.

Il framework Bootstrap Italia¶

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 a UI Kit Italia e sulla libreria Bootstrap 5. Esso contiene codice HTML, JS e CSS già pronto all’utilizzo per l’applicazione di tipografia, spaziature, design responsivo ed altri pattern di interfaccia. Bootstrap Italia semplifica lo sviluppo di un sito o servizio digitale accessibile, progettato con UI Kit Italia e seguendo norme e obiettivi di usabilità per rispondere in modo efficace ai bisogni della cittadinanza.

Bootstrap Italia eredita da Bootstrap 5 tutte le funzionalità, componenti, mixins, grid system e altre caratteristiche, personalizzandole dove necessario per implementare soluzioni secondo le Linee guida di design per i siti internet e i servizi digitali della PA. Questo framework è la risorsa di sviluppo principale dell’ecosistema design system .italia e implementa pattern e componenti dello UI Kit Italia in codice pronto all’uso.

Vai alla documentazione di Bootstrap Italia Scarica l’ultima versione di Bootstrap Italia

Da Bootstrap Italia sono derivati due kit di sviluppo basati sui framework React e Angular per aiutare gli sviluppatori che utilizzano una di queste tecnologie ad adottare il design system .italia all’interno dei loro progetti.

Il kit di sviluppo React¶

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

Vai alla documentazione del kit React

Il kit di sviluppo Angular¶

Il kit Angular contiene componenti programmati in linguaggio JavaScript, costruiti sulle basi di Angular (dalla versione 17 in poi), una libreria open source per sviluppo di applicazioni web e mobile ad alta interattività e scambio di dati.

Vai alla documentazione del kit Angular