Linee guida di design per i servizi web della PA¶

Introduzione alle linee guida di design¶

I cittadini al centro¶

Designers Italia considera le effettive esigenze degli utenti come punto di partenza per pensare, costruire e migliorare i servizi digitali. Grazie all’approccio human-centered è possibile:

coinvolgere cittadini e operatori in ogni momento del percorso progettuale, per capire le loro necessità, generare idee e validare le scelte progettuali in corso d’opera;

modellare i servizi digitali sulla base di esigenze concrete e risorse esistenti;

disegnare e sviluppare flussi di interazione chiari, che rispondano con efficacia alle necessità dei diversi utenti, generando un’esperienza d’uso positiva;

strutturare i contenuti in modo semplice, con uno stile comunicativo coerente e una strategia editoriale sostenibile nel tempo.

Le linee guida per il design dei servizi digitali della Pubblica Amministrazione sono uno strumento di lavoro per la Pubblica Amministrazione e servono ad orientare la progettazione di ambienti digitali fornendo indicazioni relative al service design, alla user research, al content design e alla user interface. Per discutere sul design dei servizi pubblici è disponibile il nostro forum. Per collaborare alle linee guida è possibile usare gli strumenti descritti di seguito.

Sviluppo collaborativo¶

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

I contenuti delle linee guida sono scritti in file .rst e possono essere aggiornati via GitHub. Qui è disponibile una guida alla sintassi RST.

Altre risorse per l’editing in formato .rst:

Editor per il testo
Editor per le tabelle
Estensione Chrome per Google spreadheet
Altro

Sviluppo programmato¶

Le linee guida di design seguono le roadmap di evoluzione pubblicate in ciascuna delle sezioni di Designers Italia.

Version control e release della documentazione¶

Le linee guida beneficiano del version control system di GitHub, per cui esiste una traccia pubblica di tutte le modifiche effettuate e dei relativi autori. Le linee guida di design adottano un sistema di release basato sui tag di GitHub. Ogni release è etichettata secondo un sistema basato su anno e versione. Le versioni sono espresse attraverso un numero progressivo. Il sistema delle release è in vigore dal 2017, quindi la prima release delle linee guida è 2017.1 (prima release del 2017). I nuovi contenuti e le modifiche a contenuti esistenti dopo essere approvati vengono pubblicati nella versione latest delle linee guida, disponibile per una discussione pubblica e revisione da parte della community ma priva di valore ufficiale. Solo successivamente, in occasione di una nuova release delle linee guida, il team di Designers Italia decide di consolidarle e farle confluire, dopo eventuali modifiche, nella versione ufficiale stable delle linee guida.

Stile della documentazione¶

Le linee guida sono scritte seguendo la style guide di redazione dei testi pubblici. In particolare:

linguaggio semplice e comprensibile ad un pubblico ampio

brevità e uso di elenchi

ricorso ad esempi, meglio se supportati da immagini e link

Nella guida usiamo delle etichette per evidenziare alcuni passaggi, specificando se l’applicazione della indicazione è obbligatoria o facoltativa, come segue:

si deve (devi)

si può (puoi)

si dovrebbe (dovresti)

best practice

Consultazione della documentazione¶

La documentazione è disponibile su **Docs Italia**, la piattaforma di gestione della documentazione pubblica creata da Team per la Trasformazione Digitale. Le funzioni di hosting e di ricerca sono basate su Readhtedocs e la documentazione viene pubblicata attraverso il tool Sphinx e il linguaggio RST. Tutti i documenti di Docs Italia possono essere fruiti anche in formato .epub e .pdf

Kit di sviluppo e di design¶

Il progetto di design dei servizi pubblici digitali prevede che oltre al rilascio di linee guida ci sia il rilascio di kit di sviluppo e di design per i siti pubblici (ad es. icon kit, kit di sviluppo, ecc.). I kit - e la documentazione dei kit - possono essere citati all’interno delle linee guida, ma non sono contenuti all’interno di questo repo. I kit sono espressione delle linee guida, ma il versionamento delle linee guida e quello dei kit sono processi indipendenti.

Service design¶

Con l’adozione delle metodologie di service design si intende migliorare la progettazione e quindi le caratteristiche di un servizio, orientando funzionalità, processi e componenti intorno alle effettive esigenze degli utenti. Il servizio digitale erogato deve essere di facile utilizzo, eventualmente corredato da un contesto di informazioni sintetiche e chiare.

Accessibilità¶

SI DEVE

Le pubbliche amministrazioni devono rispettare i requisiti tecnici di accessibilità riportati nell”Allegato A del Decreto Ministeriale 8 luglio 2005 e successive modifiche.

Definizione¶

Lo sviluppo di soluzioni ICT, hardware, software, web-based per la PA ha come requisito fondamentale l’accessibilità.

La normativa sancisce che tutte le persone devono poter usare applicazioni software, siti Web, servizi on line, app, documenti elettronici, indipendentemente da eventuali limitazioni, ad esempio limitazioni fisiche, tecnologiche o ambientali.

Nessun utente deve essere discriminato, anche se si trova ad operare in una situazione di particolare difficoltà fisica, e deve quindi poter fruire di tutte le informazioni e i servizi digitali rilasciati da un ente pubblico.

Creare un sito accessibile¶

L’accessibilità è una qualità che riguarda più aspetti di un sito web e di un software in generale, e va considerata in diversi momenti dello sviluppo, da diverse figure professionali:

Aspetto e contenuto (visual e content)
Struttura (develop)
Comportamento (interaction)

Il Decreto Ministeriale del 20 marzo 2013 individua i 12 requisiti da rispettare che derivano da principi internazionali. Per essere a norma, il sito web di una PA deve soddisfare tutti i controlli WCAG 2.0 fino al livello AA. In questa pagina forniamo un elenco degli errori più comuni che limitano o impediscono l’accesso alle informazioni in un determinato contesto.

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

Un esempio per capire: uso del colore¶

Il colore non può essere usato come unico mezzo per veicolare un’informazione. Quindi, ad esempio, è sbagliato indicare “in rosso le informazioni obbligatorie, in verde quelle accessorie”, perché non tutti potrebbero essere in grado di percepire la differenza di colore in contesti di fruizione diversi ma molto frequenti, ad es.:

da smartphone o tablet, di giorno e all’aperto
una stampa in bianco e nero della pagina web
una pagina web videoproiettata
in caso di daltonismo (5-8% popolazione maschile)

Per comunicare un’informazione quindi, oltre al colore, è necessario aggiungere un elemento testuale o grafico, un simbolo o un bordo.

Normativa¶

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

Obiettivi accessibilità¶

Entro il 31 marzo di ogni anno le pubbliche amministrazioni devono pubblicare nei propri siti web gli “Obiettivi di accessibilità per l’anno corrente”. L’Agenzia per l’Italia digitale ha predisposto un’applicazione on line per ricevere dalle amministrazioni gli Obiettivi di accessibilità. Gli obiettivi vanno pubblicati sui siti delle PA nella sezione “amministrazione trasparente/Altri contenuti/Accessibilità e Catalogo di dati, metadati e banche dati”.

Normativa¶

Contenuti minimi dei siti della PA¶

La normativa italiana obbliga le PA a pubblicare determinate informazioni nei loro siti web.

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

Codice dell’amministrazione digitale¶

Decreto legislativo 7 marzo 2005, n.82

