Docs Italia beta

Documenti pubblici, digitali.

Il sito web e i servizi digitali dei Comuni italiani

Documentazione tecnica e operativa per il modello di sito istituzionale dei Comuni e i flussi di servizi digitali per il cittadino, basati sul design system di Designers Italia.

Introduzione al modello comuni

Il modello di sito istituzionale per i Comuni italiani è il risultato di un processo di ricerca, progettazione e sviluppo iniziato nel 2018 dal team di Designers Italia, nell’ambito della collaborazione tra il Dipartimento per la trasformazione digitale (DTD) e l’Agenzia per l’italia Digitale (AgID). Nel corso degli ultimi anni, il modello è stato aggiornato e ampliato in continuità con l’evoluzione normativa e gli obiettivi del Decennio digitale europeo.

La progettazione, ispirata ai principi dell”user centred design, ha da subito tenuto strettamente conto dei bisogni degli utenti: i cittadini nella loro accezione più ampia. Il modello è oggi a disposizione di tutte le Amministrazioni comunali che intendono migliorare l’esperienza dei servizi pubblici digitali per il cittadino.

Il modello permette a tutti i Comuni di soddisfare i requisiti previsti dall’Investimento 1.4.1 Esperienza del cittadino nei servizi pubblici digitali per l’erogazione delle risorse del Piano nazionale di ripresa e resilienza (PNRR), disponibili sulla piattaforma PA digitale 2026.

Ricerca, aggiornamento ed evoluzione del modello

Grazie ad analisi euristiche, test di usabilità, interviste e momenti di confronto con i protagonisti della trasformazione digitale sul territorio (Comuni, Consorzi, in-house e fornitori), il modello di sito istituzionale per i Comuni italiani è stato aggiornato in termini di accessibilità, usabilità e conformità alle normative vigenti in materia di design e sviluppo di siti e servizi della Pubblica Amministrazione.

In particolare, gli ultimi interventi hanno riguardato:

  • l’architettura dell’informazione, con l’aggiornamento delle tipologie di contenuti e delle tassonomie;
  • la composizione delle interfacce, con l’aggiornamento all’versione 2.0 di Boostrap Italia;
  • l’introduzione di nuove funzionalità, come la prenotazione di appuntamenti;
  • l’ampliamento dell’area personale a disposizione del cittadino;
  • la creazione di 5 tipologie di flusso di interfaccia per la realizzazione di servizi digitali per il cittadino.

Consulta il report completo della ricerca alla base della progettazione del modello e della sua evoluzione

Principi di progettazione

Oltre alle metodologie di progettazione dell”user centred design, l’aggiornamento del modello ha preso in considerazione le indicazioni dell’eGovernment Benchmark method paper 2020-2023, ovvero lo standard europeo di comparazione della qualità dei servizi digitali erogati dalla pubbliche amministrazioni.

In particolare, gli indicatori principali (top-level benchmarks) di riferimento sono stati:

  • User-centricity (Centralità dell’utente), per rendere i servizi mobile-friendly e fruibili, anche in termini di assistenza online e possibilità di lasciare feedback;
  • Transparency (Trasparenza), in modo da fornire agli utenti indicazioni chiare sulle responsabilità delle amministrazioni, i processi di erogazione dei servizi e il trattamento dei dati personali.

Il modello di sito comunale

Il modello permette di creare siti web comunali che rispondono ai bisogni degli utenti, con interfacce e strutture informative semplici da usare e navigare. Lo scopo è di fornire ai cittadini un chiaro punto di riferimento per trovare con facilità tutte le informazioni di cui hanno bisogno.

L’adozione del modello di sito permette di aderire più facilmente alle migliori pratiche di progettazione, fornendo allo stesso tempo ai cittadini un’esperienza coerente tra le varie amministrazioni.

Il modello comprende l’architettura dell’informazione, i template HTML e i temi CMS, corredati da una serie di risorse e guide pratiche a supporto.

Architettura dell’informazione

L’architettura dell’informazione definisce la struttura di un sito, il modo in cui le informazioni sono organizzate, i metodi di navigazione e la terminologia usata entro il sistema, al fine di facilitare l’accesso intuitivo ai contenuti e il completamento di compiti da parte degli utenti. L’architettura rappresenta la guida per la realizzazione delle strutture di front-end e di back-end del sito stesso.

Il documento di architettura dell’informazione presenta:

  • le tipologie di contenuto e le loro proprietà, che servono a creare le varie pagine del sito;
  • le tassonomie e i vocabolari controllati, utili a classificare i vari contenuti del sito per renderli fruibili tramite motore di ricerca interno e a definire la struttura di secondo e terzo livello del sito;
  • la coreografia del sito, ovvero la struttura (alberatura), il sistema di navigazione e i tipi di pagina.

L’architettura del sito di un Comune è organizzata in alcune sezioni principali, corrispondenti al primo livello di navigazione:

  • Amministrazione, contiene tutti i contenuti riguardanti la struttura politica e amministrativa del comune, inclusi i documenti pubblici;
  • Novità, raggruppa notizie e comunicati stampa;
  • Servizi, presenta tutti i servizi che eroga il comune, sia quelli digitali, sia quelli fisici;
  • Vivere il comune, presenta i luoghi d’interesse del territorio comunale e gli eventi;
  • Area personale, dove gli utenti possono trovare i documenti personali, lo stato d’avanzamento delle loro richieste e i messaggi o notifiche inviati dall’amministrazione comunale.

Gli ulteriori livelli di navigazione sono specificati nella sezione Navigazione e alberatura.

Ontologia e tipologie di contenuti

L’ontologia del sito di un Comune quindi definisce gli oggetti (concreti o astratti), gli agenti (persone e ruoli), i contesti (i luoghi) ed gli eventi (esperienze, attività, servizi) utili alla rappresentazione del Comune su un sito web e attraverso cui gli utenti (i cittadini) interagiscono con il Comune stesso. Tutti questi elementi sono suddivisi in Tipologie di contenuto che presentano vari attributi (proprietà), che possono essere combinati per creare le pagine del sito.

La definizione di un’ontologia è utile non solo per capire l’ordine e la disposizione dei contenuti sulle varie pagine, ma anche per promuovere l’interoperabilità dei dati e il loro riuso all’interno dello stesso dominio informativo (il sito comunale, in questo caso) o in domini informativi diversi.

Le tipologie di contenuto del sito di un Comune sono:

  • Punto di contatto;
  • Unità organizzativa;
  • Persona pubblica;
  • Incarico;
  • Luogo;
  • Notizia;
  • Evento;
  • Servizio;
  • Documento pubblico;
  • Dataset;
  • Pratica;
  • Pagamento;
  • Documento privato;
  • Messaggio;
  • Appuntamento.

La lista delle Tipologie di contenuto è riportata anche nel foglio Ontologia, Tassonomie e Coreografia del documento di architettura, con i link alle rispettive schede di dettaglio. La matrice «Corrispondenza Tipologie di contenuto/Tipologie di contenuto» mostra come queste sono combinabili tra di loro per formare le pagine del sito del Comune.

Le schede di dettaglio delle tipologie di contenuto presentano la lista di attributi che vanno a formare l’effettivo contenuto. Gli attributi sono pezzi di informazione, rappresentabili principalmente valori testuali, booleani (vero o falso), numerici, temporali (data e ora) o categoriali, ma anche allegati digitali (file di documenti, immagini, video, audio).

Importante

Il documento di architettura dell’informazione indica, per ogni tipologia di contenuto, gli attributi obbligatori da includere a livello informativo e il loro ordine di presentazione.

Sulle relative schede sono anche presenti indicazioni sulle tassonomie di riferimento, le relazioni con altre tipologie di contenuti e la cardinalità, ovvero il possibile numero di occorrenze di un determinato attributo.

Tassonomie

Le tassonomie sono classificazioni gerarchiche di concetti, ovvero delle liste di nomenclature con cui si possono categorizzare i contenuti del sito. L’uso di tassonomie fornisce contesto ai contenuti e facilita la ricerca di contenuti correlati.

Le tassonomie del sito di un Comune sono:

  • la lista degli argomenti di un Comune;
  • Eventi della vita delle persone;
  • Eventi della vita delle imprese;
  • Tipi di unità organizzativa;
  • Tipi di incarico;
  • Tipi di notizia;
  • Tipi di luogo;
  • Tipi di evento;
  • Categorie di servizi;
  • Tipi di documento;
  • Tipi punto di contatto;
  • Documenti albo pretorio;
  • Temi di un dataset;
  • Frequenza di aggiornamento;
  • Stati di una pratica;
  • Licenze.

La lista delle tassonomie è riportata anche nel foglio Ontologia, Tassonomie e Coreografia del documento di architettura, con i link alle rispettive schede di dettaglio. La matrice Tipologie/Tassonomie indica le relazioni tra le Tipologie di contenuto e le tassonomie.

Come si può vedere sulla schede dettaglio nel documento di architettura, le tassonomie presentano vari livelli di gerarchia e granularità. Nel classificare i contenuti (luoghi, eventi, notizie, etc.) bisogna usare il maggior livello di dettaglio possibile. Ad esempio, la pagina informativa di un convegno userà la tassonomia «Tipi di evento», e in particolare la voce di terzo livello «Convegno» («Evento culturale» > «Conferenza e summit» > «Convegno»).

