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

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.

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

Aspetto¶

• Contrasto tra primo piano e sfondo: il testo e il relativo sfondo (compreso il testo contenuto nelle immagini), devono rispettare un preciso rapporto di contrasto, basato su un algoritmo. I logotipi, il testo di grandi dimensioni (18 punti o 14 grassetto) e il testo volutamente reso poco visibile (es. azioni inattive) non rientrano in questo controllo.
• Forma e colore: le informazioni che veicola una pagina non devono dipendere unicamente da aspetto, forma, colore, dimensione, ubicazione visiva, orientamento o suono. Di seguito esempi di alcuni tra i più comuni errori:
  • Identificare il contenuto solo dalla forma o dal colore
  • Usare unicamente simboli grafici per veicolare informazioni
  • Creare link che sono solamente di un colore diverso dal testo
  • Nei moduli online, la segnalazione dei campi obbligatori mancanti effettuata solo tramite il colore
• Tempo sufficiente: deve essere possibile rimuovere il limite di tempo di visualizzazione di un oggetto nella pagina, o regolarne la scadenza, o estenderla facilmente prima del termine. Ad esempio attenzione a pubblicare un contenuto che “scorre” come un carousel di notizie.
• Oggetti lampeggianti: le pagine Web non devono contenere nulla che lampeggi per più di tre volte al secondo.
• Contenuti audio: se un contenuto audio all’interno di una pagina Web è eseguito automaticamente per più di tre secondi, allora deve essere fornita una funzionalità per metterlo in pausa o interromperlo.

Struttura¶

• Link e controlli: il codice del contenuto Web (es: HTML) va usato secondo le specifiche (es. un titolo è un Hn) e vanno esplicitate le relazioni tra elementi (es. i campi devono essere legati alle loro etichette).
• Alternative a oggetti non testuali: tutti gli elementi non testuali, come immagini, grafici, infografiche, video e audio, devono avere un’alternativa testuale equivalente quando veicolano un significato, un’informazione o una funzione, come ad esempio il testo presente in un banner o in un bottone. Fare attenzione soprattutto ai controlli di verifica antispam (es. CAPTCHA.)
• Ingrandimento: il testo si deve poter ingrandire del 200% senza perdita di contenuto o funzionalità, e quindi senza sovrapposizioni di elementi che lo rendano incomprensibile.

Comportamento¶

• Link e controlli: tutti i componenti dell’interfaccia si devono poter utilizzare tramite comandi da tastiera analogamente a quanto si riesce a fare col mouse. Risulta quindi errato:
  • Permettere l’interazione con link, campi di un form, menu, bottoni solo tramite l’uso del mouse
  • Spostare il focus della tastiera dagli elementi nella pagina quando questi lo ricevono, o si aggiornano
• Valore, ruolo e stato: è meglio utilizzare i componenti standard dell’HTML e rendere maggiormente “visibili” gli elementi che ricevono il focus. Se si utilizzano componenti non standard, verificare che valore, ruolo e stato degli elementi siano sempre resi disponibili all’utente, in particolare alle tecnologie assistive (vedi WAI ARIA).

Siti web istituzionali¶

Amministrazione trasparente

Inserire nella home page 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

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 Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici.
2. Decreto del Presidente della Repubblica 1 marzo 2005, n. 75 Regolamento di attuazione della Legge per favorire l’accesso dei soggetti disabili agli strumenti informatici
3. Decreto Ministeriale 8 luglio 2005 Requisiti tecnici e i diversi livelli per l’accessibilità agli strumenti informatici ed allegati, in particolare:
   1. allegato A Aggiornamento dei requisiti tecnici allo standard internazionale ISO 40500:2012 (W3C WCAG 2.0) livello «AA». Decreto 20 marzo 2013 del Ministero dell’Istruzione, dell’Università e della Ricerca, recante «Modifiche all’allegato A del decreto 8 luglio 2005 del Ministro per l’innovazione e le tecnologie, recante: «Requisiti tecnici e i diversi livelli per l’accessibilità” agli strumenti informatici»» (G.U. Serie Generale n. 217 del 16-09-2013)
   2. allegato B Metodologia e criteri di valutazione per la verifica soggettiva dell’accessibilità delle applicazioni basate su tecnologie internet.
