linee guida di design per i servizi web della pa · linee guida di design per i servizi web della...

Linee guida di design per i servizi webdella PA

Release 20171

CC-BY 30 - Agenzia per lrsquoItalia Digitale

29 set 2017

Indice

1 Introduzione alle linee guida di design 111 I cittadini al centro 112 Sviluppo collaborativo 113 Sviluppo programmato 214 Version control e release della documentazione 215 Stile della documentazione 216 Consultazione della documentazione 217 Kit di sviluppo e di design 3

2 Service design 521 Accessibilitagrave 522 Normativa 723 Design management 11

3 Content design 1331 Architettura dellrsquoinformazione 1332 SEO 1833 Linguaggio 25

4 User research 3341 Usabilitagrave 3342 Ricerche qualitative 3543 Web analytics 36

5 User interface 4151 Principi 4152 Stile 4353 Layout 5054 Componenti 52

i

ii

CAPITOLO 1

Introduzione alle linee guida di design

I cittadini al centro

Designers Italia considera le effettive esigenze degli utenti come punto di partenza per pensare costruire e migliorarei servizi digitali Grazie allrsquoapproccio human-centered egrave possibile

bull coinvolgere cittadini e operatori in ogni momento del percorso progettuale per capire le loro necessitagrave generareidee e validare le scelte progettuali in corso drsquoopera

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

bull disegnare e sviluppare flussi di interazione chiari che rispondano con efficacia alle necessitagrave dei diversi utentigenerando unrsquoesperienza drsquouso positiva

bull strutturare i contenuti in modo semplice con uno stile comunicativo coerente e una strategia editorialesostenibile nel tempo

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

Sviluppo collaborativo

Le linee guida sono un documento pubblico e chiunque puograve partecipare al processo di revisione e aggiornamentoattraverso gli strumenti messi a disposizione attraverso GitHub in particolare le issues (per le discussioni) e le pullrequest (per le proposte di modifica)

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

Altre risorse per lrsquoediting in formato rst

1

Linee guida di design per i servizi web della PA Release 20171

Editor per il testoEditor per le tabelleEstensione Chrome per Google spreadheetAltro

Sviluppo programmato

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

Version control e release della documentazione

Le linee guida beneficiano del version control system di GitHub per cui esiste una traccia pubblica di tutte le modificheeffettuate e dei relativi autori Le linee guida di design adottano un sistema di release basato sui tag di GitHub Ognirelease egrave etichettata secondo un sistema basato su anno e versione Le versioni sono espresse attraverso un numeroprogressivo Il sistema delle release egrave in vigore dal 2017 quindi la prima release delle linee guida egrave 20171 (primarelease del 2017) I nuovi contenuti e le modifiche a contenuti esistenti dopo essere approvati vengono pubblicatinella versione latest delle linee guida disponibile per una discussione pubblica e revisione da parte della communityma priva di valore ufficiale Solo successivamente in occasione di una nuova release delle linee guida il team diDesigners Italia decide di consolidarle e farle confluire dopo eventuali modifiche nella versione ufficiale stable dellelinee guida

Stile della documentazione

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

bull linguaggio semplice e comprensibile ad un pubblico ampio

bull brevitagrave e uso di elenchi

bull ricorso ad esempi meglio se supportati da immagini e link

Nella guida usiamo delle etichette per evidenziare alcuni passaggi specificando se lrsquoapplicazione della indicazione egraveobbligatoria o facoltativa come segue

bull si deve (devi)

bull si puograve (puoi)

bull si dovrebbe (dovresti)

bull best practice

Consultazione della documentazione

La documentazione egrave disponibile su Docs Italia la piattaforma di gestione della documentazione pubblica creatada Team per la Trasformazione Digitale Le funzioni di hosting e di ricerca sono basate su Readhtedocs e la documen-tazione viene pubblicata attraverso il tool Sphinx e il linguaggio RST Tutti i documenti di Docs Italia possono esserefruiti anche in formato epub e pdf

2 Capitolo 1 Introduzione alle linee guida di design


Kit di sviluppo e di design

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

17 Kit di sviluppo e di design 3



CAPITOLO 2

Service design

Con lrsquoadozione delle metodologie di service design si intende migliorare la progettazione e quindi le caratteristichedi un servizio orientando funzionalitagrave processi e componenti intorno alle effettive esigenze degli utenti Il serviziodigitale erogato deve essere di facile utilizzo eventualmente corredato da un contesto di informazioni sintetiche echiare

Accessibilitagrave

SI DEVE

Le pubbliche amministrazioni devono rispettare i requisiti tecnici di accessibilitagrave riportati nellrsquoAllegato A del DecretoMinisteriale 8 luglio 2005 e successive modifiche

Definizione

Lo sviluppo di soluzioni ICT hardware software web-based per la PA ha come requisito fondamentale lrsquoaccessibilitagrave

La normativa sancisce che tutte le persone devono poter usare applicazioni software siti Web servizi on line appdocumenti elettronici indipendentemente da eventuali limitazioni ad esempio limitazioni fisiche tecnologiche oambientali

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

Creare un sito accessibile

Lrsquoaccessibilitagrave egrave una qualitagrave che riguarda piugrave aspetti di un sito web e di un software in generale e va considerata indiversi momenti dello sviluppo da diverse figure professionali

bull Aspetto e contenuto (visual e content)

5


bull Struttura (develop)

bull Comportamento (interaction)

Il Decreto Ministeriale del 20 marzo 2013 individua i 12 requisiti da rispettare che derivano da principi internazionaliPer essere a norma il sito web di una PA deve soddisfare tutti i controlli WCAG 20 fino al livello AA In questa paginaforniamo un elenco degli errori piugrave comuni che limitano o impediscono lrsquoaccesso alle informazioni in un determinatocontesto

Aspetto

bull Contrasto tra primo piano e sfondo il testo e il relativo sfondo (compreso il testo contenuto nelle immagini)devono rispettare un preciso rapporto di contrasto basato su un algoritmo I logotipi il testo di grandi dimensioni(18 punti o 14 grassetto) e il testo volutamente reso poco visibile (es azioni inattive) non rientrano in questocontrollo

bull Forma e colore le informazioni che veicola una pagina non devono dipendere unicamente da aspetto formacolore dimensione ubicazione visiva orientamento o suono Di seguito esempi di alcuni tra i piugrave comuni errori

ndash Identificare il contenuto solo dalla forma o dal colore

ndash Usare unicamente simboli grafici per veicolare informazioni

ndash Creare link che sono solamente di un colore diverso dal testo

ndash Nei moduli online la segnalazione dei campi obbligatori mancanti effettuata solo tramite il colore

bull Tempo sufficiente deve essere possibile rimuovere il limite di tempo di visualizzazione di un oggetto nellapagina o regolarne la scadenza o estenderla facilmente prima del termine Ad esempio attenzione a pubblicareun contenuto che ldquoscorrerdquo come un carousel di notizie

bull Oggetti lampeggianti le pagine Web non devono contenere nulla che lampeggi per piugrave di tre volte al secondo

bull Contenuti audio se un contenuto audio allrsquointerno di una pagina Web egrave eseguito automaticamente per piugrave ditre secondi allora deve essere fornita una funzionalitagrave per metterlo in pausa o interromperlo

Struttura

bull Link e controlli il codice del contenuto Web (es HTML) va usato secondo le specifiche (es un titolo egrave un Hn)e vanno esplicitate le relazioni tra elementi (es i campi devono essere legati alle loro etichette)

bull Alternative a oggetti non testuali tutti gli elementi non testuali come immagini grafici infografiche video eaudio devono avere unrsquoalternativa testuale equivalente quando veicolano un significato unrsquoinformazione o unafunzione come ad esempio il testo presente in un banner o in un bottone Fare attenzione soprattutto ai controllidi verifica antispam (es CAPTCHA)

bull Ingrandimento il testo si deve poter ingrandire del 200 senza perdita di contenuto o funzionalitagrave e quindisenza sovrapposizioni di elementi che lo rendano incomprensibile

Comportamento

bull Link e controlli tutti i componenti dellrsquointerfaccia si devono poter utilizzare tramite comandi da tastieraanalogamente a quanto si riesce a fare col mouse Risulta quindi errato

ndash Permettere lrsquointerazione con link campi di un form menu bottoni solo tramite lrsquouso del mouse

ndash Spostare il focus della tastiera dagli elementi nella pagina quando questi lo ricevono o si aggiornano

6 Capitolo 2 Service design


bull Valore ruolo e stato egrave meglio utilizzare i componenti standard dellrsquoHTML e rendere maggiormente ldquovisibilirdquogli elementi che ricevono il focus Se si utilizzano componenti non standard verificare che valore ruolo e statodegli elementi siano sempre resi disponibili allrsquoutente in particolare alle tecnologie assistive (vedi WAI ARIA)

Un esempio per capire uso del colore

Il colore non puograve essere usato come unico mezzo per veicolare unrsquoinformazione Quindi ad esempio egrave sbagliatoindicare ldquoin rosso le informazioni obbligatorie in verde quelle accessorierdquo percheacute non tutti potrebbero essere in gradodi percepire la differenza di colore in contesti di fruizione diversi ma molto frequenti ad es

bull da smartphone o tablet di giorno e allrsquoaperto

bull una stampa in bianco e nero della pagina web

bull una pagina web videoproiettata

bull in caso di daltonismo (5-8 popolazione maschile)

Per comunicare unrsquoinformazione quindi oltre al colore egrave necessario aggiungere un elemento testuale o grafico unsimbolo o un bordo

Normativa

La normativa completa e aggiornata sullrsquoaccessibilitagrave egrave disponibile sul sito dellrsquoAgenzia per lrsquoItalia digitale

Obiettivi accessibilitagrave

Entro il 31 marzo di ogni anno le pubbliche amministrazioni devono pubblicare nei propri siti web gli ldquoObiettivi diaccessibilitagrave per lrsquoanno correnterdquo LrsquoAgenzia per lrsquoItalia digitale ha predisposto unrsquoapplicazione on line per riceve-re dalle amministrazioni gli Obiettivi di accessibilitagrave Gli obiettivi vanno pubblicati sui siti delle PA nella sezioneldquoamministrazione trasparenteAltri contenutiAccessibilitagrave e Catalogo di dati metadati e banche datirdquo

Normativa

Contenuti minimi dei siti della PA

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

Siti web istituzionali

Amministrazione trasparente

Inserire nella home page una sezione denominata ldquoAmministrazione trasparenterdquo contenente una struttura previstadallrsquoallegato A del decreto Ersquo necessario inserire la voce ldquoAmministrazione trasparenterdquo preferibilmente in unaposizione che ne garantisca il raggiungimento da tutte le pagine interne del sito (es nel footer)

bull Riferimento normativo art 9 DECRETO LEGISLATIVO 14 marzo 2013 n 33

bull Riferimento UI Homepagefooter

22 Normativa 7


Pubblicitagrave legale

Posizionare nella home page un collegamento allrsquoarea in cui si effettua la pubblicitagrave legale identificandola con ladicitura ldquoPubblicitagrave legalerdquo oppure ove previsto dalle specifiche normative ldquoAlbo pretoriordquo (es amministrazionilocali) o semplicemente ldquoAlbordquo (es istituzioni scolastiche)

bull Riferimento normativo art 32 LEGGE 18 giugno 2009 n 69

bull Riferimento UI Homepage sezione ldquoPubblicitagrave legalerdquo

Partita IVA

La partita IVA deve essere pubblicata in home page per tutti i soggetti titolari di partita IVA Si consiglia di inseriretale informazione allrsquointerno del blocco di contenuti nel footer di pagina contenente i dati di contatto

bull Riferimento normativo art 35 DPR n 6331972 comma 1


PEC

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



Trattamento dati personali

Individuazione delle modalitagrave semplificate per lrsquoinformativa e lrsquoacquisizione del consenso per lrsquouso dei cookie - Bannerper la richiesta di consenso allrsquouso dei cookie e pagina per informazioni sui cookie

bull Riferimento normativo Garante per la protezione dei dati personali - Provvedimento dellrsquo8 maggio 2014 -Gazzetta Ufficiale n 126 del 3 giugno 2014


Informativa trattamento dati personali - Informativa sul trattamento dei dati personali mediante link ldquoPrivacyrdquo

bull Riferimento normativo Decreto legislativo 30 giugno 2003 n196


Codice dellrsquoamministrazione digitale

Decreto legislativo 7 marzo 2005 n82

1 Obblighi di pubblicazione di dati e le informazioni strumentali allrsquoutilizzo degli strumenti di pagamentoelettronico (art5)

2 Comunicazioni tra imprese e amministrazioni (art 5 bis) la presentazione di istanze dichiarazioni dati elo scambio di informazioni e documenti (anche a fini statistici) tra imprese e PA (e viceversa) avviene soloutilizzando tecnologie ICT

3 Qualitagrave dei servizi resi e soddisfazione dellrsquoutenza (art 7) i soggetti rientranti nellrsquoambito di applicazione delCAD consentono agli utenti di esprimere la soddisfazione rispetto alla qualitagrave anche in termini di fruibilitagraveaccessibilitagrave e tempestivitagrave del servizio reso allrsquoutente stesso e pubblicano sui propri siti i dati risultanti iviincluse le statistiche di utilizzo

4 Partecipazione democratica elettronica viene favorita anche attraverso lrsquoutilizzo di forme di consultazionepreventiva per via telematica sugli schemi di atto da adottare (art9)



5 Siti Internet delle pubbliche amministrazioni individuazione dei principi secondo cui devono essere costruiti(Art 53)

6 Siti pubblici e trasparenza (art 54) obblighi di pubblicazione in ldquoAmministrazione trasparenterdquo (rinvio a dlgs332013)

7 Validitagrave dei documenti informatici (art 22 23 23-bis 23-ter) validitagrave delle copie informatiche di documenticon riferimento preciso circa le diverse possibilitagrave (copia digitale del documento cartaceo duplicazione digitaleecc)

8 Conservazione digitale dei documenti (artt 43-44 bis) gestione della conservazione dei documenti e del relativoprocesso da parte di un Responsabile della conservazione che si puograve avvalere di soggetti pubblici o privati cheoffrono idonee garanzie

