Metodo di lavoro¶

In termini generali il design dei servizi richiede un percorso basato sull’analisi dei bisogni degli utenti, l’esplorazione di soluzioni attraverso la prototipazione rapida, l’esecuzione di una soluzione attraverso componenti di design e sviluppo tecnico, e infine un percorso di miglioramento continuo basato sulla misurazione dell’efficacia.

Un processo di design adeguato deve essere orientato ai risultati e deve quindi contemporaneamente:

• saper esplorare il problema;
• assicurarsi di ideare e costruire cose che servono;
• costruirle bene;
• avviare un percorso di miglioramento continuo.

Esistono diverse modalità pratiche “per fare design” e per organizzare i processi di progettazione, a partire dalle competenze chiave dei membri del gruppo di lavoro. Da questo punto di vista il processo di service design è perfettamente compatibile con modalità di lavoro lean e agile, tipiche dei processi di produzione di tecnologie digitali così importanti nello sviluppo dei servizi digitali. È possibile strutturare il percorso di progettazione per sprint di lavoro successivi, svolgendo dei cicli rapidi di ascolto dell’utente, ideazione di soluzioni, prototipazione, e continuare a iterare in questo modo facendo evolvere man mano il prototipo in una soluzione solida, da rendere disponibile a tutti.

Tipologie di progetti¶

Per favorire la nascita di una nuova generazione di servizi digitali, le Pubbliche Amministrazioni devono attivare percorsi di design dei servizi che possiamo classificare in tre aree.

Ottimizzazione di servizi esistenti Nel caso di ottimizzazione di servizi esistenti è necessario prima di tutto raccogliere tutti i dati disponibili relativi al loro utilizzo attuale (tramite web analytics, interviste utente oppure usability test) e analizzarli 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 (user stories). Le user stories sono il punto di partenza per riprogettare i flussi di interazione e le interfacce del servizio, effettuando interventi mirati.

Riprogettazione di servizi esistenti in chiave digitale Nel caso di processi di digitalizzazione di servizi esistenti bisognerà 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. In questa fase sarà necessario capire l’intero sistema che supporta l’erogazione del servizio (system map) e verificare quali aspetti possono essere digitalizzati e quali no, e capire come le due dimensioni si integrano. Terminati questi passaggi sarà possibile identificare le funzionalità chiave del servizio digitale e iniziare l’attività di progettazione, sempre attraverso la creazione di storie (user stories) che possono guidare l’attività di design e sviluppo in parallelo. In corso di sviluppo del prototipo, sarà bene verificare con gli utenti l’avanzamento in modo da validare la direzione progettuale e l’usabilità del servizio (test di usabilità).

Ogni volta che si progetta un servizio digitale bisogna analizzare e riprogettare anche le altre forme di interazione con il cittadino relative a quel 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. In alcuni casi, i servizi digitali arricchiscono e supportano servizi che utilizzano canali fisici (ad esempio, il servizio digitale che permette di prendere un appuntamento per il rinnovo della carta d’identità in Comune); in altri casi, offrono soluzioni alternative al cittadino (per esempio il servizio che permette di ottenere un certificato on line e in alternativa andare a richiederlo allo sportello di un Comune). In casi ulteriori, infine, l’attivazione di un servizio digitale può produrre lo “spegnimento” delle modalità tradizionali di offerta del servizio (per esempio una procedura on line di partecipazione ai bandi che sostituisce la consegna di un modulo cartaceo): in questi casi si parla di “switch off” di un servizio.

Creazione di nuovi servizi L’attività di creazione di nuovi servizi necessita uno sguardo ancora più ampio, partendo dalla mappatura di tutti gli stakeholder coinvolti e delle loro reciproche relazioni La comprensione dell’ecosistema aiuta a identificare quali attori è necessario coinvolgere o attivare, e quali dinamiche possono facilitare (o rendere molto difficile) la costruzione e l’implementazione del progetto. Sempre in questa fase, sarà necessario raccogliere il punto di vista degli utenti tramite attività di ricerca sul campo (intervista in contesto e osservazione), 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 co-progettazione (co-design workshop) dove stakeholder, progettisti e utenti vengono invitati a dialogare e svolgere una serie di esercizi di ideazione insieme, in modo da dare forma a delle proposte di soluzioni. I risultati delle fase di ideazione possono essere a loro volta formalizzati in una serie di proposte di design (information architecture, flussi di esperienza e storie), 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 è il sito Designers Italia che, oltre alle presenti linee guida offre kit e case histories.

System maps¶

Le mappature del sistema sono delle rappresentazioni sintetiche di tutti gli attori coinvolti nell’erogazione del servizio, e dei flussi di motivazioni e valori che scambiano. La mappatura del sistema guarda al servizio dall’alto, e cerca di rispondere alle seguenti domande:

• quali sono i soggetti coinvolti;
• quali interessi li motivano a partecipare al servizio;
• che cosa offre e riceve ciascun soggetto.

Le mappe di sistema hanno il vantaggio di descrivere in modo visivo e sintetico una serie di contenuti che diversamente andrebbero descritti in modo testuale o verbale. Il vantaggio della rappresentazione visiva è quello di semplificare la complessità, portando alla luce i tratti salienti del sistema. Le mappe di sistema aiutano a chiarire le idee all’interno di gruppi di lavoro estesi, allineando il punto di vista su come è strutturato il sistema e quali sono gli scambi di valori in corso. Le mappature aiutano a focalizzare la discussione, ragionando in modo partecipato rispetto agli elementi che funzionano o non funzionano di un sistema e come potrebbero essere migliorati. La mappatura del sistema può assumere diverse strutture a seconda delle esigenze del gruppo di lavoro:

Stakeholder Map: si tratta di un diagramma a due assi che permette di mappare i diversi stakeholder coinvolti interrogandosi sulla loro partecipazione al progetto in questione. La mappa si costruisce partendo da due assi, relativi al livello di interesse e al tipo di influenza. Incrociando queste due variabili si ottengono quattro quadranti, che suggeriscono diverse tipologie di comportamento: per esempio se uno stakeholder è molto interessato ma poco influente sarà necessario tenerlo informato sugli avanzamenti del progetto ma nulla di più, mentre se uno stakeholder è molto influente ma poco interessato sarà necessario prestare attenzione alle sue esigenze e cercare di anticiparle. La matrice aiuta ad assumere il punto di vista di ciascun soggetto, capire gli interessi in gioco e agire di conseguenza.

Ecosystem Map: se prendiamo in considerazione un servizio e tutti i soggetti coinvolti nella sua erogazione (dall’utente finale all’operatore della Pubblica Amministrazione) possiamo descrivere le loro relazioni evidenziando i passaggi di informazioni, documenti, denaro o altro valore, che intercorrono tra l’uno e l’altro. Le mappe di sistema vengono costruite mettendo al centro il cittadino, e disponendo attorno a lui tutti i soggetti interessati: più vicino quelli maggiormente a contatto con l’utente e mano a mano più lontano quelli con le relazioni più deboli o nascoste. In un secondo momento, vengono tracciate delle linee di collegamento che forniscono l’informazione relativa allo scambio che avviene tra ciascun soggetto e soggetti vicini, costruendo man mano un’immagine completa della struttura su cui si basa il servizio.

Coinvolgere gli stakeholder¶

I processi di design dei servizi richiedono il coinvolgimento di tutti gli stakeholder il cui ruolo è collegato all’attività progettuale. Questo permette di capire le loro prospettive e motivazioni, allineare diversi punti di vista attorno ad una soluzione unica, creare consenso e prendere le decisioni necessarie più rapidamente. Il coinvolgimento dei dirigenti della Pubblica Amministrazione e degli addetti ai lavori dei vari Ministeri è necessario fin dalle fasi di definizione dei requisiti progettuali e del concept di servizio, per arrivare ai momenti di validazione e test del prodotto. La loro partecipazione può avvenire durante incontri di avanzamento lavori sul progetto o in sede di workshop progettuali, in cui si lavora in modo collaborativo attorno ad alcuni temi chiave del servizio in corso di definizione.

Personas e profili utente¶

I personas sono delle rappresentazioni astratte degli utenti che aiutano il team di progetto ad analizzare i loro bisogni e immaginare soluzioni concrete che rispondono ai loro problemi. Partendo dai risultati della ricerca qualitativa (interviste individuali) si creano dei raggruppamenti che poi vengono raccontati sotto forma di personaggi-tipo, ovvero personas. La costruzione dei personas può essere anche elaborata sulla base di ipotesi condivise da un gruppo di professionisti della Pubblica Amministrazione o cittadini che prendono parte ad attività di co-progettazione. In questo caso viene fornito un foglio di lavoro che aiuta il gruppo di partecipanti a ragionare sulle variabili chiave di quel personaggio, e immaginarsi la sua vita, le sue abitudini, le sue esigenze. La narrazione dei personas può coinvolgere una serie diversa di variabili a seconda del contesto di progettazione, e di cosa è effettivamente utile al progettista. In generale, contengono:

• nome, età, professione: dati anagrafici che aiutano a capire la tipologia di utente;
• un motto: una frase esemplificativa che rappresenta la sua attitudine
• bisogni, attività, sfide: le necessità e criticità collegate al servizio analizzato;
• utilizzo della tecnologia: quali dispositivi e con quale frequenza;
• strumenti di riferimento: applicazioni o servizi che utilizza spesso.

Vai al Kit Personas

User Journey¶

Lo strumento di user journey (detto anche customer journey o experience map) viene utilizzato per descrivere in modo sintetico l’esperienza d’uso di un determinato servizio. La rappresentazione sintetica permette di condensare in poco spazio un grande quantitativo di informazioni legate al processo, che richiederebbe diversamente lunghi paragrafi di descrizione senza di fatto facilitare la comprensione dei diversi passaggi e la riflessioni sugli aspetti migliorabili.

La mappa dell’esperienza viene costruita mettendo sull’asse orizzontale tutte le fasi in cui si svolge l’interazione con un servizio seguendo una sequenza logica-temporale. Per ogni fase vengono poi elencate le attività e i touchpoint con cui l’utente interagisce, costruendo una rappresentazione sintetica della sua esperienza, attraverso tutto ciò che avviene prima, durante e dopo. La mappatura può essere infine completata evidenziando la reazione emotiva che caratterizza l’esperienza dell’utente nelle varie fasi, che può essere caratterizzata da soddisfazioni o frustrazioni.