Obblighi di pubblicazione di dati e le informazioni strumentali all’utilizzo degli strumenti di pagamento elettronico (art.5)
Comunicazioni tra imprese e amministrazioni (art. 5 bis): la presentazione di istanze, dichiarazioni, dati e lo scambio di informazioni e documenti (anche a fini statistici) tra imprese e PA (e viceversa) avviene solo utilizzando tecnologie ICT
Qualità dei servizi resi e soddisfazione dell’utenza (art. 7): i soggetti rientranti nell’ambito di applicazione del CAD consentono agli utenti di esprimere la soddisfazione rispetto alla qualità, anche in termini di fruibilità, accessibilità e tempestività, del servizio reso all’utente stesso e pubblicano sui propri siti i dati risultanti, ivi incluse le statistiche di utilizzo;
Partecipazione democratica elettronica viene favorita anche attraverso l’utilizzo di forme di consultazione preventiva per via telematica sugli schemi di atto da adottare (art.9)
Siti Internet delle pubbliche amministrazioni: individuazione dei principi secondo cui devono essere costruiti (Art. 53)
Siti pubblici e trasparenza (art. 54): obblighi di pubblicazione in “Amministrazione trasparente” (rinvio a d.lgs. 33/2013)
Validità dei documenti informatici (art. 22, 23, 23-bis, 23-ter): validità delle copie informatiche di documenti con riferimento preciso circa le diverse possibilità (copia digitale del documento cartaceo, duplicazione digitale, ecc.);
Conservazione digitale dei documenti (artt. 43-44 bis): gestione della conservazione dei documenti e del relativo processo da parte di un Responsabile della conservazione che si può avvalere di soggetti pubblici o privati che offrono idonee garanzie
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).
Organizzazione e finalità dei servizi in rete (art.63): adeguata progettazione dei servizi in rete correlata all’adozione di strumenti idonei alla rilevazione immediata, continua e sicura del giudizio dei propri «clienti» sui servizi online.
Dati identificativi delle questioni pendenti dinanzi autorità giudiziaria di ogni ordine e grado (art.56): Inserimento dei dati identificativi delle questioni pendenti, nonché delle sentenze e delle altre decisioni del giudice amministrativo e contabile […], anche nel sistema informativo interno e sul sito istituzionale, osservando le cautele previste dalla normativa in materia di tutela dei dati personali.
Trasmissione delle informazioni via web (art. 58): le PA non possono richiedere informazioni di cui già dispongono. Le banche dati predisporranno apposite convenzioni aperte per assicurare l’accessibilità delle informazioni in proprio possesso da parte delle altre amministrazioni;
Istanze e dichiarazioni presentate alle pubbliche amministrazioni per via telematica (art. 65);
Open data (artt. 52 e 68): responsabilità delle PA nell’aggiornare, divulgare e permettere la valorizzazione dei dati pubblici secondo principi di open government

Riferimenti normativi tematici¶

Accessibilità¶

Legge 9 gennaio 2004, n. 4 Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici.
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
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.
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.
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».
Circolare n. 1/2016 dell’Agenzia per l’Italia Digitale relativa all’obbligo di pubblicazione sul sito web degli obiettivi annuali di accessibilità.
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¶

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».
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.
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»
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
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
Determinazione ANAC n. 6/2015 Linee guida in materia di tutela del dipendente pubblico che segnala illeciti (c.d. whistleblower)
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».
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.
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)
Delibera ANAC n. 1309 del 28/12/2016. Linee guida operative sull’attuazione dell’accesso civico generalizzato (FOIA), Esclusioni e Limiti.
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

Decreto legislativo 30 giugno 2003, n. 196 Codice in materia di protezione dei dati personali (c.d. Codice della Privacy)
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
Individuazione delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie» dell’8 maggio 2014

Comunicazione pubblica¶

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

Design management¶

In arrivo secondo roadmap pubblica.

Content design¶

La sezione content design della guida affronta i temi legati agli ambienti informativi in cui si muove l’utente che fruisce servizi digitali. In particolare si occupa della search engine optimization, del linguaggio e della gestione dei contenuti e infine della loro organizzazione (architettura dell’informazione).

Architettura dell’informazione¶

L’architettura dell’informazione consiste nell’organizzazione semantica e logica di ambienti informativi, sia fisici sia digitali, e serve a rendere i servizi pubblici più facili da trovare, da capire e da usare. Una buona architettura dell’informazione aiuta le persone a comprendere ciò che le circonda e a trovare ciò che cercano, sia online che offline. Lavorare su questo ambito implica una seria riflessione sulla struttura dell’informazione e sul linguaggio. L’architettura dell’informazione è più efficace se è progettata intorno ai reali bisogni delle persone: per questo si parla di user-centered design.

Nel corso dei prossimi mesi pubblicheremo, secondo roadmap, alcuni approfondimenti relativi a tutti i principali temi legati all’architettura dell’informazione e in particolare: la prototipazione, attraverso il wireframing e l’interactive wireframing; le strutture di navigazione; le logiche di classificazione dei contenuti e le relazioni tra contenuti; la progettazione di interazioni specifiche come la home page di un sito web e la pagina di ricerca.

L’ambito¶

Per progettare l’architettura dell’informazione di un ambiente informativo è necessario analizzare:

gli utenti
i contenuti
il contesto

Il processo di progettazione dell’architettura dell’informazione di un sito web parte dall’analisi degli utenti, del contenuto del sito e del contesto nel quale si opera. Questo processo porta all’individuazione dei contenuti imprescindibili del progetto web.

Architettura dell’informazione

Progettare l’architettura dell’informazione significa soddisfare i bisogni degli utenti, creando contenuti utili e rilevanti che possano adattarsi al contesto di fruizione. Grazie alla ricerca sugli utenti e all’analisi del contesto, è possibile definire le funzioni principali del sito e di ogni sua pagina. I contenuti diventano quindi parte integrante del servizio all’utente.

Ecco, a titolo di esempio, alcune delle macro funzioni tipiche di un sito pubblico:

identificare l’utente
consentire la prenotazione/iscrizione
consentire il pagamento (e più in generale, scambiare denaro)
informare, regolamentare
interagire, comunicare con l’utente
archiviare/conservare informazioni
proporre un lavoro a persone e aziende
autorizzare l’utente a fare qualcosa

Gli utenti¶

L’analisi delle esigenze informative e dei comportamenti di navigazione degli utenti contribuisce alla progettazione di un’efficace architettura dell’informazione. Per analizzare il tipo di pubblico del sito web è necessario definire:

i target principali a cui si rivolge l’informazione o il servizio
i bisogni, ovvero le necessità informative e operative degli utenti
le principali attività che gli utenti intendono effettuare

È bene prendere decisioni sulla base dell’analisi dei dati riferiti all’utente in particolare i dati statistici di navigazione sul sito per comprendere il comportamento dell’utente la realizzazione di interviste e altri metodi di analisi qualitativa l’esperienza e la competenza generale di navigazione dell’utente target.

Il contenuto¶

Per contenuto si intendono le informazioni veicolate da documenti, applicazioni, servizi e metadati che si trovano all’interno del sito web o che verranno creati in futuro. Per analizzare il contenuto disponibile e per progettare i contenuti da sviluppare è necessario definire:

i documenti/dati disponibili
le tipologie dei documenti/dati
l’oggetto dei contenuti disponibili
l’aggiornamento dei documenti disponibili
la quantità dei contenuti disponibili
le strutture esistenti
l’ownership dei contenuti
i metadati
i formati
il tasso di crescita previsto