4. 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.
5. Circolare n. 61/2013 dell’Agenzia per l’Italia Digitale “Disposizioni del decreto legge 18 ottobre 2012, n. 179, convertito con modificazioni dalla legge 17 dicembre 2012, n. 221, in tema di accessibilità dei siti web e servizi informatici. Obblighi delle pubbliche Amministrazioni».
6. Circolare n. 1/2016 dell’Agenzia per l’Italia Digitale relativa all’obbligo di pubblicazione sul sito web degli obiettivi annuali di accessibilità.
7. Guida pratica per la creazione di un documento accessibile: documento esplicativo redatto a cura dell’Agenzia per l’Italia digitale come ausilio alla creazione di documenti accessibili pubblicabili online sui siti web pubblici

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 n. 190 2012 “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¶

Dal Garante per la protezione dei dati personali

1. Decreto legislativo 30 giugno 2003, n. 196 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

Comunicazione pubblica¶

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

Le funzioni di un sito o di un servizio digitale¶

I siti web non sono tutti uguali, e il motivo è che assolvono a funzioni diverse: alcuni hanno come scopo principale vendere un prodotto, altri servono ad aggiornare l’utente con notizie dell’ultim’ora, altri ancora consentono di consultare l’estratto conto bancario o la propria posizione pensionistica. Analizzando le funzioni dei siti web è possibile raggrupparli in famiglie o tipologie di siti.

Quello di “funzioni narrative” è un concetto che l’architettura dell’informazione mutua dalla teoria del testo, dalla semiotica e dalla linguistica ed è molto utile per mettere a fuoco su cosa deve puntare il nostro sito e a quale famiglia di siti deve ispirarsi. Le “funzioni” non sono altro che le azioni principali che gli utilizzatori del sito web (le personas descritte in precedenza) vogliono o devono compiere.

Stabilire le priorità¶

Dopo aver capito il concetto di funzioni, il gioco è tutto nell’avere un forte senso delle priorità. Se siamo bravi a chiarire le due o tre funzioni principali del nostro sito, il lavoro di progettazione procederà spedito ed eviteremo errori grossolani o fraintendimenti. Per esempio: se la funzione principale di un sito web è permettere la consultazione di un vasto catalogo di open data, la progettazione del motore di ricerca dovrà avere estrema importanza sia in termini di user experience sia in termini di investimenti tecnologici.

Avere le idee chiare sulle funzioni che dovrà avere il nostro sito ci permette anche di individuare due o tre siti web “giusti” da analizzare e da cui trarre ispirazione senza disperdere energie nella consultazione di decine di siti o app. Trovare i giusti esempi da analizzare può portare a risparmiare diversi giorni o anche settimane nel processo di progettazione.

Definire la funzione principale¶

Lo sforzo linguistico necessario per esprimere in un’unica frase quale sia la funzione principale del servizio che si sta realizzando è il modo più efficace per non perdere di vista l’obiettivo nelle successive fasi di progettazione. Sarà anche un utile criterio per valutare l’efficacia del lavoro, una volta terminato.

Per esempio, applicando questo metodo al sito OpenCantieri potremmo dire che la funzione principale a cui assolve il sito è presentare un’informazione aperta, completa e aggiornata sul processo di realizzazione delle infrastrutture pubbliche.

Individuare le funzioni a partire dalla lista dei bisogni¶

Le funzioni di un sito web servono a rispondere ai bisogni degli utenti. Un modo semplice per mapparle è creare una tabella che mette in relazione bisogni e funzioni. Nel formulare le funzioni occorre tenere presente che si tratta di azioni: per essere sicuri di individuarle e formularle in modo corretto può essere una buona strategia iniziare le frasi con un verbo.

Per esempio: se uno dei bisogni individuato è “come cambiare l’indirizzo di residenza”, una funzione potrebbe essere “mostrare la lista dei servizi dell’anagrafe relativi alla residenza”.

Una volta individuate le macro-funzioni per la lista dei bisogni, si può procedere con l’individuazione delle sotto-funzioni, che descrivono in maniera più puntuale le azioni che il sistema dovrà compiere per completare una macro-funzione.

Individuare le funzioni di front end e back end¶

Le pagine di un sito sono i luoghi in cui le persone interagiscono con il sistema (front end); il back end è il luogo in cui è possibile gestire i contenuti, i frutti delle interazioni, e amministrare le informazioni destinate al front end. Quando si arriva alla definizione delle sotto-funzioni, come nella tabella precedente, si stanno definendo alcune azioni che si potranno compiere nel front end.

Per cominciare a delineare le funzioni del back end la domanda da porsi è: «cosa deve succedere nel back end perché nel front end sia possibile una determinata azione?».

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

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

Dimensione delle immagini¶

Le dimensioni delle immagini influenzano la velocità di caricamento della pagina: è quindi fondamentale rispettare alcune buone pratiche per tenere sotto controllo peso, risoluzione e proporzioni del file.