Lo strumento di mappatura della user journey permette di analizzare tutti i flussi dell’esperienza di un servizio esistente o di un servizio in corso di definizioni, evidenziando le criticità su cui intervenire e le differenze tra le modalità di interazione dei diversi possibili utenti.

Il workshop di co-design¶

I workshop di co-design sono dei momenti di progettazione in cui un gruppo eterogeneo di partecipanti (progettisti, utenti, stakeholder della Pubblica Amministrazione e rappresentanti di aziende private) si ritrovano con l’obiettivo di ragionare insieme su alcuni aspetti chiave di un servizio. Queste sessioni di lavoro collaborativo hanno la capacità di allineare il punto di vista dei diversi attori coinvolti nell’esecuzione di un servizio, sollevando i problemi chiave e allo stesso tempo accelerando il processo di identificazione di soluzioni promettenti.

I workshop risultano in particolare molto utili quando al termine di un’attività preliminare di ricerca si inizia la definizione di storie 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 Amministrazioni ai cittadini che utilizzano i propri servizi.

Organizzare dei workshop di co-progettazione richiede di svolgere i seguenti passaggi.

1. Identificazione di un obiettivo chiaro, raggiungibile mediante la sessione di lavoro collaborativo, assicurandosi quindi di aver già raccolto tutte le informazioni necessarie per impostare al meglio l’attività di co-progettazione e non farla diventare una perdita di tempo per mancanza di dati o lacune nella preparazione.
2. Compilazione di una lista di partecipanti da invitare al workshop, cercando di raccogliere l’adesione di tutti gli stakeholder coinvolti sul progetto e di coinvolgere una piccola rappresentanza per tutti gli attori rilevanti (utenti, operatori del servizio, soggetti privati, altri esperti o progettisti). Gli inviti dovranno dichiarare l’obiettivo della sessione e dare un’idea chiara del risultato atteso.
3. Scelta di luogo, data e durata della sessione. La durata consigliata è di circa mezza giornata (4 ore), in modo da avere tempo per introdurre al meglio le attività, svolgere gli esercizi programmati e discutere i risultati. Il workshop può quindi iniziare o concludersi con un momento di ristoro, che permette ai partecipanti di stabilire un contatto tra di loro e approfondire alcune discussioni in modo più informale.
4. Definizione nel dettaglio dell’agenda per la sessione di workshop, identificando una serie di esercizi da svolgere insieme e assegnando una durata a ogni esercizio. Se l’obiettivo è quello di generare insieme idee relative al servizio in questione, ci possono essere diverse strategie di impostazione della sessione. In alcuni casi si può ad esempio partire dai bisogni dell’utente, mappando i personas e le loro user journey per individuare le criticità attuali e utilizzarle come ispirazione per generare idee. In altri casi si può invece partire da una mappa di sistema, riflettendo su tutte le criticità legate ai diversi ruoli e all’insieme di relazioni necessarie per abilitare il servizio e utilizzando il metodo del card sorting per discutere quali opportunità prioritizzare nel dare forma ad un nuovo servizio o nel migliorare il servizio esistente. Le scalette e strumenti citati sono solo esempi, ciascun gruppo di lavoro dovrà pensare una propria agenda per il workshop e ad un mix di esercizi adatti rispetto allo specifico contesto ed obiettivo progettuale.

Durante il workshop è importante fin da subito chiarire lo spirito di una sessione di lavoro collaborativo e invitare i partecipanti a ricordare che non ci sono idee giuste o idee sbagliate: l’importante è riuscire a costruire l’uno sulle idee e il contributo dell’altro in modo propositivo. Bisogna riuscire a mettere da parte per un momento le gerarchie, i vincoli, le leggi, e pensare fuori dagli schemi, esplorando soluzioni mai pensate fino a quel momento in totale libertà. Solo in un secondo momento, guidati dal moderatore, si passerà ad analizzare ogni idea emersa in modo più attento, per capire se è (o non è) attuabile e in caso negativo cosa possiamo conservare di quell’idea per migliorare ciò che abbiamo.

Vai al Kit di Designers Italia per i Co-Design Workshop

Decreti attuativi del CAD¶

• Decreto del Presidente del Consiglio dei Ministri 3 dicembre 2013 Regole tecniche in materia di protocollo informatico ai sensi del CAD (particolare rilievo assumono gli obblighi di pubblicazione a carico delle P.A., di cui all’art. 5, comma 3, relativamente al manuale di gestione; da art. 18, commi 2 e 3, circa l’indirizzo della casella di posta elettronica certificata direttamente associata al registro di protocollo, da utilizzare per la protocollazione e gli altri indirizzi di posta elettronica istituiti).
• Decreto del Presidente del Consiglio dei Ministri 13 novembre 2014 Regole tecniche in materia di formazione, trasmissione, copia, duplicazione, riproduzione e validazione temporale dei documenti informatici nonché di formazione e conservazione dei documenti informatici delle pubbliche amministrazioni ai sensi del CAD (particolare rilievo assume obbligo di pubblicazione a carico delle P.A. di cui all’art. 10 per cui, ai fini della trasmissione telematica di documenti amministrativi informatici, le PA pubblicano sui loro siti gli standard tecnici di riferimento, le codifiche utilizzate e le specifiche per lo sviluppo degli applicativi software di colloquio).

Siti web istituzionali¶

Amministrazione trasparente

Inserire una sezione denominata «Amministrazione trasparente», contenente una struttura prevista dall’allegato A del decreto. E’ necessario inserire la voce «Amministrazione trasparente», preferibilmente in una posizione che ne garantisca il raggiungimento da tutte le pagine interne del sito (es: nel footer).

• Riferimento normativo: art. 9 DECRETO LEGISLATIVO 14 marzo 2013, n. 33
• Riferimento UI: Homepage/footer

Pubblicità legale

Posizionare nella home page un collegamento all’area in cui si effettua la pubblicità legale, identificandola con la dicitura «Pubblicità legale» oppure, ove previsto dalle specifiche normative, «Albo pretorio» (es: amministrazioni locali) o semplicemente «Albo» (es: istituzioni scolastiche).

• Riferimento normativo: art. 32 LEGGE 18 giugno 2009, n. 69
• Riferimento UI: Homepage, sezione “Pubblicità legale”

Partita IVA

La partita IVA deve essere pubblicata in home page per tutti i soggetti titolari di partita IVA. Si consiglia di inserire tale informazione all’interno del blocco di contenuti nel footer di pagina contenente i dati di contatto.

• Riferimento normativo: art. 35 D.P.R. n. 633/1972 comma 1
• Riferimento UI: Homepage/footer

PEC

I siti web istituzionali delle PA sono tenute a pubblicare nella home page del sito un indirizzo di posta elettronica certificata a cui il cittadino possa rivolgersi per qualsiasi richiesta formale, come previsto dal Codice dell’Amministrazione Digitale (CAD). Inserire la mail nel footer di pagina contenente i dati di contatto.

• Riferimento normativo: art. 34 LEGGE 18 giugno 2009, n. 69
• Riferimento UI: Homepage/footer

Pubblicazione atti di carattere normativo e amministrativo generale

Le PA , “fermo restando quanto previsto per le pubblicazioni nella Gazzetta Ufficiale della Repubblica italiana dalla legge 11 dicembre 1984, n. 839, e dalle relative norme di attuazione,“pubblicano sui propri siti istituzionali i riferimenti normativi con i relativi link alle norme di legge statale pubblicate nella banca dati «Normattiva» che ne regolano l’istituzione, l’organizzazione e l’attività. Sono altresì pubblicati le direttive, le circolari, i programmi e le istruzioni emanati dall’amministrazione e ogni atto, previsto dalla legge o comunque adottato, che dispone in generale sulla organizzazione, sulle funzioni, sugli obiettivi, sui procedimenti […]”.

• Riferimento normativo: art.12 DECRETO LEGISLATIVO 14 marzo 2013, n. 33

Trattamento dati personali

Individuazione delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie. Banner per la richiesta di consenso all’uso dei cookie e pagina per informazioni sui cookie.

• Riferimento normativo: Garante per la protezione dei dati personali - Provvedimento dell’8 maggio 2014 - Gazzetta Ufficiale n. 126 del 3 giugno 2014
• Riferimento UI: Homepage/footer

Informativa trattamento dati personali - Informativa sul trattamento dei dati personali mediante link «Privacy».

• Riferimento normativo: DECRETO LEGISLATIVO 30 giugno 2003, n.196
• Riferimento UI: Homepage/footer

Accessibilità¶

1. Legge 9 gennaio 2004, n. 4, (aggiornata dal Decreto legislativo 10 agosto 2018, n.106) Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici.
2. Decreto legislativo 10 agosto 2018, n.106, attuazione della direttiva (UE) 2016/2102 relativa all’accessibilità dei siti web e delle applicazioni mobili degli enti pubblici).
3. Direttiva (UE) 2016/2021 del 26 ottobre 2016, relativa all’accessibilità dei siti web e delle applicazioni mobili degli enti pubblici.
4. Decisione di esecuzione (UE) 2018/2048 della Commissione del 20 dicembre 2018, relativa alla norma armonizzata per i siti web e le applicazioni mobili elaborata a sostegno della direttiva (UE) 2016/2102 del Parlamento europeo e del Consiglio.
5. Decisione di esecuzione (UE) 2018/1524 della Commissione dell’11 ottobre 2018, che stabilisce una metodologia di monitoraggio e definisce le disposizioni riguardanti la presentazione delle relazioni degli Stati membri conformemente alla direttiva (UE) 2016/2102 del Parlamento europeo e del Consiglio relativa all’accessibilità dei siti web e delle applicazioni mobili degli enti pubblici.
6. Decisione di esecuzione (UE) 2018/1523 della Commissione dell’11 ottobre 2018, che istituisce un modello di dichiarazione di accessibilità conformemente alla direttiva (UE) 2016/2102 del Parlamento europeo e del Consiglio relativa all’accessibilità dei siti web e delle applicazioni mobili degli enti pubblici.
7. Decreto Ministeriale 30 aprile 2008, regole tecniche disciplinanti l’accessibilità agli strumenti didattici e formativi a favore degli alunni disabili. (GU Serie Generale n.136 del 12-06-2008).

1. allegato A linee guida editoriali per i libri di testo.
2. allegato B linee guida per l’accessibilità e la fruibilità del software didattico da parte degli alunni disabili.