Spesso l’esito di questa analisi determina quella che viene definita una gap analysis, che evidenzia i contenuti presenti attualmente sul sito e quelli che dovranno essere prodotti / modificati / eliminati nella nuova versione del sito.

Il contesto¶

Nella progettazione di un sito web, l’architettura dell’informazione deve necessariamente adattarsi al contesto di riferimento, per essere coerente con gli obiettivi, la strategia e la “cultura” dell’organizzazione. Per analizzare il contesto è necessario quindi considerare e definire:

Gli obiettivi strategici dell’Amministrazione
Le risorse economiche disponibili
Le direttive/norme vigenti che vincolano il progetto
la “cultura” dell’amministrazione, intesa anche come la propensione al cambiamento
l’ambito tecnologico
le risorse umane coinvolte nel progetto, e le loro competenze tecniche
i limiti operativi, relativi ad esempio alla logistica, alla sicurezza

Dai bisogni degli utenti alle funzioni di un servizio digitale¶

La progettazione dell’architettura dell’informazione di un ambiente digitale si fonda su alcune conoscenze relative al contesto e alle persone che usano il servizio, che possono essere sintetizzate in alcuni strumenti operativi, descritti nella sezione dedicata al service design:

personas: profili verosimili di utenti del servizio delineati in base ai risultati della ricerca, rappresentativi di un gruppo di utenti (approfondisci: Kit Personas);
user stories e scenari (azioni e circostanze in cui l’utente si trova a prendere decisioni e a effettuare scelte che lo portano a interagire con l’ambiente e le informazioni per raggiungere un obiettivo);
journey map (rappresentazione del percorso compiuto dall’utente interagendo con i touchpoint fisici o digitali del servizio, elaborate a partire da personas e user stories).

Questi elementi ci aiutano a concentrarci sugli utilizzatori del servizio, assumere il loro punto di vista e avere una lista chiara dei loro bisogni (evidenziando priorità e possibili criticità).

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

Bisogni	Funzioni
Come cambiare l’indirizzo di residenza	Mostrare la lista dei servizi dell’anagrafe relativi alla residenza
Trovare gli orari di apertura al pubblico degli uffici per cambiare l’indirizzo di residenza	Mostrare una vista sintetica con le informazioni di contatto dell’ufficio anagrafe

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.

Bisogni	Macro-Funzioni	Sotto-Funzioni
Come cambiare l’indirizzo di residenza	Mostrare la lista dei servizi dell’anagrafe relativi alla residenza	Individua i servizi relativi all’area anagrafe Seleziona i servizi dell’area anagrafe relativi alla residenza Estrae i titoli dei contenuti individuati e mostra una lista in ordine alfabetico
Trovare gli orari di apertura al pubblico degli uffici per cambiare l’indirizzo di residenza	Mostrare una vista sintetica con tutte le informazioni di contatto dell’ufficio anagrafe	Individua i contatti associati all’ufficio specificato Individua gli orari associati al determinato ufficio Estrae il titolo dal nome dell’ufficio selezionato e mostra una vista con tutti i contenuti

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

Bisogni	Funzioni	Front End	Back End
Come cambiare l’indirizzo di residenza	Mostrare la lista dei servizi dell’anagrafe relativi alla residenza	Individua i servizi relativi all’area anagrafe Seleziona i servizi dell’area anagrafe relativi alla residenza Estrae i titoli dei contenuti individuati e mostra una lista in ordine alfabetico	Permette di associare dei contenuti alla categoria anagrafe Ordina in ordine alfabetico crescente i contenuti in base al titolo
Trovare gli orari di apertura al pubblico degli uffici per cambiare l’indirizzo di residenza	Mostrare una vista sintetica con tutte le informazioni di contatto dell’ufficio anagrafe	Individua i contatti associati all’ufficio specificato Individua gli orari associati al determinato ufficio Estrae il titolo dal nome dell’ufficio selezionato e mostra una vista con tutti i contenuti	Permette di associare dei contatti all’ufficio selezionato …

SEO¶

Premessa¶

Questa guida ha lo scopo di aiutare chi si occupa del sito web di una pubblica amministrazione a capire come ottimizzare i contenuti pubblicati e la struttura del sito nel suo complesso in ottica SEO, con l’obiettivo finale di rendere informazioni e servizi più idonei a soddisfare i bisogni degli utenti e più visibili sui motori di ricerca.

Introduzione¶

Con il termine search engine optimization (SEO) - o ottimizzazione per i motori di ricerca - si intende un insieme di tecniche iterative applicabili al contenuto delle pagine web e alla struttura dei siti che hanno lo scopo di migliorare il posizionamento di un contenuto web nel ranking dei risultati dei motori di ricerca.

I fattori di ottimizzazione vengono generalmente suddivisi in 2 categorie:

fattori on-page, cioè eseguibili all’interno del sito
fattori off-page, cioè eseguibili al di fuori del sito

I fattori on-page¶

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

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:

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

Approfondimento: le pagine AMP (Accelerated Mobile Pages) 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

I fattori off-page¶

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

Webmaster tools: Search Console di Google¶

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

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

Con Search Console è possibile:

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

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

Linguaggio¶

Gestione dei contenuti¶

I contenuti di un sito web devono consentire all’utente di trovare velocemente l’informazione di cui ha bisogno, nel formato di fruizione più idoneo, anche mediante un dispositivo mobile.

SI DEVE

Progettare i contenuti affinché rispondano innanzitutto alle necessità degli utenti, non solo a quelle dell’amministrazione.

Nella pianificazione e progettazione di un contenuto web, considera che le persone spesso utilizzano il mobile anche quando hanno la possibilità di navigare tramite il desktop. Nella gestione dei contenuti verifica quindi se sia possibile:

ridurre la quantità complessiva del testo previsto per la pubblicazione online;
utilizzare una tipologia di formato del contenuto che sia più fruibile in relazione agli obiettivi informativi, ad es. evitare i pdf;
rimuovere il contenuto superfluo presente sul sito.

Creazione dei contenuti¶

Ogni singolo paragrafo, ogni singola parola devono venire incontro alle necessità informative degli utenti e consentire loro di trovare con immediatezza ciò che cercano. Dovresti quindi almeno:

utilizzare titoli e sottotitoli nelle pagine;
scrivere frasi brevi;
suddividere il contenuto per paragrafi;
monitorare costantemente l’aggiornamento dei contenuti.

SI DOVREBBE

Strutturare il contenuto in modo che le informazioni più importanti compaiano nella prima parte del corpo del testo. Ogni paragrafo dovrebbe veicolare un solo concetto per volta.

Linguaggio¶

È necessario usare un linguaggio chiaro e sintetico, finalizzato a indirizzare l’utente verso l’informazione o il servizio di cui ha bisogno.

SI DOVREBBE

Si dovrebbe evitare l’utilizzo di un linguaggio gergale e specialistico o l’uso di termini e frasi di difficile comprensione.

Utilizzare quindi:

preferibilmente la forma attiva dei verbi;
un vocabolario semplice e chiaro, privilegiando termini e frasi che gli utenti potrebbero usare nella ricerca online;
fornire una spiegazione dei termini tecnici presenti;
esplicitare gli acronimi e le abbreviazioni, inserendo l’acronimo tra parentesi tonde dopo il termine indicato per esteso.