9 Decreto del Presidente del Consiglio dei Ministri 3 dicembre 2013 Regole tecniche in materia di protocolloinformatico ai sensi del CAD (particolare rilievo assumono gli obblighi di pubblicazione a carico delle PAdi cui allrsquoart 5 comma 3 relativamente al manuale di gestione da art 18 commi 2 e 3 circa lrsquoindirizzodella casella di posta elettronica certificata direttamente associata al registro di protocollo da utilizzare per laprotocollazione e gli altri indirizzi di posta elettronica istituiti)

10 Decreto del Presidente del Consiglio dei Ministri 13 novembre 2014 Regole tecniche in materia di formazio-ne trasmissione copia duplicazione riproduzione e validazione temporale dei documenti informatici noncheacutedi formazione e conservazione dei documenti informatici delle pubbliche amministrazioni ai sensi del CAD(particolare rilievo assume obbligo di pubblicazione a carico delle PA di cui allrsquoart 10 per cui ai fini della tra-smissione telematica di documenti amministrativi informatici le PA pubblicano sui loro siti gli standard tecnicidi riferimento le codifiche utilizzate e le specifiche per lo sviluppo degli applicativi software di colloquio)

11 Organizzazione e finalitagrave dei servizi in rete (art63) adeguata progettazione dei servizi in rete correlata allrsquoa-dozione di strumenti idonei alla rilevazione immediata continua e sicura del giudizio dei propri ldquoclientirdquo suiservizi online

12 Dati identificativi delle questioni pendenti dinanzi autoritagrave giudiziaria di ogni ordine e grado (art56) Inseri-mento dei dati identificativi delle questioni pendenti noncheacute delle sentenze e delle altre decisioni del giudiceamministrativo e contabile [ ] anche nel sistema informativo interno e sul sito istituzionale osservando lecautele previste dalla normativa in materia di tutela dei dati personali

13 Trasmissione delle informazioni via web (art 58) le PA non possono richiedere informazioni di cui giagravedispongono Le banche dati predisporranno apposite convenzioni aperte per assicurare lrsquoaccessibilitagrave delleinformazioni in proprio possesso da parte delle altre amministrazioni

14 Istanze e dichiarazioni presentate alle pubbliche amministrazioni per via telematica (art 65)

15 Open data (artt 52 e 68) responsabilitagrave delle PA nellrsquoaggiornare divulgare e permettere la valorizzazione deidati pubblici secondo principi di open government

Riferimenti normativi tematici

Accessibilitagrave

1 Legge 9 gennaio 2004 n 4 Disposizioni per favorire lrsquoaccesso dei soggetti disabili agli strumenti informatici

2 Decreto del Presidente della Repubblica 1 marzo 2005 n 75 Regolamento di attuazione della Legge per favorirelrsquoaccesso dei soggetti disabili agli strumenti informatici

3 Decreto Ministeriale 8 luglio 2005 Requisiti tecnici e i diversi livelli per lrsquoaccessibilitagrave agli strumenti informaticied allegati in particolare

(a) allegato A Aggiornamento dei requisiti tecnici allo standard internazionale ISO 405002012 (W3C WCAG20) livello ldquoAArdquo Decreto 20 marzo 2013 del Ministero dellrsquoIstruzione dellrsquoUniversitagrave e della Ricerca

22 Normativa 9


recante ldquoModifiche allrsquoallegato A del decreto 8 luglio 2005 del Ministro per lrsquoinnovazione e le tecnologierecante laquoRequisiti tecnici e i diversi livelli per lrsquoaccessibilitagraversquo agli strumenti informaticiraquordquo (GU SerieGenerale n 217 del 16-09-2013)

(b) allegato B Metodologia e criteri di valutazione per la verifica soggettiva dellrsquoaccessibilitagrave delle applicazionibasate su tecnologie internet

4 Decreto-legge 18 ottobre 2012 n 179 (convertito con modificazioni dalla L 17 dicembre 2012 n 221) allrsquoart9 (Documenti informatici dati di tipo aperto e inclusione digitale) egrave stato previsto tra lrsquoaltro lrsquoobbligo perle amministrazioni pubbliche [] di pubblicare nel proprio sito web gli obiettivi di accessibilitagrave per lrsquoannocorrente e lo stato di attuazione del ldquopiano per lrsquoutilizzo del telelavorordquo nella propria organizzazione

5 Circolare n 612013 dellrsquoAgenzia per lrsquoItalia Digitale ldquoDisposizioni del decreto legge 18 ottobre 2012 n 179convertito con modificazioni dalla legge 17 dicembre 2012 n 221 in tema di accessibilitagrave dei siti web e serviziinformatici Obblighi delle pubbliche Amministrazionirdquo

6 Circolare n 12016 dellrsquoAgenzia per lrsquoItalia Digitale relativa allrsquoobbligo di pubblicazione sul sito web degliobiettivi annuali di accessibilitagrave

7 Guida pratica per la creazione di un documento accessibile documento esplicativo redatto a cura dellrsquoAgenziaper lrsquoItalia digitale come ausilio alla creazione di documenti accessibili pubblicabili online sui siti web pubblici

Trasparenza

1 Legge 7 agosto 2015 n 124 recante ldquoDisposizioni per garantire ai cittadini di accedere a tutti i dati idocumenti ed i servizi in modalitagrave digitalerdquo

2 Legge 7 agosto 1990 n 241 ldquoNuove norme in materia di procedimento amministrativo e di diritto di accessoai documenti amministrativirdquo Lrsquoart2 stabilisce tra lrsquoaltro che per ciascun procedimento sul sito internet istitu-zionale dellrsquoamministrazione egrave pubblicata in formato tabellare e con collegamento ben visibile nella homepagelrsquoindicazione del soggetto a cui egrave attribuito il potere sostitutivo e a cui lrsquointeressato puograve rivolgersi

3 Legge 18 giugno 2009 n 69 ldquoDisposizioni per lo sviluppo economico la semplificazione la competitivitagravenoncheacute in materia di processo civilerdquo in particolare lrsquoarticolo 21 ldquoTrasparenza sulle retribuzioni dei dirigenti esui tassi di assenza e di maggiore presenza del personalerdquo

4 Legge n 190 2012 ldquoDisposizioni per la prevenzione e la repressione della corruzione e dellrsquoillegalitagrave nellaPubblica Amministrazionerdquo incluse le ldquoSpecifiche tecniche per la pubblicazione dei dati ai sensi dellrsquoart 1comma 32 Legge n 1902012rdquo di ANAC - versione 12 di gennaio 2016

5 Decreto legislativo 14 marzo 2013 n 33 Riordino della disciplina riguardante il diritto di accesso civico e gliobblighi di pubblicitagrave trasparenza e diffusione di informazioni da parte delle pubbliche amministrazioni

6 Determinazione ANAC n 62015 Linee guida in materia di tutela del dipendente pubblico che segnala illeciti(cd whistleblower)


8 Delibera ANAC n 39 del 20 gennaio 2016 sullrsquoassolvimento degli obblighi di pubblicazione e di trasmissionedelle informazioni allrsquoAutoritagrave Nazionale Anticorruzione ai sensi dellrsquoart 1 comma 32 della legge n 1902012

9 Decreto legislativo 18 aprile 2016 n 50 ldquoCodice dei contratti pubblicirdquo (vigente) lrsquoart 29 reca la disciplinariguardante Principi in materia di trasparenza (perciograve si coordina con Decreto legislativo n 332013)

10 Delibera ANAC n 1309 del 28122016 Linee guida operative sullrsquoattuazione dellrsquoaccesso civico generalizzato(FOIA) Esclusioni e Limiti

11 Delibera ANAC n 1310 del 28122016 Prime linee guida recanti indicazioni sullrsquoattuazione degli obblighidi pubblicitagrave trasparenza e diffusione di informazioni contenute nel dlgs 332013 come modificato dal dlgs972016



Privacy

Dal Garante per la protezione dei dati personali

1 Decreto legislativo 30 giugno 2003 n 196 Codice in materia di protezione dei dati personali (cd Codice dellaPrivacy)

2 Deliberazione del 15 maggio 2014 n 243 Linee guida in materia di trattamento di dati personali contenutianche in atti e documenti amministrativi effettuato per finalitagrave di pubblicitagrave e trasparenza sul web da soggettipubblici e da altri enti obbligati

3 Individuazione delle modalitagrave semplificate per lrsquoinformativa e lrsquoacquisizione del consenso per lrsquouso dei cookierdquodelllsquo8 maggio 2014

Comunicazione pubblica

1 Legge 7 giugno 2000 n 150 Disciplina delle attivitagrave di informazione e di comunicazione delle pubblicheamministrazioni

Design management

In arrivo secondo roadmap pubblica

23 Design management 11



CAPITOLO 3

Content design

La sezione content design della guida affronta i temi legati agli ambienti informativi in cui si muove lrsquoutente chefruisce servizi digitali In particolare si occupa della search engine optimization del linguaggio e della gestione deicontenuti e infine della loro organizzazione (architettura dellrsquoinformazione)

Architettura dellrsquoinformazione

Lrsquoarchitettura dellrsquoinformazione consiste nellrsquoorganizzazione semantica e logica di ambienti informativi sia fisicisia digitali e serve a rendere i servizi pubblici piugrave facili da trovare da capire e da usare Una buona architetturadellrsquoinformazione aiuta le persone a comprendere ciograve che le circonda e a trovare ciograve che cercano sia online cheoffline Lavorare su questo ambito implica una seria riflessione sulla struttura dellrsquoinformazione e sul linguaggioLrsquoarchitettura dellrsquoinformazione egrave piugrave efficace se egrave progettata intorno ai reali bisogni delle persone per questo si parladi user-centered design

Nel corso dei prossimi mesi pubblicheremo secondo roadmap alcuni approfondimenti relativi a tutti i principali temilegati allrsquoarchitettura dellrsquoinformazione e in particolare la prototipazione attraverso il wireframing e lrsquointeractivewireframing le strutture di navigazione le logiche di classificazione dei contenuti e le relazioni tra contenuti laprogettazione di interazioni specifiche come la home page di un sito web e la pagina di ricerca

Lrsquoambito

Per progettare lrsquoarchitettura dellrsquoinformazione di un ambiente informativo egrave necessario analizzare

bull gli utenti

bull i contenuti

bull il contesto

Il processo di progettazione dellrsquoarchitettura dellrsquoinformazione di un sito web parte dallrsquoanalisi degli utenti del conte-nuto del sito e del contesto nel quale si opera Questo processo porta allrsquoindividuazione dei contenuti imprescindibilidel progetto web

13


Fig 31 Architettura dellrsquoinformazione

Progettare lrsquoarchitettura dellrsquoinformazione significa soddisfare i bisogni degli utenti creando contenuti utili e rilevantiche possano adattarsi al contesto di fruizione Grazie alla ricerca sugli utenti e allrsquoanalisi del contesto egrave possibiledefinire le funzioni principali del sito e di ogni sua pagina I contenuti diventano quindi parte integrante del servizioallrsquoutente

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

bull identificare lrsquoutente

bull consentire la prenotazioneiscrizione

bull consentire il pagamento (e piugrave in generale scambiare denaro)

bull informare regolamentare

bull interagire comunicare con lrsquoutente

bull archiviareconservare informazioni

bull proporre un lavoro a persone e aziende

bull autorizzare lrsquoutente a fare qualcosa

Gli utenti

Lrsquoanalisi delle esigenze informative e dei comportamenti di navigazione degli utenti contribuisce alla progettazione diunrsquoefficace architettura dellrsquoinformazione Per analizzare il tipo di pubblico del sito web egrave necessario definire

bull i target principali a cui si rivolge lrsquoinformazione o il servizio

bull i bisogni ovvero le necessitagrave informative e operative degli utenti

bull le principali attivitagrave che gli utenti intendono effettuare

14 Capitolo 3 Content design


Egrave bene prendere decisioni sulla base dellrsquoanalisi dei dati riferiti allrsquoutente in particolare i dati statistici di navigazionesul sito per comprendere il comportamento dellrsquoutente la realizzazione di interviste e altri metodi di analisi qualitativalrsquoesperienza e la competenza generale di navigazione dellrsquoutente target

Il contenuto

Per contenuto si intendono le informazioni veicolate da documenti applicazioni servizi e metadati che si trovanoallrsquointerno del sito web o che verranno creati in futuro Per analizzare il contenuto disponibile e per progettare icontenuti da sviluppare egrave necessario definire

bull i documentidati disponibili

bull le tipologie dei documentidati

bull lrsquooggetto dei contenuti disponibili

bull lrsquoaggiornamento dei documenti disponibili

bull la quantitagrave dei contenuti disponibili

bull le strutture esistenti

bull lrsquoownership dei contenuti

bull i metadati

bull i formati

bull il tasso di crescita previsto

Spesso lrsquoesito di questa analisi determina quella che viene definita una gap analysis che evidenzia i contenuti presentiattualmente sul sito e quelli che dovranno essere prodotti modificati eliminati nella nuova versione del sito

Il contesto

Nella progettazione di un sito web lrsquoarchitettura dellrsquoinformazione deve necessariamente adattarsi al contesto di rife-rimento per essere coerente con gli obiettivi la strategia e la ldquoculturardquo dellrsquoorganizzazione Per analizzare il contestoegrave necessario quindi considerare e definire

bull Gli obiettivi strategici dellrsquoAmministrazione

bull Le risorse economiche disponibili

bull Le direttivenorme vigenti che vincolano il progetto

bull la ldquoculturardquo dellrsquoamministrazione intesa anche come la propensione al cambiamento

bull lrsquoambito tecnologico

bull le risorse umane coinvolte nel progetto e le loro competenze tecniche

bull i limiti operativi relativi ad esempio alla logistica alla sicurezza

Dai bisogni degli utenti alle funzioni di un servizio digitale

La progettazione dellrsquoarchitettura dellrsquoinformazione di un ambiente digitale si fonda su alcune conoscenze relative alcontesto e alle persone che usano il servizio che possono essere sintetizzate in alcuni strumenti operativi descrittinella sezione dedicata al service design