8. Decreto-legge 18 ottobre 2012, n. 179, (convertito con modificazioni dalla L. 17 dicembre 2012, n. 221), all’art. 9 (Documenti informatici, dati di tipo aperto e inclusione digitale) è stato previsto, tra l’altro, l’obbligo per le amministrazioni pubbliche […] di pubblicare nel proprio sito web, gli obiettivi di accessibilità per l’anno corrente e lo stato di attuazione del «piano per l’utilizzo del telelavoro» nella propria organizzazione.

Trasparenza¶

1. Legge 7 agosto 2015, n. 124 , recante: «Disposizioni per garantire ai cittadini di accedere a tutti i dati, i documenti ed i servizi in modalità digitale».
2. Legge 7 agosto 1990, n. 241 «Nuove norme in materia di procedimento amministrativo e di diritto di accesso ai documenti amministrativi». L’art.2 stabilisce tra l’altro che: per ciascun procedimento, sul sito internet istituzionale dell’amministrazione è pubblicata, in formato tabellare e con collegamento ben visibile nella homepage, l’indicazione del soggetto a cui è attribuito il potere sostitutivo e a cui l’interessato può rivolgersi.
3. Legge 18 giugno 2009, n. 69, «Disposizioni per lo sviluppo economico, la semplificazione, la competitività nonché in materia di processo civile» , in particolare l’articolo 21 «Trasparenza sulle retribuzioni dei dirigenti e sui tassi di assenza e di maggiore presenza del personale»
4. Legge 6 novembre 2012, n. 190 «Disposizioni per la prevenzione e la repressione della corruzione e dell’illegalità nella Pubblica Amministrazione» incluse le «Specifiche tecniche per la pubblicazione dei dati ai sensi dell’art. 1 comma 32 Legge n. 190/2012» di ANAC - versione 1.2 di gennaio 2016
5. Decreto legislativo 14 marzo 2013, n. 33 «Riordino della disciplina riguardante il diritto di accesso civico e gli obblighi di pubblicità, trasparenza e diffusione di informazioni da parte delle pubbliche amministrazioni».
6. Determinazione ANAC n. 6/2015 Linee guida in materia di tutela del dipendente pubblico che segnala illeciti (c.d. whistleblower)
7. Legge 7 agosto 2015, n. 124, recante: «Disposizioni per garantire ai cittadini di accedere a tutti i dati, i documenti ed i servizi in modalità digitale».
8. Delibera ANAC n. 39 del 20 gennaio 2016 sull’assolvimento degli obblighi di pubblicazione e di trasmissione delle informazioni all’Autorità Nazionale Anticorruzione, ai sensi dell’art. 1, comma 32 della legge n. 190/2012.
9. Decreto legislativo 18 aprile 2016, n. 50 «Codice dei contratti pubblici» (vigente): l’art. 29 reca la disciplina riguardante Principi in materia di trasparenza (perciò si coordina con Decreto legislativo n. 33/2013)
10. Delibera ANAC n. 1309 del 28/12/2016 Linee guida operative sull’attuazione dell’accesso civico generalizzato (FOIA), Esclusioni e Limiti.
11. Delibera ANAC n. 1310 del 28/12/2016 Prime linee guida recanti indicazioni sull’attuazione degli obblighi di pubblicità, trasparenza e diffusione di informazioni contenute nel d.lgs. 33/2013 come modificato dal d.lgs. 97/2016.

Privacy¶

1. Decreto legislativo 30 giugno 2003, n. 196 e ss.mm.i. Codice in materia di protezione dei dati personali (c.d. Codice della Privacy).
2. Deliberazione del 15 maggio 2014, n. 243 Linee guida in materia di trattamento di dati personali, contenuti anche in atti e documenti amministrativi, effettuato per finalità di pubblicità e trasparenza sul web da soggetti pubblici e da altri enti obbligati
3. Individuazione delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie» dell’8 maggio 2014
4. Decreto legislativo 10 agosto 2018, n. 101 Disposizioni per l’adeguamento della normativa nazionale alle disposizioni del regolamento (UE) 2016/679 del Parlamento europeo e del Consiglio, del 27 aprile 2016, relativo alla protezione delle persone fisiche con riguardo al trattamento dei dati personali, nonché alla libera circolazione di tali dati e che abroga la direttiva 95/46/CE (regolamento generale sulla protezione dei dati).

GDPR¶

Regolamento (UE) 2016/679 del Parlamento Europeo del Consiglio del 27 aprile 2016 relativo alla protezione delle persone fisiche con riguardo al trattamento dei dati personali, nonché alla libera circolazione di tali dati e che abroga la direttiva 95/46/CE (regolamento generale sulla protezione dei dati):

1. Obbligatorietà della designazione del Responsabile della protezione dei dati (Data Protection Officer - DPO) per alcune tipologie di enti pubblici e privati (art.37)
2. Diritto dell’interessato di richiedere, in qualunque momento e secondo le modalità e alle condizioni previste dal Regolamento, l’accesso ai dati personali e la rettifica o la limitazione del trattamento (artt. 15-16-18).
3. Diritto alla cancellazione o diritto all’oblio (art. 17)
4. Diritto alla portabilità dei dati (art. 20)
5. Diritto di opposizione (art. 21)
6. La liceità del trattamento è individuabile nella base giuridica (art. 6): il consenso dell’interessato, la necessità di eseguire un contratto o misure precontrattuali, la necessità di adempiere un obbligo legale, la salvaguardia di interessi vitali, l’esecuzione di un compito di interesse pubblico o connesso all’esercizio di pubblici poteri, il perseguimento di un legittimo interesse
7. Obbligo del titolare di rendere un’informativa sul trattamento dei dati personali sia quando i dati sono raccolti con il consenso dell’interessato sia quando la raccolta prescinde dal consenso (artt. 13-14)
8. Protezione dei dati fin dalla progettazione e per impostazione predefinita (art.25)
9. Predisposizione e la tenuta dei Registri delle attività di trattamento (art. 30)
10. Sicurezza dei dati personali e la notifica dell’eventuale violazione dei dati (artt. 32-33)
11. Valutazione d’impatto sulla protezione dei dati e l’eventuale consultazione preventiva con il Garante (artt. 35-36)

Comunicazione pubblica¶

1. Legge 7 giugno 2000, n. 150 Disciplina delle attività di informazione e di comunicazione delle pubbliche amministrazione.

I wireframe¶

Un wireframe è l’illustrazione a due dimensioni dell’interfaccia di una pagina. Ha come priorità:

• l’organizzazione degli elementi interattivi e dei blocchi di contenuto nello spazio disponibile sullo schermo;
• evidenziare le funzionalità disponibili
• mostrare la sequenza di passaggi (userflow) che l’utente deve fare per concludere un processo;

Date queste priorità, i wireframe non comprendono stili, colore o grafica: possiamo chiamare questo tipo di wireframe anche wireframe lo-fi o mid-fi, o a bassa o media definizione. Tra i suoi scopi, il wireframe ha quello di mostrare le relazioni tra i contenuti del sito e i flussi di interazione, e condurre progressivamente l’utente al raggiungimento dei propri obiettivi. Questa funzione è assolta dai wireframe interattivi (o user flow), sequenze di wireframe che permettono di simulare il percorso dell’utente attraverso link e menù di navigazione.

il wireframing fa largo utilizzo di pattern, ovvero di modelli di rappresentazione dei contenuti e forme di interazione standard nel mondo web. Il wireframe kit di Designers Italia presenta una serie di pattern che definiscono alcuni modelli di contenuto e forme di interazione tipiche dei siti e servizi della Pubblica Amministrazione Italiana e che facilitano il processo di prototipazione di un servizio offrendo una solida base da cui partire. Esempi di pattern sono il content type “scheda servizio”, che definisce il modello di presentazione di un servizio pubblico, oppure le modalità di interrogazione di un motore di ricerca.

I modelli di pagina e di interazione sono costruiti attraverso una libreria di componenti come bottoni, campi di input, blocchi di testo, ecc. I componenti sono “i mattoncini” attraverso cui si costruiscono le interfacce, gli elementi base della grammatica che regola l’interazione tra l’utente e il sistema. Nel wireframe kit il focus è sulle tipologie di componenti e non sulle loro caratteristiche specifiche, che sono oggetto di definizione nella successiva fase di prototipazione ad alta fedeltà.

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

Nella Figura 1 è mostrato un esempio di prototipo costruito con un programma di design, ma per costruire un wireframe si possono usare diversi metodi, dalla carta ai numerosi software specifici presenti sul mercato.

Figura 2

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

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

Il wireframe kit¶

Il prototipo a bassa fedeltà può essere modellato utilizzando il Wireframe Kit messo a disposizione da Designers Italia che può agire in diversi ambiti nella fase di design.

Per creare l’architettura di un sito o di un’app utilizzando il Wireframe Kit, sarà quindi sufficiente scegliere e assemblare i componenti e i pattern di cui il kit è composto.

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

• Vai al Wireframe kit di Designer Italia
• Vedi i file sorgente del Wireframe Kit
• Vedi la presentazione dei Wireframe Kit su InVision

Figura 2 - Un esempio dei componenti presenti nel Wireframe Kit.

Figura 3 - Tipi di content type presenti nel wireframe kit

Figura 4 - Pattern di ricerca: user flow

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

Dai wireframe ai prototipi in alta fedeltà (hi-fi)¶

Una volta costruito, testato e migliorato il wireframe a bassa fedeltà, possiamo passare alla realizzazione di un prototipo ad alta fedeltà (o hi-fi) per agevolare la comprensione e la condivisione del progetto, poter realizzare test e facilitare l’avvio della fase di sviluppo

A questo scopo potremo utilizzare

• le linee guida relative alla user interface e all’architettura dell’informazione, il kit per l’architettura dell’informazione e lo Ui Kit di Designers Italia, un set di componenti visive già pronte per assemblare l’interfaccia di un sito o di un’app,
• le linee guida relative ai contenuti e il content kit, una serie di standard per il linguaggio da utilizzare nei siti e nelle app della Pubblica Amministrazione seguendo le linee guida per i servizi digitali della Pubblica Amministrazione.

I content type¶

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

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

I sistemi di navigazione¶

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

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

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

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

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

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

Home page, pagine di ricerca e aree personali¶

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

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

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

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

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

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

Le ontologie¶