Corretta ortografia¶

Usa particolare attenzione alla corretta ortografia della lingua italiana, soprattutto per quanto riguarda l’uso degli accenti e degli apostrofi.

Titoli¶

Il titolo deve anticipare sinteticamente all’utente il contenuto della pagina.

SI DOVREBBE

Per essere ben visibili nei risultati dei motori di ricerca, la lunghezza dei titoli delle pagine dovrebbe essere compresa fra i 50 e i 65 caratteri, spazi compresi.

Per creare titoli che attirino l’attenzione del lettore:

scrivere titoli unici all’interno del sito, e non ambigui;
utilizzare le parole più rappresentative del contenuto a cui il titolo fa riferimento;
non scrivere il titolo in maiuscolo, poiché rende la lettura più faticosa;
non utilizzare punti alla fine del titolo;
mettere graficamente in risalto i titoli rispetto al testo circostante;
non inserire slash / o trattini;
non utilizzare acronimi, a meno che non siano ben noti (es. UE).

Sommario¶

SI DOVREBBE

Il sommario delle notizie in home page dovrebbe essere un periodo di senso compiuto, senza puntini di sospensione alla fine.

Il sommario serve a sintetizzare al lettore l’oggetto dell’articolo, prima della selezione della pagina di dettaglio. Dovrebbe quindi avere una lunghezza massima di 140 caratteri, spazi inclusi, e possedere le seguenti caratteristiche:

essere una sintesi dei punti centrali del contenuto;
essere diverso dal titolo e dalle prime righe del contenuto della pagina interna;
contenere le parole chiave più rappresentative del contenuto;
terminare con un punto.

Testo della pagina¶

Specialmente nel caso delle notizie, il testo deve rispondere sinteticamente alle cinque domande: chi, dove, quando, perché, come.

Il testo di un contenuto deve essere il più coerente possibile con titolo e il sommario;
Ogni paragrafo deve contenere al massimo 3 frasi;
Il testo della pagina deve contenere le parole chiave riportate nel titolo e nel sommario;
Utilizzare liste puntate per elencare concetti costituiti da tre o più elementi.

Creazione dei link¶

SI DEVE

I link devono essere costituiti da parole-chiave significative. Non usare mai la frase “clicca qui” per attivare un link.

Per individuare quali parole deve contenere un link è bene pensare alle parole chiave che un utente userebbe in un motore di ricerca per trovare il contenuto al quale rimanda il link che si sta costruendo. I link devono contenere parole significative rispetto al contenuto a cui rinviano e non devono essere presenti nel sommario. Anziché duplicare informazioni all’interno di sezioni diverse del sito, è preferibile attivare dei link di approfondimento per collegare fra loro contenuti che trattano tematiche complementari. I link verso l’esterno del sito dovrebbero essere accompagnati da un avviso leggibile anche dagli screen reader (ad esempio “Questo link si aprirà in una nuova finestra”). Verifica periodicamente i link esterni, per evitare che rimandino a pagine inesistenti o non aggiornate.

Link di navigazione e bottoni¶

Nel definire le voci dei link presenti nei menu di si deve usare una terminologia univoca, dove la stessa definizione non conduca, in luoghi diversi, ad azioni differenti. Nei bottoni e nei link descrivere in modo coerente e puntuale quali sono le azioni che ci dobbiamo aspettare nell’eseguire un comando o nel riempire un form. Siate specifici: “Cerca” invece di “Invia”, “Paga” invece di “Ok”. Il significato di “Cancella” è diverso da “Annulla”.

Immagini¶

Come ogni contenuto che pubblichiamo sul web, ci vuole buon senso anche nella pubblicazione di immagini. Non pubblicare foto inutili, non pubblicare sequenze di foto simili tra loro se non aggiungono significato, non pubblicare foto troppo pesanti. Dedica tempo alla produzione, alla ricerca e alla selezione delle immagini: una buona foto può fare la differenza e dare grande valore al tuo contenuto.

Ricordati di:

accompagnare ogni foto con una didascalia;
citare l’autore;
riportare la licenza di pubblicazione.

Infine, quando pubblichi un’immagine, assicurati che il file dell’immagine abbia un nome che riflette il contenuto dell’immagine (per esempio, se pubblichi una foto del Teatro antico di Taormina il nome del file potrebbe essere teatro-antico-taormina.jpg): tra le altre cose, sarà più facile per i motori di ricerca indicizzare il tuo contenuto e per gli utenti trovarlo.

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:

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¶

SI DEVE

Il copyright è un metodo di riconoscimento e tutela del diritto d’autore sulle immagini. Se intendi utilizzare immagini protette da copyright è necessario richiedere l’autorizzazione al proprietario, e conoscere i termini d’uso concessi.

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.

Consenso dei soggetti ritratti¶

Un altro tema da tenere in considerazione quando si pubblicano immagini all’interno di un sito è il consenso alla pubblicazione da parte dei soggetti ritratti all’interno delle fotografie.

In caso di fotografie provenienti da archivi online gratuiti o a pagamento, si può dare per acquisito che chi ha realizzato l’immagine o l’ha pubblicata si sia assicurato il consenso dei soggetti ritratti.

Nel caso di fotografie realizzate autonomamente, il consenso è invece necessario nella maggior parte dei casi. Fanno eccezione le persone ritratte in eventi di pubblico interesse (una conferenza stampa, una manifestazione in piazza, una concerto) e le persone famose (in base al pubblico interesse, quindi ad esempio esponenti delle istituzioni, attori, personaggi pubblici), purché in contesti pubblici: in questi casi le fotografie si possono utilizzare senza una specifica autorizzazione. Altre eccezioni, previste per legge, sono “scopi di polizia, di giustizia, didattici o scientifici”.

In tutti gli altri casi, per evitare violazioni della privacy, la pubblicazione di fotografie in un sito deve essere sempre autorizzata dai soggetti ritratti con una lettera liberatoria (di cui si trovano numerosi modelli online), in cui si deve specificare l’utilizzo cui la foto è destinata (ad esempio, pubblicazione online sul blog dell’Ente).

SI DEVE

Nel caso di foto che ritraggono minori (si pensi ad esempio alla pubblicazione sul sito di una scuola delle foto di una recita) è sempre necessaria l’autorizzazione scritta da parte di un adulto che abbia il diritto a concederla (ad esempio un genitore o un tutore).

User research¶

La User Research (Ricerca sull’Utente) pone le basi fondanti per la progettazione di un servizio web che si focalizzi sull’utente Cittadino e i suoi bisogni. Il primo capitolo della guida è dedicato all’usabilità, la cui importanza e centralità nel design di un servizio web sta nel suo essere in grado di influenzare in maniera determinante l’effettiva resa del servizio. A seguire il capitolo dedicato alla ricerche qualitative fa una rassegna delle tecniche e degli strumenti che, in diversi step della progettazione, risultano utili per un focus qualitativo sulle motivazioni sottese ai bisogni dell’utente. Chiude la sezione il capitolo sulla web analytics, attività che - grazie all’analisi puntuale dei dati di performance di un ambiente web - permette di comprendere se e come un servizio digitale risponde in maniera adeguata ai bisogni degli utenti e ne coadiuva l’avvio di azioni migliorative.

Usabilità¶

Definizione¶

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

User-centered design¶