bull personas profili verosimili di utenti del servizio delineati in base ai risultati della ricerca rappresentativi di ungruppo di utenti (approfondisci Kit Personas)

31 Architettura dellrsquoinformazione 15


bull user stories e scenari (azioni e circostanze in cui lrsquoutente si trova a prendere decisioni e a effettuare scelte chelo portano a interagire con lrsquoambiente e le informazioni per raggiungere un obiettivo)

bull journey map (rappresentazione del percorso compiuto dallrsquoutente interagendo con i touchpoint fisici o digitalidel servizio elaborate a partire da personas e user stories)

Questi elementi ci aiutano a concentrarci sugli utilizzatori del servizio assumere il loro punto di vista e avere una listachiara dei loro bisogni (evidenziando prioritagrave e possibili criticitagrave)

Le funzioni di un sito o di un servizio digitale

I siti web non sono tutti uguali e il motivo egrave che assolvono a funzioni diverse alcuni hanno come scopo principalevendere un prodotto altri servono ad aggiornare lrsquoutente con notizie dellrsquoultimrsquoora altri ancora consentono di con-sultare lrsquoestratto conto bancario o la propria posizione pensionistica Analizzando le funzioni dei siti web egrave possibileraggrupparli in famiglie o tipologie di siti

Quello di ldquofunzioni narrativerdquo egrave un concetto che lrsquoarchitettura dellrsquoinformazione mutua dalla teoria del testo dallasemiotica e dalla linguistica ed egrave molto utile per mettere a fuoco su cosa deve puntare il nostro sito e a quale famigliadi siti deve ispirarsi Le ldquofunzionirdquo non sono altro che le azioni principali che gli utilizzatori del sito web (le personasdescritte in precedenza) vogliono o devono compiere

Stabilire le prioritagrave

Dopo aver capito il concetto di funzioni il gioco egrave tutto nellrsquoavere un forte senso delle prioritagrave Se siamo bravi achiarire le due o tre funzioni principali del nostro sito il lavoro di progettazione procederagrave spedito ed eviteremo errorigrossolani o fraintendimenti Per esempio se la funzione principale di un sito web egrave permettere la consultazione diun vasto catalogo di open data la progettazione del motore di ricerca dovragrave avere estrema importanza sia in termini diuser experience sia in termini di investimenti tecnologici

Avere le idee chiare sulle funzioni che dovragrave avere il nostro sito ci permette anche di individuare due o tre siti web ldquogiu-stirdquo da analizzare e da cui trarre ispirazione senza disperdere energie nella consultazione di decine di siti o app Trovarei giusti esempi da analizzare puograve portare a risparmiare diversi giorni o anche settimane nel processo di progettazione

Definire la funzione principale

Lo sforzo linguistico necessario per esprimere in unrsquounica frase quale sia la funzione principale del servizio che si starealizzando egrave il modo piugrave efficace per non perdere di vista lrsquoobiettivo nelle successive fasi di progettazione Saragrave ancheun utile criterio per valutare lrsquoefficacia del lavoro una volta terminato

Per esempio applicando questo metodo al sito OpenCantieri potremmo dire che la funzione principale a cui assolveil sito egrave presentare unrsquoinformazione aperta completa e aggiornata sul processo di realizzazione delle infrastrutturepubbliche

Individuare le funzioni a partire dalla lista dei bisogni

Le funzioni di un sito web servono a rispondere ai bisogni degli utenti Un modo semplice per mapparle egrave creare unatabella che mette in relazione bisogni e funzioni Nel formulare le funzioni occorre tenere presente che si tratta diazioni per essere sicuri di individuarle e formularle in modo corretto puograve essere una buona strategia iniziare le frasicon un verbo

Per esempio se uno dei bisogni individuato egrave ldquocome cambiare lrsquoindirizzo di residenzardquo una funzione potrebbe essereldquomostrare la lista dei servizi dellrsquoanagrafe relativi alla residenzardquo



Bisogni FunzioniCome cambiare lrsquoindirizzo di residenza Mostrare la lista dei servizi dellrsquoanagrafe relativi

alla residenzaTrovare gli orari di apertura al pubblico degli uffici percambiare lrsquoindirizzo di residenza

Mostrare una vista sintetica con le informazioni dicontatto dellrsquoufficio anagrafe

Una volta individuate le macro-funzioni per la lista dei bisogni si puograve procedere con lrsquoindividuazione delle sotto-funzioni che descrivono in maniera piugrave puntuale le azioni che il sistema dovragrave compiere per completare una macro-funzione

Bisogni Macro-Funzioni Sotto-FunzioniCome cambiare lrsquoindirizzo di resi-denza

Mostrare la lista dei servizi dellrsquoa-nagrafe relativi alla residenza bull Individua i servizi relativi

allrsquoarea anagrafebull Seleziona i servizi dellrsquoarea

anagrafe relativi alla residen-za

bull Estrae i titoli dei contenuti in-dividuati e mostra una lista inordine alfabetico

Trovare gli orari di apertura alpubblico degli uffici per cambiarelrsquoindirizzo di residenza

Mostrare una vista sintetica contutte le informazioni di contattodellrsquoufficio anagrafe

bull Individua i contatti associatiallrsquoufficio specificato

bull Individua gli orari associati aldeterminato ufficio

bull Estrae il titolo dal nome del-lrsquoufficio selezionato e mostrauna vista con tutti i contenuti

Individuare le funzioni di front end e back end

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

Per cominciare a delineare le funzioni del back end la domanda da porsi egrave ldquocosa deve succedere nel back end percheacutenel front end sia possibile una determinata azionerdquo



Bisogni Funzioni Front End Back EndCome cambiare lrsquoindiriz-zo di residenza

Mostrare la lista dei ser-vizi dellrsquoanagrafe relativialla residenza

bull Individua i servi-zi relativi allrsquoareaanagrafe

bull Seleziona i servi-zi dellrsquoarea anagra-fe relativi alla resi-denza

bull Estrae i titoli deicontenuti indi-viduati e mostrauna lista in ordinealfabetico

bull Permette di associa-re dei contenuti allacategoria anagrafe

bull Ordina in ordine al-fabetico crescente icontenuti in base altitolo

Trovare gli orari di apertu-ra al pubblico degli ufficiper cambiare lrsquoindirizzo diresidenza

Mostrare una vista sinteti-ca con tutte le informazio-ni di contatto dellrsquoufficioanagrafe

bull Individua i contattiassociati allrsquoufficiospecificato

bull Individua gli orariassociati al determi-nato ufficio

bull Estrae il titolo dalnome dellrsquoufficioselezionato e mo-stra una vista contutti i contenuti

bull Permette di associa-re dei contatti al-lrsquoufficio selezionato

bull

SEO

Premessa

Questa guida ha lo scopo di aiutare chi si occupa del sito web di una pubblica amministrazione a capire come otti-mizzare i contenuti pubblicati e la struttura del sito nel suo complesso in ottica SEO con lrsquoobiettivo finale di rendereinformazioni e servizi piugrave idonei a soddisfare i bisogni degli utenti e piugrave visibili sui motori di ricerca

Introduzione

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

I fattori di ottimizzazione vengono generalmente suddivisi in 2 categorie

bull fattori on-page cioegrave eseguibili allrsquointerno del sito

bull fattori off-page cioegrave eseguibili al di fuori del sito

I fattori on-page



Titolo del contenuto

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

Egrave consigliabile creare titoli univoci il piugrave possibile pertinenti rispetto al contenuto della pagina un titolo dovrebbeessere composto da poche parole o una frase evitando di superare i 6070 caratteri (spazi inclusi)

Markup Il metatag title deve essere posizionato allrsquointerno del tag head nel codice HTML della pagina Appare comeprima linea testuale del risultato dei motori di ricerca

bull aiuta gli utenti a comprendere con immediatezza se il risultato in questione sia pertinente al bisogno espressodurante la ricerca web

bull ersquo uno fra i principali elementi che i crawler dei motori analizzano per indicizzare un contenuto e assegnargli unrank nei risultati di ricerca

Description del contenuto

Egrave consigliabile la redazione di description univoche per ogni contenuto che sintetizzino gli elementi salienti dellapagina

Markup Il metatag description deve essere posizionato allrsquointerno del tag head nel codice HTML della paginaAppare come terza linea testuale (dopo la URL della pagina) del risultato dei motori di ricerca

bull come il titolo aiuta gli utenti a comprendere con immediatezza se il risultato in questione sia pertinente albisogno espresso durante la ricerca

bull la description puograve essere di qualsiasi lunghezza ma generalmente i motori di ricerca troncano testi piugrave lunghi di160 caratteri (spazi inclusi)

Le parole chiave

La scelta delle parole chiave piugrave strategiche e salienti rispetto ai contenuti di un sito egrave uno fra i fattori che concorronoal buon posizionamento di un sito web fra i risultati dei motori di ricerca

Il lavoro di identificazione delle keyword piugrave idonee a rappresentare i contenuti di un servizio digitale egrave un lavoroiterativo che deve tenere conto di

bull quali sono le parole che meglio potrebbero descrivere le informazioni presenti nel sito

bull quali sono i loro volumi di ricerca

bull in che maniera i concetti espressi nel sito potrebbero potenzialmente essere cercati dagli utenti sui motori diricerca

Di seguito alcuni metodi per iniziare ad identificare un set di keywords salienti

bull Google Trends

bull Ubersuggest

bull Adwords keywordplanner

Originalitagrave del contenuto

Egrave sempre consigliabile redigere contenuti originali possibilmente centrati sui bisogni dellrsquoutente con un linguaggioil piugrave possibile chiaro

32 SEO 19


Fig 32 Google suggest

Fig 33 Google ricerche correlate



Aggiornamento del contenuto

Egrave necessario procedere regolarmente ad un aggiornamento dei contenuti pubblicati per evitare di fornire agli utentiinformazioni obsolete Gli algoritmi dei motori di ricerca considerano inoltre la data di aggiornamento di un contenutoweb come fattore di rilevanza nel ranking dei risultati di ricerca

Paragrafazione e paginazione

Per una maggiore leggibilitagrave dei testi egrave consigliabile paragrafare i contenuti di una pagina soprattutto se di lunghez-za importante Egrave utile inoltre titolare gli eventuali sottoparagrafi secondo i medesimi principi applicabili al titoloprincipale della pagina

Nel caso ci sia la necessitagrave di suddividere il contenuto in piugrave pagine egrave consigliabile

bull specificare quale sia la pagina principale di visualizzazione (visualizza tutto) attraverso lrsquoattributorel=rdquocanonicalrdquo

bull utilizzare gli attributi HTML rel=rdquonextrdquo e rel=rdquoprevrdquo per specificare la relazione di consequenzialitagrave fra URL

Ulteriori informazioni sulla paginazione

Grassetto

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

Immagini

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

Markup Utilizzare il tag alt per fornire una descrizione testuale dellrsquoimmagine Questo attributo egrave utile nel casoin cui questa non possa essere visualizzata nel browser per motivi legati ad esempio al mancato supporto di alcunetipologie di file da parte del browser o allrsquoutilizzo di tecnologie assistive

Egrave possibile generare ed utilizzare una sitemap XML ad hoc per le immagini per fornire ai crawler maggioriinformazioni rispetto allrsquoorganizzazione dei file immagini presenti nel sito

Anchor Text dei link

Per ldquoanchor textrdquo si intende la porzione di testo di un contenuto che funge da ldquoancorardquo verso un collegamentoipertestuale sia esso rivolto allrsquointerno (link interno) o allrsquoesterno del sito (link outbound)

Egrave consigliabile scegliere porzioni di testo brevi chiare e pertinenti rispetto alla pagina di destinazione del link

bull il testo cliccabile - cosigrave come lo stile grassetto - fornisce tanto agli utenti quanto ai crawler dei motori di ricercainformazioni aggiuntive rispetto al contenuto della pagina linkata

bull egrave bene evitare di linkare espressioni povere di significato come ldquoclicca quirdquo e simili

Struttura logica dei contenuti

Una struttura dei contenuti semplice e ldquoleggerardquo egrave necessaria per garantire una migliore esperienza utente sul sito eper agevolare il lavoro di scansione dei crawler dei motori di ricerca

Egrave consigliabile mantenere la struttura dei contenuti del sito gerarchica - dal generale al particolare - semplificandoneil piugrave possibile la struttura logica e utilizzando non piugrave di tre livelli di profonditagrave

32 SEO 21


URL delle pagine

La URL di una pagina web appare come seconda linea testuale del risultato di ricerca (fra title e description) Egrave buonaregola semplificarne il piugrave possibile la struttura

bull impostare le URL in modo che contengano parole salienti e pertinenti rispetto ai contenuti della pagina cheospitano

bull utilizzare i trattini (-) invece che gli underscore (_) per la punteggiatura

bull cercare di ridurre il piugrave possibile la lunghezza delle URL

bull valutare lrsquoutilizzo del file robotstxt per bloccare la scansione da parte dei crawler dei motori di ricerca delleURL con parametri dinamici (referral ordinamenti calendari )

Ulteriori informazioni sulla struttura delle URL

Duplicazione dei contenuti

Egrave importante evitare la presenza di contenuti duplicati nel sito Dal punto di vista SEO si intendono ldquocontenutiduplicatirdquo contenuti molto simili - o identici - nellrsquoambito dello stesso sito ma associati a URL differenti

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

bull la presenza di una pagina in versione web e versione per la stampa

bull la presenza di una tabella dinamica che genera viste dello stesso contenuto ma URL dinamiche diverse

In questi e altri casi egrave possibile inviare a Google lrsquoinformazione di quale sia la pagina ldquomasterrdquo o ldquocanonicardquo daprendere in considerazione per lrsquoindicizzazione Questa tecnica egrave detta canonicalizzazione per implementarla egrave ne-cessario inserire un elemento link che contenga lrsquoattributo rel=rdquocanonicalrdquo (seguito dal link cui si vuole applicare lacanonicalizzazione) nel tag head della pagina

Approfondimenti sui contenuti duplicati

Approfondimenti sulla canonicalizzazione

Mappa del sito