Nelle pagine indice della categoria superiore è possibile, anzi consigliato, creare una sezione «In evidenza» dove riportare le voci delle categorie o delle sottocategorie che si ritengono più importanti, o le più recenti. Questa soluzione è utile sia nelle circostanze in cui nella categoria vi siano molte voci, per mettere in primo piano quelle considerate appunto più importanti, sia quando vi siano numerose sottocategorie con poche voci, in modo da permettere alle persone di trovarle senza dover cercare categoria per categoria.

Il content management system dovrebbe nascondere le categorie (temporaneamente) vuote.

Tipi di pagine

Nel modello possiamo identificare i seguenti tipi di pagine:

  • pagine miste, tra cui l’homepage e le pagine di primo livello della navigazione, che hanno lo scopo di indirizzare gli utenti ai vari contenuti del sito o della sezione specifica;
  • pagine lista, che presentano una lista di contenuti simili o interrelati, come le pagine argomenti, novità e documenti.
  • pagine di dettaglio o pagine foglia, ovvero le pagine che presentano contenuti specifici (persone, luoghi, servizi e così via).

Nell’area riservata, l’area del sito a cui si può accedere attraverso l’autenticazione, sono previste:

  • l’homepage dell’area riservata;
  • le pagine lista dei messaggi, delle pratiche e dei pagamenti.

L’homepage

La homepage del sito di un Comune è composta da:

  • una notizia o evento in evidenza, in formato card grande, preferibilmente con immagine;
  • può avere una sezione di 3 notizie in evidenza, con il link «mostra tutte» che porta alla sezione del sito «Novità»;
  • può avere una sezione amministrazione, con un massimo di 3 card (ad esempio il sindaco, la giunta comunale, il consiglio comunale);
  • un calendario con un massimo di 4 eventi in evidenza, con il link «mostra tutti» che porta alla sezione del sito «Vivere il comune» > «Eventi»;
  • una sezione con 3 argomenti in evidenza (tratti dalla tassonomia argomenti) con il link «Mostra tutti» che porta alla sezione del sito «Argomenti»;
  • può avere una sezione «Gallerie», con un massimo di 3 eventi passati che abbiano una galleria di immagini o video;
  • può avere una sezione «Luoghi», con un massimo di 3 luoghi, con il link «mostra tutti» che porta alla sezione del sito «Vivere il comune» > «Luoghi»;
  • può avere una sezione con dei link a siti tematici esterni al sito del comune.

La homepage deve presentare anche dei link in chiaro alle domande frequenti, alla richiesta di assistenza, alla prenotazione appuntamento e alla segnalazione disservizio.

Pagine lista di primo livello

Le pagine relative alle sezioni di primo livello (Amministrazione, Novità, Servizi, Vivere il comune).

Servizi

La pagina lista «Servizi» è composta da:

  • motore di ricerca contestuale;
  • elenco dei servizi in evidenza;
  • elenco dei primi 5 servizi, in ordine alfabetico;
  • l’elenco delle categorie di servizi;

In caso di uso del motore di ricerca, i primi 5 servizi verranno sostituiti con i primi risultati del motore di ricerca, filtrati con un meccanismo di live search.

Amministrazione

Amministrazione è una sezione che contiene elementi di 3 tipologie di contenuto:

  • persone;
  • unità organizzative;
  • documenti e dati.

Ogni tipologia deve avere una propria sezione nella pagina. Ogni sezione potrà avere fino a 3 contenuti in evidenza (persone in evidenza, unità organizzative in evidenza, documenti e dati in evidenza) e l’elenco delle categorie non vuote della specifica tassonomia:

  • per le persone, la tassonomia «Tipi di incarico»: politici, amministrativi, altri incarichi;
  • per le unità organizzative la tassonomia «Tipi di unità organizzativa»: organi di governo, aree amministrative, uffici, enti e fondazioni;
  • per documenti e dati: Documenti albo pretorio, Modulistica, Documenti funzionamento interno, Normative, Accordi tra enti, Documenti attività politica, Rapporti tecnici, Istanze, Documenti di programmazione e rendicontazione, Dataset.

Vivere il comune

«Vivere il comune» è un ramo che contiene 2 tipologie di contenuto:

  • eventi;
  • luoghi.

Ogni tipologia deve avere una propria sezione nella pagina. Poiché questa pagina ha, principalmente, una funzione «vetrina». Ogni sezione (Eventi, Luoghi) deve avere 6 elementi in evidenza e un link che porta alle corrispondenti pagine di secondo livello (lista Eventi e lista Luoghi).

Novità

«Novità» è una sezione che contiene la tipologia di contenuto «Notizia». Queste possono essere notizie, avvisi e comunicati.

La pagina deve contenere una sezione «Notizie in evidenza» e una sezione con l’elenco delle notizie ordinate per data, con paginazione.

Pagine lista di secondo livello

Le pagine lista di secondo livello possono contenere categorie (ovvero link a pagine lista di livello successivo) o risorse (pagine foglia di una specifica tipologia di contenuto). Come raccomandazione, i rami dell’alberatura dovrebbero preferibilmente contenere o solo categorie di livello inferiore (rami inferiori) o solo contenuti (foglie).

Le pagine lista che contengono solo categorie sono strutturate con una sezione «{tipologia di contenuto} in evidenza» (ad esempio «Luoghi in evidenza») con fino ad un massimo di 3 elementi in evidenza e una sezione «Tutte le categorie» con l’elenco delle categorie, di norma in ordine alfabetico.

Le pagine lista che contengono solo risorse (foglie) sono strutturate con una sezione «{tipologia di contenuto} in evidenza» (ad esempio «Luoghi in evidenza») con fino ad un massimo di 3 elementi in evidenza e una sezione «Tutte i {tipologia di contenuto}» (ad esempio «Tutti i luoghi») con l’elenco paginato delle risorse, di norma in ordine alfabetico.

Le pagine lista che contengono sia categorie (rami inferiori) che risorse (foglie) possono avere una sezione «{tipologia di contenuto} in evidenza» (ad esempio «Luoghi in evidenza») con fino ad un massimo di 3 elementi in evidenza, una sezione «Tutti i {tipologia di contenuto}» (ad esempio «Tutti i luoghi») con l’elenco paginato delle risorse, di norma in ordine alfabetico, e una sezione «Tutte le categorie» con l’elenco delle categorie, di norma in ordine alfabetico.

Le pagine argomento

La struttura flessibile basata sulla lista degli argomenti di un Comune permette di superare la necessità di sviluppare e mantenere la maggior parte dei siti tematici che spesso proliferano a fianco del sito istituzionale creando problematiche di gestione, sviluppo e aggiornamento.

I contenuti già presenti nell’architettura del sito, infatti, possono essere taggati con un argomento in modo da generare una pagina tematica che li presenta. Ad esempio, se utilizziamo l’argomento “raccolta differenziata” avremo una pagina che presenta agli utenti tutti i contenuti relativi: servizi, documenti, notizie, uffici di riferimento. Per arricchire la pagina di ulteriori contenuti sarà sufficiente pubblicare nuovi contenuti usando le tipologie di contenuto già disponibili sul sito (ad esempio una notizia, un documento, un servizio).

La pagina può essere ulteriormente personalizzata anche nell’aspetto grafico con un’immagine di sfondo, un eventuale marchio e, se necessario, una serie di pagine in evidenza. Ciascuna delle pagine relative a un argomento è associata a un ufficio-area dell’Amministrazione comunale, punto di riferimento per la qualità e la correttezza delle informazioni offerte.

Un altro caso d’uso per un sito tematico è quello di dare voce agli uffici che compongono l’amministrazione. Gli argomenti offrono agli uffici la possibilità di gestire i propri contenuti e condividere le proprie iniziative.

Struttura delle pagine

Sebbene i componenti e i contenuti delle pagine siano diversi, la struttura principale è in buona parte comune. Tutte le pagine, infatti, sono formate da una intestazione (header), un’area principale (main) e da un’area piè di pagina (footer).

L”intestazione (header) è formata da tre componenti:

  • l’intestazione iniziale (slim header) che deve contenere a sinistra l’ente di appartenenza (per i comuni, la regione o provincia autonoma di appartenenza) e a destra il link di accesso all’area personale, con l’etichetta «Accedi all’area personale». Una volta fatto l’accesso, verrà presentato l’avatar e il nome e cognome della persona autenticata, con la possibilità di accedere al profilo.
  • l “intestazione principale (header centrale) deve contenere il nome dell’istituzione (nel caso dei comuni, «Comune di nomecomune») eventualmente preceduta dal logo/stemma, può contenere le icone con il collegamento ai social network dell’ente, e deve contenere il link al motore di ricerca;
  • l’intestazione di navigazione (header nav) deve contenere le voci di primo livello della navigazione e può contenere 4 ulteriori collegamenti (ad esempio, a pagine argomento). Il tema «Bootstrap Italia 2.0» definisce la visualizzazione e il comportamento dell’intestazione di navigazione sia in modalità desktop che mobile.

L”area principale (main) è composta da:

  • una intestazione di pagina (ad eccezione dell’homepage, che ne è priva) che presenta le breadcrumb di navigazione, il titolo della pagina e un eventuale sottotitolo o descrizione breve, e gli argomenti con cui è stato taggato il contenuto. Può inoltre contenere la funzione di condivisione della pagina ed un menu che abilita altre azioni (ad esempo «Scarica», «Stampa», «Invia»).
  • la sezione con i contenuti principali, navigabili da un indice di pagina posto sulla sinistra.