Come leggiamo nelle linee guida per i cataloghi dati della Pubblica Amministrazione: “Le ontologie si stanno sempre più sviluppando come strumento formale di rappresentazione, sulla base di specifici requisiti, di un dominio di conoscenza. In particolare, al fine di massimizzare la condivisione della conoscenza e garantire interoperabilità semantica, l’ontologia consente di descrivere la semantica dei dati con una terminologia concordata che può essere poi successivamente riusata anche in altri contesti con simili obiettivi. Tipicamente l’ontologia non è un obiettivo di per sé ma costituisce una base solida per poter sviluppare, al di sopra di essa, applicazioni e servizi avanzati semantici, sempre più diffusi con lo sviluppo dei Linked Data e in ambito World Wide Web”. E’ in corso un progetto di modellazione delle informazioni relative al settore pubblico. Il progetto mette a disposizione diverse ontologie e governa la standardizzazione di nuove ontologie.

Vai agli standard per il patrimonio informativo pubblico

Ontologie disponibili

Vocabolari controllati¶

Un vocabolario controllato è una lista ristretta di termini utilizzati per etichettare, indicizzare e categorizzare i contenuti di un ambiente. Se a un’area o a un intero ambiente è applicato un vocabolario controllato significa che:

• solo i termini inclusi nella sua lista possono essere utilizzati in quello spazio;
• se è utilizzato da più persone, si applicano regole precise su chi, quando e come può aggiungere nuovi termini alla lista;
• la lista può crescere, ma solo sulla base di criteri ben precisi, stabiliti a priori.

Grazie a un vocabolario controllato è possibile eliminare la ridondanza e ridurre l’ambiguità del linguaggio. Per esempio: si può prevedere una lista di sinonimi che reindirizzi l’utente o il motore di ricerca da una variante inesatta del termine al termine preferito presente nel vocabolario controllato. Se l’utente cerca “ministero della pubblica istruzione” potrebbe venire reindirizzato a “Ministero dell’Istruzione, dell’Università e della Ricerca”.

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. La rappresentazione tipica della tassonomia è quella dell’albero con la radice in alto: i termini di una tassonomia sono definiti “nodi”. Seguendo la metafora dell’albero, un nodo senza successori è detto “foglia”: salendo dalle foglie verso l’alto si passa da una “classe” specifica a una più generale. La radice della tassonomia rappresenta la classe più generale in quella determinata classificazione.

Esiste un progetto della Pubblica Amministrazione per la creazione di vocabolari controllati da utilizzare nel settore pubblico.

Vai al repo GitHub per consultare i vocabolari disponibili o contribuire al progetto

Titolo del contenuto¶

Un titolo dovrebbe descrivere in modo semplice quanto esposto nella pagina, utilizzando di preferenza la terminologia più simile a quella che userebbero gli stessi utenti per descriverne il contenuto.

È consigliabile creare titoli univoci, il più possibile pertinenti rispetto al contenuto della pagina: un titolo dovrebbe essere composto da poche parole o una frase, evitando di superare i 60/70 caratteri (spazi inclusi).

Markup: Il metatag title deve essere posizionato all’interno del tag head nel codice HTML della pagina. Appare come prima linea testuale del risultato dei motori di ricerca:

• aiuta gli utenti a comprendere con immediatezza se il risultato in questione sia pertinente al bisogno espresso durante la ricerca web;
• e’ uno fra i principali elementi che i crawler dei motori analizzano per indicizzare un contenuto e assegnargli un rank nei risultati di ricerca.

Description del contenuto¶

È consigliabile la redazione di description univoche per ogni contenuto, che sintetizzino gli elementi salienti della pagina.

Markup: Il metatag description deve essere posizionato all’interno del tag head nel codice HTML della pagina. Appare come terza linea testuale (dopo la URL della pagina) del risultato dei motori di ricerca:

• come il titolo aiuta gli utenti a comprendere con immediatezza se il risultato in questione sia pertinente al bisogno espresso durante la ricerca;
• la description può essere di qualsiasi lunghezza, ma generalmente i motori di ricerca troncano testi più lunghi di 160 caratteri (spazi inclusi).

Le parole chiave¶

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

Il lavoro di identificazione delle keyword più idonee a rappresentare i contenuti di un 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 iniziare ad identificare un set di keywords salienti:

Google suggest

Google ricerche correlate

• Google Trends
• Ubersuggest
• Adwords keywordplanner

Originalità del contenuto¶

È sempre consigliabile redigere contenuti originali, possibilmente centrati sui bisogni dell’utente, con un linguaggio il più possibile chiaro.

Aggiornamento del contenuto¶

È necessario procedere regolarmente ad un aggiornamento dei contenuti pubblicati per evitare di fornire agli utenti informazioni obsolete. Gli algoritmi dei motori di ricerca considerano inoltre la data di aggiornamento di un contenuto web come fattore di rilevanza nel ranking dei risultati di ricerca.

Paragrafazione e paginazione¶

Per una maggiore leggibilità dei testi è consigliabile paragrafare i contenuti di una pagina, soprattutto se di lunghezza importante. È utile inoltre titolare gli eventuali sottoparagrafi secondo i medesimi principi applicabili al titolo principale della pagina.

Nel caso ci sia la necessità di suddividere il contenuto in più pagine, è consigliabile:

• specificare quale sia la pagina principale di visualizzazione (visualizza tutto) attraverso l’attributo rel=»canonical»
• utilizzare gli attributi HTML rel=»next» e rel=»prev», per specificare la relazione di consequenzialità fra URL

Ulteriori informazioni sulla paginazione

Grassetto¶

Può essere utile impiegare lo stile grassetto per evidenziare - senza esagerare - i termini salienti di un contenuto.

Immagini¶

È necessario nominare i file immagine in maniera pertinente al contenuto della pagina ove sono collocati.

Markup: Utilizzare il tag alt per fornire una descrizione testuale dell’immagine. Questo attributo è utile nel caso in cui questa non possa essere visualizzata nel browser per motivi legati ad esempio al mancato supporto di alcune tipologie di file da parte del browser o all’utilizzo di tecnologie assistive.

È possibile generare ed utilizzare una sitemap XML ad hoc per le immagini per fornire ai crawler maggiori informazioni rispetto all’organizzazione dei file immagini presenti nel sito.

Anchor Text dei link¶

Per “anchor text” si intende la porzione di testo di un contenuto che funge da “ancora” verso un collegamento ipertestuale, sia esso rivolto all’interno (link interno) o all’esterno del sito (link outbound).

È consigliabile scegliere porzioni di testo brevi, chiare e pertinenti rispetto alla pagina di destinazione del link:

• il testo cliccabile - così come lo stile grassetto - fornisce tanto agli utenti quanto ai crawler dei motori di ricerca informazioni aggiuntive rispetto al contenuto della pagina linkata;
• è bene evitare di linkare espressioni povere di significato come “clicca qui” e simili.

Struttura logica dei contenuti¶

Una struttura dei contenuti semplice e “leggera” è necessaria per garantire una migliore esperienza utente sul sito e per agevolare il lavoro di scansione dei crawler dei motori di ricerca.

È consigliabile mantenere la struttura dei contenuti del sito gerarchica - dal generale al particolare - semplificandone il più possibile la struttura logica e utilizzando non più di tre livelli di profondità.

URL delle pagine¶

La URL di una pagina web appare come seconda linea testuale del risultato di ricerca (fra title e description). È buona regola semplificarne il più possibile la struttura:

• impostare le URL in modo che contengano parole salienti e pertinenti rispetto ai contenuti della pagina che ospitano
• utilizzare i trattini (-) invece che gli underscore (_) per la punteggiatura
• cercare di ridurre il più possibile la lunghezza delle URL
• valutare 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

Duplicazione dei contenuti¶

È importante evitare la presenza di contenuti duplicati nel sito. Dal punto di vista SEO si intendono “contenuti duplicati” contenuti molto simili - o identici - nell’ambito dello stesso sito ma associati a URL differenti.

In alcuni casi la duplicazione di un contenuto è generata da situazioni particolari quali ad esempio:

• la presenza di una pagina in versione web e versione per la stampa
• la presenza di una tabella dinamica che genera viste dello stesso contenuto ma URL dinamiche diverse

In questi e altri casi è possibile inviare a Google l’informazione di quale sia la pagina “master”, o “canonica” da prendere in considerazione per l’indicizzazione. Questa tecnica è detta canonicalizzazione: per implementarla è necessario inserire un elemento link che contenga l’attributo rel=”canonical” (seguito dal link cui si vuole applicare la canonicalizzazione), nel tag head della pagina.

Approfondimenti sui contenuti duplicati

Approfondimenti sulla canonicalizzazione

Mappa del sito¶

Oltre ad una mappa del sito in HTML destinata agli utenti, è consigliabile creare un file sitemap XML destinato ai motori di ricerca.

Informazioni sulle sitemap

Una sitemap è un file che ha lo scopo di elencare le pagine web di un sito per comunicare a Google e altri motori di ricerca l’organizzazione dei contenuti. I crawler dei motori leggono questo file per eseguire una scansione più efficiente del sito. Una sitemap ha quindi l’obiettivo ultimo di migliorare la scansione di un sito da parte dei motori di ricerca.

All’interno di un file sitemap è possibile non soltanto elencare le URL di un sito web ma anche alcuni metadati più specifici rispetto all’organizzazione dei singoli nodi, ad esempio:

• informazioni sull’aggiornamento della pagina
• importanza della pagina rispetto ad altre URL dello stesso sito
• informazioni relative a video e immagini
• informazioni relative all’organizzazione dei documenti

Come generare e inviare una sitemap a Google

È possibile inviare una sitemap a Google anche tramite il tool Search Console È possibile inoltre generare sitemap XML per:

• le pagine in lingue alternative
• i video
• le immagini

File robots.txt¶

Per ottimizzare i processi di scansione dei crawler dei motori di ricerca è possibile utilizzare il file robots.txt. Un file robots.txt è un file di testo memorizzato nella directory principale del sito che ha la finalità di indicare ai crawler dei motori di ricerca quali parti del sito non sono accessibili e quindi controllare il traffico di scansione.

Non si deve utilizzare il file robots.txt per nascondere le pagine web dai risultati di ricerca.

Informazioni sui file robots.txt

Come impedire la visualizzazione di una pagina del sito sui motori di ricerca

Tempi di caricamento delle pagine¶

La rapidità di caricamento di una pagina web è presa in considerazione dai crawler dei motori di ricerca come elemento che concorre ad un migliore posizionamento del contenuto nel ranking dei risultati di ricerca.

È consigliabile effettuare controlli periodici sulle velocità di caricamento delle pagine e i tempi di risposta del server, soprattutto da dispositivi mobili.