Oltre ad una mappa del sito in HTML destinata agli utenti egrave consigliabile creare un file sitemap XML destinato aimotori di ricerca

Informazioni sulle sitemap

Una sitemap egrave un file che ha lo scopo di elencare le pagine web di un sito per comunicare a Google e altri motoridi ricerca lrsquoorganizzazione dei contenuti I crawler dei motori leggono questo file per eseguire una scansione piugraveefficiente del sito Una sitemap ha quindi lrsquoobiettivo ultimo di migliorare la scansione di un sito da parte dei motori diricerca

Allrsquointerno di un file sitemap egrave possibile non soltanto elencare le URL di un sito web ma anche alcuni metadati piugravespecifici rispetto allrsquoorganizzazione dei singoli nodi ad esempio

bull informazioni sullrsquoaggiornamento della pagina

bull importanza della pagina rispetto ad altre URL dello stesso sito

bull informazioni relative a video e immagini

bull informazioni relative allrsquoorganizzazione dei documenti



Come generare e inviare una sitemap a Google

Egrave possibile inviare una sitemap a Google anche tramite il tool Search Console Egrave possibile inoltre generare sitemapXML per

bull le pagine in lingue alternative

bull i video

bull le immagini

File robotstxt

Per ottimizzare i processi di scansione dei crawler dei motori di ricerca egrave possibile utilizzare il file robotstxt Un filerobotstxt egrave un file di testo memorizzato nella directory principale del sito che ha la finalitagrave di indicare ai crawler deimotori di ricerca quali parti del sito non sono accessibili e quindi controllare il traffico di scansione

Non si deve utilizzare il file robotstxt per nascondere le pagine web dai risultati di ricerca

Informazioni sui file robotstxt

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

Tempi di caricamento delle pagine

La rapiditagrave di caricamento di una pagina web egrave presa in considerazione dai crawler dei motori di ricerca come elementoche concorre ad un migliore posizionamento del contenuto nel ranking dei risultati di ricerca

Egrave consigliabile effettuare controlli periodici sulle velocitagrave di caricamento delle pagine e i tempi di risposta del serversoprattutto da dispositivi mobili

Risorse per lo sviluppo di pagine ottimizzate per i dispositivi mobili

Approfondimento le pagine AMP (Accelerated Mobile Pages) per i contenuti di tipo ldquonewsrdquo

Per determinate tipologie di contenuto - in particolare le news - egrave possibile implementare il formato AMP (AcceleratedMobile Pages) di Google Il formato AMP egrave stato lanciato nel 2015 per migliorare le prestazioni del mobile webriducendo la velocitagrave di caricamento delle pagine

Linee guida di Google Search per le pagine AMP

Il progetto AMP

Guida allrsquoimplementazione di pagine AMP

Dati strutturati

Il markup con dati strutturati egrave una tecnica che consente di personalizzare lrsquoaspetto di un sito nella ricerca di Googleo di altri motori di ricerca Includendo dei dati strutturati allrsquointerno dei contenuti egrave possibile inserire informazioniaggiuntive eo strumenti di interazione con il sito nellrsquoaspetto standard dei risultati di ricerca ad esempio

bull contatti e indirizzo dellrsquoamministrazione

bull rating delle pagine

bull box di search in stile sitelink

bull breadcrumbs

32 SEO 23


Il markup con dati strutturati si basa sul vocabolario httpschemaorg

Guida di Google allrsquoimplementazione dei dati strutturati

Strumento per testare la corretta implementazione dei dati strutturati

Migrazione SEO di un sito

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

Si consiglia quindi di

bull realizzare una mappatura di tutte le URL del sito che includa anche il linking interno

bull associare alle vecchie URL le nuove URL per poter in seguito preparare i redirect

bull per le URL alle quali non verragrave associata alcuna nuova URL preparare una pagina 404 personalizzata che aiutilrsquoutente a proseguire la navigazione nel nuovo sito

bull configurare il server impostando dei redirect di tipo 301

bull modificare la sitemap XML del sito

bull laddove possibile aggiornare i backlinks ricevuti dal sito

bull comunicare ai crawler di Google un eventuale cambiamento del dominio tramite la Search Console

Ulteriori informazioni sui redirect 301

I fattori off-page

Link building

In ottica di ottimizzazione SEO di un sito egrave necessario curare e monitorare iterativamente il processo di costruzionedella rete di link che il sito riceve dallrsquoesterno (inbound links)

I motori di ricerca valutano la natura la provenienza e la qualitagrave di tali link piugrave che la loro quantitagrave considerandoli unelemento di autorevolezza del sito soprattutto se questi provengono da siti altrettanto autorevoli e se il loro processodi acquisizione egrave considerato spontaneo

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

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

bull utilizzare la Search Console di Google

bull utilizzare tools ad hoc come Open Site Explorer o Ahrefs Site Explorer

bull utilizzare lrsquooperatore linksitowebit nella ricerca Google

Webmaster tools Search Console di Google

Search Console egrave una risorsa online offerta gratuitamente da Google che consente di monitorare gestire e ottimizzarela presenza di un sito o di unrsquoapplicazione mobile nei risultati di ricerca

Search Console consente ad esempio di ottenere indicazioni sullrsquoaspetto di un sito web nei risultati di ricerca Googleo informazioni rispetto al traffico di ricerca permette di verificare lo stato di indicizzazione delle pagine cosigrave come dimonitorare e correggere problemi di varia natura legati al sito



Con Search Console egrave possibile

bull verificare lo stato di indicizzazione dei contenuti del sito

bull verificare lo stato della scansione dei crawler di Google sulle pagine del sito ed eventuali errori

bull testare i file robotstxt

bull testare la sitemap del sito se presente

bull gestire i parametri URL durante la scansione dei crawler

bull rimuovere temporaneamente gli URL di un sito dai risultati di ricerca

bull informare Google rispetto al cambiamento di dominio di un sito

bull informare Google di un eventuale passaggio del sito da protocollo http a https

bull sapere per quali query egrave stato visualizzato il sito nei risultati di ricerca Google

bull conoscere i backlinks del sito e relativi anchor

bull monitorare i link interni

bull monitorare il corretto funzionamento del tag hreflang nel caso di siti multilingua

bull monitorare e correggere i problemi di usabilitagrave del sito su dispositivi mobili

bull verificare la corretta implementazione di eventuali dati strutturati e schede informative (rich cards)

bull rilevare criticitagrave nellrsquoHTML per favorire e migliorare lrsquoesperienza utente sul sito

bull rilevare e correggere eventuali criticitagrave correlate alle pagine AMP (accelerated mobile pages)

bull monitorare e risolvere i problemi di malware o spam per tenere pulito il tuo sito

Approfondimenti

Come configurare un sito web in Search Console

Centro assistenza Search Console

Come collegare Search Console a Google Analytics

Utile da sapere

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

Come configurare una app in Search Console

Linguaggio

Gestione dei contenuti

I contenuti di un sito web devono consentire allrsquoutente di trovare velocemente lrsquoinformazione di cui ha bisogno nelformato di fruizione piugrave idoneo anche mediante un dispositivo mobile

SI DEVE

33 Linguaggio 25


Progettare i contenuti affincheacute rispondano innanzitutto alle necessitagrave degli utenti non solo a quelledellrsquoamministrazione

Nella pianificazione e progettazione di un contenuto web considera che le persone spesso utilizzano il mobile anchequando hanno la possibilitagrave di navigare tramite il desktop Nella gestione dei contenuti verifica quindi se sia possibile

bull ridurre la quantitagrave complessiva del testo previsto per la pubblicazione online

bull utilizzare una tipologia di formato del contenuto che sia piugrave fruibile in relazione agli obiettivi informativi ad esevitare i pdf

bull rimuovere il contenuto superfluo presente sul sito

Creazione dei contenuti

Ogni singolo paragrafo ogni singola parola devono venire incontro alle necessitagrave informative degli utenti e consentireloro di trovare con immediatezza ciograve che cercano Dovresti quindi almeno

bull utilizzare titoli e sottotitoli nelle pagine

bull scrivere frasi brevi

bull suddividere il contenuto per paragrafi

bull monitorare costantemente lrsquoaggiornamento dei contenuti

SI DOVREBBE

Strutturare il contenuto in modo che le informazioni piugrave importanti compaiano nella prima parte del corpo del testoOgni paragrafo dovrebbe veicolare un solo concetto per volta

Linguaggio

Egrave necessario usare un linguaggio chiaro e sintetico finalizzato a indirizzare lrsquoutente verso lrsquoinformazione o il serviziodi cui ha bisogno

SI DOVREBBE

Si dovrebbe evitare lrsquoutilizzo di un linguaggio gergale e specialistico o lrsquouso di termini e frasi di difficile comprensione

Utilizzare quindi

bull preferibilmente la forma attiva dei verbi

bull un vocabolario semplice e chiaro privilegiando termini e frasi che gli utenti potrebbero usare nella ricercaonline

bull fornire una spiegazione dei termini tecnici presenti

bull esplicitare gli acronimi e le abbreviazioni inserendo lrsquoacronimo tra parentesi tonde dopo il termine indicato peresteso



Corretta ortografia

Usa particolare attenzione alla corretta ortografia della lingua italiana soprattutto per quanto riguarda lrsquouso degliaccenti e degli apostrofi

Titoli

Il titolo deve anticipare sinteticamente allrsquoutente il contenuto della pagina

SI DOVREBBE

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

Per creare titoli che attirino lrsquoattenzione del lettore

bull scrivere titoli unici allrsquointerno del sito e non ambigui

bull utilizzare le parole piugrave rappresentative del contenuto a cui il titolo fa riferimento

bull non scrivere il titolo in maiuscolo poicheacute rende la lettura piugrave faticosa

bull non utilizzare punti alla fine del titolo

bull mettere graficamente in risalto i titoli rispetto al testo circostante

bull non inserire slash o trattini

bull non utilizzare acronimi a meno che non siano ben noti (es UE)

Sommario

SI DOVREBBE

Il sommario delle notizie in home page dovrebbe essere un periodo di senso compiuto senza puntini di sospensionealla fine

Il sommario serve a sintetizzare al lettore lrsquooggetto dellrsquoarticolo prima della selezione della pagina di dettaglioDovrebbe quindi avere una lunghezza massima di 140 caratteri spazi inclusi e possedere le seguenti caratteristiche

bull essere una sintesi dei punti centrali del contenuto

bull essere diverso dal titolo e dalle prime righe del contenuto della pagina interna

bull contenere le parole chiave piugrave rappresentative del contenuto

bull terminare con un punto

Testo della pagina

Specialmente nel caso delle notizie il testo deve rispondere sinteticamente alle cinque domande chi dove quandopercheacute come

bull Il testo di un contenuto deve essere il piugrave coerente possibile con titolo e il sommario

bull Ogni paragrafo deve contenere al massimo 3 frasi

33 Linguaggio 27


bull Il testo della pagina deve contenere le parole chiave riportate nel titolo e nel sommario

bull Utilizzare liste puntate per elencare concetti costituiti da tre o piugrave elementi

Creazione dei link

SI DEVE

I link devono essere costituiti da parole-chiave significative Non usare mai la frase ldquoclicca quirdquo per attivare un link

Per individuare quali parole deve contenere un link egrave bene pensare alle parole chiave che un utente userebbe in unmotore di ricerca per trovare il contenuto al quale rimanda il link che si sta costruendo I link devono contenereparole significative rispetto al contenuto a cui rinviano e non devono essere presenti nel sommario Anzicheacute duplicareinformazioni allrsquointerno di sezioni diverse del sito egrave preferibile attivare dei link di approfondimento per collegare fraloro contenuti che trattano tematiche complementari I link verso lrsquoesterno del sito dovrebbero essere accompagnatida un avviso leggibile anche dagli screen reader (ad esempio ldquoQuesto link si apriragrave in una nuova finestrardquo) Verificaperiodicamente i link esterni per evitare che rimandino a pagine inesistenti o non aggiornate

Link di navigazione e bottoni

Nel definire le voci dei link presenti nei menu di si deve usare una terminologia univoca dove la stessa definizionenon conduca in luoghi diversi ad azioni differenti Nei bottoni e nei link descrivere in modo coerente e puntuale qualisono le azioni che ci dobbiamo aspettare nellrsquoeseguire un comando o nel riempire un form Siate specifici ldquoCercardquoinvece di ldquoInviardquo ldquoPagardquo invece di ldquoOkrdquo Il significato di ldquoCancellardquo egrave diverso da ldquoAnnullardquo

Immagini

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

Ricordati di

bull accompagnare ogni foto con una didascalia

bull citare lrsquoautore

bull riportare la licenza di pubblicazione

Infine quando pubblichi unrsquoimmagine assicurati che il file dellrsquoimmagine abbia un nome che riflette il contenutodellrsquoimmagine (per esempio se pubblichi una foto del Teatro antico di Taormina il nome del file potrebbe essereteatro-antico-taorminajpg) tra le altre cose saragrave piugrave facile per i motori di ricerca indicizzare il tuo contenuto e per gliutenti trovarlo

Dimensione delle immagini

Le dimensioni delle immagini influenzano la velocitagrave di caricamento della pagina egrave quindi fondamentale rispettarealcune buone pratiche per tenere sotto controllo peso risoluzione e proporzioni del file

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



Prima di pubblicare unrsquoimmagine egrave opportuno verificare che sia ottimizzata per il web

bull Risoluzione 72 ppi

bull Formato JPG (JPEG) PNG

bull Modello di colori RBG

In generale se le dimensioni originali dellrsquoimmagine possono variare egrave consigliabile effettuare sempre un ricampiona-mento delle immagini di modo che mantengano una buona definizione ma abbiano una dimensione ridotta in terminidi byte (e in genere anche in pixel)

Se hai la necessitagrave di fare semplici modifiche alle immagini (correggere le dimensioni o la luminositagrave ritagliareruotare etc) puoi sfruttare alcuni servizi online gratuiti

bull Photoshop Express Editor

bull Google Nik Collection

bull Pixlr Express

bull Fotor

Archiviazione

Egrave una buona pratica organizzarsi in modo da avere un archivio delle immagini funzionale e ordinato A questo scoposarebbe opportuno