Lo user centered design è un insieme di tecniche usate per far emergere i bisogni effettivi delle persone per cui si sta progettando un contenuto, coinvolgendo le persone stesse nel processo di progettazione. Per «persone» si intendono tutti i portatori di interesse (stakeholder) del progetto. Nel caso della pubblica amministrazione:

Cittadini
Aziende
Dipendenti di altre amministrazioni o istituzioni
Committenti

I vantaggi dell’usabilità¶

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

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

Inoltre l’usabilità consente alle PA di:

evitare la produzione di servizi inadeguati
incentivare i cittadini a ritornare sul sito
aumentare la fiducia dei cittadini nei confronti dell’amministrazione

SI DOVREBBE

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

Criteri di valutazione¶

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

Percezione: Le informazioni e i comandi necessari per l’esecuzione delle attività devono essere sempre disponibili e percettibili.
Comprensibilità: Le informazioni e i comandi necessari per l’esecuzione delle attività devono essere facili da capire e da usare.
Operabilità: Le informazioni e i comandi devono consentire una scelta immediata delle azioni necessarie al raggiungimento dell’obiettivo.
Coerenza: I simboli, i messaggi e le azioni devono avere lo stesso significato in tutto il sito.
Tutela della salute: Il sito deve possedere caratteristiche idonee a salvaguardare il benessere psicofisico dell’utente.
Sicurezza: Il sito deve possedere caratteristiche idonee a fornire transazioni e dati affidabili, gestiti con adeguati livelli di sicurezza.
Trasparenza: Il sito deve comunicare all’utente lo stato, gli effetti delle azioni compiute e le informazioni necessarie per la corretta valutazione delle modifiche effettuate sul sito stesso.
Facilità di apprendimento: Il sito deve possedere caratteristiche di utilizzo di facile e rapido apprendimento.
Aiuto e documentazione: Le funzionalità di aiuto, quali le guide in linea e la documentazione sul funzionamento del sito devono essere di facile reperimento e collegate alle azioni svolte dall’utente.
Tolleranza agli errori: Il sito deve essere configurato in modo da prevenire gli errori; ove questi, comunque, si manifestino, occorre segnalarli chiaramente e indicare le azioni necessarie per porvi rimedio.
Gradevolezza: Il sito deve possedere caratteristiche idonee a favorire e a mantenere l’interesse dell’utente.
Flessibilità: Il sito deve tener conto delle preferenze individuali e dei contesti.

Per approfondimenti¶

Allegato B del Decreto Ministeriale 8 luglio 2005.

Usabilità come costrutto misurabile¶

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

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

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

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

Protocollo per la realizzazione di test di usabilità¶

Per verificare rapidamente l’usabilità di un sito web si possono utilizzare differenti tecniche, fra le quali quelle suggerite dal Protocollo eGLU per la realizzazione di test di usabilità semplificati

Ricerche qualitative¶

La User Research (Ricerca sugli Utenti) nell’ambito della progettazione dei prodotti digitali, coerentemente all’approccio Human Centered, ha come fine ultimo quello di studiare gli utenti per progettare servizi quanto più rispondenti alle loro effettive esigenze. Questo obiettivo può essere realizzato attraverso approcci di ricerca di tipo qualitativo e/o quantitativo, i quali si differenziano per le caratteristiche del dato che si può ricavare e per l’analisi che se ne può fare. La ricerca qualitativa, generalmente, ha come obiettivo quello di (cercare di) comprendere le motivazioni sottese ad attitudini, comportamenti ed atteggiamenti dell’utente, studiandone le attività, i contesti d’uso, le necessità ma anche gli errori e le frustrazioni. Le principali caratteristiche della ricerca qualitativa:

si fonda su campioni non numerosi;
genera dati qualitativi e non validi a fini statistici;
l’analisi dei dati non è statistico/matematico ma legata alla formazione, alla metodologia e, non da ultimo, alla sensibilità del ricercatore.

Nella progettazione di servizi digitali la ricerca qualitativa può essere utilizzata in diverse fasi del progetto: dalla fase di osservazione ed ideazione, a quella di progettazione, finanche a quella di validazione. In questa guida affronteremo le tecniche e gli strumenti della ricerca di tipo qualitativo, quali i metodi che si basano sull’osservazione diretta sul campo e i metodi che prevedono un coinvolgimento degli utenti. Gli strumenti e le tecniche sono molte e differenti fra loro per il tipo di dato che permettono di raccogliere; per ogni progetto sarà, dunque, necessaria una valutazione ad hoc per definire gli strumenti e le tecniche più adeguate e le fasi in cui si vadano ad utilizzare.

Nel 2017 pubblicheremo i capitoli di questa sezione dedicati a: interviste, focus group, osservazioni sul campo (field study), design partecipativo e test di usabilità.

Web analytics¶

Premessa¶

Questa guida ha l’obiettivo di aiutare chi si occupa a vario titolo del sito web di una pubblica amministrazione a:

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

Introduzione¶

L’analisi delle performance di un ambiente web è un’attività cruciale per comprendere in che maniera un sito (o un servizio digitale di altro tipo) rispondono in maniera adeguata ai bisogni informativi e/o di servizio degli utenti.

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

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

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

Metriche e Dimensioni¶

I dati generati dalle piattaforme di web analytics sono il frutto di combinazioni eterogenee di metriche (dati quantitativi) e dimensioni (attributi qualitativi dei dati). Di seguito una panoramica esplicativa delle principali metriche e dimensioni utilizzate nella web analysis. Si precisa che la nomenclatura di metriche e dimensioni può variare a seconda della piattaforma di analytics utilizzata.

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)

Analizzare le ricerche degli utenti¶

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

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

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

La reportistica¶

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

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

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

Gli strumenti (Piwik e Google Analytics)¶

Di seguito proponiamo una serie di link di approfondimento per comprendere come installare/configurare nella maniera corretta due fra le principali piattaforme di web analytics gratuite, Piwik (piattaforma open source) e Google Analytics (piattaforma commerciale).

Piwik¶

Google Analytics¶

User interface¶

User interface, interfaccia utente, è tutto quello che fa da ponte fra i servizi digitali ed i loro destinatari. Sono i cosiddetti Touch Point di un servizio digitale. Non pensiamo all’interfaccia solo come ad una serie di elementi grafici e visuali, ma come a tutto quello con cui l’utente entra in relazione, nei vari contesti, per usare un servizio o un prodotto digitale.

In questa fase delle linee guida ci concentriamo sugli elementi più classici dell’interfaccia, definendo alcuni principi di visual design, alcuni elementi di style, degli esempi di layout o presentazione dei contenuti e alcun pattern (componenti), i mattoni veri e propri dell’interfaccia.

Presto alcune di queste sezioni verranno ampliate ed arricchite.

Abbiamo proposto alcuni strumenti operativi (bricks) e di checklist rapide per completare le linee guida e per fornire dei suggerimenti operativi. Inoltre trovate un UI-kit di base e un Icon Kit per iniziare una prototipazione di base. Le trovate su https://designers.italia.it/user-interface/

Per chi vuole invece iniziare a scrivere codice, la reference implementation delle linee guida o cosiddetto web-toolkit, è qui https://italia.github.io/ita-web-toolkit/

Uno spazio di discussione dedicato alla user interface e aperto al contributo di tutti è stato predisposto su https://forum.italia.it/c/design/user-interface

Principi¶

Mobile first¶