Partiamo da un esempio: le immagini utilizzate per le card nella pagina dei progetti del sito Designers. Per garantire una resa adeguata delle immagini, dato il template responsive (cioè che adatta il formato in base al dispositivo), sono state utilizzate immagini le cui dimensioni originali sono 800x450 con una risoluzione di 72ppi.

Prima di pubblicare un’immagine è opportuno verificare che sia ottimizzata per il web:

• Risoluzione: 72 ppi
• Formato: JPG (JPEG), PNG
• Modello di colori: RBG

In generale, se le dimensioni originali dell’immagine possono variare, è consigliabile effettuare sempre un ricampionamento delle immagini, di modo che mantengano una buona definizione ma abbiano una dimensione ridotta in termini di byte (e in genere anche in pixel).

Se hai la necessità di fare semplici modifiche alle immagini (correggere le dimensioni o la luminosità, ritagliare, ruotare, etc.) puoi sfruttare alcuni servizi online gratuiti:

• Photoshop Express Editor
• Google Nik Collection
• Pixlr Express
• Fotor

Archiviazione¶

È una buona pratica organizzarsi in modo da avere un archivio delle immagini funzionale e ordinato. A questo scopo sarebbe opportuno:

• nominare i file di modo che contengano keyword relative all’oggetto della foto e la data di acquisizione o comunque in maniera uniforme;
• organizzare le foto in cartelle per tema o evento;
• utilizzare i tag, pensando a possibili utilizzi alternativi per una stessa foto;
• effettuare un backup periodico delle immagini.

Licenze¶

Con lo sviluppo del Web hanno avuto grande diffusione le licenze di tipo Creative Commons (CC): un modo standardizzato per definire a quali diritti l’autore rinuncia e quali si riserva: le sei licenze CC richiedono, in tutti casi, l’attribuzione al proprietario dei diritti e specificano diversamente alcune possibilità di utilizzo (opere derivate, usi commerciali, possibilità di modifica del contenuto).

In pratica, se un’immagine ha una licenza CC un utente può utilizzarla senza dover chiedere l’autorizzazione al proprietario e limitandosi ad attribuirgliene i diritti in modo esplicito. È importante verificare e rispettare i limiti di utilizzo dell’immagine consentiti dalla specifica licenza CC: alcune non consentono una modifica del contenuto, altre non consentono l’uso commerciale, ecc.

I loghi delle sei licenze CC

Approfondimenti: Wikipedia su Creative Commons

Di seguito un esempio di rilascio delle immagini con licenze Creative Commons. Le foto della gallery sono utilizzabili a queste condizioni: attribuzione al proprietario, uso non commerciale e condivisione con la stessa licenza (licenza CC-BY-NC-SA 3.0 IT).

Gallery di immagini con licenze CC - fonte: Governo.it

Archivi di immagini online¶

È possibile trovare online archivi di immagini gratuite con licenze di utilizzo estremamente aperte, che non richiedono alcuna attribuzione (es. Unsplash e le relative informazioni sul tipo di licenza offerta). Altre fonti possibili sono per esempio Google Images , Flickr e Getty Images in cui usando la ricerca avanzata è possibile ricercare immagini in base alla licenza applicata e individuare in questo modo immagini utilizzabili senza dover richiedere consenso scritto all’autore. Un altro servizio utile è CC search, motore di ricerca di immagini con ricerca Creative Commons.

Di seguito un esempio di utilizzo di un’immagine ripresa da un archivio online:

Esempio immagine da archivio iStockPhoto - fonte: Comune di Biella

Approfondimenti: come trovare immagini liberamente utilizzabili attraverso Google Images.

Immagini prese dai social network¶

I canali social (in particolare Facebook e Instagram) sono una rilevante fonte di immagini e contenuti multimediali, realizzati dagli utenti e caricati sui propri profili. La pubblicazione di una foto su un profilo social non è però via libera all’utilizzo indiscriminato da parte di chiunque. Il comportamento da tenere nei confronti di quella immagine è lo stesso che si deve tenere nei confronti di un’immagine raccolta da un blog o un qualsiasi sito, ovvero assicurarsi di avere tutti i diritti di utilizzo concessi espressamente (anche a titolo gratuito) dall’autore o il detentore dei diritti, che può essere chi ha pubblicato quella foto sul proprio canale social o può essere un altro soggetto.

Per approfondimenti¶

Allegato B del Decreto Ministeriale 8 luglio 2005.

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.

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

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

Matomo/Piwik¶

• 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

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

Come iniziare¶