bull nominare i file di modo che contengano keyword relative allrsquooggetto della foto e la data di acquisizione ocomunque in maniera uniforme

bull organizzare le foto in cartelle per tema o evento

bull utilizzare i tag pensando a possibili utilizzi alternativi per una stessa foto

bull effettuare un backup periodico delle immagini

Licenze

SI DEVE

Il copyright egrave un metodo di riconoscimento e tutela del diritto drsquoautore sulle immagini Se intendi utilizzare immaginiprotette da copyright egrave necessario richiedere lrsquoautorizzazione al proprietario e conoscere i termini drsquouso concessi

Con lo sviluppo del Web hanno avuto grande diffusione le licenze di tipo Creative Commons (CC) un modo stan-dardizzato per definire a quali diritti lrsquoautore rinuncia e quali si riserva le sei licenze CC richiedono in tutti casilrsquoattribuzione al proprietario dei diritti e specificano diversamente alcune possibilitagrave di utilizzo (opere derivate usicommerciali possibilitagrave di modifica del contenuto)

In pratica se unrsquoimmagine ha una licenza CC un utente puograve utilizzarla senza dover chiedere lrsquoautorizzazione al pro-prietario e limitandosi ad attribuirgliene i diritti in modo esplicito Egrave importante verificare e rispettare i limiti diutilizzo dellrsquoimmagine consentiti dalla specifica licenza CC alcune non consentono una modifica del contenuto altrenon consentono lrsquouso commerciale ecc

Approfondimenti Wikipedia su Creative Commons

Di seguito un esempio di rilascio delle immagini con licenze Creative Commons Le foto della gallery sono utilizzabilia queste condizioni attribuzione al proprietario uso non commerciale e condivisione con la stessa licenza (licenzaCC-BY-NC-SA 30 IT)

33 Linguaggio 29


Fig 34 I loghi delle sei licenze CC

Fig 35 Gallery di immagini con licenze CC - fonte Governoit



Archivi di immagini online

Egrave possibile trovare online archivi di immagini gratuite con licenze di utilizzo estremamente aperte che non richiedonoalcuna attribuzione (es Unsplash e le relative informazioni sul tipo di licenza offerta) Altre fonti possibili sono peresempio Google Images Flickr e Getty Images in cui usando la ricerca avanzata egrave possibile ricercare immagini inbase alla licenza applicata e individuare in questo modo immagini utilizzabili senza dover richiedere consenso scrittoallrsquoautore Un altro servizio utile egrave CC search motore di ricerca di immagini con ricerca Creative Commons

Di seguito un esempio di utilizzo di unrsquoimmagine ripresa da un archivio online

Fig 36 Esempio immagine da archivio iStockPhoto - fonte Comune di Biella

Approfondimenti come trovare immagini liberamente utilizzabili attraverso Google Images

Immagini prese dai social network

I canali social (in particolare Facebook e Instagram) sono una rilevante fonte di immagini e contenuti multimedialirealizzati dagli utenti e caricati sui propri profili La pubblicazione di una foto su un profilo social non egrave perograve vialibera allrsquoutilizzo indiscriminato da parte di chiunque Il comportamento da tenere nei confronti di quella immagineegrave lo stesso che si deve tenere nei confronti di unrsquoimmagine raccolta da un blog o un qualsiasi sito ovvero assicurarsidi avere tutti i diritti di utilizzo concessi espressamente (anche a titolo gratuito) dallrsquoautore o il detentore dei dirittiche puograve essere chi ha pubblicato quella foto sul proprio canale social o puograve essere un altro soggetto

33 Linguaggio 31


Consenso dei soggetti ritratti

Un altro tema da tenere in considerazione quando si pubblicano immagini allrsquointerno di un sito egrave il consenso allapubblicazione da parte dei soggetti ritratti allrsquointerno delle fotografie

In caso di fotografie provenienti da archivi online gratuiti o a pagamento si puograve dare per acquisito che chi ha realizzatolrsquoimmagine o lrsquoha pubblicata si sia assicurato il consenso dei soggetti ritratti

Nel caso di fotografie realizzate autonomamente il consenso egrave invece necessario nella maggior parte dei casi Fannoeccezione le persone ritratte in eventi di pubblico interesse (una conferenza stampa una manifestazione in piazzauna concerto) e le persone famose (in base al pubblico interesse quindi ad esempio esponenti delle istituzioni attoripersonaggi pubblici) purcheacute in contesti pubblici in questi casi le fotografie si possono utilizzare senza una specificaautorizzazione Altre eccezioni previste per legge sono ldquoscopi di polizia di giustizia didattici o scientificirdquo

In tutti gli altri casi per evitare violazioni della privacy la pubblicazione di fotografie in un sito deve essere sempreautorizzata dai soggetti ritratti con una lettera liberatoria (di cui si trovano numerosi modelli online) in cui si devespecificare lrsquoutilizzo cui la foto egrave destinata (ad esempio pubblicazione online sul blog dellrsquoEnte)

SI DEVE

Nel caso di foto che ritraggono minori (si pensi ad esempio alla pubblicazione sul sito di una scuola delle foto di unarecita) egrave sempre necessaria lrsquoautorizzazione scritta da parte di un adulto che abbia il diritto a concederla (ad esempioun genitore o un tutore)


CAPITOLO 4

User research

La User Research (Ricerca sullrsquoUtente) pone le basi fondanti per la progettazione di un servizio web che si focalizzisullrsquoutente Cittadino e i suoi bisogni Il primo capitolo della guida egrave dedicato allrsquousabilitagrave la cui importanza e centralitagravenel design di un servizio web sta nel suo essere in grado di influenzare in maniera determinante lrsquoeffettiva resa delservizio A seguire il capitolo dedicato alla ricerche qualitative fa una rassegna delle tecniche e degli strumenti che indiversi step della progettazione risultano utili per un focus qualitativo sulle motivazioni sottese ai bisogni dellrsquoutenteChiude la sezione il capitolo sulla web analytics attivitagrave che - grazie allrsquoanalisi puntuale dei dati di performance di unambiente web - permette di comprendere se e come un servizio digitale risponde in maniera adeguata ai bisogni degliutenti e ne coadiuva lrsquoavvio di azioni migliorative

Usabilitagrave

Definizione

Per usabilitagrave si intende ldquoil grado in cui un prodotto puograve essere usato da particolari utenti per raggiungere certi obiettivicon efficacia efficienza soddisfazione in uno specifico contesto drsquousordquo (ISO 9241-2102010) Lrsquousabilitagrave focalizza ladimensione funzionale dellrsquointerazione tra un sistema (ad es un sito web) e lrsquoutente in relazione a precisi obiettivi econtesti drsquouso Non una caratteristica del sistema ma una proprietagrave risultante (dallrsquointerazione tra sistema e persona)In questo senso egrave fondamentale utilizzare un approccio humanuser centered per cui la progettazione del sistemasia guidata dallrsquoanalisi e dalla conoscenza articolata dei bisogni delle caratteristiche degli utilizzatori e dei contestidrsquouso Nella progettazione egrave necessario pensare a chi utilizzeragrave realmente il servizio e il modello di riferimento delprogettista deve coincidere con quello dellrsquoeffettivo utilizzatore

User-centered design

Lo user centered design egrave un insieme di tecniche usate per far emergere i bisogni effettivi delle persone per cui si staprogettando un contenuto coinvolgendo le persone stesse nel processo di progettazione Per ldquopersonerdquo si intendonotutti i portatori di interesse (stakeholder) del progetto Nel caso della pubblica amministrazione

bull Cittadini

33


bull Aziende

bull Dipendenti di altre amministrazioni o istituzioni

bull Committenti

I vantaggi dellrsquousabilitagrave

Lrsquoaderenza in fase progettuale e implementativa ai criteri di usabilitagrave consente al cittadino di

bull esercitare i propri diritti

bull ridurre gli errori e aumentare la soddisfazione di fruizione

Inoltre lrsquousabilitagrave consente alle PA di

bull evitare la produzione di servizi inadeguati

bull incentivare i cittadini a ritornare sul sito

bull aumentare la fiducia dei cittadini nei confronti dellrsquoamministrazione

SI DOVREBBE

Data lrsquoimportanza che lrsquousabilitagrave riveste nellrsquointerazione tra utente e applicazione web egrave necessario riservare la massi-ma attenzione alla progettazione orientata allrsquousabilitagrave e alla relativa misurazione mediante un processo di inclusionedegli utenti sin dalla fase di progettazione dei servizi secondo un modello centrato sulla persona (human-centered)

Criteri di valutazione

Per garantire la fruibilitagrave delle informazioni e contribuire a migliorare lrsquousabilitagrave dei siti e delle applicazioni lepubbliche amministrazioni sono tenute a rispettare i criteri qui elencati

Percezione Le informazioni e i comandi necessari per lrsquoesecuzione delle attivitagrave devono essere sempre disponibili epercettibili

Comprensibilitagrave Le informazioni e i comandi necessari per lrsquoesecuzione delle attivitagrave devono essere facili da capiree da usare

Operabilitagrave Le informazioni e i comandi devono consentire una scelta immediata delle azioni necessarie alraggiungimento dellrsquoobiettivo

Coerenza I simboli i messaggi e le azioni devono avere lo stesso significato in tutto il sito

Tutela della salute Il sito deve possedere caratteristiche idonee a salvaguardare il benessere psicofisico dellrsquoutente

Sicurezza Il sito deve possedere caratteristiche idonee a fornire transazioni e dati affidabili gestiti con adeguati livellidi sicurezza

Trasparenza Il sito deve comunicare allrsquoutente lo stato gli effetti delle azioni compiute e le informazioni necessarieper la corretta valutazione delle modifiche effettuate sul sito stesso

Facilitagrave di apprendimento Il sito deve possedere caratteristiche di utilizzo di facile e rapido apprendimento

Aiuto e documentazione Le funzionalitagrave di aiuto quali le guide in linea e la documentazione sul funzionamento delsito devono essere di facile reperimento e collegate alle azioni svolte dallrsquoutente

Tolleranza agli errori Il sito deve essere configurato in modo da prevenire gli errori ove questi comunque simanifestino occorre segnalarli chiaramente e indicare le azioni necessarie per porvi rimedio

Gradevolezza Il sito deve possedere caratteristiche idonee a favorire e a mantenere lrsquointeresse dellrsquoutente

34 Capitolo 4 User research


Flessibilitagrave Il sito deve tener conto delle preferenze individuali e dei contesti

Per approfondimenti

Allegato B del Decreto Ministeriale 8 luglio 2005

Usabilitagrave come costrutto misurabile

Efficacia efficienza e soddisfazione dellrsquoutente sono proprietagrave misurabili e osservabili attraverso questionari intervistee scale di misurazione una volta stabilite le tipologie di utenti e gli obiettivi che essi devono raggiungere Gli standarddefiniscono come segue i fattori misurabili

bull lrsquoefficacia egrave il grado in cui una persona riesce a completare le operazioni richieste per raggiungere il proprioobiettivo in modo corretto e completo

bull lrsquoefficienza corrisponde alla quantitagrave di risorse che la persona spende nelle operazioni richieste per raggiungereun dato obiettivo

bull la soddisfazione soggettiva egrave la dimensione piugrave complessa da valutare e da raggiungere poicheacute riguarda illivello di gratificazione che lrsquoesperienza drsquouso offre Un sistema puograve funzionare molto bene ma puograve non bastarea rendere lrsquointerazione confortevole e piacevole Rientrano in questa dimensione aspetti come lrsquoestetica laqualitagrave relazionale

La misurazione del livello di usabilitagrave dei siti web dovrebbe essere effettuata a partire dalla fase di prototipazionedellrsquointerfaccia grafica

Le statistiche drsquouso di siti giagrave online forniscono indicazioni utili seppur parziali sullrsquoefficacia dei contenuti Egrave es-senziale anche consentire agli utenti di poter inviare facilmente e in via informale commenti e opinioni sul sitodellrsquoamministrazione

Protocollo per la realizzazione di test di usabilitagrave

Per verificare rapidamente lrsquousabilitagrave di un sito web si possono utilizzare differenti tecniche fra le quali quellesuggerite dal Protocollo eGLU per la realizzazione di test di usabilitagrave semplificati

Ricerche qualitative

La User Research (Ricerca sugli Utenti) nellrsquoambito della progettazione dei prodotti digitali coerentemente allrsquoapproc-cio Human Centered ha come fine ultimo quello di studiare gli utenti per progettare servizi quanto piugrave rispondentialle loro effettive esigenze Questo obiettivo puograve essere realizzato attraverso approcci di ricerca di tipo qualitativo eoquantitativo i quali si differenziano per le caratteristiche del dato che si puograve ricavare e per lrsquoanalisi che se ne puograve fareLa ricerca qualitativa generalmente ha come obiettivo quello di (cercare di) comprendere le motivazioni sottese adattitudini comportamenti ed atteggiamenti dellrsquoutente studiandone le attivitagrave i contesti drsquouso le necessitagrave ma anchegli errori e le frustrazioni Le principali caratteristiche della ricerca qualitativa

bull si fonda su campioni non numerosi

bull genera dati qualitativi e non validi a fini statistici

bull lrsquoanalisi dei dati non egrave statisticomatematico ma legata alla formazione alla metodologia e non da ultimo allasensibilitagrave del ricercatore

42 Ricerche qualitative 35


Nella progettazione di servizi digitali la ricerca qualitativa puograve essere utilizzata in diverse fasi del progetto dalla fasedi osservazione ed ideazione a quella di progettazione finanche a quella di validazione In questa guida affronteremole tecniche e gli strumenti della ricerca di tipo qualitativo quali i metodi che si basano sullrsquoosservazione diretta sulcampo e i metodi che prevedono un coinvolgimento degli utenti Gli strumenti e le tecniche sono molte e differenti fraloro per il tipo di dato che permettono di raccogliere per ogni progetto saragrave dunque necessaria una valutazione adhoc per definire gli strumenti e le tecniche piugrave adeguate e le fasi in cui si vadano ad utilizzare

Nel 2017 pubblicheremo i capitoli di questa sezione dedicati a interviste focus group osservazioni sul campo (fieldstudy) design partecipativo e test di usabilitagrave