Il piè di pagina (footer) deve contenere obbligatoriamente i contenuti e i collegamenti previsti dalla normativa:

  • indirizzo, codice fiscale/partita IVA, contatti (compresa la posta elettronica certificata);
  • riferimenti all”`amministrazione trasparente;
  • l’informativa al trattamento dei dati personali;
  • eventuali note legali;
  • la dichiarazione di accessibilità;
  • la domande frequenti;
  • la prenotazione appuntamento;
  • la richiesta di assistenza;
  • la segnalazione disservizio.

Inoltre, per i Comuni che accedono ai finanziamenti previsti nell’ambito della misura 1.4.1 per l’aggiornamento del sito, nel caso di performance negativa del sito secondo quanto calcolato e verificato dalla piattaforma PAdigitale2026 tramite le librerie Lighthouse, il footer dovrà contenere:

  • un piano di miglioramento del sito che mostri, per ciascuna voce che impatta negativamente la performance, le azioni future di miglioramento della performance stessa e le relative tempistiche di realizzazione attese.

Scheda informativa di servizio al cittadino

La scheda servizio è il punto d’accesso dei cittadini a tutti i servizi comunali, digitali e non digitali.

La scheda servizio è stata progettata sulla base degli indicatori dell”eGovernment Benchmark 2020-2023, in modo da:

  • rendere fruibile la navigazione su dispositivi mobili;
  • presentare con chiarezza le informazioni relative ai servizi offerti, le responsabilità di chi deve garantire i servizi, e le modalità in cui vengono trattati i dati personali degli utenti (criterio della trasparenza);
  • garantire l’utilizzo di tecnologie abilitanti, come le identità digitali.

La scheda informativa di servizio vuole garantire buoni standard qualitativi soprattutto in merito al criterio della trasparenza, presentando in maniera chiara e comprensibile tutte le informazioni necessarie per poter portare a termine una richiesta da parte del cittadino.

Gli attributi delle schede informative di servizio sono presentati nel foglio Tipologia di contenuto: Servizio del documento di architettura dell’informazione. La struttura della scheda è finalizata a comunicare:

  • una breve descrizione del servizio;
  • a chi è rivolto, ovvero i destinatari;
  • come si fa, ovvero le istruzioni per accedere al servizio e portare a termine il processo;
  • cosa serve, ovvero i documenti e i requisiti necessari;
  • cosa si ottiene, in base al vocabolario controllato output dei servizi;
  • fasi e scadenze, ovvero quando il servizio è attivo, eventuali scadenze e le tempistiche;
  • i canali di accesso digitali (tramite autenticazione) e fisici (con la possibilità di prenotare un appuntamento) dove poter portare a termine il processo, inclusa l’eventuale possibilità di inviare domande e documentazione via posta ordinaria, posta elettronica, o posta elettronica certificata;
  • le unità organizzative responsabili del servizio;
  • descrizione di casi particolari e ulteriori informazioni utili.
  • gli allegati in formato elettronico, ovvero gli atti che normano il servizio e tutti i documenti di supporto.
  • le condizioni di servizio, come i termini entro cui si può modificare o disdire la richiesta.

Importante

La scheda Tipologia di contenuto: Servizio del documento di architettura dell’informazione indica gli attributi obbligatori da presentare sulla scheda informativa di servizio al cittadino.

Le tassonomie di riferimento per la scheda servizio sono:

  • la tassonomia «Categorie di servizio», che serve a classificare il servizio e a guidare nel posizionamento della pagina nella struttura del sito;
  • le tassonomie «Eventi della vita delle persone» ed «Eventi della vita delle imprese», le cui voci servono da tag (metadati) sulle le varie schede per influenzare i contenuti presentati nella sezione «Servizi correlati».
  • la lista degli «Argomenti di un comune», i cui tag appariranno nella parte superiore della scheda servizio per permettere la navigazione trasversale del sito e l’accesso a contenuti correlati.

Ogni scheda servizio dovrà, inoltre, presentare la funzionalità di valutazione della chiarezza informativa.

Dati strutturati e interoperabilità

Per migliorare ulteriormente l’esperienza digitale dei cittadini, è disponibile una lista di tag semantici con cui taggare i contenuti delle schede servizio. La risorsa di riferimento è Schema.org, un vocabolario di dati strutturati che consente ai motori di ricerca di comprendere i significati alla base dei contenuti di una pagina.

L’utilizzo dei tag di Schema.org per i contenuti delle schede servizio permette di facilitare il cittadino nla ricerca dei contenuti del sito comunale sui motori di ricerca, come Google. Grazie ai tag, infatti, i motori di ricerca saranno in grado di fornire suggerimenti più precisi e rilevanti alle ricerche dei cittadini.

Nel codice html della «Scheda informativa di servizio al cittadino» si richiede di includere, nella sezione html head, il tag <script type=»application/ld+json»> con la rappresentazione JSON-LD della tipologia GovernmentService.

Nella rappresentazione andranno riportati alcuni degli attributi della tipologia servizio e delle tipologie collegate unità organizzativa e luogo. Più in particolare andranno specificati:

  • il titolo del servizio nell’attributo json name;
  • il l’attributo materie del servizio nell’attributo json serviceType;
  • il nome del comune nell’attributo json serviceOperator>name;
  • l’attributo copertura geografica nell’attributo json areaServed>name;
  • il testo a chi è rivolto nell’attributo json audience>audienceType;
  • il link canale digitale nell’attributo json availableChannel>serviceUrl;
  • l’attributo titolo dell’unità organizzativa (es ufficio o area) responsabile del servizio (attributo Struttura responsabile del servizio) nell’attributo json availableChannel>serviceLocation>name;
  • l’attributo indirizzo dell’oggetto luogo associato al’attributo canale fisico del servizio nell’attributo json availableChannel>serviceLocation>address>streetAdress;
  • l’attributo CAP dell’oggetto luogo associato al’attributo canale fisico del servizio nell’attributo json availableChannel>serviceLocation>address>postalCode;
  • il nome del comune nell’attributo json availableChannel>serviceLocation>address>addressLocality.

Template del codice

Si riporta il template del codice, con gli attributi in formato «<nomeattributo>»:

L’attributo availableChannel>serviceUrl deve essere presente in quei servizi erogati anche in modalità digitale e deve indicare l’url di accesso al servizio digitale.

Funzionalità

L’introduzione di funzionalità sul sito di un Comune migliora l’usabilità del sito stesso e permette di aderire alle indicazioni europee dell”eGovernment Benchmark 2020-2023.

Le funzionalità, infatti, rispondono al top-level benchmark dell”User-centricity (Centralità dell’utente), permettendo all’utente di completare alcune operazioni interamente online: la prenotazione di un appuntamento presso gli uffici comunali, la richiesta di assistenza, la segnalazione di un disservizio e la possibilità di lasciare feedback sulla chiarezza informativa del sito.

Prenotazione appuntamento

Il sito del Comune deve permettere ai cittadini di prenotare online un appuntamento presso uno degli uffici preposti.

Il processo deve offrire la possibilità al cittadino di:

  • selezionare l’ufficio;
  • scegliere fra le date e gli orari disponibili;
  • scegliere l’argomento e spiegare il motivo della richiesta;
  • lasciare il proprio nominativo e i propri contatti

La funzionalità deve essere messa a disposizione sia come servizio a sé nell’elenco dei servizi che come funzione trasversale agli altri servizi, all’interno delle schede servizio.

Se l’utente accede alla funzione a partire dalla scheda di un servizio, la scelta dell’ufficio verrà circoscritta a quegli uffici competenti per quel servizio, e il titolo del servizio di accesso costituirà l’argomento pre-selezionato.

Se l’utente si è autenticato al portale, nominativo e contatti saranno quelli del profilo autenticato. In caso contrario verrà data al cittadino la possibilità di autenticarsi, oppure di inserire i dati nell’apposita form.

Richiesta di assistenza

La funzionalità di richiesta di assistenza deve presentare:

  • la possibilità, non obbligatoria, di poter accedere con identità digitale;
  • i campi per l’inserimento delle informazioni del richiedente (nome, cognome, email);
  • i campi per l’inserimento dei dettagli della richiesta:
    • la categoria di servizio, selezionabile tramite una lista a tendina che presenta le voci della tassonomia Categorie dei Servizi più la voce «Relazioni con il pubblico» per tutte le richieste non afferenti a servizi specifici;
    • il servizio per cui si vuole richiedere assistenza, selezionabile tramite una lista a tendina che presenta i servizi della categoria selezionata precedentemente;
    • un campo di testo libero per fornire i dettagli della richiesta (max 600 caratteri);
  • un checkbox per confermare di aver preso visione dell’informativa privacy.

Una volta inviata la richiesta, il sistema deve presentare una schermata di conferma del corretto invio e informare l’utente che riceverà un riepilogo della richiesta via email.

Gli utenti autenticati con identità digitale devono poter salvare una bozza della richiesta nella propria area personale.

Segnalazione disservizio

Il sito del Comune deve permettere ai cittadini di segnalare un disservizio.

La funzionalità deve offire la possibilità al cittadino di:

  • assegnare una categoria alla segnalazione;
  • indicare il luogo a cui la segnalazione si riferisce, attraverso l’immissione di un indirizzo o con la funzione di geotag su una mappa;
  • indicare l’oggetto della segnalazione;
  • aggiungere una breve descrizione;
  • aggiungere delle immagini;
  • allegare uno o più documenti.

Valutazione della chiarezza informativa delle pagine

Il sito del Comune deve permettere ai cittadini di valutare la chiarezza informative delle pagine.

Questo componente è stato progettato usando una scala che vuole misurare la chiarezza dell’interazione e, in base alla valutazione ricevuta dall’utente, offre domande chiuse e aperte in maniera standardizzata, in modo tale da poter raccogliere feedback utile al Comune per migliorare le pagine del sito.

La funzionalità si articola nei seguenti passaggi:

  1. viene posta la domanda «Le informazioni sulla pagina sono chiare?», a cui l’utente risponde con una scala likert 1-5 sotto forma di stelline;
  2. in base alla risposta dell’utente, il secondo passaggio presenta 2 varianti:

Se il punteggio dell’utente è inferiore a 4 (1-3), viene posta la domanda a risposta multipla «Dove hai incontrato le maggiori difficoltà?». Le possibili risposte sono:

  • A volte le indicazioni non erano chiare
  • A volte le indicazioni non erano complete
  • A volte non capivo se stavo procedendo correttamente
  • Ho avuto problemi tecnici
  • Altro

Se il punteggio è pari o superiore a 4 (4-5) il testo della domanda sarà: «Quali sono stati gli aspetti che hai preferito?». Le possibili risposte:

  • Le indicazioni erano chiare
  • Le indicazioni erano complete
  • Capivo sempre che stavo procedendo correttamente
  • Non ho avuto problemi tecnici
  • Altro
  1. viene presentato un campo di testo libero per dare la possibilità all’utente di inserire un breve commento.

Ricerca globale nel sito

L’interfaccia di ricerca globale fornisce una lista di risultati a partire da una ricerca (query) dell’utente. I risultati devono essere ordinati in modo predefinito in base alla pertinenza con la ricerca.

L’utente accede all’interfaccia di ricerca globale nel sito attraverso l’icona lente nella intestazione principale. L’interfaccia di ricerca globale nel sito permette di filtrare i risultati attraverso due tipi di filtri:

  • tipologie di contenuto, raggruppati in base alle voci della navigazione (Unità organizzativa, Persona pubblica, Documenti, Servizi, Luogo, Evento);
  • argomenti, ovvero i tag tematici con cui possono essere taggati tutti i contenuti del sito.

Ricerca contestuale

In alcune delle pagine indice di primo e secondo livello si suggerisce di presentare una navigazione a faccette ed un motore di ricerca contestuale, che presenti solo i risultati legati a quella sezione (e dunque alle relative tipologie di contenuti).

La ricerca contestuale fornisce una lista di risultati a partire da una ricerca (query) dell’utente. I risultati devono essere ordinati in modo predefinito in base alla pertinenza con la ricerca.

Ricerca contestuale per i servizi

L’utente può accedere alla all’interfaccia di ricerca contestuale per i servizi attraverso il campo di input nella sezione “Esplora tutti i servizi”. Nella versione attuale la ricerca contestuale filtra i risultati all’interno della tipologia di contenuto “Servizi”.

La ricerca contestuale è presente anche nelle pagine di Categorie di servizi. In questo caso la ricerca filtra i risultati per tipologia di contenuto (“Servizi”) e per categoria di servizio. Per esempio, nella categoria “Anagrafe e stato civile” la ricerca contestuale restituisce soltanto risultati di tipo “Servizio” che appartengono alla categoria “Anagrafe e stato civile”.

Template HTML per il sito

Per facilitare l’adozione del modello di sito istituzionale dei Comuni, sono disponibili i template di pagine HTML aggiornati. I template sono già sviluppati e ottimizzati seguendo le migliore pratiche e le linee guida di riferimento, come le Linee guida sull’accessibilità degli strumenti informatici.

I template permettono di creare il sito web di un Comune utilizzando qualsiasi tipo di soluzione tecnologica. Usano ed estendono, inoltre, il design system del Paese e la libreria di componenti di sviluppo Bootstrap Italia.

Le librerie di elementi di interfaccia presenti su Bootstrap Italia facilitano una progettazione e uno sviluppo rapido ed efficace anche di eventuali parti e pagine non coperte dal modello, mettendo a disposizione librerie di componenti da assemblare già validati per accessibilità, facilità d’uso e coerenza.

Vai alle anteprime dei template HTML

Vai al codice sorgente su GitHub

I font del modello

I template HTML del sito istituzionale per i Comuni utilizzano i font dello UI Kit di Designers Italia, ovvero Titillium Web, Roboto Mono e il Lora.

Tutti questi typeface sono rilasciati con licenza SIL Open Font License e sono scaricabili gratuitamente da Google Fonts.

Temi per WordPress e Drupal

Per facilitare l’adozione del modello di sito istituzionale dei Comuni, sono disponibili i temi per WordPress e Drupal. Si tratta di temi pronto all’uso, che permettono di passare rapidamente alla costruzione e alla gestione dei contenuti su una installazione di WordPress e Drupal sul proprio dominio.

Il temi WordPress e Drupal sono aggiornati alla versione 2.0 di Bootstrap Italia e rispondonderanno pienamente ai requisiti di accessibilità previsti dalla normativa. In particolare, i temi raggiungeranno il livello AA delle WCAG 2.1 come richiesto dalla Legge Stanca e dai suoi successivi aggiornamenti.

Vai al tema WordPress

Vai al tema Drupal

Guida alla migrazione dei contenuti

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

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

Attività di migrazione

  1. Usa il Modello di analisi dei contenuti e fai una lista di tutte le pagine del vecchio sito, indicando le struttura gerarchica e le URL.
  2. Passa in rassegna le pagine del vecchio sito, aiutandoti con strumenti per l’analisi dei dati come Web Analytics Italia e segna sul Modello di analisi dei contenuti quali sono le pagine più visitate, i contenuti più efficaci per gli utenti ed eventuali problematiche come dati mancanti o incorretti. Questa operazione è chiamata “content audit” e ti aiuterà a decidere cosa migrare e cosa no.
  3. Consulta la struttura del nuovo sito e affiancala a quella del vecchio, cercando il più possibile di far corrispondere una ad una le pagine (corrispondenza biunivoca).
  4. A ogni pagina, assegna la corretta Tipologia di contenuto dal documento di architettura.
  5. Controlla gli attributi obbligatori per ogni Tipologia di contenuto e riscrivi i tuoi contenuti. Consulta la Guida al linguaggio della Pubblica Amministrazione per allineare il linguaggio in termini di tono di voce e vocabolario.
  6. Scegli i contenuti multimediali (immagini e video) da migrare o individuane di nuovi. Prediligi i contenuti di buona qualità e con una risoluzione ottimizzata per il web. Ricorda che se i contenuti ritraggono delle persone, devi per legge ottenere il loro consenso.
  7. Stabiliti i titoli delle pagine, prendi nota delle nuove URL e affiancale a quelle vecchie su un file CSV. Questo documento ti servirà per impostare i reindirizzamenti (redirects) una volta che il nuovo sito è online. Sul documento, specifica se si tratta di reindirizzamenti 301 (definitivi) o 302 (temporanei). Se un pagina del sito precedente non ha una corrispondenza con una del nuovo, è consigliato scegliere una pagina che tratti un argomento affine.

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

Attività di perfezionamento

  1. Con l’aiuto di strumenti come Google Keyword Planner e Google Trends, individua le keyword ad alto volume di traffico che portano i contenuti a comparire tra le prime pagine di risultati ricerca di Google. Usa le keyword individuate per migliorare i titoli delle pagine, le meta description e i contenuti nel corpo delle pagine.
  2. Attiva e verifica i reindirizzamenti 301 e 302, evitando possibili catene di redirect. I reindirizzamenti vengono generalmente caricati manualmente nel CMS, importando un file CSV.
  3. Chiedi a Google di effettuare una nuova indicizzazione del sito, inviando le sitemap del vecchio e del nuovo sito per segnalare i reindirizzamenti e il nuovo dominio.
  4. Monitora frequentemente le metriche principali di engagement su software come Web Analytics Italia per comprendere l’andamento del redesign e intervenire prontamente in caso di problemi.

Suggerimento

Per indicazioni più approfondite, si suggerisce di consultare il kit Contenuti e linguaggio e il kit SEO su Designers Italia.

Conformità al modello di sito comunale

I criteri di conformità guidano alla corretta adozione del modello in termini di esperienza utente, sicurezza, performance e rispetto della normativa.

Per i Comuni che partecipano agli avvisi di finanziamento per l’aggiornamento del sito comunale, il DTD verifica a campione il rispetto dei requisiti di conformità tramite controlli automatizzati, parzialmente automatizzati e manuali.

Esperienza utente

1. Le schede servizio presentano tutte le informazioni obbligatorie e nell’ordine segnalato nel documento di architettura dell’informazione, con particolare attenzione ai tempi di risposta del Comune alla richiesta del cittadino

Casi di non conformità:

  • anche solo una scheda servizio non presenta più di due delle informazioni obbligatorie;
  • anche solo una scheda servizio presenta le informazioni obbligatorie in un ordine diverso.

2. I contenuti del sito comunale sono taggati con le voci della lista degli argomenti definita nel documento di architettura dell’informazione o appartenenti al vocabolario controllato EuroVOC

Casi di non conformità:

  • più del 50% degli argomenti utilizzati non corrisponde a quelli della lista del modello o non sono appartenenti al vocabolario controllato EuroVOC.

3. Il sito presenta tutte le voci di primo livello nell’ordine esatto descritto nel documento di architettura dell’informazione

Casi di non conformità:

  • almeno una delle voci di menu di primo livello è assente o inesatta;
  • le voci di menu di primo livello sono in ordine diverso da quanto descritto;
  • sono presenti più di 7 voci di menu di primo livello.

4. Il sito presenta i titoli delle pagine di secondo livello come descritto nel documento di architettura dell’informazione, sotto la voce “Coreografia: alberatura”

Casi di non conformità:

  • meno del 50% dei titoli delle pagine di secondo livello usati rispecchiano quelli presenti nel documento dell’architettura dell’informazione.

5. Il sito utilizza i font indicati nella documentazione del modello di sito comunale

Casi di non conformità:

  • il sito usa prevalentemente o esclusivamente font non indicati nel modello.

6. Il sito usa gli elementi di interfaccia della libreria Bootstrap Italia

Casi di non conformità:

  • la libreria Bootstrap Italia non è collegata nell’head del sito;
  • la libreria Bootstrap Italia utilizzata è una versione precedente alla 2.0.

7. Nel caso in cui il sito utilizzi un tema messo a disposizione nella documentazione del modello di sito comunale, lo utilizza nella versione più recente disponibile alla data di inizio lavori

Casi di non conformità:

  • il sito utilizza un tema del modello Comuni ma non utilizza la versione più recente disponibile alla data di inizio lavori.

Funzionalità

8. Il sito presenta una sezione per le domande frequenti (FAQ)

In linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • il sito non presenta il link alla sezione FAQ nel footer.

9. Il sito permette al cittadino di segnalare un disservizio, tramite email o servizio dedicato

In linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • il sito non presenta il link alla funzionalità di segnalazione disservizio nel footer.

10. Il sito consente al cittadino di fornire una valutazione della chiarezza informativa di ogni pagina di primo e secondo livello

In linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • almeno una delle pagine di primo e secondo livello non presenta la funzionalità di valutazione della chiarezza informativa.

11. Tutte le schede di servizi erogabili a sportello consentono di prenotare un appuntamento presso l’ufficio di competenza

Casi di non conformità:

  • anche solo una scheda di servizio erogabile a sportello non presenta la funzionalità per prenotare un appuntamento.

12. Tutte le schede servizio presentano i contatti specifici per l’ufficio preposto all’erogazione del servizio

In linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • anche solo una scheda servizio non presenta la voce “Contatti”.

13. Nel caso in cui il servizio non sia erogato in digitale, il sito comunale permette la valutazione dell’utilità della scheda di servizio, come per il criterio “valutazione della chiarezza informativa”.

In conformità con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • nel caso di servizi non erogabili o richiedibili digitalmente, almeno una delle schede servizio non presenta la funzione di valutazione delle informazioni e della chiarezza informativa.

Sicurezza

14. Il sito ha un certificato https valido e attivo

In linea con le Raccomandazioni AgID in merito allo standard Transport Layer Security (TLS)

Casi di non conformità:

  • il certificato https non è presente;
  • il certificato https è scaduto;
  • il certificato https è obsoleto.

15. Il sito utilizza un dominio istituzionale

In linea con il registro dei nomi a dominio riservati per i Comuni italiani

Casi di non conformità:

  • il dominio non è in linea con il registro dei nomi a dominio riservati per i Comuni italiani.

Normativa

16. Il sito presenta cookie tecnici in conformità con le Linee guida cookie e altri strumenti di tracciamento - 10 giugno 2021 del Garante per la protezione dei dati personali

Casi di non conformità:

  • il sito presenta cookie che non rispettano le linee guida del Garante per la protezione dei dati personali.

17. Il sito presenta una dichiarazione di accessibilità secondo le norme AGID

In linea con le Linee guida AGID per la dichiarazione di accessibilità, le Linee guida AgID sull’accessibilità degli strumenti informatici, la Legge 9 gennaio 2004 n. 4, le Web Content Accessibility Guidelines (WCAG 2.1) e la Direttiva Reg. UE n. 2102/2016.

Casi di non conformità:

  • la dichiarazione di accessibilità non è valida secondo le norme AGID;
  • il link alla dichiarazione di accessibilità non è presente nel footer del sito.

18. Il sito presenta l’informativa sul trattamento dei dati personali in conformità con la normativa GDPR (Artt. 13 e 14, Reg. UE n. 679/2016)

Casi di non conformità:

  • l’informativa sul trattamento dei dati personali non è valida secondo la normativa GDPR;
  • il link all’informativa sul trattamento dei dati personali non è presente nel footer.

19. Il Comune pubblica dati, documenti e informazioni sul sito con licenza aperta (es. CC-BY 4.0)

In linea con Linee guida AGID per l’acquisizione e il riuso software PA, l”Art. 52 d.lgs. 82/2005 del CAD, l”Art. 7, comma 1, D.Lgs. n. 33/2013 e il D.lgs. n. 36/2006

Casi di non conformità:

  • il Comune non segue le linee guida AGID sulla pubblicazione di dati, documenti o informazioni.

Performance

20. Il sito presenta livelli di performance idonei

Nota

Nel caso in cui il sito comunale presenti livelli di performance (media pesata di 6 metriche standard) inferiori a 50, secondo quanto calcolato e verificato tramite le librerie Lighthouse, il Comune pubblica sul sito comunale un «Piano di miglioramento del sito» che mostri, per ciascuna voce che impatta negativamente la performance, le azioni future di miglioramento della performance stessa e le relative tempistiche di realizzazione attese.

Casi di non conformità:

  • il sito presenta un punteggio inferiore a 50 e non presenta il “Piano di miglioramento del sito” nel footer.

Raccomandazioni

Per migliorare ulteriormente l’esperienza degli utenti e garantire l’uso di tecnologie aggiornate, restano valide altre indicazioni di legge e buone pratiche.

1. Il Comune mette a disposizione il software nel catalogo del riuso sotto licenza aperta

In linea con le Linee Guida Riuso delle soluzioni e standard aperti e Acquisizione e riuso di software per le pubbliche amministrazioni

Da evitare:

  • i repository con i file sorgente del sito del Comune non sono inseriti sul catalogo del riuso.

2. Le voci delle schede servizio sono marcate secondo i vocabolari di dati strutturati di schema.org (metatag) per garantire l’interoperabilità dei dati

Da evitare:

  • più del 50% dei metatag indicati non vengono utilizzati per marcare le voci della scheda servizio.

3. Il sito usa tecnologie e infrastrutture cloud

In linea con la Stategia Cloud Italia

Nota

L’uso di infrastrutture cloud consente un’erogazione più sicura, efficiente e scalabile del sito comunale. L’adozione di queste tecnologie può essere finanziata attraverso la categoria «servizi informativi e open data» all’interno della misura 1.2 Abilitazione e facilitazione migrazione al Cloud.

I flussi di servizio

Un servizio pubblico è un processo amministrativo, composto da una serie di passaggi sequenziali lungo un percorso (in gergo tecnico, un journey). Quando alcuni di questi passaggi possono essere effettuati online, nel caso dei Comuni, si parla di servizi digitali per il cittadino.

I nuovi modelli di flussi consentono di realizzare questi servizi digitali, offrendo così ai cittadini la possibilità di presentare richieste o completare adempimenti verso l’amministrazione comunale direttamente online.

Grazie a una serie di elementi modulari e una struttura unica di riferimento, le risorse consentono di comporre l’interfaccia utente per 5 diverse tipologie di flussi di servizio. Aderenti alle indicazioni europee per la qualità dei servizi, i modelli di flusso permettono la creazione di interazioni semplici, veloci ed accessibili tra cittadini e touchpoint digitale per la fruizione dei servizi comunali.

Le risorse includono:

Gli archetipi: le tipologie di flusso

Nonostante la varietà dei servizi comunali, i passaggi delle varie procedure sono spesso ricorrenti.

Grazie a una mappatura dei principali servizi digitali al cittadino erogati dai Comuni e all’analisi dei passaggi necessari al completamento delle procedure, sono stati individuati 5 archetipi rappresentativi delle diverse tipologie di flussi di interazione tra il cittadino e il servizio digitale.

I cinque archetipi di flusso sono:

  1. Permessi e documenti: le richieste documenti, anche d’identità, o di certificati che attestano un permesso, come la richiesta di permesso ZTL;
  2. Pagamenti dovuti: l’interazione per adempiere al pagamento di oneri che il cittadino ha nei confronti dell’amministrazione, come il pagamento delle multe;
  3. Vantaggi economici: le richieste di fondi economici o detrazioni fiscali sulla base di determinati requisiti di idoneità, come l’assegno di maternità;
  4. Iscrizione a graduatoria: le richieste per i servizi riservati a un numero ristretto di persone e il cui accesso è regolato da una graduatoria redatta dalle amministrazioni comunali sulla base di criteri specifici, come l’iscrizione alla Scuola dell’infanzia;
  5. Servizi a pagamento: le richieste di fruizione di un servizio che prevede il pagamento da parte del cittadino, come il servizio di mensa scolastica.

Scopri i servizi che appartengono a ciascun archetipo

Gli archetipi di servizio identificati servono come riferimento per individuare i moduli da utilizzare e l’ordine in cui assemblarli per realizzare l’interfaccia grafica di un servizio, sia su desktop che su mobile.

I moduli (i passaggi)

Ogni archetipo di flusso presenta specifici moduli in sequenza, ovvero schermate di interfaccia, suddivise per pagine, che consentono ai cittadini di fruire dei servizi online.

Ciascun modulo rappresenta un passaggio specifico dell’interazione che il cittadino deve svolgere tramite il touchpoint.

I moduli che è possibile combinare per creare i flussi di servizio sono 12:

  • Trovare informazioni: ovvero la “Scheda informativa di servizio al cittadino”, dove è possibile ottenere tutti i dettagli e accedere al servizio digitale che permette di effettuare parte del processo online;
  • Accedere al servizio: per usufruire dei servizi online è necessario essere loggati nella propria area personale. Se non si è già autenticati, il sistema dovrà reindirizzare il cittadino all’autenticazione tramite identità digitale prima di iniziare il flusso di interazione con il servizio digitale;
  • Acconsentire al trattamento dei dati: il sistema richiede i consensi e le autorizzazioni necessarie al recupero e al salvataggio dei dati personali che verranno inseriti per poter fruire del servizio. L’azione principale permette al cittadino di accettare tutto e proseguire;
  • Inserire/controllare i dati: in questo passaggio vengono raccolti i dati del richiedente (la persona autenticata), di eventuali soggetti e/o oggetti terzi coinvolti nella richiesta e le preferenze di servizio, che cambiano in base al servizio che si sta richiedendo. In base al principio “una tantum”, si è tenuti a non richiedere le informazioni già in possesso della Pubblica Amministrazione, ad esempio sfruttando il recupero dei dati disponibili dalle anagrafi centrali e/o attraverso interoperabilità con altri sistemi;
  • Confermare il riepilogo informazioni: questo passaggio permette al cittadino di verificare la correttezza delle informazioni inserite nella richiesta. È importante che il cittadino riceva indicazione del fatto che si sta procedendo con una dichiarazione e si è pertanto soggetti alle relative responsabilità. Attraverso l’azione principale “Conferma e invia”, viene inviata la richiesta;
  • Effettuare un pagamento: questo passaggio permette ai cittadini di pagare eventuali importi dovuti direttamente online, tramite il servizio pagoPA o altre modalità di pagamento;
  • Ricevere conferma dal sistema: il sistema notifica che il processo è andato a buon fine, fornendo un riepilogo con eventuali numeri di riferimento della pratica e allegati da scaricare. Vengono anche ricordati al cittadino eventuali prossimi passi e la possibilità di controllare in ogni momento, nell’area personale, lo stato della pratica. Nei flussi con procedure che prevedono controlli e autorizzazioni da parte del Comune, come le iscrizioni a graduatoria, questo modulo può ricorrere più di una volta;
  • Visitare l’area personale: il cittadino viene invitato a visitare l’area personale per continuare l’operazione, ad esempio per verificare l’esito della richiesta, nel caso in cui si attendi un’ulteriore conferma da parte del Comune, o per scaricare un documento;
  • Perfezionare la richiesta: il cittadino è invitato a fornire ulteriori informazioni per completare la procedura amministrativa. È ad esempio il caso delle iscrizioni a graduatoria, dove le richieste vengono perfezionate dopo la conferma di selezione da parte del Comune.

I moduli Trovare informazioni, Accedere al servizio e Acconsentire al trattamento dei dati sono presenti in tutti gli archetipi. Il modulo Inserire/controllare i dati personali è anche presente in tutti gli archetipi, ma i suoi contenuti specifici (chiamati “sezioni”) variano a seconda dei servizi.

Scopri quali moduli utilizzare per ciascun archetipo

Le sezioni dei moduli

Le sezioni sono gruppi di campi di informazioni e componenti inerenti all’azione che l’utente deve compiere. Le diverse sezioni vengono assemblate tra di loro per formare i moduli, e quindi le interazioni di alto livello, dei flussi di servizio.

Alcune sezioni presentano diverse varianti così da adattare i flussi di servizio alle diverse necessità date dai servizi specifici che si vogliono digitalizzare.

Le sezioni devono contenere soltanto i dati necessari per finalizzare la richiesta e mostrare di default solo le informazioni rilevanti (ad esempio, il nome e codice fiscale per una persona fisica oppure opzioni di pagamento per un pagamento dovuto).

Scopri le possibili sezioni per ogni modulo in base agli archetipi di appartenenza

Le varianti delle sezioni

Alcune sezioni sono state progettate con una serie di varianti, in modo da poterle assemblare in moduli adatti alle esigenze di interazione di un servizio specifico.

Sezioni “dati di un soggetto” (per il modulo “Inserire/controllare i dati”):

  • dati di una seconda e una terza persona fisica (es. per la richiesta di iscrizione all’asilo nido);
  • dati relativi a una persona giuridica (es. per la richiesta di agevolazioni per un’ azienda);
  • dati dell’ISEE (es. per la richiesta di assegno di maternità);
  • dati dei conti bancari (es. per la richiesta di assegno di maternità).

Sezioni “dati di un oggetto” (per il modulo “Inserire/controllare i dati”):

  • dati di un veicolo (es. per la richiesta di permesso ZTL);
  • dati degli immobili (es. per il calcolo IMU);
  • dati dei luoghi (es. per la richiesta di prenotazione appuntamento).

Sezioni “Preferenze di servizio” (per il modulo “Inserire/controllare i dati”):

  • Tre sezioni per alla raccolta di scelte esclusive, quando tra diverse opzioni se ne può selezionare al massimo una. Le sezioni si basano su tre criteri:
  • radio button, quando le opzioni tra cui scegliere sono 5 o minori di 5;
  • menù a tendina, quando le opzioni tra cui scegliere sono almeno 6 ma al massimo 10;
  • autocompletamento, quando le opzioni tra cui scegliere sono più di 10.
  • Una sezione per la scelta multipla, quando tra diverse opzioni se ne può selezionare una o più. Il numero minimo e massimo di scelte si può indicare nello spazio dedicato alla descrizione.
  • Due sezioni per alla scelta di una data. Le sezioni si contraddistinguono tramite due criteri:
  • scelta di un giorno;
  • scelta di un periodo.
  • Una sezione dedicata all’inserimento di un codice di avviso, dove sono previsti:
  • un campo per l’inserimento del codice;
  • uno spazio di visualizzazione dei dati legati all’avviso;
  • uno campo dove poter inserire dati che possano modificare i dati dell’avviso, ad esempio la data di ricevuta dell’avviso nel pagamento di una multa che risulta discriminante per il calcolo dell’importo dovuto.

Sezione di riepilogo (per il modulo “Confermare il riepilogo informazioni”)

Un’unica sezione che si ripete per ogni modulo compilato per il servizio. La sezione presenta queste caratteristiche:

  • spazio dedicato al messaggio “Le informazioni che hai fornito hanno valore di dichiarazione. Verifica che siano corrette.”;
  • divisione dei moduli con al suo interno il riepilogo delle sezioni compilate;
  • possibilità di modificare i dati cliccando su “modifica”;
  • al clic su “modifica” si apre una finestra in sovrapposizione con il form;
  • al clic su “conferma”, prima che la richiesta sia inviata, una finestra in sovrapposizione mostrerà i termini e le condizioni di servizio che l’utente confermerà cliccando su “Conferma e invia”.

Sezione preferenze di pagamento (per il modulo “effettuare un pagamento”):

da usare quando è necessario inserire dei parametri per calcolare il totale da pagare (es. quanta parte pagare nel calcolo IMU oppure un eventuale pagamento a rate per altri servizi).

Sezione di riepilogo dei dati del pagamento (per il modulo “effettuare un pagamento”):

da usare quando il pagamento non è contestuale alla richiesta.

Al suo interno abbiamo tutte le informazioni relative alla pratica e all’importo. Quando possibile, comprende il pulsante pagoPA o il quello per scaricare il documento per pagare con altre soluzioni (es. documento F24 generato dal calcolo dell’IMU).

Sezioni di conferma (per il modulo “Ricevere conferma dal sistema”)

La pagina di conferma è quella finale per ciascun flusso di servizio. Le sezioni disponibili non presentano varianti e mostrano queste informazioni:

  • conferma di invio della richiesta o del pagamento;
  • codice della pratica di riferimento;
  • codice dell’eventuale pagamento;
  • data della richiesta o del pagamento;
  • importo dell’eventuale pagamento;
  • email alla quale è stato inviato la ricevuta;
  • possibilità di scaricare la ricevuta in pdf’;
  • prossimi passi;
  • servizi correlati;
  • valutazione dell’esperienza d’uso.

Implementazione dei campi dati

In base al principio “una tantum”, per quanto possibile, si è tenuti a non richiedere le informazioni già in possesso della PA (ad esempio sfruttando il recupero dei dati disponibili dalle anagrafi centrali e/o attraverso l’interoperabilità con altri sistemi attraverso l’Anagrafe Nazionale della Popolazione Residente).

Nel compilare i campi dati, l’utente può espandere una sezione per vedere i dati, verificarne la correttezza ed eventualmente modificarli cliccando su “modifica”.

In caso di dati mancanti o non corretti:

  • le sezioni con warning o errore si mostreranno aperte;
  • all’inizio della pagina ci sarà un indice degli errori con ancore che porteranno l’utente allo specifico gruppo di dati da modificare;
  • nella sezione contenente l’errore l’utente troverà indicato il singolo dato mancante o errato.
  • l’invito all’azione “modifica” non si troverà più in alto a destra ma verrà spostato in basso al centro. Sarà affiancato dall’icona “modifica” e diventerà un pulsante secondario. Il testo resterà “modifica” se i dati mancano, “correggi” se i dati non sono corretti, o “completa” nel momento in cui saranno presenti sia dati mancanti che non corretti.

Per la modifica e il salvataggio dei dati nei campi si aprirà una finestra in sovrapposizione con all’interno le input per modificare i dati:

  • i campi compilati tramite l’interoperabilità con servizi terzi (es. SPID) non potranno essere modificati e appariranno come campi disabilitati.
  • per tutti gli altri campi, l’utente potrà scegliere se salvare le modifiche nella propria area personale e aggiornare i propri dati, oppure salvare i dati solamente per la richiesta in corso. L’utente si troverà davanti a questa scelta dopo aver cliccato su «Avanti», dove apparirà una finestra in sovrapposizione subito prima di visualizzare il passo successivo;
  • nel caso in cui non si abbia nessun dato rilevante salvato, la sezione apparirà vuota con un messaggio e un pulsante che apre una finestra in sovrapposizione con al suo interno un form, dove l’utente potrà popolare i dati richiesti.

Come si costruisce un flusso di servizio

Oltre ai 26 servizi mappati, la struttura modulare dei modelli di servizio si adatta facilmente anche a un numero più ampio di servizi digitali per il cittadino.

I vari moduli e sezioni sono consultabili nell’apposita libreria di componenti UI e possono essere combinati per far fronte a diverse esigenze. Ulteriori componenti sono anche disponibili nel Design System del Paese.

L’uso di queste risorse permette di implementare efficacemente un servizio digitale che rispetti gli standard di accessibilità e usabilità.

Come costruire un flusso di servizio:

  1. analizza la procedura da digitalizzare e identifica l’archetipo a cui appartiene;
  2. consulta il modello di servizio e l’esempio applicato per comprendere l’interazione tra le varie schermate (trovi il link nel file excel degli archetipi);
  3. consulta il relativo diagramma di flusso per capire quali moduli utilizzare e l’ordine di assemblaggio (trovi il link nel file excel degli archetipi).
  4. seleziona e organizza le sezioni usando la libreria di elementi, valutando quali varianti sono necessarie.

Usa lo strumento checklist per assicurarti di svolgere tutte le attività necessarie ad una corretta implementazione del modello.

Valutazione dell’esperienza d’uso del servizio

Una volta completato il processo, il sistema deve permettere ai cittadini di lasciare una valutazione dell’esperienza d’uso del servizio online, sia in forma descrittiva sia in forma grafica sintetica.

La sezione di valutazione d’esperienza d’uso è presente nel modulo ‘Ricevere conferma dal sistema’. Le valutazioni raccolte sono utili ai Comuni per migliorare i servizi offerti.

La funzionalità si articola nei seguenti passaggi:

  1. viene richiesto di valutare la semplicità e l’immediatezza del processo appena svolto, a cui il cittadino risponde con una scala likert 1-5 sotto forma di stelline;

in base alla risposta del cittadino, il secondo passaggio presenta 2 varianti:

2a. Se il punteggio dell’utente è inferiore a 4 (1-3), viene posta la domanda a risposta multipla «Dove hai incontrato le maggiori difficoltà?». Le possibili risposte sono:
  • A volte le indicazioni non erano chiare;
  • A volte le indicazioni non erano complete;
  • A volte non capivo se stavo procedendo correttamente;
  • Ho avuto problemi tecnici;
  • Altro.
2b. Se il punteggio è pari o superiore a 4 (4-5) il testo della domanda sarà: «Quali sono stati gli aspetti che hai preferito?». Le possibili risposte sono:
  • Le indicazioni erano chiare;
  • Le indicazioni erano complete;
  • Capivo sempre che stavo procedendo correttamente;
  • Non ho avuto problemi tecnici;
  • Altro.
  1. viene presentato un campo di testo libero per dare la possibilità all’utente di inserire un breve commento e fornire ulteriori dettagli.

La scala di valutazione

La scala adottata per la funzione di valutazione dell’esperienza d’uso è di tipo unipolare a 5 valori, espressi graficamente mediante stelline.

La scelta di questa scala è stata influenzata da un’attenta analisi di ricerche metodologiche sulle scale di valutazione. La ricerca consiglia scale con un massimo di 7 valori, per facilitare la valutazione da parte degli utenti e garantire la ricezione di dati attendibili e validi. Un numero maggiore di valori, infatti, rende più difficile agli utenti comprendere le sfumature di significato delle varie opzioni della scala e, quindi, di effettuare una scelta ponderata.

Un numero dispari di valori, inoltre, permette all’utente di esprimere una posizione neutrale o moderata. Per quanto possa costituire una “scorciatoia cognitiva” per intervistati poco interessati o senza un’opinione, diversi studi hanno dimostrato che l’inclusione di un’alternativa intermedia aumenta l’affidabilità e la validità delle scale.

In ambiti specifici, come la valutazione di un servizio online, è comune l’uso del sistema di valutazione con le stelle, dove 1 stella indica la valutazione minima e 5 stelle quella massima.

Conformità ai flussi di servizio

I criteri di conformità guidano alla corretta adozione dei flussi di servizio in termini di esperienza utente, sicurezza, performance e rispetto della normativa.

Per i Comuni che partecipano agli avvisi di finanziamento per l’aggiornamento del sito comunale, il DTD verifica a campione il rispetto dei requisiti di conformità tramite controlli automatizzati, parzialmente automatizzati e manuali.

Esperienza utente

1. L’utente può accedere al processo tramite identità digitale direttamente dalla scheda servizio

In linea con la direttiva CAD: Sezione III (Identità digitali, istanze e servizi on-line), art. 64 e ss.

Casi di non conformità:

  • l’utente non può accedere al processo tramite identità digitale;
  • sulla scheda servizio non è presente l’opzione per effettuare l’accesso.

2. L’utente riceve una notifica di completamento al termine del processo di presentazione dell’istanza

La notifica deve essere possibilmente presentata in modalità multicanale sfruttando le piattaforme già a disposizione del cittadino (es.: notifica in area riservata, mail, SMS)

Casi di non conformità:

  • l’utente non riceve la notifica di completamento del processo di presentazione dell’istanza.

3. L’utente può verificare tutte le informazioni inserite relative all’istanza in una schermata di riepilogo

Il riepilogo viene presentato immediatamente prima della richiesta di conferma per la finalizzazione della procedura, in linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • l’utente non visualizza tutte le informazioni relative all’istanza in una schermata unica;
  • il riepilogo delle informazioni non viene mostrato immediatamente prima della richiesta di conferma.
  • l’utente non riceve la notifica di completamento al termine del processo di presentazione dell’istanza

4. Il processo consente all’utente di utilizzare i dati personali e le preferenze già forniti al Comune, senza doverli inserire nuovamente

In linea con l”eGovernment benchmark 2020-2023, l”Art. 41 del CAD e le Linee guida AgID sull’interoperabilità tecnica delle Pubbliche Amministrazioni

Casi di non conformità:

  • l’utente deve inserire dati o preferenze già in possesso del Comune.

5. L’utente può, in qualunque momento, salvare quanto già compilato e riprendere il processo in seguito. Il tempo di disponibilità minimo garantito della bozza deve essere un anno.

In linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • l’utente non ha la possibilità di salvare quanto compilato;
  • l’utente non può continuare un’istanza usando una bozza precedentemente salvata;
  • la bozza salvata è disponibile per un periodo inferiore a un anno.

6. L’utente può lasciare una valutazione sull’esperienza d’uso del servizio digitale al termine della processo

In linea con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • anche solo un flusso di servizio non permette all’utente di valutare l’esperienza d’uso al termine del processo.

7. L’avanzamento e gli step necessari al completamento del processo sono indicati chiaramente in ogni schermata, attraverso breadcrumbs navigabili che consentono di tornare indietro ed effettuare modifiche

In linea con l”eGovernment benchmark 2020-2023, l”Art.3 e l”Art. 41 del CAD, e le Linee guida AgID sulla formazione, gestione e conservazione dei documenti informatici

Casi di non conformità:

  • anche solo uno step del processo di presentazione dell’istanza non mostra gli step necessari al suo completamento;
  • i breadcrumbs mostrati non sono navigabili.

8. L’utente può visionare lo stato della propria istanza tramite area personale o un codice univoco di referenza, visualizzandone le principali tappe di avanzamento

In conformità con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • l’utente non ha la possibilità, tramite area personale o codice univoco, di visualizzare lo stato della sua istanza;
  • le tappe dell’avanzamento dell’istanza non sono informative;
  • lo stato di avanzamento dell’istanza non presenta le tappe aggiornate.

9. La data di presa in carico dell’istanza e la data ultima prevista per l’erogazione del servizio sono comunicate in chiaro all’utente, secondo i termini massimi descritti dalla scheda servizio

In linea con l”eGovernment benchmark 2020-2023 e la Legge 241/1990, art. 2

Casi di non conformità:

  • l’area servizi per il cittadino non esplicita la data di presa in carico dell’istanza;
  • l’area servizi per il cittadino non esplicita la data ultima prevista per l’evasione dell’istanza;
  • i tempi previsti per l’erogazione dell’istanza sono superiori ai termini massimi descritti nella relativa scheda servizio.

10. L’area servizi sito utilizza i font indicati nella documentazione del modello di sito comunale

Casi di non conformità:

  • il sito usa prevalentemente o esclusivamente font non indicati nel modello.

Funzionalità

11. L’utente può effettuare eventuali pagamenti in forma completamente digitale

In linea con l”Art. 5 del CAD

Casi di non conformità:

  • anche solo un servizio che prevede un pagamento non permette all’utente di effettuarlo digitalmente;
  • il processo di pagamento non è interamente digitale.

12. L’area servizi per il cittadino del sito comunale consente di prenotare un appuntamento presso l’ufficio di competenza

In conformità con l”eGovernment benchmark 2020-2023

Casi di non conformità:

  • l’area servizi non presenta la funzionalità per prenotare un appuntamento.

Sicurezza

13. L’area servizi per il cittadino del sito comunale utilizza un sottodominio istituzionale congruente al dominio istituzionale del sito

In linea con il registro dei nomi a dominio riservati per i Comuni italiani

Casi di non conformità:

  • il sottodominio dell’area servizi utilizzato non è congruente al dominio del sito;
  • il sottodominio non è in linea con il registro dei nomi a dominio riservati per i Comuni italiani.

14. L’area servizi presenta cookie tecnici in conformità con le Linee guida cookie e altri strumenti di tracciamento - 10 giugno 2021 del Garante per la protezione dei dati personali

Casi di non conformità:

  • l’area servizi presenta cookie che non rispettano le linee guida del Garante per la protezione dei dati personali.

15. L’area servizi presenta una dichiarazione di accessibilità secondo le norme AGID

E in linea con le Linee guida AGID sull’accessibilità degli strumenti informatici, la Legge 9 gennaio 2004 n. 4, le Web Content Accessibility Guidelines (WCAG 2.1) e la Direttiva Reg. UE n. 2102/2016.

Casi di non conformità:

  • la dichiarazione di accessibilità non è valida secondo le norme AGID;
  • il link alla dichiarazione di accessibilità non è presente nel footer dell’area servizi.

16. L’area servizi presenta l’informativa sul trattamento dei dati personali in conformità con la normativa GDPR (Artt. 13 e 14, Reg. UE n. 679/2016)

Casi di non conformità:

  • l’informativa sul trattamento dei dati personali non è valida secondo la normativa GDPR;
  • il link all’informativa sul trattamento dei dati personali non è presente nel footer.

Performance

17. I flussi di servizio presentano livelli di performance idonei

Nota

Nel caso in cui i flussi di servizio presentino livelli di performance (media pesata di 6 metriche standard) inferiori a 50 secondo quanto calcolato e verificato tramite le librerie Lighthouse, il Comune pubblica sul sito comunale un «Piano di miglioramento dei servizi» che mostri, per ciascuna voce che impatta negativamente la performance, le azioni future di miglioramento della performance stessa e le relative tempistiche di realizzazione attese.

Casi di non conformità:

  • Anche solo un flusso di servizio presenta una performance con punteggio inferiore a 50 e non è presente il “Piano di miglioramento dell’area servizi” nel footer.

Raccomandazioni

Per migliorare ulteriormente l’esperienza degli utenti e garantire l’uso di tecnologie aggiornate, restano valide altre indicazioni di legge e buone pratiche.

1. Gli utenti possono effettuare l’accesso tramite identità digitale SPID o CIE

In linea con la direttiva CAD: Sezione III (Identità digitali, istanze e servizi on-line), art. 64 e ss.

L’implementazione di questa funzionalità è finanziabile con l’adesione all’avviso 1.4.4 Adozione identità digitale.

2. L’utente riceve una notifica di completamento della presentazione della richiesta tramite App IO

In linea con la direttiva CAD: art. 64-bis e c.1-ter, e le Linee guida AgID sul punto di accesso telematico ai servizi della Pubblica Amministrazione.

L’implementazione di questa funzionalità è finanziabile con l’adesione all’avviso 1.4.3 Adozione PagoPA e app IO.

3. L’utente può effettuare un eventuale pagamento tramite PagoPA

In linea con gli Art. 5 e Art. 64 del CAD

Nel caso delle tipologie servizi a pagamento, pagamento dovuti, permessi e autorizzazioni è previsto uno step di pagamento. L’implementazione di questa funzionalità è finanziabile con l’adesione all’avviso 1.4.3 Adozione PagoPA e app IO.

4. L’area servizi usa tecnologie e infrastrutture cloud

In linea con la Stategia Cloud Italia

Nota

L’uso di infrastrutture cloud consente un’erogazione più sicura, efficiente e scalabile dell’area servizi del sito comunale. L’adozione di queste tecnologie può essere finanziata attraverso la categoria «servizi informativi e open data» all’interno della misura 1.2 Abilitazione e facilitazione migrazione al Cloud.

5. Il processo consente all’utente di utilizzare i dati già forniti alle Pubbliche Amministrazioni e presenti nelle banche dati digitali nazionali (es. ANPR), senza doverli inserire nuovamente

In linea con la direttiva CAD Art. 50, 50-ter e 60, e Linee Guida sull’interoperabilità tecnica delle Pubbliche Amministrazioni.

6. Il Comune mette a disposizione il software nel catalogo del riuso sotto licenza aperta

In linea con le Linee Guida Riuso delle soluzioni e standard aperti e Acquisizione e riuso di software per le pubbliche amministrazioni.

Da evitare:

  • i repository con i file sorgente del sito del Comune non sono inseriti sul catalogo del riuso.

Template HTML per i servizi

Per facilitare la creazione di servizi digitali, sono disponibili i template di pagine HTML aggiornati. I template sono già sviluppati e ottimizzati seguendo le migliore pratiche e le linee guida di riferimento, come le Linee guida sull’accessibilità degli strumenti informatici.

I template permettono di creare flussi di servizio utilizzando qualsiasi tipo di soluzione tecnologica. Usano ed estendono, inoltre, il design system del Paese e la libreria di componenti di sviluppo Bootstrap Italia.

Le librerie di elementi di interfaccia presenti su Bootstrap Italia facilitano una progettazione e uno sviluppo rapido ed efficace anche di eventuali parti e pagine non coperte dal modello, mettendo a disposizione librerie di componenti da assemblare già validati per accessibilità, facilità d’uso e coerenza.

Vai alle anteprime dei template HTML

Vai al codice sorgente su GitHub

I font del modello

I template HTML del sito istituzionale per i Comuni utilizzano i font dello UI Kit di Designers Italia, ovvero Titillium Web, Roboto Mono e il Lora.

Tutti questi typeface sono rilasciati con licenza SIL Open Font License e sono scaricabili gratuitamente da Google Fonts.

Allegati tecnici

La seguente tabella raccoglie tutti i documenti tecnici relativi al progetto e le risorse per creare i siti web istituzionali dei Comuni e i servizi digitali per il cittadino.

Gli allegati tecnici.
Titolo Tipo file Collegamento
Documento di Architettura dell’informazione Google Sheets Vai al documento
Grafico dell’alberatura PDF Vai al documento
Anteprime dei Template HTML per il sito e i servizi digitali Antemprime HTML Vai alle anteprime
Template HTML per il sito e i servizi digitali Repository GitHub Vai ai template HTML
Tema WordPress per il sito Repository GitHub con plug in WordPress Vai al tema WordPress
Tema Drupal per il sito Repository GitHub con installazione per Drupal Vai al tema Drupal
Libreria di componenti per i servizi Figma Vai alla libreria
Prototipi a media ed alta definizione per il sito e i servizi Figma Vai ai prototipi
Corrispondenza tra tipologie di flusso di servizio (archetipi), moduli e sezioni per i flussi di servizio Google Sheets Vai al file
Diagrammi di flusso per le tipologie di servizio (archetipi) PDF Vai ai diagrammi

Progettato da

Il team di Designers Italia

Fabio Bonelli, Maria Cristina Caratozzolo, Mauro Filippi, Michela Gabrieli, Federico Maria Giaimo, Stefania Guerra, Francesco Improta, Daniela Iozzo, Daniele Nolè, Marco Maria Pedrazzo, Claudia Pollina, Ilaria Scarpellini, Andrea Stagi, Daniele Tabellini, Matteo Vabanesi.

Hanno collaborato

Daniela Battisti, Fabrizio Caccavello, Valentina Carollo, Claudio Celeghin, Paolo Coppola, Alberta Ciarla, Daniela De Blasis, Lorenzo Fabbri, Matteo Fortini, Giorgia Lodi, Giulio Lucci, Antonio Pascalis, Davide Porrovecchio, Saverio Pulizzi, Francesco Sogos, Roberta Tassi, Laura Toffetti, Alberto Torin, Matteo Troìa, Francesco Zaia, Fifth Beat, WEDOO.