Risorse per lo sviluppo di pagine ottimizzate per i dispositivi mobili

Le pagine AMP per i contenuti di tipo “news”¶

Per determinate tipologie di contenuto - in particolare le news - è possibile implementare il formato AMP (Accelerated Mobile Pages) di Google. Il formato AMP è stato lanciato nel 2015 per migliorare le prestazioni del mobile web, riducendo la velocità di caricamento delle pagine.

Linee guida di Google Search per le pagine AMP

Il progetto AMP

Guida all’implementazione di pagine AMP

Dati strutturati¶

Il markup con dati strutturati è una tecnica che consente di personalizzare l’aspetto di un sito nella ricerca di Google o di altri motori di ricerca. Includendo dei dati strutturati all’interno dei contenuti è possibile inserire informazioni aggiuntive e/o strumenti di interazione con il sito nell’aspetto standard dei risultati di ricerca, ad esempio:

• contatti e indirizzo dell’amministrazione
• rating delle pagine
• box di search in stile sitelink
• breadcrumbs

Il markup con dati strutturati si basa sul vocabolario http://schema.org/

Guida di Google all’implementazione dei dati strutturati

Strumento per testare la corretta implementazione dei dati strutturati

Migrazione SEO di un sito¶

Quando si pianifica la migrazione di un sito è necessario fare in modo di non perdere la rilevanza acquisita sui motori di ricerca e di indirizzare gli utenti verso le nuove pagine nella maniera meno problematica possibile.

Si consiglia quindi di:

• realizzare una mappatura di tutte le URL del sito, che includa anche il linking interno
• associare alle vecchie URL le nuove URL, per poter in seguito preparare i redirect
• per le URL alle quali non verrà associata alcuna nuova URL, preparare una pagina 404 personalizzata, che aiuti l’utente a proseguire la navigazione nel nuovo sito
• configurare il server impostando dei redirect di tipo 301
• modificare la sitemap XML del sito
• laddove possibile, aggiornare i backlinks ricevuti dal sito
• comunicare ai crawler di Google un eventuale cambiamento del dominio tramite la Search Console

Ulteriori informazioni sui redirect 301

Link building¶

In ottica di ottimizzazione SEO di un sito, è necessario curare e monitorare iterativamente il processo di costruzione della rete di link che il sito riceve dall’esterno (inbound links).

I motori di ricerca valutano la natura, la provenienza e la qualità di tali link più che la loro quantità, considerandoli un elemento di autorevolezza del sito soprattutto se questi provengono da siti altrettanto autorevoli e se il loro processo di acquisizione è considerato spontaneo.

I motori di ricerca penalizzano infatti le pratiche volte ad incrementare massivamente il numero di link in ingresso (acquisti, scambi di link forzosi…)

Per capire quali sono i link inbounds di un sito web è possibile:

• utilizzare la Search Console di Google
• utilizzare tools ad hoc come Open Site Explorer o Ahrefs Site Explorer
• utilizzare l’operatore link:sitoweb.it nella ricerca Google

Approfondimenti¶

Come configurare un sito web in Search Console

Centro assistenza Search Console

Come collegare Search Console a Google Analytics

Utile da sapere¶

Una app Android deve essere pubblicata in Google Play per poter essere aggiunta a Search Console.

Come configurare una app in Search Console

Le regole per un linguaggio semplice¶

Quando stai realizzando o revisionando dei contenuti di un sito o un servizio digitale, verifica che tutti gli elementi (testo, titoli, sommario, metadati, oggetti multimediali, interfacce) rispettino le indicazioni per un linguaggio semplice e efficace, che puoi trovare nella Guida al linguaggio della Pubblica Amministrazione.

Checklist per il contenuto: fai un check della qualità del contenuto basandoti sulle seguenti domande:

• Lo scopo della pagina è immediatamente chiaro? (Per approfondire: Stile di scrittura)
• Le informazioni principali sono immediatamente rintracciabili? (Per approfondire: Come strutturare il contenuto)
• Il testo è breve, diviso in paragrafi, in elenchi puntati? (Per approfondire: Come strutturare il contenuto)
• Tutte le frasi sono chiare, in un linguaggio semplice e lineare? (Per approfondire: Stile di scrittura)
• Hai fatto uso di termini burocratici, gergali, tecnici o acronimi? (Per approfondire: Accessibilità e inclusione)
• Hai usato il giusto tono di voce (formale, informale, tecnico, incoraggiante, umano,ecc) per parlare agli utenti? (Per approfondire: Tono di voce)
• Il contenuto è responsive? Tutti i contenuti sono efficaci su mobile? (Per approfondire: Stile di scrittura)
• Il testo, le immagini e le interfacce sono accessibili? (Per approfondire: Accessibilità e inclusione)
• Hai utilizzato parole o termini discriminatori? (Per approfondire: Accessibilità e inclusione)
• Hai curato i titoli, il sommario, le parole chiave, i metadati? (Per approfondire: Scrivere per i motori di ricerca)
• Tutti i contenuti sono aggiornati? (Per approfondire: Gestione dei contenuti)
• Sono chiare le azioni che si compiono attraverso le interfacce, le etichette di navigazione, i link? (Per approfondire: Come strutturare il contenuto)
• Hai inserito i riferimenti normativi nelle note invece che nel testo? (Per approfondire: Come strutturare il contenuto)
• Se hai pubblicato dei documenti allegati, hai precisato il formato (es. pdf), il peso, il titolo e una breve descrizione del contenuto? (Per approfondire: Come strutturare il contenuto)

IL MICROCOPY I microtesti che accompagnano e descrivono gli elementi grafici delle interfacce di un sistema web, sono definiti in gergo “microcopy”. L’armonia e la pertinenza fra elementi grafici delle interfacce e microcopy 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 microcopy è quello dei messaggi di errore (o problematiche relative a un sistema). 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.

Revisione e miglioramento dei contenuti¶

La revisione dei tuoi contenuti va fatta tenendo conto dello scopo di ciascuna pagina e dei risultati che ci si aspetta, che possono essere misurati attraverso strumenti di ricerca come Google Analytics, da A/B test mirati, o anche attraverso attività di ricerca qualitativa (dei test di usabilità, per esempio).

I contenuti pubblicati su un sito devono essere pensati come un oggetto in continua evoluzione. Organizza un flusso di lavoro con il tuo team affinché tutti i contenuti del tuo sito siano:

• realizzati con strumenti di scrittura e editing collaborativi;
• periodicamente aggiornati e revisionati.

Queste due semplici accortezze possono aiutarti a fare in modo che:

• lo scopo di ogni pagina del tuo sito sia chiaro e immediatamente comprensibile;
• le informazioni siano efficaci e utili;
• non ci siano pagine con informazioni obsolete, pagine vuote o incomplete.

All’interno del Content kit puoi trovare un modello di analisi dei contenuti pronto all’uso, per gestire l’attività di revisione di tutte le pagine del sito o di una specifica sezione, assegnando specifici task ai vari membri del tuo team. Utilizzando questo strumento, puoi individuare tutti i problemi di ogni pagina (dalla chiarezza delle informazioni all’efficacia dell’interfaccia, dai problemi di metadati a quelli di accessibilità), basandoti sulle indicazioni della Guida al linguaggio della Pubblica Amministrazione, per poi attivare un processo di riscrittura e miglioramento dei contenuti.

Se il tuo focus è fare in modo che il tuo servizio sia più facile da trovare attraverso i motori di ricerca (Google) nel kit dedicato alla SEO è disponibile un modello di analisi specifico (Vai al kit dedicato alla SEO).

L’inventario dei contenuti (content inventory)¶

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 uno spreadsheet (si può usare questo modello e modificarlo secondo necessità). Per esempio in vista di una ottimizzazione SEO o di un redesign 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.

Analizzare i contenuti¶

L’attività più frequente per la gestione dei contenuti è il monitoraggio e l’ottimizzazione dei contenuti già esistenti. All’interno del Content kit puoi trovare un modello di analisi di 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 mobile?
• 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 il risultato che si era prefisso. Questo tipo di analisi può far emergere problemi nella gestione delle informazioni. Per approfondire, vai alla sezione sui test di usabilità usability test.

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

Come organizzare il lavoro¶

L’attività di gestione dei contenuti va definita in un flusso di lavoro che richiede una definizione delle attività e l’utilizzo di strumenti di project management . All’interno del kit sui contenuti è presente un esempio di gestione della produzione di contenuti utilizzando una board di Trello. All’interno del kit per la SEO è presente un esempio di board per gestire gli aspetti SEO di un progetto digitale. I processi di audit dei contenuti richiedono la capacità di identificare ruoli e scadenze e coordinare il processo in modo da garantire il raggiungimento dei risultati nei tempi stabiliti. Tutti questi strumenti favoriscono la collaborazione e lo scambio di opinioni tra i membri del team.

Per valutare i progressi nel processo di semplificazione dei contenuti è opportuno organizzare ogni anno dei test di usabilità.

Come pubblicare¶

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 sono ospitate queste linee guida utilizza GitHub come content management system e benefica del suo version control system.

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

Gestire un sito multilingua¶

Localizzare il proprio 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, attraverso contenuti:

• accessibili e inclusivi;
• facili da trovare;
• chiari e comprensibili.

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

Se ritieni utile realizzare una traduzione del tuo sito, la prima scelta da fare è se:

• tradurre l’intero sito (o l’intera 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 ne indaghi la lingua e i riferimenti culturali attraverso strumenti quantitativi (web analytics) e qualitativi (user interviews, ad esempio);
• degli obiettivi che si vogliono perseguire con i propri contenuti (inclusione; efficienza del servizio; accessibilità; ecc).

Proprietà intellettuale: testi, immagini, dati. Le liberatorie e i tipi di licenze¶

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

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. Il Content kit di Designers Italia individua 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.

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.

Creazione di un contenuto in formato Html in modo nativo

Con questo approccio, è possibile per esempio:

• creare una 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.

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.

Per approfondimenti¶

Allegato B del Decreto Ministeriale 8 luglio 1.

Introduzione alla procedura¶

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

Questo protocollo ha due obiettivi:

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

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

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

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

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

La procedura contempla l’uso di 9 allegati, disponibili nel Kit Usability Test.

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

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

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

Le fasi della procedura¶

Di seguito vengono descritte le diverse fasi nelle quali si articola la procedura:

1. Preparazione;
2. Esecuzione;
3. Analisi dei risultati.

4. Preparazione¶

Questa fase prevede i seguenti aspetti:

• analisi preliminari del sito e dei destinatari;
• quanti utenti selezionare;
• quali tipologie di utenti scegliere;
• quali e quanti task preparare;
• come preparare i moduli per la raccolta dati;
• cosa fare prima dell’osservazione: il test pilota;
• prendere appuntamento con i partecipanti.

2. Esecuzione¶

Una volta effettuati i passi preparatori per una corretta osservazione, si passa alla fase di esecuzione vera e propria. Tale fase richiede:

• la preparazione di un ambiente idoneo;
• la corretta interazione con i partecipanti e conduzione dell’osservazione;
• la raccolta dei dati;
• il congedo dei partecipanti al termine del test.

3. Analisi dei risultati¶

In questa sezione si spiega come riassumere i dati raccolti e stilare un report.

Check-list di riepilogo per l’organizzazione del test¶

Le interviste individuali¶

La ricerca esplorativa si ispira ai metodi dell’etnografia applicata, per la necessità di entrare in contatto con le persone nel loro contesto abituale di vita, e di capire i loro comportamenti in profondità. La tecnica principale è quella dell’intervista individuale: il ricercatore incontra ciascun partecipante di persona e raccoglie una serie di spunti ponendo domande, costruendo un dialogo, e ascoltando con attenzione ciò che il partecipante racconta. Ecco alcuni consigli per organizzare al meglio le sessioni di intervista individuale.

Vai al Kit di Designers Italia sulle User Interviews

Costruire un piano di ricerca

Il primo passo per impostare le interviste è pianificare l’attività nel dettaglio, riflettendo sull’obiettivo della ricerca e su chi ha senso incontrare (e dove) per raggiungere quell’obiettivo. Il piano di ricerca include:

• la dichiarazione di un tema di investigazione chiaro e analizzabile tramite una ricerca qualitativa (es. “l’obiettivo della ricerca è capire a quali servizi i cittadini vorrebbero poter accedere tramite il sito del proprio Comune”).
• la definizione delle specificità del metodo di intervista, ovvero la sua durata (può variare da 1 a 2 ore a seconda della complessità dell’argomento di discussione), il numero di ricercatori coinvolti (minimo 2, massimo 3 persone), il contesto in cui avranno luogo le sessioni (si tenderà a privilegiare l’ambiente domestico, ma possono anche essere svolte nello spazio di lavoro o in altri luoghi neutrali).
• la definizione di un campione di ricerca che tiene conto delle diverse tipologie di utenti coinvolti nell’utilizzo del servizio (quali variabili, e quali quantità). Un buon campione per una ricerca qualitativa prevede il coinvolgimento di un numero di circa 6-8 persone della stessa tipologia.
• la definizione delle aree geografiche in cui la ricerca avrà luogo, considerando le diversità tra Nord, Centro e Sud Italia, ma anche tra centri urbani di grande, media e piccola dimensione. Talvolta è utile anche riflettere sulle differenze all’interno di una specifica area urbana, tra zone di periferia e centro città.
• la definizione di una scaletta temporale delle varie attività, che includa eventuali spostamenti da una città all’altra e tenga conto dei tragitti necessari per raggiungere le diverse case (o luoghi di riferimento) dove incontrare i partecipanti. La buona pratica è di svolgere 2 (massimo 3) sessioni nell’arco di una giornata, per avere tempo di metabolizzare le informazioni raccolte di volta in volta, e mantenere il livello di energia necessario per condurre questo tipo di attività.

Preparare la guida alla discussione

La guida alla discussione è un documento che raccoglie una serie di spunti relativi alle domande da svolgere durante l’intervista. La guida viene costruita individuando in primo luogo le aree tematiche da affrontare durante l’intervista, come se fossero dei capitoli della conversazione. Ciascun capitolo contiene una serie di domande, che il ricercatore prepara in anticipo in modo da raccogliere tutti i punti che sarà necessario trattare e prepararsi agli incontri. Durante l’intervista il ricercatore porta con sé la guida alla discussione per assicurarsi di non dimenticare nessun punto: anche se la conversazione può prendere varie direzioni e non seguire il flusso logico ipotizzato all’inizio, l’importante è coprire tutti i temi, in modo da avere una base dati completa al termine delle interviste.

La guida alla discussione può essere accompagnata da una serie di materiali visivi che possono essere un utile stimolo per trattare alcuni punti della discussione, rendendo la conversazione più interattiva e in alcuni casi più immediata. Questi materiali possono essere ad esempio delle card che mostrano diverse funzionalità di un servizio e aiutano a prioritizzare insieme i vari elementi, e vengono progettati di volta in volta a seconda del contenuto dell’intervista.

Stampare la modulistica

Il coinvolgimento degli utenti richiede sempre estrema attenzione nel modo in cui si gestiscono i dati personali. Per ogni attività di ricerca è necessario preparare e stampare delle liberatorie per il consenso al trattamento dei dati che vengono sottoposte all’attenzione di ciascun partecipante al termine dell’intervista, dando loro la possibilità di scegliere se acconsentire alla conservazione del materiale audio-video e/o fotografico raccolto durante la sessione oppure no. In caso positivo, il materiale potrà essere condiviso con il proprio team di lavoro e utilizzato per costruire dei report dell’attività. In caso negativo, il materiale relativo a quel partecipante dovrà essere cancellato, e verranno prese in considerazione per l’analisi solo le informazioni raccolte verbalmente.

Condurre le interviste

Le interviste sono un momento molto delicato, da gestire con estrema cautela per assicurarsi di raccogliere tutte le informazioni necessarie, creando una situazione che metta a proprio agio il partecipante e documentando attentamente tutte le osservazioni emerse. Ecco alcuni aspetti da considerare per preparare al meglio il momento dell’intervista:

• definire dei ruoli chiari all’interno del gruppo che gestirà la ricerca sul campo è fondamentale per non incutere timore ai partecipanti, presentandosi come gruppi troppo numeroso o facendo piovere domande da ogni direzione. Il numero di ricercatori ideale per ogni sessione di intervista è due, di cui una persona intenta a moderare l’intervista e una persona dedita alla raccolta di note e alla documentazione fotografica. In caso di tre persone questi ultimi due compiti possono essere suddivisi, distinguendo il ruolo del trascrittore di note da quello del fotografo.
• definire la strategia di documentazione dell’attività richiede di riflettere su come verranno raccolte e gestite le note e su quali strumenti verranno utilizzati per la documentazione audio-video e fotografica della sessione. Solitamente le note vengono raccolte in formato digitale, in spreadsheet che possono essere facilmente condivisi con gli altri partecipanti alla ricerca e raccogliere tutte le trascrizioni delle interviste in varie tab. Per la documentazione audio-video e fotografica si raccomandano strumenti di piccole dimensioni, non intrusivi, in modo da preservare per quanto possibile la naturalezza della conversazione.
• è necessario infine ricordare l’importanza di alcune soft skills: la capacità di ascoltare in modo aperto, mettendo da parte le proprie idee, pregiudizi e assunzioni fatte in precedenza; la gestione della propria espressione e postura durante il dialogo in modo da mostrare interesse e partecipazione; la capacità di gestire la conversazione e stabilire una relazione empatica con il partecipante, adattando le domande e il protocollo dell’intervista alla tipologia di risposte ricevute.
• durante l’intervista, chiedere ‘perché’ più e più volte è indispensabile per approfondire ciascuna risposta e raggiungere quel livello di profondità che si desidera raggiungere con l’intervista individuale.

Sintetizzare i risultati

Al termine di ciascuna intervista, i ricercatori discutono tra di loro i risultati emersi, annotando a caldo i temi rilevanti, le cose che non sapevano o che li hanno sorpresi, quello che vogliono essere sicuri di ricordarsi. Questo primo momento di debriefing è fondamentale per iniziare a processare le informazioni raccolte e fissare alcuni elementi per un secondo momento di analisi più strutturata. Al termine delle attività di ricerca, i ricercatori analizzano le note raccolte, individuando i pattern di comportamento emersi, ovvero i temi chiave condivisi da tutti o buona parte dei partecipanti. In questa fase possono essere utilizzati alcuni strumenti di service design come i personas e le user journey per raccogliere le informazioni raccolte in profili utente e mappature dell’esperienza.

I focus group¶

La ricerca di tipo generativo prevede l’utilizzo di una tecnica chiamata focus group, ovvero un’intervista di gruppo (anziché individuale) in cui un ricercatore (o moderatore) propone una serie di esercizi e temi di discussione a un panel selezionato di partecipanti. L’organizzazione di un focus group segue un processo molto simile a quello descritto per la pianificazione di interviste individuali. Una delle principali caratteristiche distintive del focus group è quella di far leva sulle dinamiche di gruppo per stimolare la discussione, raccogliere diverse opinioni, e giungere a un consenso (o dissenso) collettivo rispetto a una specifica soluzione proposta. Ecco una lista di attività necessarie per la preparazione di un focus group, e consigli pratici per la moderazione.

Costruire un panel di partecipanti

Il punto di partenza per l’organizzazione del focus group è la definizione del tipo di partecipanti da coinvolgere. A seconda del contesto e dell’obiettivo delle sessioni di ascolto di gruppo si possono coinvolgere gruppi omogenei, ovvero persone che condividono caratteristiche simili (per età, estrazione sociale, conoscenza della tecnologia o conoscenza del servizio) oppure gruppi misti, ovvero persone che rappresentano diverse tipologie di utenti collegati al servizio in questione. I gruppi omogenei aiutano ad avere una comprensione completa del punto di vista di una stessa categoria di utenti, facendo leva sul fatto che tutti i partecipanti condividono le stesse competenze, problemi e necessità. Nel caso di gruppi misti si cerca invece di creare una situazione di scambio, in cui il confronto tra punti di vista e necessità differenti può facilitare la comprensione di tutti i fattori in gioco e l’individuazione di soluzioni che soddisfano molteplici bisogni. Al di là della omogeneità o disomogeneità del gruppo, il primo passo è sempre quello di definire nel dettaglio tutti i criteri che il campione dei partecipanti deve soddisfare e costruire un questionario di screening che permetta di formare un panel soddisfacente. Il questionario di screening è un insieme di domande orientato a raccogliere dati su ciascun rispondente in modo da capire se è qualificato o meno per partecipare al focus group. Questo questionario può essere distribuito in formato digitale o cartaceo, cercando di raggiungere il più ampio numero di persone possibile (per esempio, tutti gli abitanti di un Comune, o tutti gli insegnanti di una scuola) in modo da raccogliere un alto numero di risposte e mettere il ricercatore nella condizione di selezionare i partecipanti più adatti per la sessione, analizzando le risposte e bilanciando tra le diverse variabili desiderate. Un focus group può prevedere un minimo di 5 fino a un massimo di 10 partecipanti in un’unica sessione, supportati da un moderatore nello svolgimento degli esercizi o dello scambio di idee e opinioni e da una persona incaricata di prendere appunti per documentare le informazioni e osservazioni emergenti. È buona pratica svolgere almeno 3 sessioni di simile tipologia (es. 3 focus group con lo stesso insieme di partecipanti) per avere un quantitativo di dati sufficiente per l’analisi.

Progettare un focus group

Per organizzare un focus group è necessario definire una durata temporale (variabile tra 1 e 3 ore a seconda della quantità di temi da coprire) e un luogo neutrale per lo svolgimento delle sessioni. Il ricercatore progetta quindi le attività da svolgere durante il focus group sulla base degli obiettivi da raggiungere. In un momento iniziale di esplorazione e generazione di idee, il focus group può essere impostato come una conversazione di gruppo, in cui il moderatore solleva degli spunti di discussione e agevola lo scambio di opinioni tra i vari partecipanti. In questa fase può essere utile avere una lista di storie, funzionalità o servizi da prioritizzare insieme, in modo da passare da uno scambio iniziale libero a una discussione focalizzata, in cui i partecipanti traducono le loro necessità in richieste maggiormente tangibili. In un momento più avanzato di esplorazione e generazione di idee, il focus group può essere utilizzato per sottoporre ai partecipanti diverse soluzioni e discutere insieme vantaggi e svantaggi di ciascuna proposta, in modo da capire quali aspetti validare e quali invece migliorare rispetto alle loro specifiche esigenze. Sulla base del tipo di attività da svolgere, il moderatore prepara in anticipo una scaletta dei vari punti di discussione o esercizi e l’insieme dei materiali necessari per facilitare la sessione. I materiali possono includere card stampate contenenti descrizioni testuali di storie, funzionalità o servizi, oppure storyboard che raccontano nuovi scenari, oppure ancora prototipi (digitali o analogici) di nuovi servizi.

Moderare il focus group

Il compito del moderatore (o facilitatore) è quello di guidare la discussione, sulla base dei temi e delle attività definite nella scaletta della sessione. Durante la sessione, il moderatore pone domande specifiche, volte ad avviare la discussione, e cerca di alimentarla chiedendo dettagli, motivazioni e aneddoti sulla base delle risposte raccolte. Se la discussione prosegue in modo naturale e produttivo, il moderatore lascia i partecipanti liberi di confrontarsi e di condividere i diversi punti di vista. Quando invece la conversazione rallenta, oppure si blocca attorno a opinioni contrastanti, il moderatore riprende il controllo della discussione passando a un altro argomento o interpellando una persona specifica all’interno del gruppo. Rivolgersi ai partecipanti chiamandoli con il loro nome proprio è fondamentale per esprimere sempre con chiarezza a chi è indirizzata la domanda (in caso sia necessario) e mettere i partecipanti a proprio agio. Uno dei rischi dei focus group è quello di avere persone con opinioni molto forti o per natura più estroverse di altre che diventano figure guida nella discussione, allineando le opinioni altrui alle proprie o rispondendo sempre a tutte le domande per primi. Il moderatore deve individuare questi soggetti e trovare il modo di arginare la loro influenza sul gruppo, dando la possibilità a tutti di esprimere la propria opinione, e – se necessario – invitando esplicitamente questi partecipanti a dare spazio anche agli altri nella conversazione.

Documentare i risultati

Ciascun focus group viene documentato tramite la raccolta di note relative alle informazioni e osservazioni che emergono durante lo scambio: per questo è bene prevedere una persona dedicata alla raccolta di appunti, in aggiunta al moderatore. Le sessioni possono inoltre essere documentate tramite la registrazione video (in questo caso è necessario chiedere ai partecipanti di firmare il modulo di liberatoria). I materiali vengono utilizzati per costruire un report dei focus group che va ad informare le successive attività di sviluppo delle soluzioni di

L’A/B testing¶

L’A/B testing è una metodologia di analisi che ha l’obiettivo di confrontare due versioni di una pagina web di un sito o di un’applicazione, che differiscono per un elemento specifico. Permette quindi di effettuare delle scelte di design basate su dati - secondo l’approccio data-driven tipico della ricerca quantitativa - confermando o confutando delle ipotesi progettuali.

Obiettivo di questo tipo di test è arrivare - tramite ottimizzazioni successive - a superare un problema o migliorare una performance di UX (e non solo). Gli utenti cui il test viene “somministrato” sono suddivisi in due gruppi ad ognuno dei quali viene mostrata una delle due diverse varianti/configurazioni. Alla fine del test vengono analizzati e confrontati i dati derivati delle due versioni sperimentate: la variante con la performance migliore rispetto all’obiettivo del test verrà portata avanti nel percorso di sviluppo.

Caratteristica della metodologia A/B testing è quella di testare un elemento per volta così da poter isolare senza ambiguità quale variazione abbia prodotto un determinato risultato. Tramite tale metodologia si possono testare diversi elementi di una pagina web, dalla grafica, al layout e organizzazione degli elementi del sito, ai contenuti: può ad esempio essere interessante utilizzare l’A/B test sui contenuti, sia per esaminare quanto influisca la lunghezza di un testo sulla fruizione del sito, sia per ciò che concerne il microcopy.

Vai al kit di supporto per la realizzazione di test A/B

Principali Metriche (dati quantitativi)¶

Visite

Definizione: numero totale di visite al sito in un dato intervallo di tempo (anche da parte dello stesso utente)

A cosa serve: rappresenta il volume di traffico che il sito riceve in un determinato lasso temporale. È una delle metriche più usate per costruire uno storico dei volumi di traffico del sito, su cui basare comparazioni e/o proiezioni

Visite uniche

Definizione: numero di singoli individui (o singoli IP) che ha effettuato almeno una visita al sito

A cosa serve: è la metrica che restituisce in maniera accurata il numero di singoli individui che ha interagito con il sito in un dato lasso di tempo

Visualizzazioni di pagina

Definizione: numero totale di pagine visitate, anche da parte dello stesso utente, in un dato intervallo di tempo. Comprende visualizzazioni ripetute della stessa pagina

A cosa serve: indica il volume complessivo dei contenuti del sito acceduti dagli utenti

Pagine visitate per visita

Definizione: media aritmetica del numero di pagine visitate per visita al sito. Comprende le visualizzazioni ripetute della stessa pagina

A cosa serve: offre indicazioni sulla “profondità” delle visite al sito e sul livello di coinvolgimento dei contenuti. Tale metrica deve essere interpretata a seconda della natura del sito e dei suoi obiettivi (es. rispetto al numero minimo di pagine desiderate per visita)

Durata delle visite

Definizione: media aritmetica della durata di una singola visita al sito

A cosa serve: indica il tempo medio trascorso dai visitatori sul sito. Tale metrica deve essere interpretata a seconda della natura del sito e dei suoi obiettivi

Tempo sulla pagina

Definizione: media aritmetica del tempo trascorso dagli utenti su una determinata pagina (o un insieme di pagine)

A cosa serve: determina l’efficacia di un contenuto, a seconda della sua tipologia e dei suoi obiettivi

Frequenza di rimbalzo

Definizione: percentuale di visitatori che ha abbandonato il sito dopo una pagina

A cosa serve: misura la quota di utenti che arrivano al sito e lo abbandonano subitaneamente. La percentuale di frequenza di rimbalzo può essere interpretata in maniera opposta a seconda della natura del sito: ad esempio una frequenza di rimbalzo alta per un sito informativo è indice del fatto che le pagine potrebbero essere scarsamente utili/interessanti, mentre può essere considerata un dato positivo per un sito o una pagina che hanno il semplice scopo di direzionare gli utenti altrove

Nuove visite

Definizione: percentuale delle prime visite al sito sul totale delle visite

A cosa serve: metrica utile in particolare quando l’obiettivo del sito è quello di accrescere i volumi di traffico provenienti da nuove tipologie di visitatori

Nuovi utenti/utenti di ritorno

Definizione: rapporto fra prime visite al sito e utenti che hanno già visitato il sito precedentemente, in un dato intervallo di tempo

A cosa serve: a seconda degli obiettivi del sito, serve a comprendere in che misura i volumi di traffico si suddividono fra nuovi utenti e utenti fidelizzati

Velocità di caricamento del sito

Definizione: quantità di tempo media (espressa in secondi) impiegato da una pagina del sito per caricarsi, dall’avvio della visualizzazione nel browser alla fine del suo caricamento

A cosa serve: metrica fondamentale per monitorare l’efficienza del sito in termini di velocità, anche e soprattutto per la fruizione da dispositivi mobili

Principali Dimensioni (attributi qualitativi dei dati)¶

Tempo

intervallo di tempo su cui impostare una rilevazione (giorno, settimana, mese, anno, intervallo personalizzato)

Provenienza geografica e lingua

luogo da cui provengono le visite degli utenti (paese, città, continente, subcontinente); impostazioni relative alle preferenze di lingua

Tecnologia utilizzata

strumenti tecnologici utilizzati dagli utenti per la navigazione sul sito (tipologia di dispositivo, browser, sistema operativo, provider di rete)

Contenuti

le pagine, le pagine di entrata e di uscita, gli “eventi” compiuti sul sito (es. download di documenti, click su link outbound)

Canali di acquisizione del traffico

canali web tramite cui gli utenti arrivano al sito. Il raggruppamento di canali principali comprende: traffico diretto, ricerca organica (cioè traffico non a pagamento proveniente dai motori di ricerca), siti referenti, social. Altri canali - se attivi - sono ad esempio: email marketing, digital advertising, affiliazioni

Ricerca su sito

monitora la funzione di search del motore interno di un sito web, restituendo i termini di ricerca immessi dagli utenti, il numero di ricerche per termine e altri indicatori

Obiettivi

per tracciare il completamento di determinate azioni eseguite degli utenti sul sito (es. compilazione di un form, durata minima di una visita, numero minimo di pagine per visita)

Ricerca esterna al sito¶

Top motori di ricerca referenti

Definizione: Principali motori di ricerca (Google, Bing, Yahoo…) che portano traffico al sito

Azione: Usa i relativi webmaster tools (es. Google Search Console) per ottimizzare i contenuti e la struttura del sito e renderli così più facilmente scansionabili dai crawler dei motori e “trovabili” dagli utenti

Top termini/frasi di ricerca

Definizione: Le principali parole e frasi digitate nei motori di ricerca tramite cui gli utenti arrivano al sito

Azione: Verifica che i termini utilizzati dagli utenti coincidano o siano simili a quelli utilizzati nel sito. Puoi prendere spunto da parole e frasi utilizzate dagli utenti per migliorare la terminologia che usi nei titoli, nei metadati, nelle URL e in generale all’interno dei contenuti, in modo da favorirne l’ottimizzazione sui motori di ricerca

Top termini di ricerca con basso CTR (click through rate)

Definizione: Parole e frasi digitate nei motori di ricerca che portano la minore quota di traffico al sito

Azione: Revisiona e aggiorna i contenuti che gli utenti visitano dopo aver cercato tali termini, per renderli più appetibili e utili

Ricerca su sito¶

Top termini/frasi di ricerca

Definizione: Le principali parole e frasi digitate dagli utenti nel motore di ricerca interno del sito

Azione: Crea nuovi contenuti o aggiorna quelli già presenti, incorporando la terminologia degli utenti nei metadati, negli eventuali tag e nel testo stesso, in modo da aiutare i visitatori a trovare le informazioni più aderenti ai bisogni espressi nella ricerca

Top ricerche che non generano risultati

Definizione: Parole e frasi digitate dagli utenti nel motore interno del sito che non restituiscono risultati, per mancanza di contenuti associati o non rappresentati nella maniera corretta

Azione: Analizza i contenuti per capire se è il caso di aggiornarli o di pubblicarne di nuovi che rappresentino il bisogno espresso dall’utente nella ricerca

Top termini di ricerca con basso CTR (click through rate)

Definizione: Parole e frasi digitate nel motore di ricerca interno che restituiscono il più basso numero di visualizzazioni di pagina

Azione: Incorpora la terminologia valida nei testi e nei metadati per rendere le pagine più rilevanti rispetto a quei termini

Principali oscillazioni nelle top ricerche

Definizione: Macro cambiamenti nel ranking dei termini più cercati nel motore di ricerca interno del sito

Azione: Cerca di analizzare le ragioni per cui alcuni termini diventano meno ricercati di altri e viceversa; assicurati che per i nuovi termini di ricerca diventati popolari siano presenti contenuti che soddisfano i nuovi bisogni espressi dai visitatori

Utenti che utilizzano la ricerca su sito

Definizione: Percentuale dei visitatori unici del sito che utilizza la funzione di ricerca interna

Azione: Ti aiuta a capire se è il caso di ottimizzare le funzionalità di ricerca e l’architettura informativa del sito, facendo in modo che i contenuti più ricercati siano il più possibile visibili

Strumenti di web analytics: Matomo¶

• Installazione e configurazione di Matomo/Piwik
• Aggiungere un sito a Matomo/Piwik
• Implementare il tracciamento del motore di ricerca interno al sito
• Impostare un obiettivo
• La segmentazione
• Creazione ed invio di report customizzati
• Importare dati da GA a Matomo/Piwik

Strumenti di web analytics: Google Analytics¶

• Configurazione di Google Analytics
• Implementare il codice di tracciamento
• Implementazione del codice per app
• Implementare il tracciamento del motore di ricerca interno al sito
• Collegare la Search Console a Google Analytics
• Impostare un obiettivo
• La segmentazione
• Export ed invio via email dei dati

Il modello di un’interfaccia¶

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

La realizzazione di un prototipo “a bassa fedeltà” (in inglese lo-fi) per un’interfaccia utente definisce:

• l’organizzazione degli elementi interattivi nello spazio disponibile sullo schermo;
• la collocazione dei blocchi di contenuto;
• la sequenza di passaggi (in inglese workflow) che l’utente deve fare per concludere un processo;
• le modalità di interazione o comportamento dell’utente con il prodotto.

Tutto questo viene progettato con un’attenzione agli aspetti di struttura dell’informazione e dei flussi di navigazione, senza preoccuparsi in questa fase delle soluzioni di dettaglio che definiscono le interfacce dal punto di vista «grafico». Durante questa fase infatti viene concretizzata soltanto la struttura portante del servizio e le soluzioni ipotizzate in fase di ricerca.

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

Un esempio di wireframe, o prototipo a «bassa fedeltà».

Nella Figura è mostrato un esempio di prototipo costruito con un programma di design, ma per costruire un wireframe si possono usare diversi metodi, dalla carta ai numerosi software messi a disposizione dal mercato specificatamente per questo scopo.

Altre informazioni sul processo di prototipazione e tutti i riferimenti al wireframe kit di Designers Italia sono disponibili nel capitolo dedicato alla prototipazione. Nel paragrafo seguente affronteremo invece i principi e le linee guida per il design delle interfacce.

Uniformità ed identità¶

Il visual design serve quindi a presentare informazioni e comportamenti in modo comprensibile e semplice tenendo presente non soltanto l’aspetto estetico, ma soprattutto le esigenze dell’utente.

Tutto ciò che riguarda lo stile è soltanto una parte del prodotto.

Sebbene la comunicazione visiva attiri giudizi soggettivi, le tematiche legate al gusto estetico non sono così fondamentali come si possa pensare. Tutto ciò che afferisce all’aspetto estetico fornisce degli indizi o crea delle emozioni, ma non è sufficiente ad ottenere un’esperienza soddisfacente.

Una chiara rappresentazione degli obiettivi dell’esperienza utente (user experience) del prodotto sono invece le fondamenta imprescindibili di tutti quegli aspetti di interfaccia utente che fanno parte dell’identità e che generano una risposta emozionale positiva.

L’interfaccia utente (User Interface, in breve UI) è di fatto una conversazione tra l’utente e il prodotto, attraverso dei task che servono a far raggiungere gli obiettivi di progetto per il cittadino. La logica di funzionamento è la stessa di una conversazione tra due persone: la comunicazione è focalizzata sull’obiettivo e deve essere efficace per ottenere una comprensione chiara e completa.

Lo stile¶

Lo stile è il «linguaggio» del design, ed è costituito da elementi variabili come la forma, il colore, la tipografia, o l’applicazione di spazi coerenti tra loro. Questi aspetti sono combinati insieme per creare una risposta emozionale (riconoscibilità, confidenza con il servizio), e dare solidità e consistenza al layout, aiutando l’utente nella navigazione e nella ricerca delle informazioni.

Lo stile è trasversale a tutti i componenti di una interfaccia: ognuno è costruito sulla base di una griglia, utilizzando ben definite palette di colori, tipo e dimensione dei caratteri, spaziature, ombre, ecc.

Come si usa lo UI Kit¶

Lo UI Kit è realizzato seguendo un sistema a blocchi, che può essere paragonato ad un set di pezzi componibili, dimensionati in modo da poter essere assemblati ed adattati.

Costruzione di un’interfaccia attraverso i principi di composizione.

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

Variazioni di un’interfaccia.

Il software scelto per costruire lo UI Kit è Sketch.

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

In alternativa, è possibile importare il file Sketch in altri programmi di prototipazione, come Adobe XD, Studio, o Figma.

La tipografia¶

La principale famiglia di font usata nello UI Kit è il Titillium Web. È stato scelto come typeface principale per i contenuti web, grazie alla x-height ampia, alla struttura lineare e alla flessibilità d’uso essendo composto da 11 stili.

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

Il font Titillium Web.

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

Il font Roboto Mono.

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

Il font Lora.

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

Corpo del testo¶

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

Un esempio di scala tipografica.

La gerarchia serve a gestire la trasmissione di un messaggio e il suo impatto, e quando non viene utilizzata la comunicazione diventa meno efficace.

Un esempio di gerarchia.

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

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

Il colore¶

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

La palette estesa¶

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

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

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

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

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

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

La palette delle Amministrazioni Centrali¶

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

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

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

Un esempio di palette monocromatica estesa.

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

Un esempio di palette monocromatica estesa di colori neutri.

Le Griglie¶

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

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

Un esempio di griglia applicata a diverse risoluzioni dello schermo.

Le dimensioni delle colonne vanno adattate ai cambiamenti della viewport: ogni colonna occuperà una percentuale di spazio specifica a seconda che sia visualizzata su dispositivi desktop, tablet, o smartphone.

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

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

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

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

Un esempio di componente con baseline a 8px.

Le icone¶

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

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

I componenti¶

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

Bottoni¶

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

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

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

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

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

Navigazione¶

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

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

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

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

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

Un esempio di menu per dispositivi mobili.

Data display¶

Nella categoria Data Display sono inseriti i componenti che hanno come funzionalità quella di mostrare informazioni in modo organizzato oppure evidenziato, come ad esempio gli “Accordion” o i “Callout”.

Un esempio di componente “Callout”.

Data entry¶

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

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

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

Un esempio di form contenente componenti “Input”.

Approccio¶

Mobile first¶

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

Un esempio di approccio mobile first.

Nell’approccio mobile first si parte dall’essenziale.

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

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

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

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

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

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

Strumenti¶

Una fonte di dati molto utile invece per una verifica a monte delle feature disponibili nei browser è caniuse.com. Tale strumento 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.

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 nel contempo l’applicazione di pratiche virtuose quali l’utilizzo di 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.

• SASS
• LESS
• PostCSS
• BEM
• Autoprefixer

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:

• guida di MDN
• You don’t know JS

Alcune pratiche sono comunque sempre auspicabili, 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.

• ESLint
• StyleLint

Bootstrap Italia¶

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

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

Bottoni¶

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

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

Un esempio del componente “Bottone” nelle sue varianti.

Interfaccia a Tab¶

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

Un esempio del componente “Tab” nelle sue varianti.

Input Toggle¶

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

Un esempio di componente “Toggle” nelle sue varianti.

React Kit e Angular Kit¶

I kit React e Angular dipendono da Bootstrap Italia per quanto riguarda lo stile, ma espongono componenti già pronti all’utilizzo per applicazioni ad alta interattività basate su queste librerie. Entrambe le librerie sono disponibili come pacchetti npm, per cui gli sviluppatori React ed Angular troveranno codice già ottimizzato per essere incluso come dipendenza nelle loro applicazioni web.

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

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