Web analytics

Premessa

Questa guida ha lrsquoobiettivo di aiutare chi si occupa a vario titolo del sito web di una pubblica amministrazione a

bull comprendere il funzionamento di una piattaforma di web analytics

bull capire come collezionare i principali indicatori di performance di un sito

bull capire come interpretare determinati set di dati per trarre informazioni utili rispetto al comportamento degliutenti e il loro livello di soddisfazione

bull comprendere quali azioni migliorative applicare ai contenuti ai metadati e alla struttura del sito in base airisultati dellrsquoanalisi dei dati

bull comprendere come configurare una piattaforma di web analytics su uno o piugrave siti

bull comprendere come produrre e distribuire un report di analytics per condividere i dati di utilizzo con glistakeholder e il team di lavoro interno

bull comprendere come una lettura sistematica dei dati possa influenzare positivamente la comprensione deicomportamenti online degli utenti e consentire lrsquoavvio di azioni migliorative dei servizi digitali

Introduzione

Lrsquoanalisi delle performance di un ambiente web egrave unrsquoattivitagrave cruciale per comprendere in che maniera un sito (o unservizio digitale di altro tipo) rispondono in maniera adeguata ai bisogni informativi eo di servizio degli utenti

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

bull Quanti utenti visitano il sito per quanto tempo e quali e quante pagine visitano

bull Quali sono le principali cittagrave da cui provengono i visitatori del sito Quanti utenti che visitano il sito provengonodallrsquoItalia e quanti eventualmente dallrsquo estero

bull Quali sono i contenuti piugrave visitati dagli utenti in un dato intervallo di tempo

bull In quale momento della settimana o dellrsquoanno il sito registra il maggiore o il minore numero di visite Questeoscillazioni sono causate da unrsquoeventuale stagionalitagrave delle tematiche trattate o coincidono con la pubblicazionedi nuovi contenuti

bull Quali sono i termini tramite cui gli utenti arrivano al sito tramite un motore di ricerca Rappresentano per lamaggior parte il nomedominio del sito oppure fanno riferimento a informazioniservizi trattati al suo interno

bull Quali sono i principali termini di ricerca digitati nel motore di ricerca interno del sito se presente

bull In che percentuale gli utenti che visitano il sito lo fruiscono da dispositivi mobili



Le risposte a tali domande derivano dallrsquoanalisi continuativa di indicatori di performance che offrono ad esempio in-formazioni su quali siano volumi di traffico del sito quale il comportamento degli utenti quale la qualitagrave dei contenutipubblicati o quale lrsquoefficienza tecnologica del sito nel suo complesso

Metriche e Dimensioni

I dati generati dalle piattaforme di web analytics sono il frutto di combinazioni eterogenee di metriche (dati quan-titativi) e dimensioni (attributi qualitativi dei dati) Di seguito una panoramica esplicativa delle principali metrichee dimensioni utilizzate nella web analysis Si precisa che la nomenclatura di metriche e dimensioni puograve variare aseconda della piattaforma di analytics utilizzata

Principali Metriche (dati quantitativi)

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

A cosa serve rappresenta il volume di traffico che il sito riceve in un determinato lasso temporale Egrave unadelle metriche piugrave usate per costruire uno storico dei volumi di traffico del sito su cui basare comparazioni eoproiezioni

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

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

Visualizzazioni di pagina Definizione numero totale di pagine visitate anche da parte dello stesso utente in un datointervallo di tempo Comprende visualizzazioni ripetute della stessa pagina

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

Pagine visitate per visita Definizione media aritmetica del numero di pagine visitate per visita al sito Comprendele visualizzazioni ripetute della stessa pagina

A cosa serve offre indicazioni sulla ldquoprofonditagraverdquo delle visite al sito e sul livello di coinvolgimento dei contenutiTale metrica deve essere interpretata a seconda della natura del sito e dei suoi obiettivi (es rispetto al numerominimo di pagine desiderate per visita)

Durata delle visite Definizione media aritmetica della durata di una singola visita al sito

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

Tempo sulla pagina Definizione media aritmetica del tempo trascorso dagli utenti su una determinata pagina (o uninsieme di pagine)

A cosa serve determina lrsquoefficacia di un contenuto a seconda della sua tipologia e dei suoi obiettivi

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

A cosa serve misura la quota di utenti che arrivano al sito e lo abbandonano subitaneamente La percentuale difrequenza di rimbalzo puograve essere interpretata in maniera opposta a seconda della natura del sito ad esempio unafrequenza di rimbalzo alta per un sito informativo egrave indice del fatto che le pagine potrebbero essere scarsamenteutiliinteressanti mentre puograve essere considerata un dato positivo per un sito o una pagina che hanno il semplicescopo di direzionare gli utenti altrove

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

A cosa serve metrica utile in particolare quando lrsquoobiettivo del sito egrave quello di accrescere i volumi di trafficoprovenienti da nuove tipologie di visitatori

43 Web analytics 37


Nuovi utentiutenti di ritorno Definizione rapporto fra prime visite al sito e utenti che hanno giagrave visitato il sitoprecedentemente in un dato intervallo di tempo

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

Velocitagrave di caricamento del sito Definizione quantitagrave di tempo media (espressa in secondi) impiegato da una paginadel sito per caricarsi dallrsquoavvio della visualizzazione nel browser alla fine del suo caricamento

A cosa serve metrica fondamentale per monitorare lrsquoefficienza del sito in termini di velocitagrave anche e soprattuttoper la fruizione da dispositivi mobili

Principali Dimensioni (attributi qualitativi dei dati)

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

Provenienza geografica e lingua luogo da cui provengono le visite degli utenti (paese cittagrave continentesubcontinente) impostazioni relative alle preferenze di lingua

Tecnologia utilizzata strumenti tecnologici utilizzati dagli utenti per la navigazione sul sito (tipologia di dispositivobrowser sistema operativo provider di rete)

Contenuti le pagine le pagine di entrata e di uscita gli ldquoeventirdquo compiuti sul sito (es download di documenti clicksu link outbound)

Canali di acquisizione del traffico canali web tramite cui gli utenti arrivano al sito Il raggruppamento di canaliprincipali comprende traffico diretto ricerca organica (cioegrave traffico non a pagamento proveniente dai motoridi ricerca) siti referenti social Altri canali - se attivi - sono ad esempio email marketing digital advertisingaffiliazioni

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

Obiettivi per tracciare il completamento di determinate azioni eseguite degli utenti sul sito (es compilazione di unform durata minima di una visita numero minimo di pagine per visita)

Analizzare le ricerche degli utenti

Le ricerche degli utenti sono quasi sempre il piugrave ampio vettore di traffico verso i contenuti web Per questa ragionenon soltanto egrave fondamentale fare in modo che le pagine di un sito siano ldquoottimizzaterdquo per essere trovate dagli utentiattraverso i motori di ricerca ma egrave altrettanto importante analizzare i dati di web analytics provenienti dalle ricercheinterne ed esterne al sito per avere contezza delle performance dei singoli contenuti e del livello di soddisfazione-utenteche generano

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

Ricerca esterna al sito

Top motori di ricerca referenti Definizione Principali motori di ricerca (Google Bing Yahoo ) che portanotraffico al sito

Azione Usa i relativi webmaster tools (es Google Search Console) per ottimizzare i contenuti e la struttura delsito e renderli cosigrave piugrave facilmente scansionabili dai crawler dei motori e ldquotrovabilirdquo dagli utenti

Top terminifrasi di ricerca Definizione Le principali parole e frasi digitate nei motori di ricerca tramite cui gliutenti arrivano al sito



Azione Verifica che i termini utilizzati dagli utenti coincidano o siano simili a quelli utilizzati nel sito Puoiprendere spunto da parole e frasi utilizzate dagli utenti per migliorare la terminologia che usi nei titoli neimetadati nelle URL e in generale allrsquointerno dei contenuti in modo da favorirne lrsquoottimizzazione sui motori diricerca

Top termini di ricerca con basso CTR (click through rate) Definizione Parole e frasi digitate nei motori di ricercache portano la minore quota di traffico al sito

Azione Revisiona e aggiorna i contenuti che gli utenti visitano dopo aver cercato tali termini per renderli piugraveappetibili e utili

Ricerca su sito

Top terminifrasi di ricerca Definizione Le principali parole e frasi digitate dagli utenti nel motore di ricerca internodel sito

Azione Crea nuovi contenuti o aggiorna quelli giagrave presenti incorporando la terminologia degli utenti nei meta-dati negli eventuali tag e nel testo stesso in modo da aiutare i visitatori a trovare le informazioni piugrave aderenti aibisogni espressi nella ricerca

Top ricerche che non generano risultati Definizione Parole e frasi digitate dagli utenti nel motore interno del sitoche non restituiscono risultati per mancanza di contenuti associati o non rappresentati nella maniera corretta

Azione Analizza i contenuti per capire se egrave il caso di aggiornarli o di pubblicarne di nuovi che rappresentino ilbisogno espresso dallrsquoutente nella ricerca

Top termini di ricerca con basso CTR (click through rate) Definizione Parole e frasi digitate nel motore di ricercainterno che restituiscono il piugrave basso numero di visualizzazioni di pagina

Azione Incorpora la terminologia valida nei testi e nei metadati per rendere le pagine piugrave rilevanti rispetto aquei termini

Principali oscillazioni nelle top ricerche Definizione Macro cambiamenti nel ranking dei termini piugrave cercati nelmotore di ricerca interno del sito

Azione Cerca di analizzare le ragioni per cui alcuni termini diventano meno ricercati di altri e viceversa assicu-rati che per i nuovi termini di ricerca diventati popolari siano presenti contenuti che soddisfano i nuovi bisogniespressi dai visitatori

Utenti che utilizzano la ricerca su sito Definizione Percentuale dei visitatori unici del sito che utilizza la funzionedi ricerca interna

Azione Ti aiuta a capire se egrave il caso di ottimizzare le funzionalitagrave di ricerca e lrsquoarchitettura informativa del sitofacendo in modo che i contenuti piugrave ricercati siano il piugrave possibile visibili

La reportistica

Unrsquoanalisi sistematica dei dati statistici di performance e soddisfazione utente egrave fondamentale per decidere quali azionimigliorative intraprendere su un servizio digitale

Egrave altrettanto fondamentale la creazione di una reportistica ad hoc che abbia la finalitagrave di essere condivisa allrsquointer-no di un team di lavoro (o con altri stakeholder) In linea generale egrave possibile creare e inviare report customizzatidirettamente dalle principali piattaforme di web analytics

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

43 Web analytics 39


Gli strumenti (Piwik e Google Analytics)

Di seguito proponiamo una serie di link di approfondimento per comprendere come installareconfigurare nella ma-niera corretta due fra le principali piattaforme di web analytics gratuite Piwik (piattaforma open source) e GoogleAnalytics (piattaforma commerciale)

Piwik

bull Installazione e configurazione di Piwik

bull Aggiungere un sito a Piwik

bull Implementare il tracciamento del motore di ricerca interno al sito

bull Impostare un obiettivo

bull Creazione ed invio di report customizzati

bull Importare dati da GA a Piwik

Google Analytics

bull Configurazione di Google Analytics

bull Implementare il codice di tracciamento

bull Implementazione del codice per app


bull Collegare la Search Console a Google Analytics


bull Export ed invio via email dei dati


CAPITOLO 5

User interface

User interface interfaccia utente egrave tutto quello che fa da ponte fra i servizi digitali ed i loro destinatari Sono icosiddetti Touch Point di un servizio digitale Non pensiamo allrsquointerfaccia solo come ad una serie di elementi graficie visuali ma come a tutto quello con cui lrsquoutente entra in relazione nei vari contesti per usare un servizio o un prodottodigitale

In questa fase delle linee guida ci concentriamo sugli elementi piugrave classici dellrsquointerfaccia definendo alcuni prin-cipi di visual design alcuni elementi di style degli esempi di layout o presentazione dei contenuti e alcun pattern(componenti) i mattoni veri e propri dellrsquointerfaccia

Presto alcune di queste sezioni verranno ampliate ed arricchite

Abbiamo proposto alcuni strumenti operativi (bricks) e di checklist rapide per completare le linee guida e per forniredei suggerimenti operativi Inoltre trovate un UI-kit di base e un Icon Kit per iniziare una prototipazione di base Letrovate su httpsdesignersitaliaituser-interface

Per chi vuole invece iniziare a scrivere codice la reference implementation delle linee guida o cosiddetto web-toolkitegrave qui httpsitaliagithubioita-web-toolkit

Uno spazio di discussione dedicato alla user interface e aperto al contributo di tutti egrave stato predisposto su httpsforumitaliaitcdesignuser-interface

Principi

Mobile first

Lrsquoapproccio mobile first consiste nel valutare in prima istanza la resa sui dispositivi mobili per poi arricchire dielementi e funzionalitagrave la composizione della pagina mano a mano che la viewport aumenta

Responsive Web Design

SI DEVE

41


Il sito web deve essere progettato e sviluppato con un approccio responsive con lrsquoobiettivo di rendere disponibileunrsquoottimale esperienza di visione allrsquoutente facilitagrave di lettura e navigazione con minime necessitagrave di ridimensionarespostare o scorrere su qualunque dispositivo indipendentemente dalla risoluzione e dalla dimensione dello schermo

Nellrsquoapproccio mobile first si parte dallrsquoessenziale

Obbligarsi a progettare unrsquoapplicazione con ridotte disponibilitagrave di spazio di interazione di velocitagrave di caricamentocostringe a stabilire delle prioritagrave e a fare delle scelte che risulteranno utili allrsquousabilitagrave del prodotto

Man mano che lo schermo si fa piugrave grande e il collegamento piugrave veloce i contenuti vengono arricchiti Un utenteseduto alla scrivania con un computer ha probabilmente piugrave tempo e piugrave possibilitagrave di approfondire e navigare Unutente collegato da smartphone ha forse lrsquourgenza di cercare quel contenuto dal luogo in cui si trova senza aspettaredi tornare a casa e arrivando allrsquoessenziale il piugrave velocemente possibile