L’approccio mobile first consiste nel valutare in prima istanza la resa sui dispositivi mobili, per poi arricchire di elementi e funzionalità la composizione della pagina mano a mano che la viewport aumenta.

Responsive Web Design¶

SI DEVE

Il sito web deve essere progettato e sviluppato con un approccio responsive con l’obiettivo di rendere disponibile un’ottimale esperienza di visione all’utente, facilità di lettura e navigazione con minime necessità di ridimensionare, spostare o scorrere, su qualunque dispositivo indipendentemente dalla risoluzione e dalla dimensione dello schermo.

Nell’approccio mobile first si parte dall’essenziale.

Obbligarsi a progettare 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.

Man mano che lo schermo si fa più grande e il collegamento più veloce, i contenuti vengono arricchiti. Un utente seduto alla scrivania con un computer ha probabilmente più tempo e più possibilità di approfondire e navigare. Un utente collegato da smartphone ha forse l’urgenza di cercare quel contenuto dal luogo in cui si trova, senza aspettare di tornare a casa e arrivando all’essenziale il più velocemente possibile.

I contenuti e le funzionalità di un sito o un servizio devono poter essere fruibili su tutti i dispositivi più utilizzati dagli utenti.

SI DOVREBBE

Analizzare regolarmente l’utilizzo dei dispositivi e delle diverse risoluzioni che gli utenti adoperano per accedere al sito.

È necessario assicurare la compatibilità con almeno i seguenti browser:

Internet Explorer 10+
Edge 12+
Safari 8+
Google Chrome (ultime versioni)
Opera (ultime versioni)
Mozilla Firefox (ultime versioni)
IE Mobile 10+
iOS Safari 8+ (versione del sistema operativo)
Android Browser 4+ (versione del sistema operativo)

La lista comprende più del 95% delle versioni utilizzate in Italia (e nel mondo) secondo i dati raccolti da StatCounter

Non è necessario che l’aspetto del sito sia identico sui diversi dispositivi; va tuttavia garantita un’esperienza utente equivalente.

Garantire la compatibilità¶

Nel web design si sono adottati spesso gli approcci graceful degradation (decadimento parziale) o progressive enhancement (miglioramento progressivo). Si tratta di due risposte diverse alla stessa esigenza: rendere il contenuto accessibile su dispositivi diversi. Nel primo approccio ci si fa carico di verificare che il progetto, inizialmente pensato per i dispositivi più completi, resti navigabile anche man mano che si usano tecnologie più obsolete o meno interattive. Nel secondo, si parte da un nucleo solido e irrinunciabile di contenuti che vengono arricchiti via via che il dispositivo diventa più potente e all’avanguardia.

Tecnicamente il sito web può rilevare quale dispositivo lo sta navigando. È possibile capire: - lo user agent, ovvero quale browser e quale sistema operativo è in collegamento - la risoluzione dello schermo, ovvero quanti pixel abbiamo a disposizione - il tipo di media, ovvero se stiamo andando in stampa o su schermo

Tecniche apposite come l’uso di media queries permettono di inserire istruzioni nei CSS affinché la presentazione dei contenuti sia calibrata sull’attuale dimensione della viewport.

Validazione dei fogli di stile CSS¶

Per compensare le incompatibilità dei diversi browser è spesso necessario introdurre nei fogli di stile (CSS) codice non conforme; di conseguenza i risutati del test di validazione del W3C riportano degli errori.

La validazione è importante laddove tali errori pregiudicano una funzionalità; oggi i browser sono più «resilienti» e spesso non si verifica il caso.

Non è necessario pertanto che un CSS rientri perfettamente negli standard.

La validazione del CSS non è inoltre sufficiente a garantire l”accessibilità.

Stile¶

Tipografia¶

Web font¶

Le Web font sono famiglie di caratteri tipografici la cui licenza d’uso permette il download remoto per la loro visualizzazione in pagine web. Introdotte dalla versione CSS2 con la dichiarazione @font-face, le Web font sono oggi pienamente compatibili con la maggioranza dei browser (IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+, Chrome 4.0+) e costituiscono la soluzione più efficace per una coerente composizione tipografica. Google Fonts è una piattaforma di distribuzione gratuita di Web font.

Titillium Web¶

Il carattere tipografico istituzionale è la famiglia di font Titillium Web, realizzato come progetto didattico all’interno all’Accademia di Belle Arti di Urbino e distribuito con licenza Open Font da Google Fonts. La famiglia di caratteri Titillium Web è composta da numerose font di diversi pesi tipografici (dall’Extra-Light all’Ultra-Bold) garantendo così un’estrema flessibilità di utilizzo nelle composizioni dei testi.

Specimen della famiglia Titillium Web¶

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo extra light

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo extra light italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo light

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo light italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo normal

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo normal italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo semi bold

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo semi bold italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo bold

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo bold italic

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo ultra-bold

SI PUÒ

Per la realizzazione dei siti è consigliato l’utilizzo del carattere Titillium Web, ma qualunque altra Web font che garantisca la leggibilità e un’analoga ampiezza di pesi tipografici può essere usata.

Dimensioni e interlinea del testo¶

SI DEVE

Un paragrafo di testo non deve mai essere composto in una dimensione inferiore a 12px. La dimensione standard del paragrafo di testo è prevista in 18px. Un paragrafo di testo deve essere composto sempre nel peso Regular, mai in Light o Bold. L’interlinea avrà generalmente una dimensione pari a circa il 150% della dimensione del corpo del carattere (per esempio un testo in corpo 18px avrà un’interlinea di 27px).

Allineamento¶

SI DOVREBBE

Un paragrafo di testo deve essere preferibilmente composto con allineamento a sinistra. Sono generalmente sconsigliati gli allineamenti centrati (a epigrafe) e a destra. L’allineamento giustificato e senza sillabazione è invece sempre da evitare per l’incongrua spaziatura delle parole e la minore leggibilità che comporta.

Giustezza¶

SI DEVE

Ogni riga di testo non deve mai superare la lunghezza massima di 75 caratteri.

Markup semantico¶

SI DEVE

L’uso dei tag semantici consente di venire incontro ai requisiti di accessibilità, permettendo la corretta interpretazione del testo da parte dei device di ausilio alla lettura.

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

Esempio di tabella con CSS di default¶

mostra il codice

Esempi di buona impaginazione delle tabelle¶

Impaginazione corretta delle tabelle

Esempi di cattiva impaginazione delle tabelle¶

Impaginazione errata delle tabelle

Formattazioni consigliate¶

H1 Titolo

Titolo pagina: Titillium bold - corpo 54px, interlinea 1.2

H2 Titolo

Titolo sezione: Titillium bold - corpo 40px, interlinea 1.2

H3 Titolo

Titolo articolo: Titillium bold - corpo 32px, interlinea 1.2

H4 Titolo

Titolo paragrafo: Titillium bold - corpo 23px, interlinea 1.2

H5 Titolo

Testo grande: Titillium normal - corpo 21px, interlinea 1.2

H6 Titolo

Titoletto: Titillium bold - corpo 18px, interlinea 1.55

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo che pur vivono. Non ne sarò l'artefice impaziente

Testo standard: Titillium normal - corpo 18px, interlinea 1.55

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo. Non ne sarò l'artefice impaziente

citazione: Titillium italic - corpo 18px, interlinea 1.55

Ecco un bianco scenario per tratteggiarvi l'accompagnamento degli oggetti di sfondo che pur vivono. Non ne sarò l'artefice impaziente