Al seguente indirizzo sono disponibili le istruzioni su come scaricare e utilizzare lo UI Kit:

• design-ui-kit

Condividere¶

Quanto realizzato nel design viene condiviso con gli sviluppatori attraverso lo strumento di collaborazione Invision. In particolare è possibile analizzare, attraverso la funzione “inspect mode” gli aspetti di stile in codice CSS e gli asset statici da esportare e utilizzare in fase di sviluppo.

Tipografia¶

Typefaces¶

Titillium Web¶

La famiglia di font Titillium Web , è stata realizzata come progetto didattico dagli studenti del corso in Type Design dell’Accademia di Belle Arti di Urbino. Il Typeface è rilasciato con licenza SIL Open Font License ed è scaricabile da Google Font, una piattaforma di distribuzione gratuita di Web font.

Il Titillium Web è una famiglia di font sans serif composta da 11 stili.

La x-height ampia e la struttura lineare fanno del Titillium un font che si adatta bene ad essere utilizzato sul web.

Roboto Mono¶

Il Roboto Mono è la variante monospaced della famiglia Roboto ed anche in questo caso si tratta di un Web Font scaricabile ed utilizzabile gratuitamente. È stato introdotto nelle linee guida per la chiarezza e leggibilità dei numeri: è adatto ad essere utilizzato per la rappresentazione di numeri, calcoli matematici, numeri in tabelle, codice di programmazione.

Può essere utilizzato qualsiasi altro font purchè sia leggibile, e la scelta sia motivata da forti caratteristiche identitarie.

Gerarchia¶

La gerarchia visuale serve a gestire la trasmissione di un messaggio e il suo impatto. Diversi elementi possono contribuire a creare una gerarchia, uno di questi è l’uso della scala tipografica.

Paragrafo¶

Definizione¶

I paragrafi possono essere distinti o applicando uno spazio tra di essi o in alternativa usando una indentatura di misura pari a quella del leading.

Interlinea¶

L’interlinea o leading sia dei titoli che del corpo di testo è calcolata tenendo conto anche della griglia orizzontale di 8px.

Body text 16px

Body text 18px

Nota

Per informazioni più dettagliate sui paragrafi e la tipografia in generale vedi UI KIT, Web ToolKit e Bootstrap Italia.

Colori¶

Si consiglia l’utilizzo di una palette costituita da non più di 5 colori e di questi non più di 3 avranno un differente valore di Hue.

La palette può essere di tipo monocromatico o costituita da associazioni di colori con differente Hue. La palette monocromatica è costituita dal colore base e dalle sue variazioni in termini di saturazione e/o luminosità. Gli schemi colore non monocromatici, invece, oltre al colore base e alle sue variazioni, comprendono un colore che può essere scelto tra gli analoghi, complementari, triadici, ecc. del colore base, oppure scelto dalla gamma di colori appartenenti all’identità visiva.

In ogni palette sono presenti inoltre le tinte neutre (grigi, bianco e nero).

Come costruire uno schema colore¶

La scelta dei colori è dettata dal materiale identitario dell’Ente o Agenzia (logo, stemma, gonfalone etc.) o comunque da elementi afferenti alla sua riconoscibilità.

Il colore base è quello che viene utilizzato per una percentuale maggiore rispetto agli altri colori, definiti secondari.

Tra i colori secondari ci sono sia quelli strettamente connessi al colore base, sia un eventuale colore di risalto o accent color che viene utilizzato in misura minore poiché è associato a elementi che presuppongono un’interazione: bottoni, elementi di controllo (sliders, radio ecc) links, text fields.

La palette può essere estesa ossia si possono creare variazioni in termini di saturazione e luminosità dei colori scelti.

Palette estesa. Come creare le variazioni di un colore¶

Da un colore 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 tradotto nel web design significa variare i valori di saturazione (S) e luminosità (B). Per esempio, dato un colore base con i valori H 93; S 100; B 50, è sufficiente sottrarre 10 gradi di luminosità (B) per ottenere le variazioni più scure e 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à a partire da un valore di 80 e contemporaneamente diminuire la saturazione (S) di 15 gradi.

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