I contenuti e le funzionalitagrave di un sito o un servizio devono poter essere fruibili su tutti i dispositivi piugrave utilizzati dagliutenti

SI DOVREBBE

Analizzare regolarmente lrsquoutilizzo dei dispositivi e delle diverse risoluzioni che gli utenti adoperano per accedere alsito

Egrave necessario assicurare la compatibilitagrave con almeno i seguenti browser

bull Internet Explorer 10+

bull Edge 12+

bull Safari 8+

bull Google Chrome (ultime versioni)

bull Opera (ultime versioni)

bull Mozilla Firefox (ultime versioni)

bull IE Mobile 10+

bull iOS Safari 8+ (versione del sistema operativo)

bull Android Browser 4+ (versione del sistema operativo)

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

Non egrave necessario che lrsquoaspetto del sito sia identico sui diversi dispositivi va tuttavia garantita unrsquoesperienza utenteequivalente

Garantire la compatibilitagrave

Nel web design si sono adottati spesso gli approcci graceful degradation (decadimento parziale) o progressive en-hancement (miglioramento progressivo) Si tratta di due risposte diverse alla stessa esigenza rendere il contenutoaccessibile su dispositivi diversi Nel primo approccio ci si fa carico di verificare che il progetto inizialmente pensatoper i dispositivi piugrave completi resti navigabile anche man mano che si usano tecnologie piugrave obsolete o meno interattiveNel secondo si parte da un nucleo solido e irrinunciabile di contenuti che vengono arricchiti via via che il dispositivodiventa piugrave potente e allrsquoavanguardia

Tecnicamente il sito web puograve rilevare quale dispositivo lo sta navigando Egrave possibile capire - lo user agent ovveroquale browser e quale sistema operativo egrave in collegamento - la risoluzione dello schermo ovvero quanti pixel abbiamoa disposizione - il tipo di media ovvero se stiamo andando in stampa o su schermo

42 Capitolo 5 User interface


Tecniche apposite come lrsquouso di media queries permettono di inserire istruzioni nei CSS affincheacute la presentazione deicontenuti sia calibrata sullrsquoattuale dimensione della viewport

Validazione dei fogli di stile CSS

Per compensare le incompatibilitagrave dei diversi browser egrave spesso necessario introdurre nei fogli di stile (CSS) codicenon conforme di conseguenza i risutati del test di validazione del W3C riportano degli errori

La validazione egrave importante laddove tali errori pregiudicano una funzionalitagrave oggi i browser sono piugrave ldquoresilientirdquo espesso non si verifica il caso

Non egrave necessario pertanto che un CSS rientri perfettamente negli standard

La validazione del CSS non egrave inoltre sufficiente a garantire lrsquoaccessibilitagrave

Stile

Tipografia

Web font

Le Web font sono famiglie di caratteri tipografici la cui licenza drsquouso permette il download remoto per la loro visua-lizzazione in pagine web Introdotte dalla versione CSS2 con la dichiarazione font-face le Web font sono oggipienamente compatibili con la maggioranza dei browser (IE4+ Firefox 35+ Safari 31+ Opera 10+ Chrome 40+) ecostituiscono la soluzione piugrave efficace per una coerente composizione tipografica Google Fonts egrave una piattaforma didistribuzione gratuita di Web font

Titillium Web

Il carattere tipografico istituzionale egrave la famiglia di font Titillium Web realizzato come progetto didattico allrsquointernoallrsquoAccademia di Belle Arti di Urbino e distribuito con licenza Open Font da Google Fonts La famiglia di caratteriTitillium Web egrave composta da numerose font di diversi pesi tipografici (dallrsquoExtra-Light allrsquoUltra-Bold) garantendocosigrave unrsquoestrema flessibilitagrave di utilizzo nelle composizioni dei testi

Specimen della famiglia Titillium Web

SI PUOgrave

Per la realizzazione dei siti egrave consigliato lrsquoutilizzo del carattere Titillium Web ma qualunque altra Web font chegarantisca la leggibilitagrave e unrsquoanaloga ampiezza di pesi tipografici puograve essere usata

Dimensioni e interlinea del testo

SI DEVE

Un paragrafo di testo non deve mai essere composto in una dimensione inferiore a 12px La dimensione standarddel paragrafo di testo egrave prevista in 18px Un paragrafo di testo deve essere composto sempre nel peso Regular mai

52 Stile 43


in Light o Bold Lrsquointerlinea avragrave generalmente una dimensione pari a circa il 150 della dimensione del corpo delcarattere (per esempio un testo in corpo 18px avragrave unrsquointerlinea di 27px)

Allineamento

SI DOVREBBE

Un paragrafo di testo deve essere preferibilmente composto con allineamento a sinistra Sono generalmente sconsi-gliati gli allineamenti centrati (a epigrafe) e a destra Lrsquoallineamento giustificato e senza sillabazione egrave invece sempreda evitare per lrsquoincongrua spaziatura delle parole e la minore leggibilitagrave che comporta

Giustezza

SI DEVE

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

Markup semantico

SI DEVE

Lrsquouso dei tag semantici consente di venire incontro ai requisiti di accessibilitagrave permettendo la corretta interpretazionedel testo da parte dei device di ausilio alla lettura

Composizione tabelle

In genere nelle tabelle un corretto allineamento del testo e una giusta spaziatura fra le colonne e le righe sono giagrave ingrado di creare la percezione delle strutture verticali e orizzontali che sottostanno al contenuto rendendo superflua lapresenza di molte delle linee divisorie o dei fondini di cella

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

Esempio di tabella con CSS di default

Esempi di buona impaginazione delle tabelle

Esempi di cattiva impaginazione delle tabelle

Formattazioni consigliate

Colore del testo

Generalmente il colore del testo deve essere nero (1C2024) o grigio (5A6772) su fondo bianco (FFFFFF) Vi-ceversa per le composizioni in negativo Dove necessario possono essere usati colori diversi dal nero e dal grigio



Fig 51 Impaginazione corretta delle tabelle

52 Stile 45


Fig 52 Impaginazione errata delle tabelle



purcheacute sia garantito un rapporto di contrasto minimo tra testo e sfondo di 451 (AA) come stabilito dalle specifichedi accessibilitagrave La verifica del rapporto di contrasto puograve essere facilmente effettuata attraverso molti tool online

bull esempio di strumento online per la verifica del contrasto colori

SI DOVREBBE

Per una maggiore coerenza della user experience si suggerisce per quanto riguarda i testi lrsquoadozione del seguentesistema cromatico

Legature e crenatura

La leggibilitagrave del testo nelle versioni dei browser piugrave recenti puograve essere migliorata con lrsquoutilizzo della dichiara-zione text-rendering optimizeLegibility che attiva il controllo della crenatura del testo e la sosti-tuzione automatica dei glifi delle legature Attualmente la dichiarazione egrave riconosciuta in Safari 5 e Chrome Fi-refox applica automaticamente la dichiarazione per i testi composti in corpo superiore a 20 px Utilizzando unafont OpenType possono esserne sfruttate le opzioni per le legature comuni e discrezionali con la dichiarazionefont-featuresettings ldquoligardquo 1 ldquodligrdquo 1

Colori

Palette colori

Qualunque scala cromatica puograve essere scelta per lo sviluppo del sito con la sola esclusione dei colori istituzionalidelle pubbliche amministrazioni centrali (blu 0066CC) La scala cromatica deve comunque garantire il rapporto dicontrasto minimo tra testo e sfondo di 451 come raccomandato dalle specifiche di accessibilitagrave WCAG 20 AA

Il colore non deve mai essere significante in seacute e non deve essere la modalitagrave con cui si trasmettono contenutiipovedenti daltonici e non vedenti non sarebbero in grado di identificarli correttamente

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

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

Definire una palette principale

SI DOVREBBE

Si consiglia lrsquoutilizzo di una palette di colori limitata Generalmente una palette di 5 tonalitagrave (Hue) egrave sufficienteper qualunque necessitagrave Limitare le tonalitagrave aiuta a focalizzare lrsquoattenzione dellrsquoutente e garantisce una migliorepercezione dellrsquoordine gerarchico dei contenuti

Una buona tecnica per la creazione di palette cromatiche armoniche puograve essere quella di scegliere una tonalitagrave princi-pale e selezionare le altre fra le tonalitagrave analoghe cioegrave tra i colori adiacenti nella ruota cromatica Variando luminositagravee saturazione delle singole tonalitagrave egrave poi possibile estendere ciascun colore secondo uno schema monocromatico Tuttii software di elaborazione grafica permettono con facilitagrave di gestire lo spazio cromatico Hue Saturation Brightness(HSB) per definire la propria palette colore

Definiamo le tonalitagrave che costituiscono le principali componenti cromatiche in questo caso due colori analoghi e unogrigio

52 Stile 47


Creare le gradazioni di colore

Sulla scorta delle tonalitagrave prescelte procediamo a costruire per ognuna di esse una scala di gradazioni formata da 5colori piugrave chiari e 5 piugrave scuri Per ottenere una scala di gradazioni coerente si puograve applicare il seguente meccanismodi calcolo allrsquointerno di uno spazio cromatico HSB

bull a partire dal colore base aggiungere a ogni passaggio verso lrsquoalto il 4 di Luminositagrave (B) e sottrarre il 15 diSaturazione (S)

bull a partire dal colore base sottrarre a ogni passaggio verso il basso il 10 di Luminositagrave (B)

Pur funzionando per la maggior parte delle tonalitagrave intermedie le percentuali di variazione sopra riportate potrebberoessere suscettibili di modifiche nel caso di colori particolarmente chiari o scuri Si otterragrave cosigrave una scala di gradazioniformata da 11 colori (il colore base piugrave 5 gradazioni piugrave chiare e 5 gradazioni piugrave scure) Denominando con il valore50 il colore base saragrave possibile definire una classificazione univoca delle gradazioni nella scala che va da 5 a 95 utileper indicare una specifica gradazione indipendentemente dalla tonalitagrave cui egrave applicata

Saragrave utile a questo punto testare il contrasto del colore base e delle relative gradazioni quando applicate al testo perverificarne lrsquoaccessibilitagrave eventualmente tramite uno strumento online per la verifica del contrasto colori

Nellrsquoesempio sopra riportato le gradazioni con il testo in nero possono essere utilizzate come sfondo quelle con iltesto in bianco possono invece essere usate come colore del testo rispettando i parametri di accessibilitagrave

Esempi di contrasto



Egrave corretto e accessibile

Non egrave corretto e non egrave accessibile

Palette per pubbliche amministrazioni centrali

SI DEVE

Il colore istituzionale egrave il blu 0066CC

Palette estesa delle pubbliche amministrazioni centrali

Allrsquointerno dei siti istituzionali delle pubbliche amministrazioni centrali sono utilizzate le seguenti undici gradazionidel colore principale Blu

Sono inoltre utilizzate le seguenti tre tonalitagrave di grigio per il testo e i fondini

I bottoni sono realizzati utilizzando tre gradazioni di ottanio

Iconografia

SI DEVE

Quando si utilizzano delle icone egrave necessario assicurare una chiara comprensione del loro significato Pertanto ogniicona dovragrave essere associata a un tooltip che ne chiarisca lrsquoazione La stessa icona non deve essere utilizzata perindicare azioni diverse allrsquointerno della stesso sito

52 Stile 49


Al fine di garantire una coerenza visiva si consiglia di utilizzare icone provenienti da un unico set grafico come adesempio quelle disponibili gratuitamente su Font Awesome o il set di icone incluso nel web toolkit delle Linee Guidaal quale egrave possibile contribuire proponendo integrazioni o modifiche

SI DOVREBBE

Egrave opportuno utilizzare solo icone e immagini che siano realmente necessari alla comprensione delle informazioni daparte dellrsquoutente evitare quindi elementi decorativi non essenziali

Crediti

Il testo utilizzato per le prove di composizione egrave tratto dalla poesia La cittagrave nuova di Alda Merini

Ecco un bianco scenarioper tratteggiarvi lrsquoaccompagnamentodegli oggetti di sfondo che pur vivonoNon ne sarograve lrsquoartefice impazienteBerrograve alle coppe della nostalgiaavrograve preteso drsquoozio nelle lacrimepercheacute non mi ribello alla naturala mia lentezza li esasperaLa mia lentezza No la mia fiduciaPer adesso egrave desertoIl mondo puograve rifarsi senza meE intanto gli altri mi denigreranno

28 dicembre 1948 - La Presenza di Orfeo

Layout

SI DOVREBBE

Utilizzare un layout essenziale

Lrsquoimpaginazione dei contenuti tramite un layout lineare (una o due colonne) favorisce la rapida scansione delleinformazioni e ne agevola la consultazione soprattutto su touchscreen dove il pattern di interazione piugrave funzionale egravelo scorrimento verticale della pagina

Casi drsquouso validi per lrsquoutilizzo di una colonna laterale ( ltnavgt ltasidegt) sono tutti e solo quelli dove sussisteunrsquoimmediata correlazione semantica con il contenuto principale

bull menu contestuale della sezione del sito correntemente visualizzata

bull elenco di sezioni contenuti documenti correlati

SI PUOgrave



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

Lrsquoutilizzo di card favorisce la consultazione dei contenuti sugli schermi piugrave piccoli

Piugrave in generale laddove i dati non hanno una struttura prevalentemente tabulare egrave consigliato lrsquoutilizzo di card o listeal posto che di tabelle (table) che risultano piugrave difficili da rendere fruibili in maniera efficace sui dispositivi mobili

Gerarchia dei contenuti

SI DEVE

Per una corretta definizione della struttura gerarchica dei contenuti la suddivisione in parti deve essere espres-sa attraverso lrsquouso dei tag semantici disponibili in HTML5 quali ltarticlegt ltasidegt ltfigcaptiongtltheadergt ltfootergt ecc al posto del generico divisore ltdivgt

Griglie

Allrsquointerno dello spazio a disposizione lrsquoorganizzazione del contenuto deve essere strutturata seguendo un sistema digriglie responsive per mantenere una efficace esperienza utente trasversalmente ai dispositivi utilizzati