testo minimo: Titillium normal - corpo 15px, interlinea 1.55

Colore del testo¶

Generalmente il colore del testo deve essere nero (#1C2024) o grigio (#5A6772) su fondo bianco (#FFFFFF). Viceversa per le composizioni in negativo. Dove necessario possono essere usati colori diversi dal nero e dal grigio purché sia garantito un rapporto di contrasto minimo tra testo e sfondo di 4,5:1 (AA), come stabilito dalle specifiche di accessibilità. La verifica del rapporto di contrasto può essere facilmente effettuata attraverso molti tool online.

esempio di strumento online per la verifica del contrasto colori

SI DOVREBBE

Per una maggiore coerenza della user experience si suggerisce, per quanto riguarda i testi, l’adozione del seguente sistema cromatico.

Colore testo principale #1c2024

Colore testo secondario #5a6772

Colore link #0066cc

Colore link hover #003366

Colore link visitato #551a8b

Colore link negativo #65dcdf

Colore link hover negativo #00aeb3

Colore link visitato negativo #551a8b

Colore testo evidenziato #b2ebed

Colore sfondo 1 #f0f0f0

Colore alert #b50000

Legature e crenatura¶

La leggibilità del testo, nelle versioni dei browser più recenti, può essere migliorata con l’utilizzo della dichiarazione text-rendering: optimizeLegibility che attiva il controllo della crenatura del testo e la sostituzione automatica dei glifi delle legature. Attualmente la dichiarazione è riconosciuta in Safari 5 e Chrome. Firefox applica automaticamente la dichiarazione per i testi composti in corpo superiore a 20 px. Utilizzando una font OpenType possono esserne sfruttate le opzioni per le legature comuni e discrezionali con la dichiarazione font-featuresettings: “liga” 1, “dlig” 1.

Colori¶

Palette colori¶

Qualunque scala cromatica può essere scelta per lo sviluppo del sito con la sola esclusione dei colori istituzionali delle pubbliche amministrazioni centrali (blu #0066CC). La scala cromatica deve comunque garantire il rapporto di contrasto minimo tra testo e sfondo di 4,5:1, come raccomandato dalle specifiche di accessibilità WCAG 2.0 AA.

Il colore non deve mai essere significante in sé e non deve essere la modalità con cui si trasmettono contenuti: ipovedenti, daltonici e non vedenti non sarebbero in grado di identificarli correttamente.

Le pubbliche amministrazioni centrali (PAC) sono tenute a seguire le indicazioni sulla palette riservata alle PAC.

Le pubbliche amministrazioni locali e i siti tematici possono utilizzare un qualsiasi colore base, attenendosi alle seguenti indicazioni su come costruire una palette adeguata.

Definire una palette principale¶

SI DOVREBBE

Si consiglia l’utilizzo di una palette di colori limitata. Generalmente una palette di 5 tonalità (Hue) è sufficiente per qualunque necessità. Limitare le tonalità aiuta a focalizzare l’attenzione dell’utente e garantisce una migliore percezione dell’ordine gerarchico dei contenuti.

Una buona tecnica per la creazione di palette cromatiche armoniche può essere quella di scegliere una tonalità principale e selezionare le altre fra le tonalità analoghe, cioè tra i colori adiacenti nella ruota cromatica. Variando luminosità e saturazione delle singole tonalità è poi possibile estendere ciascun colore secondo uno schema monocromatico. Tutti i software di elaborazione grafica permettono con facilità di gestire lo spazio cromatico Hue, Saturation, Brightness (HSB) per definire la propria palette colore.

Definiamo le tonalità che costituiscono le principali componenti cromatiche; in questo caso due colori analoghi e uno grigio.

Blu notte #857EC4

Lilla #BD8AE5

Grigio #5A6772

Creare le gradazioni di colore¶

Sulla scorta delle tonalità prescelte procediamo a costruire, per ognuna di esse, una scala di gradazioni formata da 5 colori più chiari e 5 più scuri. Per ottenere una scala di gradazioni coerente si può applicare il seguente meccanismo di calcolo all’interno di uno spazio cromatico HSB:

a partire dal colore base, aggiungere, a ogni passaggio verso l’alto, il 4% di Luminosità (B) e sottrarre il 15% di Saturazione (S)
a partire dal colore base, sottrarre, a ogni passaggio verso il basso, il 10% di Luminosità (B)

Pur funzionando per la maggior parte delle tonalità intermedie, le percentuali di variazione sopra riportate potrebbero essere suscettibili di modifiche nel caso di colori particolarmente chiari o scuri. Si otterrà così una scala di gradazioni formata da 11 colori (il colore base più 5 gradazioni più chiare e 5 gradazioni più scure). Denominando con il valore 50 il colore base sarà possibile definire una classificazione univoca delle gradazioni, nella scala che va da 5 a 95, utile per indicare una specifica gradazione indipendentemente dalla tonalità cui è applicata.

Sarà utile a questo punto testare il contrasto del colore base e delle relative gradazioni quando applicate al testo per verificarne l’accessibilità eventualmente tramite uno strumento online per la verifica del contrasto colori.

Nell’esempio sopra riportato le gradazioni con il testo in nero possono essere utilizzate come sfondo, quelle con il testo in bianco possono invece essere usate come colore del testo, rispettando i parametri di accessibilità.

Esempi di contrasto¶

È corretto e accessibile¶

Testo in 90-blu notte su bianco

Nero su 30-blu notte

Bianco su 90-blu notte

Non è corretto e non è accessibile¶

Testo in 10-blu notte su bianco

Bianco su 10-blu notte

Nero su 90-blu notte

Palette per pubbliche amministrazioni centrali¶

SI DEVE

Il colore istituzionale è il blu #0066CC.

italia.it

#0066CC

Palette estesa delle pubbliche amministrazioni centrali¶

All’interno dei siti istituzionali delle pubbliche amministrazioni centrali sono utilizzate le seguenti undici gradazioni del colore principale Blu.

05 - Blu #d1e7ff

10 - Blu #8ebeed

20 - Blu #66a5e3

30 - Blu #428fdb

40 - Blu #2079d4

50 - Blu #0066cc

60 - Blu #0059b3

70 - Blu #004d99

80 - Blu #004080

90 - Blu #003366

95 - Blu #00264d

Sono inoltre utilizzate le seguenti tre tonalità di grigio per il testo e i fondini.

Grigio scuro #1c2024

Grigio medio #5a6772

Grigio chiaro #f5f5f0

I bottoni sono realizzati utilizzando tre gradazioni di ottanio.

Ottanio scuro Bottone Focus #004a4d

Ottanio medio Bottone #00C5CA

Ottanio chiaro Bottone Hover #00c5ca

Iconografia¶

SI DEVE

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

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 incluso nel web toolkit delle Linee Guida al quale è possibile contribuire proponendo integrazioni o modifiche.

SI DOVREBBE

È opportuno utilizzare solo icone e immagini che siano realmente necessari alla comprensione delle informazioni da parte dell’utente, evitare quindi elementi decorativi non essenziali.

Crediti

Il testo utilizzato per le prove di composizione è tratto dalla poesia La città nuova di Alda Merini

Ecco un bianco scenario
per tratteggiarvi l’accompagnamento
degli oggetti di sfondo che pur vivono.
Non ne sarò l’artefice impaziente.
Berrò alle coppe della nostalgia,
avrò preteso d’ozio nelle lacrime…
perché non mi ribello alla natura:
la mia lentezza li esaspera…
La mia lentezza? No, la mia fiducia.
Per adesso è deserto.
Il mondo può rifarsi senza me,
E intanto gli altri mi denigreranno

28 dicembre 1948 - La Presenza di Orfeo

Layout¶

SI DOVREBBE

Utilizzare un layout essenziale.

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 touchscreen, 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 tutti e solo quelli dove sussiste un’immediata correlazione semantica con il contenuto principale:

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

SI PUÒ

Elenchi di contenuti omogenei (ad esempio: anteprime di notizie o eventi) possono essere presentati tramite card o liste posizionate in una griglia responsive.

L’utilizzo di card favorisce la consultazione dei contenuti sugli schermi più piccoli.

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

Gerarchia dei contenuti¶

SI DEVE

Per una corretta definizione della struttura gerarchica dei contenuti, la suddivisione in parti deve essere espressa attraverso l’uso dei tag semantici disponibili in HTML5, quali <article>, <aside>, <figcaption>, <header>, <footer>, ecc., al posto del generico divisore <div>.

Griglie¶

All’interno dello spazio a disposizione l’organizzazione del contenuto deve essere strutturata seguendo un sistema di griglie responsive 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/o immagini) separate da spazi intercolonna e contornate dai margini della pagina.

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 ridisposizione dei contenuti,a seconda delle dimensione dello schermo, garantisce che i testi siano leggibili anche sugli schermi più piccoli e l’interazione utente (es. form, controlli dinamici) rimanga agevole.

Impostazioni della griglia di costruzione consigliata¶

Larghezza massima del contenitore: 1440 px
Spazio intercolonna (gutter): 16 px a tutte le risoluzioni.

Breakpoint	Padding laterale
Smartphone (< 768 px)	16 px
Tablet (< 992 px)	16 px
Desktop (< 1366 px)	24 px
Desktop (< 1366 px)	24 px

Impostazione della home page¶

SI DOVREBBE

Il corpo della home page dovrebbe privilegiare una struttura modulare orizzontale con sezioni che comprendono contenuti omogenei.

Tale struttura

costituisce una guida visuale per l’utente messo in grado di riconoscere e distinguere agevolmente le diverse sezioni autonome e ben identificate
non presenta problematiche legate alla riorganizzazione gerarchica dei contenuti su mobile
favorisce la flessibilità poiché, all’occorrenza, i singoli blocchi possono essere nascosti o spostati senza impatti sull’armonia generale della pagina
costringe a un’analisi approfondita riguardo i contenuti da considerare prioritari, scoraggiando quindi l’affollamento di informazioni non essenziali

Le sezioni della home page¶

devono avere un titolo che le identifica in modo chiaro (es. servizi, notizie, eventi, …)
possono esser distinte tramite colori di sfondo differenti (appartenenti a una palette coerente) eventualmente alternati
qualora vi fossero ulteriori contenuti da mostrare, deve esser presente un link collegato alla pagina contenente l’elenco completo

Componenti¶

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

mostra il codice

Form¶

SI DEVE

Nei form 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. Per essere sempre leggibile, l’etichetta deve essere posizionata esternamente al campo. Deve essere consentito inoltre lo spostamento da un campo all’altro tramite il tasto Tab.

Esempio di stile per form¶

mostra il codice

Form errore¶

SI DEVE

In caso di errori o di mancata compilazione dei campi di un form si dovrà sempre evidenziare in maniera immediatamente percepibile quale sia il campo, o i campi, che non soddisfano le richieste, aggiungendo l’indicazione dell’azione da compiere per il corretto completamento.

mostra il codice

Alert¶

Per i messaggi di «allerta» contestuali alla compilazione (messaggi di errore o di successo) è importante evitare di veicolare l’informazione unicamente tramite l’utilizzo del colore: l’esito dell’operazione va chiarito in maniera evidente nel testo e, possibilmente, tramite un’icona esplicativa.

Carousel¶

SI DOVREBBE

Evitare l’utilizzo di carousel (slider) automatici.

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

Lo scorrimento automatico dei contenuti è generalmente sconsigliato poiché, di fatto, riduce la visibilità delle informazioni. Inoltre può esser 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.

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 esser 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 (ad esempio, una galleria di immagini) in modo che siano tutti visibili immediatamente o tramite scorrimento manuale non automatico.

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.

Contenuti¶

SI DEVE

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

SI PUÒ

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

campo di ricerca
accesso diretto ai servizi (al form di login)
link ai social network
selezione lingue

Componenti¶

La struttura della testata è suddivisa in 3 aree funzionali.

Struttura header

1. Area appartenenza¶

Contiene l’indicazione dell’amministrazione di appartenenza e, se necessario, l’accesso ai servizi. Il colore consigliato per la barra superiore è #303030.

Testo: bold-600 (16px su desktop) in colore bianco.

2. Area navigazione e intestazione¶

Contiene l’accesso al menu di navigazione, lo stemma e la denominazione in formato testuale dell’amministrazione / ente; eventualmente: il campo di ricerca e le selezioni dei social network e delle lingue. L’area di navigazione può essere estesa dalla presenza del menu orizzontale.

Testo del titolo: bold-700 (32px su desktop).

SI PUÒ

Il colore di fondo dell’area navigazione e intestazione è personalizzabile (tenendo presente i requisiti di accessibilità nell’utilizzo dei colori).

SI DEVE

L’icona burger, se presente nella versione desktop, deve essere accompagnata dall’etichetta «MENU».

Icona burger

SI DOVREBBE

Lo stemma dovrebbe, preferibilmente, essere utilizzato nella versione al tratto, se presentato su sfondo diverso dal bianco.

Esempio di logo

SI DEVE

Le etichette per la selezione delle lingue seguono la definizione ISO-639-2 (3 lettere).

SI DEVE

Le icone per l’accesso alle pagine social sono posizionate a destra della testata, sopra il campo di ricerca. Quando il numero delle icone social supera le 3 è possibile aggiungere un’icona generica che dà accesso alle restanti.

3. Area personalizzata¶

Lo spazio a disposizione per la personalizzazione è a discrezione dell’amministrazione.

SI DOVREBBE

Per garantire una rapporto equilibrato fra le diverse aree funzionali della testata si consiglia di utilizzare per l’Area personalizzata altezze multiple dell’Area di appartenenza (di circa 3, 5 o 7 volte).

Esempio di header¶

L’allineamento dei componenti della testata è basato su una griglia a 12 colonne e sui conseguenti adattamenti nelle versioni responsive secondo quanto specificato nella sezione griglie.

visualizza l’header a tutte le risoluzioni

mostra il codice

Footer¶

Componenti¶

La struttura del footer è suddivisa in 2 aree funzionali.

Struttura footer

1. Barra di feedback¶

Contiene l’accesso a un form tramite il quale gli utenti possono inviare un feedback all’amministrazione.

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

Colori¶

Indipendentemente dalla tipologia di sito si consiglia di adottare le seguenti indicazioni per i colori del footer:

Colore di sfondo #30373d

Colore dei link #65dde0

Testo scuro #c6cace

Il testo normale e i titoli delle sezioni possono apparire in bianco (#ffffff).

Applicazioni¶

Esempio desktop 1440¶

Esempio desktop 1440

Esempio mobile 320¶

Esempio mobile 320