Per ottenere i 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 (#0066CC).

Pensata per un design semplice e minimalista è una palette costituita dalle variazione del colore base, più le tinte neutre. Sono presenti anche colori che possiamo definire utility colors ossia da utilizzare per i messaggi di feedback (warning, success, error) o per la realizzazione di grafiche.

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

Impostazioni della griglia di costruzione consigliata¶

La griglia orizzontale di 8 px¶

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.

Per maggiori informazioni sulla griglia:

• Le griglie: alla scoperta dello Ui Kit di designers.

Bottoni¶

Di seguito un esempio dello stile da utilizzare per i bottoni.

I colori sono personalizzabili in base alla palette che sarà stata individuata per ciascun sito web. È possibile impostare le dimensioni dei bottoni utilizzando le classi di utilità responsive (u-text-r-*).

Default button: Mostra il codice

Info button: Mostra il codice

Danger button: Mostra il codice

Input Field¶

Negli input field ogni campo deve essere sempre associato, anche attraverso il tag <label>, a un’etichetta che ne descriva in maniera chiara il contenuto che deve essere inserito. Deve essere consentito inoltre lo spostamento da un campo all’altro tramite il tasto Tab.

Esempio di stile per form

Carousel¶

Lo scorrimento automatico dei contenuti è generalmente sconsigliato poiché, di fatto, riduce la visibilità delle informazioni. Inoltre può essere difficoltoso leggere l’intero contenuto di una slide prima che venga sostituita automaticamente dalla successiva. Infine introduce problemi di accessibilità per chi utilizza una tastiera o uno screen reader.

Infatti, i dati statistici raccolti riguardo l’interazione degli utenti con i carousel ne rivelano un utilizzo effettivo marginale (1%).

Nel caso si configuri l’assoluta necessità di utilizzare un carousel:

• i titoli dei contenuti devono essere visibili in ogni momento (fuori dalle slide quindi);
• l’utente deve poter controllare lo scorrimento (stop / avvio);
• i controlli devono poter essere utilizzabili anche tramite tastiera (oltre che con mouse / touch).

Nella maggior parte dei casi risulta più conveniente sostituire il carousel con una presentazione statica dei contenuti (per esempio una galleria di immagini), in modo che siano tutti visibili immediatamente o tramite scorrimento manuale non automatico.

Data display: tabelle¶

In genere nelle tabelle un corretto allineamento del testo e una giusta spaziatura fra le colonne e le righe sono già in grado di creare la percezione delle strutture verticali e orizzontali che sottostanno al contenuto, rendendo superflua la presenza di molte delle linee divisorie o dei fondini di cella.

Una tabella leggera (meno linee, meno colori) permette di concentrarsi meglio sul contenuto.

Header¶

Le indicazioni presenti in questa sezione sono rivolte a tutte le pubbliche amministrazioni (centrali e locali) e gli enti e le società a loro afferenti (ad esempio società partecipate, consorzi, comunità); vanno applicate nella progettazione dei siti istituzionali e tematici.

La testata deve contenere le seguenti funzionalità:

• denominazione dell’amministrazione / ente / società / sito tematico (link in formato testuale che punta alla home page)
• barra di accesso al livello gerarchico superiore dell’amministrazione (o all’amministrazione afferente nel caso di un sito tematico)
• stemma / logo dell’amministrazione / ente / società / sito tematico accesso al menu di navigazione

La testata può inoltre contenere una o più delle seguenti funzionalità:

• campo di ricerca
• sign up/sign in
• link ai social network
• selezione lingue

La struttura della testata è suddivisa in 2 aree funzionali.

Footer¶

La struttura del footer è suddivisa in 2 aree funzionali.

Struttura footer

Contenuto¶

L’area contiene:

• lo stemma e l’intestazione dell’amministrazione
• i contatti
• i social (tutti)
• la sezione “Amministrazione trasparente”
• link a privacy policy e note legali
• i crediti

Esempio desktop 1440

Esempio mobile 320

Layout¶

L’impaginazione dei contenuti tramite un layout lineare (una o due colonne) favorisce la rapida scansione delle informazioni e ne agevola la consultazione soprattutto su touch screen, dove il pattern di interazione più funzionale è lo scorrimento verticale della pagina.

Casi d’uso validi per l’utilizzo di una colonna laterale (<nav>, <aside>) sono quelli dove sussiste una immediata correlazione semantica con il contenuto principale:

• menu contestuale della sezione del sito correntemente visualizzata;
• elenco di sezioni / contenuti / documenti correlati.

L’utilizzo di card favorisce la consultazione dei contenuti sugli schermi più piccoli. Per esempio: elenchi di contenuti omogenei (anteprime di notizie o eventi) possono essere presentati tramite card o liste posizionate in una griglia responsive.

Più in generale, laddove i dati non hanno una struttura prevalentemente tabulare, è consigliato l’utilizzo di card o liste al posto che di elementi <table> che risultano più difficili da rendere fruibili in maniera efficace sui dispositivi mobili.