La griglia rappresenta la struttura invisibile che permette di organizzare i contenuti della pagina Una griglia diimpaginazione consiste in colonne di testo (eo immagini) separate da spazi intercolonna e contornate dai marginidella pagina

Le dimensioni delle colonne vanno adattate ai cambiamenti della viewport ogni colonna occuperagrave una percentualedi spazio specifica a seconda che sia visualizzata su dispositivi desktop tablet o smartphone La ridisposizione deicontenutia seconda delle dimensione dello schermo garantisce che i testi siano leggibili anche sugli schermi piugravepiccoli e lrsquointerazione utente (es form controlli dinamici) rimanga agevole

Impostazioni della griglia di costruzione consigliata

bull Larghezza massima del contenitore 1440 px

bull Spazio intercolonna (gutter) 16 px a tutte le risoluzioni

Breakpoint Padding lateraleSmartphone (lt 768 px) 16 pxTablet (lt 992 px) 16 pxDesktop (lt 1366 px) 24 pxDesktop (lt 1366 px) 24 px

Impostazione della home page

SI DOVREBBE

Il corpo della home page dovrebbe privilegiare una struttura modulare orizzontale con sezioni che comprendonocontenuti omogenei

Tale struttura

53 Layout 51


bull costituisce una guida visuale per lrsquoutente messo in grado di riconoscere e distinguere agevolmente le diversesezioni autonome e ben identificate

bull non presenta problematiche legate alla riorganizzazione gerarchica dei contenuti su mobile

bull favorisce la flessibilitagrave poicheacute allrsquooccorrenza i singoli blocchi possono essere nascosti o spostati senza impattisullrsquoarmonia generale della pagina

bull costringe a unrsquoanalisi approfondita riguardo i contenuti da considerare prioritari scoraggiando quindilrsquoaffollamento di informazioni non essenziali

Le sezioni della home page

bull devono avere un titolo che le identifica in modo chiaro (es servizi notizie eventi )

bull possono esser distinte tramite colori di sfondo differenti (appartenenti a una palette coerente) eventualmentealternati

bull qualora vi fossero ulteriori contenuti da mostrare deve esser presente un link collegato alla pagina contenentelrsquoelenco completo

Componenti

Bottoni

Di seguito un esempio dello stile da utilizzare per i bottoni

I colori sono personalizzabili in base alla palette che saragrave stata individuata per ciascun sito web Egrave possibile impostarele dimensioni dei bottoni utilizzando le classi di utilitagrave responsive (u-text-r-)

Form

SI DEVE

Nei form ogni campo deve essere sempre associato anche attraverso il tag `ltlabelgt` a unrsquoetichetta che ne descrivain maniera chiara il contenuto che deve essere inserito Per essere sempre leggibile lrsquoetichetta deve essere posizionataesternamente al campo Deve essere consentito inoltre lo spostamento da un campo allrsquoaltro tramite il tasto Tab

Esempio di stile per form

Form errore

SI DEVE

In caso di errori o di mancata compilazione dei campi di un form si dovragrave sempre evidenziare in maniera immediata-mente percepibile quale sia il campo o i campi che non soddisfano le richieste aggiungendo lrsquoindicazione dellrsquoazioneda compiere per il corretto completamento



Alert

Per i messaggi di ldquoallertardquo contestuali alla compilazione (messaggi di errore o di successo) egrave importante evitare diveicolare lrsquoinformazione unicamente tramite lrsquoutilizzo del colore lrsquoesito dellrsquooperazione va chiarito in manieraevidente nel testo e possibilmente tramite unrsquoicona esplicativa

Alert per errori

Alert per messaggi di attenzione

Alert per messaggi di successo

Alert per informazioni

Carousel

SI DOVREBBE

Evitare lrsquoutilizzo di carousel (slider) automatici

I dati statistici raccolti riguardo lrsquointerazione degli utenti con i carousel ne rivelano un utilizzo effettivo marginale(1)

Lo scorrimento automatico dei contenuti egrave generalmente sconsigliato poicheacute di fatto riduce la visibilitagrave delleinformazioni Inoltre puograve esser difficoltoso leggere lrsquointero contenuto di una slide prima che venga sostituita auto-maticamente dalla successiva Infine introduce problemi di accessibilitagrave per chi utilizza una tastiera o uno screenreader

Nel caso si configuri lrsquoassoluta necessitagrave di utilizzare un carousel

bull i titoli dei contenuti devono essere visibili in ogni momento (fuori dalle slide quindi)

bull lrsquoutente deve poter controllare lo scorrimento (stop avvio)

bull i controlli devono poter esser utilizzabili anche tramite tastiera (oltre che con mouse touch)

Nella maggior parte dei casi risulta piugrave conveniente sostituire il carousel con una presentazione statica dei contenuti(ad esempio una galleria di immagini) in modo che siano tutti visibili immediatamente o tramite scorrimento manualenon automatico

Header

Le indicazioni presenti in questa sezione sono rivolte a tutte le pubbliche amministrazioni (centrali e locali) e gli entie le societagrave a loro afferenti (ad esempio societagrave partecipate consorzi comunitagrave) vanno applicate nella progettazionedei siti istituzionali e tematici

Contenuti

SI DEVE

La testata deve contenere le seguenti funzionalitagrave

54 Componenti 53


bull denominazione dellrsquoamministrazione ente societagrave sito tematico (link in formato testuale che punta allahome page)

bull barra di accesso al livello gerarchico superiore dellrsquoamministrazione (o allrsquoamministrazione afferente nel casodi un sito tematico)

bull stemma logo dellrsquoamministrazione ente societagrave sito tematico

bull accesso al menu di navigazione

SI PUOgrave

La testata puograve inoltre contenere una o piugrave delle seguenti funzionalitagrave

bull campo di ricerca

bull accesso diretto ai servizi (al form di login)

bull link ai social network

bull selezione lingue

Componenti

La struttura della testata egrave suddivisa in 3 aree funzionali

Fig 53 Struttura header

1 Area appartenenza

Contiene lrsquoindicazione dellrsquoamministrazione di appartenenza e se necessario lrsquoaccesso ai servizi Il colore consigliatoper la barra superiore egrave 303030

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



2 Area navigazione e intestazione

Contiene lrsquoaccesso al menu di navigazione lo stemma e la denominazione in formato testuale dellrsquoamministrazione ente eventualmente il campo di ricerca e le selezioni dei social network e delle lingue Lrsquoarea di navigazione puograveessere estesa dalla presenza del menu orizzontale

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

SI PUOgrave

Il colore di fondo dellrsquoarea navigazione e intestazione egrave personalizzabile (tenendo presente i requisiti di accessibilitagravenellrsquoutilizzo dei colori)

SI DEVE

Lrsquoicona burger se presente nella versione desktop deve essere accompagnata dallrsquoetichetta ldquoMENUrdquo

Fig 54 Icona burger

SI DOVREBBE

Lo stemma dovrebbe preferibilmente essere utilizzato nella versione al tratto se presentato su sfondo diverso dalbianco

SI DEVE

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

SI DEVE

Le icone per lrsquoaccesso alle pagine social sono posizionate a destra della testata sopra il campo di ricerca Quando ilnumero delle icone social supera le 3 egrave possibile aggiungere unrsquoicona generica che dagrave accesso alle restanti

3 Area personalizzata

Lo spazio a disposizione per la personalizzazione egrave a discrezione dellrsquoamministrazione

54 Componenti 55


Fig 55 Esempio di logo

SI DOVREBBE

Per garantire una rapporto equilibrato fra le diverse aree funzionali della testata si consiglia di utilizzare per lrsquoAreapersonalizzata altezze multiple dellrsquoArea di appartenenza (di circa 3 5 o 7 volte)

Esempio di header

Lrsquoallineamento dei componenti della testata egrave basato su una griglia a 12 colonne e sui conseguenti adattamenti nelleversioni responsive secondo quanto specificato nella sezione griglie

visualizza lrsquoheader a tutte le risoluzioni

Footer

Componenti

La struttura del footer egrave suddivisa in 2 aree funzionali

1 Barra di feedback

Contiene lrsquoaccesso a un form tramite il quale gli utenti possono inviare un feedback allrsquoamministrazione

2 Contenuto

Lrsquoarea contiene

bull lo stemma e lrsquointestazione dellrsquoamministrazione

bull i contatti



Fig 56 Struttura footer

bull i social (tutti)

bull la sezione ldquoAmministrazione trasparenterdquo

bull link a privacy policy e note legali

bull i crediti

Colori

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

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

Applicazioni

Esempio desktop 1440

Esempio mobile 320

54 Componenti 57


Fig 57 Esempio desktop 1440



Fig 58 Esempio mobile 320

54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design

Architettura dellinformazione

SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti

Indice

1 Introduzione alle linee guida di design 111 I cittadini al centro 112 Sviluppo collaborativo 113 Sviluppo programmato 214 Version control e release della documentazione 215 Stile della documentazione 216 Consultazione della documentazione 217 Kit di sviluppo e di design 3

2 Service design 521 Accessibilitagrave 522 Normativa 723 Design management 11

3 Content design 1331 Architettura dellrsquoinformazione 1332 SEO 1833 Linguaggio 25

4 User research 3341 Usabilitagrave 3342 Ricerche qualitative 3543 Web analytics 36

5 User interface 4151 Principi 4152 Stile 4353 Layout 5054 Componenti 52

i

ii

CAPITOLO 1













1













bull si deve (devi)



bull best practice










CAPITOLO 2

Service design


Accessibilitagrave

SI DEVE


Definizione







5





Aspetto










Struttura




Comportamento














Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti

ii

CAPITOLO 1













1













bull si deve (devi)



bull best practice










CAPITOLO 2

Service design


Accessibilitagrave

SI DEVE


Definizione







5





Aspetto










Struttura




Comportamento














Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti

CAPITOLO 1













1













bull si deve (devi)



bull best practice










CAPITOLO 2

Service design


Accessibilitagrave

SI DEVE


Definizione







5





Aspetto










Struttura




Comportamento














Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti













bull si deve (devi)



bull best practice










CAPITOLO 2

Service design


Accessibilitagrave

SI DEVE


Definizione







5





Aspetto










Struttura




Comportamento














Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti







CAPITOLO 2

Service design


Accessibilitagrave

SI DEVE


Definizione







5





Aspetto










Struttura




Comportamento














Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti





Aspetto










Struttura




Comportamento














Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti










Normativa




Normativa








22 Normativa 7






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti






Partita IVA




PEC































Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti














Accessibilitagrave





22 Normativa 9








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti








Trasparenza














Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti


Privacy







Design management





CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



CAPITOLO 3

Content design





Lrsquoambito


bull gli utenti

bull i contenuti

bull il contesto


13













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti













Gli utenti








Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



Il contenuto









bull i metadati

bull i formati



Il contesto































































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



















































bull

SEO

Premessa


Introduzione





I fattori on-page














Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti













Le parole chiave







bull Google Trends

bull Ubersuggest




32 SEO 19














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti














Grassetto


Immagini












32 SEO 21


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti


URL delle pagine















Mappa del sito














bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti





bull i video

bull le immagini

File robotstxt












Il progetto AMP


Dati strutturati





bull breadcrumbs

32 SEO 23
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti
















I fattori off-page

Link building































Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti




















Approfondimenti




Utile da sapere



Linguaggio



SI DEVE

33 Linguaggio 25













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti













SI DOVREBBE


Linguaggio


SI DOVREBBE


Utilizzare quindi







Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti


Corretta ortografia


Titoli


SI DOVREBBE










Sommario

SI DOVREBBE







Testo della pagina




33 Linguaggio 27




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti




Creazione dei link

SI DEVE





Immagini


Ricordati di


















bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti










bull Pixlr Express

bull Fotor

Archiviazione






Licenze

SI DEVE






33 Linguaggio 29













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti













33 Linguaggio 31







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti







SI DEVE



CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti

CAPITOLO 4

User research


Usabilitagrave

Definizione




bull Cittadini

33


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti


bull Aziende


bull Committenti









SI DOVREBBE


















Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



Per approfondimenti




















Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti




Web analytics

Premessa









Introduzione
































43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti






















43 Web analytics 37


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti


























Ricerca su sito











La reportistica




43 Web analytics 39




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti




Piwik







Google Analytics









CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti

CAPITOLO 5

User interface







Principi

Mobile first



SI DEVE

41







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti







SI DOVREBBE




bull Edge 12+

bull Safari 8+




bull IE Mobile 10+
















Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti








Stile

Tipografia

Web font


Titillium Web



SI PUOgrave



SI DEVE


52 Stile 43



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



Allineamento

SI DOVREBBE


Giustezza

SI DEVE


Markup semantico

SI DEVE









Colore del testo





52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



52 Stile 45







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti







SI DOVREBBE




Colori

Palette colori






SI DOVREBBE




52 Stile 47









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti









Esempi di contrasto






SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti





SI DEVE






Iconografia

SI DEVE


52 Stile 49



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



SI DOVREBBE


Crediti




Layout

SI DOVREBBE






SI PUOgrave







SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti






SI DEVE


Griglie









SI DOVREBBE


Tale struttura

53 Layout 51










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti










Componenti

Bottoni



Form

SI DEVE



Form errore

SI DEVE




Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti


Alert


Alert per errori




Carousel

SI DOVREBBE









Header


Contenuti

SI DEVE


54 Componenti 53






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti






SI PUOgrave






Componenti



1 Area appartenenza








SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti





SI PUOgrave


SI DEVE


Fig 54 Icona burger

SI DOVREBBE


SI DEVE


SI DEVE




54 Componenti 55



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti



SI DOVREBBE


Esempio di header



Footer

Componenti


1 Barra di feedback


2 Contenuto

Lrsquoarea contiene


bull i contatti







bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti






bull i crediti

Colori



Applicazioni


Esempio mobile 320

54 Componenti 57






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti






54 Componenti 59









Service design

Accessibilitagrave

Normativa

Design management

Content design


SEO

Linguaggio

User research

Usabilitagrave


Web analytics

User interface

Principi

Stile

Layout

Componenti

linee guida di design per i servizi web della pa · linee guida di design per i servizi web della...

Documents