Le linee guida di web design di AgID: come organizzare i contenuti del sito
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 38 | |
Author | ||
License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
Identifiers | 10.5446/14906 (DOI) | |
Publisher | ||
Release Date | ||
Language |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
|
World Plone Day, 202122 / 38
4
5
16
24
27
28
31
34
37
38
00:00
Computer animation
05:36
Computer animation
13:18
Computer animation
21:19
XML
Transcript: Italian(auto-generated)
00:01
Grazie Stefano, sono veramente felice di potervi parlare della esperienza nel comune di Miranda, il sito che è online da marzo con le linee guida di Agit. Nell'ottobre del 2016 Irene, capati nel suo post, ha festeggiato la notizia
00:23
che Agit aveva rilasciato le linee guida, le linee guida per il design dei servizi e Irene scrive, finalmente Agit inizia a parlare di pubblica amministrazione, di siti per la pubblica amministrazione. Il Segi Design è
00:41
un approccio alla progettazione che si occupa di definire come si svolge la relazione tra un utente e un'organizzazione. Le linee Agit sono le linee guida, uno strumento di lavoro per la pubblica amministrazione e i la progettazione di ambienti digitali, appunto i siti web.
01:04
Quando l'organizzazione è una pubblica amministrazione e l'utente è un cittadino, ci sono alcune raccomandazioni da seguire. Partire dai bisogni dei cittadini per consentire al cittadino di ottenere facilmente rapidamente ciò di cui ha bisogno e i servizi offerti noti devono essere
01:21
semplici e chiari in modo che il cittadino riesca a orientarsi. Agi suggerisce anche di avere questi obiettivi, in particolare scrivere per le persone, ovvero scrivere documenti semplici lineari, usare un linguaggio semplice e chiaro e organizzare i contenuti documenti in
01:43
modo che sia facile da trovare. Io sono convinta che sia importante questa cosa e con i miei redattori insisto molto sull'importanza di scrivere per le persone. Chi è il cittadino? Il cittadino sono io che
02:00
abito a Mirandola e ho bisogno di avere un'informazione di come pagare il limo, di quando scade. Il cittadino è il mio vicino di casa, Adriano, che ha 75 anni, mi ferma per strada e mi dice, Carla devo rinnovare la carta d'identità, dove devo andare, cosa devo fare, oppure la mia parrucchiera che è intanto che lì che mi pettina mi chiede, Carla ma mi sai
02:23
dire se c'è una fiera di maggio quest'anno, quindi il cittadino è colui che ha bisogno di avere informazioni sugli eventi e anche sui servizi che vengono rilocati dalla pubblica amministrazione. Questa è la slide del sito web prima che venisse inaugurato, cioè del
02:42
diciamo del vecchio sito. Con Google Analytics io ho estratto la situazione degli utenti per un anno intero e ho visto che il sito web del Comune di Mirandola aveva avuto un incremento del 93% dell'anno 2020. Questo significa
03:03
che io avevo un sito efficiente, molto visitato. Non dimentichiamo che però il 2020 è stato l'anno della pandemia e questo ha visto l'esplosione di accessi al sito web, dovuto al fatto che la pubblica amministrazione ha erogato la maggior parte dei servizi online
03:24
attraverso domande online, attraverso il proprio portale e questo ha portato a questo grosso incremento. Il sito che io volevo aggiornare quindi era un sito molto visitato. Il progetto che ho portato avanti si è svolto con
03:44
questi step. Intanto io ho formato un gruppo di lavoro con i redattori, ho guardato cosa fanno gli altri siti. È molto importante guardarsi intorno e vedere chi aveva già sviluppato il sito web cosa aveva realizzato. Abbiamo
04:03
definito la grafica dell'home page, grafica che poi io ho portato in giunta e ho fatto provare agli amministratori. La retalto ha implementato l'ambiente di plot di base, dopodiché abbiamo lavorato per mappare l'architettura esistente e abbiamo scritto le regole per come volevamo che
04:22
fossero emigrati i dati. Sono stati emigrati i dati e è stata fatta la formazione a me e ai miei redattori. Alla fine l'ultimo parte del lavoro è stato quello di organizzare i contenuti. Questo è com'era il sito nel 2020. Vi ho voluto portare l'immagine del
04:49
vecchio sito perché, come abbiamo visto da Google Analytics, questo era un sito tenuto aggiornato ed era anche ben strutturato. Io avevo già le
05:02
informazioni divise per servizi online, arete tematiche, eventi. Questo è il del sito vecchio che vi voglio mostrare perché si vede in chiaro dove navigare
05:21
il sito, quali erano le arete tematiche in cui avevano organizzato i dati. Questo è importante e vi spiegherò poi cosa significa prendere questi dati dalle arete tematiche nel nuovo sito Agit. Una parte molto importante che
05:41
mi ha dato molto tempo è stato il processo di migrazione dati. Qui vorrei soffermarmi in modo particolare anche un po' per assicurare chi tra voi deve ancora intraprendere il progetto di fare un nuovo sito. Io avevo un sito PLONE e i dati nella nuova versione di PLONE potevano essere
06:06
migrati tranquillamente. Quando io ho mappato i dati, perché il primo step che consiglio di fare è veramente andare a vedere che dati avete, perché dovete
06:21
fare un po' di analisi anche per capire quali dati mantenere e quali dati buttare via. Tenete presente che rifare un sito vuol dire proprio fare una bella pulizia di dati che non sono più utili. Io ho guardato i dati nel vecchio sito e ho visto che c'erano delle cartelle di diverso tipo, ma anche
06:41
cartelle modulistiche, cartelle di regolamento, cartelle di immagini. Il secondo step del processo di migrazione dati prevede che dopo aver mappato i dati in un foglio di Excel o come volete voi, venga eseguita un
07:00
analisi che io ho fatto in modo chiaro e puntuale rispetto al fatto che come vi ho detto io avevo delle aree tematiche nel vecchio sito e sono andata a vedere ad esempio i documenti del cittadino della mia area tematica, quindi di quel contenitore che io avevo nel vecchio sito, il servizio Agile l'intratta e li chiama a nave per stato civile. Quindi è stato molto
07:23
facile per me pensare e anche attuale il fatto che i documenti del cittadino andavano poi inseriti in questo nuovo servizio con questa nuova tassonomia descritta da Agile, così la scuola formazione non ho avuto dubbi di metterne l'area educazione e formazione. Questa fase è una fase
07:43
importante che vi permette quindi di avere chiaro partendo dal vecchio sito come gestire i dati secondo la tassonomia Agile dei servizi. Importantissimo è stato il momento in cui pure e tardi abbiamo individuato le
08:00
regole per i miei gradi dati. Vi rassicuro sul fatto che non c'è nessuna attività a carico vostro perché è un software che mi gradi dati o perlomeno è un software che fortunatamente è riuscito a migrare i dati del mio vecchio plone con delle regole che abbiamo studiato insieme
08:23
al team di RedTarter e in particolare io ho capito che con le prove e i test che abbiamo fatto che le mie pagine potevano diventare tranquillamente dei servizi, secondo le linee Agile. Quindi c'è stato questo software
08:45
che si è preoccupato di fare la conversione dati. Vi faccio vedere meraviglia delle meraviglie per me perché non me l'aspettavo. Questa è una pagina che prima era nel vecchio sito, però come l'ha
09:03
trasformato il software e me l'ha trasformato in servizio, non c'è stato bisogno che facessi niente. Questa attività vi solleva e vi dovrebbe rincorare perché plone su plone si può migrare. Una volta che i miei dati sono stati ricopiati da questo programma e depositati in una
09:24
cartella che noi abbiamo chiamato vecchio sito, quella attività di spostare questi dati aggiungendo semplicemente piccolissimi valori che magari non esistevano nel vecchio sito ha fatto sì che io potessi andare
09:41
online in pochissimo tempo. Vi faccio vedere quindi quale è il fatto. Questo è il sito del comune di Mirandola online. Questa è la HOME, allora Agid ci dice già come dobbiamo noi strutturare le informazioni, non ci dobbiamo tanto preoccupare del design, quello che
10:03
Irene esaltava era proprio questo fatto. Non abbiamo perso tempo a fare il disegno della HOME, abbiamo scelto la tonalità del blu piuttosto che è un altro colore, ma dove vanno i bottoni? Come si chiamano? Il
10:20
nomenclatore, è già Agid che ce lo dice, l'amministrazione in realtà servisce documenti e dati, devono rimanere con questo nomenclatore, si devono chiamare così Agid, lo suggerisce e questo fa sì che tutti i siti aderenti alle linee Agid siano conformi ai ventici.
10:43
Il cittadino farà la stessa esperienza, troverà le informazioni in lo stesso modo qualsiasi sito sta visitando, su qualsiasi sito sta navigando, quindi argomenti sta a destra come dice Agid, il cercatore
11:00
in alto e di fianco i bottoni dei social. Io ho scelto di strutturare il mio sito a fasce e in alto subito abbiamo deciso di mettere un video in evidenza, in questo caso l'inaugurazione della circolovia del sole, vi invito di andare a vedere questo video ma
11:24
anche a visitare la circolovia del sole che è appena stata inaugurata. La seconda fascia, subito dopo, il video è dedicata alle notizie, notizie o avvisi con le relative immagini. Scorrendo troviamo gli
11:46
argomenti in evidenza. Gli argomenti sono un'altra novità di Agid, ovvero la possibilità di rintracciare le informazioni, le pagine con una parola che li raggruppa appunto di argomenti, un tag
12:02
che noi possiamo inserire nel momento in cui carichiamo un servizio. Adesso in evidenza ci sono questi, il coronavirus, la manutenzione, il servizio online, ma il redattore può modificare questi 3 box a suo piacimento a seconda di qual è l'argomento a cui vuole
12:23
dare maggior rilevanza. A seguire sempre scorrendo verso il basso abbiamo il cercatore dei servizi, il comunicati stampa, abbiamo scelto di pubblicarne 6 contemporaneamente e ovviamente in ordine di chronologico, il link ai siti tematici, quindi potete
12:45
fare una fascia in cui mettere in risalto il link ai siti importanti per la vostra amministrazione. Per concludere abbiamo il footer. Il footer ci fa capire veramente come Agid
13:05
lavora e come Agid vuole che le informazioni siano strutturate, perché nel footer vediamo cosa contiene il link amministrazione, novità, servizie, documenti e dati in chiaro. Agid ha introdotto questa
13:23
novità che sono le pagine di disambiguazione. Cosa significa? Significa che nel bottone amministrazione, in qualsiasi sito Agid in cui io sto navigando, trovo le informazioni riferenti ai politici, i valveni di governo, oppure agli uffici. Se invece voglio
13:44
navigare nel bottone notità, troverò notizie, comunicati e renti avvisi. I servizi sono un'importante area del nostro sito. I servizi contengono tutto quello che la nostra amministrazione eroga. Agid
14:03
dice, l'amministrazione eroga dei servizi ovvero dei procedimenti. Ha preparato Agid stesso un nomenclatore e vi consiglio di attenervi a quello che Agid ha già definito. Questo significa che le informazioni
14:23
che voi volete inserire, i procedimenti della vostra pubblica amministrazione, devono trovare posto in uno di questi servizi, così come i vedete linkati. Io ho anche aggiunto, scopro i servizi online perché avevo la necessità di dare risalto ad alcuni servizi online
14:44
usciti in questo momento. Come vedete si può anche modificare la pagina servizi. Io ho sfruttato l'esempio del comune di Modena e traplonisti insomma, questo è permesso, insomma. Come vi ho detto, prendete esempio
15:00
da siti che sono già online. Questa è una cosa molto importante, insomma. Vedere qualche idea che qualcuno già sviluppato può aiutare a migliorare la visualizzazione delle informazioni. I documenti dati, il Tarso Box che contiene la copretoria online, le deliberate termine e i bandi del lente.
15:26
Come vedete è tutto in chiaro, tutto molto ordinato e questo secondo me facilita molto chi naviga, il cittadino che era in ricerca delle informazioni. Vi voglio far vedere cosa significa essere un autente autenticato
15:46
e guardare veramente all'interno del mio plone. Se io sono autenticato e clicco sulla home, vedo cosa contiene. Vedo che l'amministrazione,
16:00
novità, servizi e documenti dati sono delle pagine dei notizi in primo piano, invece una cartella, l'amministrazione trasparente che ho messo nel piede è un collegamento. Quando io ho potuto navigare nel plono che mi è stato consegnato, visualizzare questa cosa, vedere il piano editoriale, ovvero la struttura dell'informazione,
16:25
mi ha chiarito definitivamente come si lavora nel sito agito. Vi voglio fare un esempio di come si crea e modifica una pagina. Perché mi è capitato questa richiesta? Ho ricevuto una telefonata,
16:46
il referente dell'ufficio stampa mi ha detto, non riusciamo a trovare il link per seguire le sedute del Consiglio Comunale. Per favore, mi creai una pagina. Io ho detto, certamente, non ti preoccupare,
17:02
ci penso io. Allora, la richiesta era di mettere il link per raggiungere il programma di Civicam, quello che trasmette e indiferita il Consiglio Comunale in registrati. La prima cosa che ho dovuto fare
17:20
è fare uno sforzo e capire dove mettere questo link. Agit dice che il Consiglio Comunale, l'Agiunta, sta dentro un'artone di governo, che sta dentro amministrazione, quindi io sono entrata in un'artone di governo e ho operato per raggiungere questa pagina.
17:44
Quando ho premuto il bottone più, quello che mi permette appunto di aggiungere un nuovo elemento, mi si è aperto il box a destra con tutti i possibili tipi di contenuti permessi da daplona. Potevo aggiungere un argomento, una cartella, un collogamento,
18:01
un dataset, io sapevo già che l'elemento che mi serviva era una pagina, quindi io ho selezionato, aggiungi il pagina. Mi si è aperto quest'altoriore box in cui il cursor si è posizionato dove si è scritto il digital titolo. Contemporaneamente a destra è comparso la pagina a blocco. Vi ho voluto mostrare questo esempio
18:22
perché questo è una grossa novità rispetto a come siamo abituati a vedere plone. Ho potuto quindi subito digitare le informazioni con questa struttura presente nel blocco. Prima ho scritto il titolo,
18:43
ho seduto del consiglio, seguito ovviamente da un sottotitolo, una piccola descrizione, poi ho ritenuto opportuno aggiungere anche un'immagine e velocemente quindi ho ricercato l'immagine che mi serviva per caratterizzare questa pagina. Di fianco al blocco poi,
19:05
dopo aver inserito alcune informazioni nel blocco di testo, ho inserito anche il cosiddetto blocco immagine, perché volevo aggiungere l'immagine della Web TV, quella che vedete a destra,
19:25
ho selezionato allineamento di questa immagine, ho selezionato il tipo di dimensione, ho messo il link a Civicam ed ecco il risultato della pagina online in questo momento. Vi ho fatto questo esempio
19:43
perché secondo me è esplicito e vi fa capire chiaramente come in pochissimi minuti io abbia raggiunto l'obiettivo di pubblicare una pagina. È veramente molto facile e secondo me vi appassionerete a questo strumento. Come vedete dopo
20:02
io ho aggiunto anche il link all'ultimo Consiglio Comunale il 30 marzo e questo insomma è un'informazione in più. Lo stesso interlocutore che mi ha chiesto di aggiungere la pagina del Consiglio Perseguire in diretta al Consiglio Comunale mi ha detto, però potreste mica pubblicarmelo anche in un page,
20:25
vi arriveranno mille richieste di questo genere, perché nella mente delle persone se un elemento non è in un page non esiste. In questo caso ho ritenuto che fosse importante accettare di mettere un link in un page, perché riguarda anche la comunicazione.
20:44
Quindi ho pensato, qual è il posto migliore dove poter posizionare un link nel pie? Ho pensato, è corretto perché io ho anche una sezione che si chiama comunicazione, quindi ho inserito un link
21:01
segui la diretta del Consiglio Comunale con la funzione di Table Footer Setting. Anche questa operazione non mi ha impiegato più di cinque minuti di tempo. Quindi insomma abbiamo contentato il consigliere che non riusciva a leggere e a seguire il Consiglio Comunale.
21:23
L'utente anonimo che clicca su organi di governo vede una pagina di questo tipo, vede il link per aprire l'aggiunta, il Consiglio Comunale, le commissioni consigliari, come vedete anche la pagina che vi ho pieno mostrato, cioè le sedute del Consiglio Comunale.
21:45
Se vi aprontate a fare un sito web agit, dovete partire per prima cosa dalla caricare la struttura del comune. Caricare o anche se mi hanno immigrato i dati della vostra struttura
22:05
è il primo step da fare. Perché occorre avere gli uffici caricati? Perché tutta la struttura dei servizi si regge sul fatto che un servizio è erogato da un ufficio. Quindi armatevi di pazienza,
22:24
prendete la vostra pianta organica, il vostro doop e caricate nell'area degli uffici tutti i vostri uffici. Questo è un esempio che vi ho voluto portare, l'ufficio protocollo. L'ufficio protocollo
22:40
per caricare questa pagina vedete che c'è già chiaro, indicato quelli sono gli elementi che è possibile caricare. Oltre al titolo dell'ufficio protocollo, anche il cosa fa, la struttura, le persone,
23:00
vedete la struttura, il responsabile, l'assessore di riferimento, le persone che lavorano in questo ufficio e poi anche i servizi. I servizi non vengono caricati in questo momento, ma nel momento in cui io nell'area opportuna caricherò il servizio come fare
23:22
una segnalazione e metterò l'informazione che l'ufficio di riferimento, dell'attempimento come fare una segnalazione nell'ufficio protocollo, farà sì che questo servizio compaia poi nell'area dei servizi legata all'assettività. Vi faccio vedere
23:45
come è in chiaro, plone poi, dalla possibilità anche di geolocalizzare l'indirizzo dell'ufficio con anche gli orari di apertura, eccetera. Queste informazioni sicuramente
24:01
li avete anche nel vecchio sito. Quello che non l'avete nel vecchio sito è che legato a questa unità organizzativa, legato all'ufficio protocollo, poi trovate anche i documenti. Il modulo petizione, io non l'ho caricato in questa pagina, ma in qualche
24:21
area del nostro sito è stato caricato il modulo petizione e a questo modulo è stato scritto in modo obbligatorio che è l'ufficio che lo prepara, qual è l'ufficio di riferimento che prepara il modulo petizione? È l'ufficio protocollo. Quindi come vedete è tutta una correlazione di dati, non ci possiamo
24:43
sbagliare, il cittadino non si sbaglia più se ha bisogno del modulo petizione e non lo trova, però va direttamente a vedere che è l'ufficio responsabile, l'ufficio protocollo, quindi può mandare una mail oppure può insomma individuare sempre
25:02
chi è il referente a cui rivolgesi sia per un servizio sia anche per un banalissimo modulo che magari non è aggiornato o non è disponibile. Mi sto parlando sempre di servizio, servizio, servizio, servizio. Questa è la nomità culturale per noi della
25:22
pubblica amministrazione perché noi quando parliamo di servizio abbiamo in mente la pianta organica, i servizi demographici, il servizio protocollo, invece Agit dice che il servizio è il procedimento ovvero quello che l'ufficio fa, tutti i nostri
25:41
addentimenti. Il template del servizio ha un indice così come vi sto mostrando questa slide. Vi faccio un esempio di ricerca di servizio. Questo è il cercatore, la finestra del cercatore che si apre quando in altra destra, in home, premo la legge di
26:03
vendimento. Io ho fatto una ricerca per il servizio e ho scritto, ho digitato come fare una segnalazione. Sapevo già che era un servizio quindi nella sezione ho selezionato cercamelo tra i
26:22
servizi. Cosa ha fatto il mio plone? Mi ha restituito sette risultati. Il primo è come fare una segnalazione, ma mi ha restituito anche altri risultati perché questo potentissimo motore di ricerca mi ha restituito anche altre aree del sito
26:46
che contengono la parola segnalazione, fosse anche solo l'interno di un modulo. Quindi io come fare una segnalazione l'ho trovato, ho cliccato e vi mostro cosa intendo per
27:05
questi nostri procedimenti. Intanto se fate un nuovo sito web vi dovete rifare ai servizi Agit. Come fare una segnalazione
27:20
secondo Agit, può essere contenuto all'interno del servizio vita lavorativa. Infatti io l'ho caricato in vita lavorativa. Ho caricato il titolo, ho caricato la descrizione del servizio e poi vedete a destra in argomenti trovate la parola comunicazione. Questa è la modifica del servizio in edit.
27:45
In particolare l'ho fatto vedere a questa slide perché volevo che voi puntasse l'attenzione appunto sulla tabella sinistra come Agit ci guida a caricare queste pagine. Ci sono già
28:05
tutte le sezioni su cui noi possiamo caricare le nostre informazioni, i tempi e scadenze, i casi particolari, i documenti e i contatti. Questo fa sì che l'informazione
28:24
esca per tutti gli uffici comunali, per tutti i nostri procedimenti in modo omogeneo. Non possiamo sbagliarci e questo aiuta molto. Secondo me ci rende il lavoro molto più semplice. In basso l'ultimo valore che
28:42
vedete è la tassone ai miei argomenti, quello che vi ho indicato prima, comunicazione. Agit ci permette di aggiungere un piccolo tag, una parola chiave legato al procedimento che noi stiamo pubblicando. Secondo me come fare una
29:02
segnalazione rientrava tra gli argomenti di comunicazione e quindi ho selezionato come argomento comunicazione. Questo è un altro valore obbligatorio quando io sto
29:22
caricando un servizio. Il cosa serve? Vedete c'è il pallino rosso. Finalmente tutti siamo obbligati a scrivere in chiaro cosa devi fare se vuoi fare una segnalazione. Cosa serve? L'ufficio responsabile. Chi è? L'ufficio protocollo. Ecco vedete che si chiude il cerchio.
29:44
E' importantissimo, secondo me plone qua si è superato perché quando io inserisco come fare una segnalazione e servizio, mi trovo già la cartella modulistica precaricata, una cartella nella quale io posso uploadare
30:04
velocemente il modulo per la segnalazione, il modulo che magari io avevo salvato sul mio pc, eccetera. Vedete cosa vede il cittadino? Il cittadino che sta leggendo la pagina dopo i contatti, cioè l'ufficio
30:20
protocollo referente del servizio come fare una segnalazione, troverà il modulo per segnalazione con la sua bella graffetta e questo fa sì che sia chiaro che questo modulo scaricabile che mi può servire per fare la segnalazione, non devo stare
30:41
a leggere mille pagine perché in fondo lo trovo speditamente. Vi ho parlato degli argomenti. Gli argomenti rispondono alle esigenze di organizzazione dei contenuti del sito. Sono una novità, io ci ho messo una marea di tempo a capire quando navigavo sul
31:07
sito, avere le informazioni per argomento in verità è molto efficiente quando ci permette di visualizzare
31:21
attraverso una pagina di argomento, in questo caso associazione, i servizi che io ho collegato al tag associazione con anche l'ufficio di riferimento di questo argomento. Per ultimo, ma è solamente
31:48
un caso, ho messo il riferimento alla formazione. Non mi dimenticherò mai di ripetere a chi mi chiede
32:00
ma come hai fatto a fare questo sito in così poco tempo, è stato facile, è stato difficile. La risposta è che la motivazione e la determinazione sono importanti, ma senza la formazione mia e dei miei editor non avremmo aggiunto il risultato ottenuto
32:22
in così breve tempo. Quindi un applauso ai ragazzi della rettartle, di cui ho rubato questa diapositiva perché è veramente sempre una questione di apprendimento. Grazie.
Recommendations
Series of 10 media
Series of 6 media