linee guida per realizzare un sito accessibile, usabile, centrato sull'utente, trasparente ed efficace

1. La struttura di un SITO
Standard di qualità
per un sito web
Linee guida per la
pianificazione e
organizzazione di un sito web
di contenuto culturale
Nicoletta Salvatori - 2015

2. Pianificazione
❖ Compre ogni altra forma di comunicazione la
progettazione di un sito prevede la definizione di:
❖ natura del sito (identità,
messaggio, mission)
❖ bacino di utenza (target)
❖ contenuti
❖ modalità di navigazione

3. Standard di qualità
❖ Linee guida rilasciate dal Gruppo Minerva (MInisterial NEtwoRk Valorising
Activities in digitalisation: rete tematica che si occupa della qualità di contenuti
digitali realizzati in ambito culturale scientifico e accademico)
❖ http://www.minervaeurope.org/home.htm
❖ http://www.beniculturali.it/mibac/export/MiBAC/sito-MiBAC/Contenuti/
Progetti/Archivio/Progetti-Europei/visualizza_asset.html_563517191.html

4. Standard di qualità
❖ Linee guida rilasciate dal Gruppo Minerva (MInisterial NEtwoRk Valorising
Activities in digitalisation: rete tematica che si occupa della qualità di contenuti
digitali realizzati in ambito culturale scientifico e accademico)
❖ http://www.minervaeurope.org/home.htm
❖ http://www.beniculturali.it/mibac/export/MiBAC/sito-MiBAC/Contenuti/
Progetti/Archivio/Progetti-Europei/visualizza_asset.html_563517191.html
TRASPARENZA = devono essere chiari l’identità e gli obiettivi del sito e di chi lo gestisce
EFFICACIA = contenuto appropriato, rilevante, corretto, ben presentato, facile da navigare
AGGIORNAMENTO = mantenimento e continuo aggiornamento dei contenuti
ACCESSIBILITÀ = disponibile per tutti gli utenti qualsiasi sia la tecnologia che usano
USER CENTERED = facile da usare, intuitivo, con meccanismi di valutazione e di feedback
REATTIVITA’ = contattabile dai clienti, disponibile a dare risposte, aperto alla condivisione
MULTILINGUISMO = prospettiva internazionale
GESTIONE = rispetto delle norme legali, del diritto d’autore, della privacy

5. Le buone regole
❖ Un sito web di alta qualità deve essere chiaramente identificabile
e il suo scopo (mission) deve essere evidente
❖ L’identità e le info sul sito devono essere o sulla home page o
raggiungibili con un solo click
❖ Il titolo del sito deve essere chiaro e significativo senza
ambiguità
❖ Se il sito apre con una splash screen (animazioni e immagini
senza contenuto) la intro deve poter essere bypassata (skip intro)
per arrivare immediatamente a una home page “trasparente”
❖ La facilità di accesso alle informazioni è cruciale e questo attiene
anche a fattori grafici (look and feel): i tool di navigazione, la
posizione dei menù di navigazione, la scelta dei colori, la
presentazione e didascalizzazione delle immagini

6. Le buone regole
❖ Un sito web di alta qualità deve essere chiaramente identificabile
e il suo scopo (mission) deve essere evidente
❖ L’identità e le info sul sito devono essere o sulla home page o
raggiungibili con un solo click
❖ Il titolo del sito deve essere chiaro e significativo senza
ambiguità
❖ Se il sito apre con una splash screen (animazioni e immagini
senza contenuto) la intro deve poter essere bypassata (skip intro)
per arrivare immediatamente a una home page “trasparente”
❖ La facilità di accesso alle informazioni è cruciale e questo attiene
anche a fattori grafici (look and feel): i tool di navigazione, la
posizione dei menù di navigazione, la scelta dei colori, la
presentazione e didascalizzazione delle immagini

7. Le buone regole
❖ Un sito web di alta qualità deve essere chiaramente identificabile
e il suo scopo (mission) deve essere evidente
❖ L’identità e le info sul sito devono essere o sulla home page o
raggiungibili con un solo click
❖ Il titolo del sito deve essere chiaro e significativo senza
ambiguità
❖ Se il sito apre con una splash screen (animazioni e immagini
senza contenuto) la intro deve poter essere bypassata (skip intro)
per arrivare immediatamente a una home page “trasparente”
❖ La facilità di accesso alle informazioni è cruciale e questo attiene
anche a fattori grafici (look and feel): i tool di navigazione, la
posizione dei menù di navigazione, la scelta dei colori, la
presentazione e didascalizzazione delle immagini

8. Le buone regole 2
❖ La relazione tra immagini e contenuto deve essere evidente
❖ I link interni devo essere funzionanti e controllati
❖ L’utente deve sempre sapere dove si trova (breadcrumbs) e deve
sempre poter fare un passo indietro e avere accesso diretto alla
homepage
❖ Il menù deve essere sempre visibile e chiaro. In pagine interne
complesse occorre un secondo menù di navigazione
❖ Deve essere presente in fondo (footer) ciìon la mappa del sito e
le informazioni legali

9. Le buone regole 2
❖ La relazione tra immagini e contenuto deve essere evidente
❖ I link interni devo essere funzionanti e controllati
❖ L’utente deve sempre sapere dove si trova (breadcrumbs) e deve
sempre poter fare un passo indietro e avere accesso diretto alla
homepage
❖ Il menù deve essere sempre visibile e chiaro. In pagine interne
complesse occorre un secondo menù di navigazione
❖ Deve essere presente in fondo (footer) ciìon la mappa del sito e
le informazioni legali

10. L’utente prima di tutto
❖ La Progettazione centrata sull'utente (User-centered design (UCD) è una filosofia
di progettazione nella quale l’attenzione in ogni passo è concentrata sui bisogni,
i desideri e i limiti dell'utente per massimizzare l'usabilità del prodotto.
❖ Il sito web è uno strumento che ha valore fintanto che fornisce informazioni
e servizi all’utente attraverso:
❖ rilevanza del contenuto
❖ AGGIORNAMENTO COSTANTE del contenuto
❖ facilità dell’uso dell’interfaccia
❖ navigabilità
❖ multilinguismo
❖ interattività, ovvero
❖ coinvolgimento (engagement) - creare fiducia, attivare lo sharing
❖ impegno (commitment) - co-creazione e feedback con l’utente

11. L’era dell’accesso
❖ L'era dell'accesso, La rivoluzione della new economy è un saggio di
economia scritto da Jeremy Rifkin (economista, attivista e saggista
statunitense) e pubblicato in Italia da Mondadori nel 2000.
Rifkin ha previsto il passaggio da un'economia dominata dal
mercato e dai concetti di bene e proprietà, verso un'economia
dominata dalla possibilità libera di accesso a valori come la
cultura, l'informazione e le relazioni.
❖ Non solo la nuova meta del marketing è riuscire a vendere esperienze, relazioni
cultura ed intrattenimento in un'era in cui provare è più importante che possedere. Ma
la nuova emarginazione sociale passa attraverso la mancanza di accesso diretto
all’informazione globale, perché la Rete possa essere democratica e libera deve essere
accessibile.
❖ I concetti di ACCESSIBILITA’ e USABILITA’ sono basilari nella progettazione di un
sito

12. Accessibilità e Usabilità
❖ Garantire ACCESSIBILITA’ ai contenuti significa tener presente nella
progettazione le diverse tipologia di utenti e dei diversi strumenti e programmi
in loro possesso: tecnologia usata (fissa, mobile, datata), contesto socio
economico, disabilità = uso di linguaggi standard in grado di
avere la massima interoperabilità con altri software e interfacce adoperate
Non tutti usano il paradigma classico di accesso (mouse-tastiera-monitor-browser)
❖ Le linee guida standard che governano l’accessibilità sono state redatte dal
W3C The World Wide Web Consortium, una comunità internazionale che ha
lo scopo di sviluppare standard per il web. Una parte degli sforzi del consorzio
va nella direzione della Web Accessibility Iniziative (WAI) e riguarda i
portatori di disabilità.
❖ http://www.w3.org/WAI

13. ❖ Per USABILITA’ si intende la garanzia di un sito di essere in linea
con il proprio target, di consentire il conseguimento degli obiettivi
che l’utente si pone con efficacia, efficenza e soddisfazione.
❖ Fa parte della Usabilità anche la interattività, il coinvolgimento
degli utenti che possono dire la loro non solo sui contenuti del sito
la sul suo stesso progetto e possono quindi attivamente influenzarne
progettazione ed evoluzione (per esempio contattando gli lo
gestisce, lasciando feedback, valutazioni, recensioni…)
❖ Principi di Usabilità sono
❖ intuitività (capire come usare qualcosa semplicemente
guardandola: sottolineature, icone…)
❖ funzionalità (gli oggetti devono coerenti al loro uso)

14. ❖ Per USABILITA’ si intende la garanzia di un sito di essere in linea
con il proprio target, di consentire il conseguimento degli obiettivi
che l’utente si pone con efficacia, efficenza e soddisfazione.
❖ Fa parte della Usabilità anche la interattività, il coinvolgimento
degli utenti che possono dire la loro non solo sui contenuti del sito
la sul suo stesso progetto e possono quindi attivamente influenzarne
progettazione ed evoluzione (per esempio contattando gli lo
gestisce, lasciando feedback, valutazioni, recensioni…)
❖ Principi di Usabilità sono
❖ intuitività (capire come usare qualcosa semplicemente
guardandola: sottolineature, icone…)
❖ funzionalità (gli oggetti devono coerenti al loro uso)
❖ Presentare l'informazione all'utente in modo chiaro e conciso,
❖ Evitare termini tecnici o specialistici
❖ Semplificare la struttura navigazione con layout funzionali
❖ Offrire le scelte corrette in una maniera che risulti ovvia
❖ Organizzare ogni pagina in modo che l'utente riconosca la posizione e le azioni da
compiere
❖ Eliminare ogni ambiguità relativa alle conseguenze di un'azione
❖ Mettere la cosa più importante nella posizione giusta della pagina web.
❖ Fare in modo che l’informazione di ritorno ad ogni azione compiuta sia rapida
Obiettivi della web

15. Pianificare
❖ La prima cosa da fare per realizzare un sito web è selezionare i
contenuti, strutturare logicamente la navigazione
❖ Raggruppare i contenuti in aree che contengono informazioni
omogenee
❖ Evitare una navigazione troppo rigida (percorsi obbligati) ma
nello stesso tempo costruire percorsi logici di accesso alle
informazioni desiderate
❖ Creare un primo menù di navigazione
❖ Creare uno schema

16. Pianificare
❖ La prima cosa da fare per realizzare un sito web è selezionare i
contenuti, strutturare logicamente la navigazione
❖ Raggruppare i contenuti in aree che contengono informazioni
omogenee
❖ Evitare una navigazione troppo rigida (percorsi obbligati) ma
nello stesso tempo costruire percorsi logici di accesso alle
informazioni desiderate
❖ Creare un primo menù di navigazione
❖ Creare uno schema

17. Pianificare
❖ La prima cosa da fare per realizzare un sito web è selezionare i
contenuti, strutturare logicamente la navigazione
❖ Raggruppare i contenuti in aree che contengono informazioni
omogenee
❖ Evitare una navigazione troppo rigida (percorsi obbligati) ma
nello stesso tempo costruire percorsi logici di accesso alle
informazioni desiderate
❖ Creare un primo menù di navigazione
❖ Creare uno schema

18. Navigare navigare…
❖ navigazione principale o menù deve contenere 6-7
elementi con nomi significativo ed essere in posizione fissa
in tutte le pagine (sotto l’intestazione o nella colonna a
sinistra)
❖ navigazione secondaria (le sezioni in cui si suddivide ogni
singola area)
❖ navigazione contestuale (tra documenti correlati tra loro
per tema, per cronologia, per collocazione)
❖ meta-navigazione (home, mappa, contatti, cerca, feedback)

19. Il layout
L’impaginazione di un sito ha una duplice finzione
❖ veicola contenuti
❖ veicola strumenti per navigare tra i contenuti (barra di navigazione, link, tools
o strumenti di utilità)
La prima necessità è fare in modo che sia evidente la differenza tra
informazioni di servizio e contenuto informativo
Le pagine vanno organizzate graficamente in modo omogeneo, le aree scelte
per il servizio devono essere mantenute in tutte le pagine nello stresso posto
(consigli utili nel sito del W3C “il grande normalizzatore del WEB”)
In rete trovate moltissimi layout prefabbricati e modificabili. Wordpress e Joomla
sono le piattaforme più usate per creare siti a costo zero.

20. Il layout
L’impaginazione di un sito ha una duplice finzione
❖ veicola contenuti
❖ veicola strumenti per navigare tra i contenuti (barra di navigazione, link, tools
o strumenti di utilità)
La prima necessità è fare in modo che sia evidente la differenza tra
informazioni di servizio e contenuto informativo
Le pagine vanno organizzate graficamente in modo omogeneo, le aree scelte
per il servizio devono essere mantenute in tutte le pagine nello stresso posto
(consigli utili nel sito del W3C “il grande normalizzatore del WEB”)
In rete trovate moltissimi layout prefabbricati e modificabili. Wordpress e Joomla
sono le piattaforme più usate per creare siti a costo zero.
Osservatorio Laboratorio Ce l’hanno fatta News Domande e Risposte
Home Chi siamo Archivio Risorse Contatti Iscriviti
SLIDER INFORMATIVO SULL’ADAPTIVE MARKETING
(utilizzo di infografica)
OSSERVATORIO
Ultimo articolo inserito
(titolo, breve testo + read more)
HOT TOPICS
(elenco titoli + link)
DOMANDA & RISPOSTA
“
“Ultima domanda & risposta inserita
CE L’HANNO FATTA
Ultimo articolo inserito
(titolo, breve testo + read more)
NEWS
Ultima news inserita + slider delle ultime news inserite
(rotazione automatica + link storico news)
LABORATORIO
LIVE TWITTING VIDEO HIGHLIGHT
MEGA FOOTER
(mappa del sito)
TEMPLATE
HEADER
menù
navigazione
LOGO
FOOTER
COMMITMENT

21. La “gabbia” di un sito

22. Fisso, Fluido, Elastico
❖ Layout Fisso: è progettato con dimensioni standard per il monitor del
computer a cui NON si adatta automaticamente. Viene misurato in pixel
ed è rigido.
❖ Layout Fluido: occupa sempre tutto lo spazio a disposizione nella
finestra del browser rientrano in questa tipologia tutti i layout che
variano larghezza al variare della larghezza della finestra del browser.
L’effetto fluido si può ottenere usando le percentuali come unità di
misura
❖ Layout Elastico: usa l’unità di misura .em
1
per il testo e la larghezza
degli elementi principali della pagina, in questo modo ridimensionando
il carattere del testo è possibile agire sulla larghezza della pagina.
1L’em è un’unità di misura relativa. Il suo nome proviene dalla tipografia e identifica la dimensione
della lettera maiuscola M di un carattere.

23. Adaptive/Responsive
❖ Se il sito contempla anche
la navigazione adatta agli
smartphone e ai tablet o si
crea una App nativa
(ovvero un mini sito
progettato ad hoc) o, data
la quota crescente di
traffico proveniente da
“mobile”, si opta per un
template in grado di
adattarsi ai mobile device.

24. Usa Layout fissi diversi
per ogni device specifico
per mantenere la stessa
presentazione del sito a
seconda del dispositivo
su cui viene
visualizzato.
Utilizza il server per capire se il
sito è visitato da un dispositivo
mobile. Vengono creati a
“mantenuti” templates fluidi e
elastici diversi a seconda che il
sito venga visualizzato da
desktop/laptop o smartphone.
Utilizza layout sia
elastici che fissi in modo
da essere sia sempre
riconoscibile sia
adattabile.

25. Never forget
❖ HOMEPAGE attenzione a usare homepage solo emozionali (slideshow o video) in questi
casi occorre una Homepage secondaria e la possibilità di “saltare” la presentazione
❖ MAPPA DEL SITO di solito nel footer o piedino e in ogni pagina
❖ NOVITA’ news, documenti, eventi, comunicati stampa richiamati in home, organizzati
per data, eliminati quando vecchi
❖ CHI SIAMO identità del sito, missione e scopi, contatti, pagina raggiungibile dalla
Home e presente nel footer.
❖ CONDIZIONI D’USO nel footer (politiche di privacy, copyright, accessibilità)
❖ BRICIOLE DI PANE, le breadcrunch rendono evidente sempre (in alto sotto il menù) il
percorso effettuato per arrivare alla pagina home>sezioneA>documento B
❖ RICERCA NEL SITO in alto nell’Header sempre a disposizione (semplice/avanzata)
❖ FEEDBACK - SHARING - RSS ben visibili con le icone relative ai principali social
network

26. Never forget
❖ HOMEPAGE attenzione a usare homepage solo emozionali (slideshow o video) in questi
casi occorre una Homepage secondaria e la possibilità di “saltare” la presentazione
❖ MAPPA DEL SITO di solito nel footer o piedino e in ogni pagina
❖ NOVITA’ news, documenti, eventi, comunicati stampa richiamati in home, organizzati
per data, eliminati quando vecchi
❖ CHI SIAMO identità del sito, missione e scopi, contatti, pagina raggiungibile dalla
Home e presente nel footer.
❖ CONDIZIONI D’USO nel footer (politiche di privacy, copyright, accessibilità)
❖ BRICIOLE DI PANE, le breadcrunch rendono evidente sempre (in alto sotto il menù) il
percorso effettuato per arrivare alla pagina home>sezioneA>documento B
❖ RICERCA NEL SITO in alto nell’Header sempre a disposizione (semplice/avanzata)
❖ FEEDBACK - SHARING - RSS ben visibili con le icone relative ai principali social
network
LOGO
NAVIGAZIONE
SECONDARIA
HEADER
MENU’
NEWS
EVENTI
stampabilità
FOOTER
SOCIAL
lingua e
layout
elastico
LOGIN

27. ❖ FAQ, RISPOSTE A DOMANDE FREQUENTI Frequently asked questions
nella pagina dei contatti in modo che l’utente trovi i suoi dubbi già risolti
❖ SELETTORE DI LINGUA in Home, bene evidente in alto a destra presso il titolo
❖ REGISTRAZIONE/LOGIN dove ci sono forum, newsletter, discussioni, sezioni riservate,
download di risorse ci vuole una funzione di riconoscimento dell’utente (form di registrazione) e la
richiesta di login con parametri semplici (nome utente/password)
❖ NEWSLETTER servito a parte ben evidenziato in homepage, riservato agli utenti registrati. Si
tratta di un notiziario inviato via mail con una periodicità più o meno fissa. Non sostituisce le News
del sito ma le approfondisce. E’ un invito periodico a collegarsi al sito e tiene vivo l’interesse del
lettore sui suoi contenuti
Usefull Tools

28. ❖ FAQ, RISPOSTE A DOMANDE FREQUENTI Frequently asked questions
nella pagina dei contatti in modo che l’utente trovi i suoi dubbi già risolti
❖ SELETTORE DI LINGUA in Home, bene evidente in alto a destra presso il titolo
❖ REGISTRAZIONE/LOGIN dove ci sono forum, newsletter, discussioni, sezioni riservate,
download di risorse ci vuole una funzione di riconoscimento dell’utente (form di registrazione) e la
richiesta di login con parametri semplici (nome utente/password)
❖ NEWSLETTER servito a parte ben evidenziato in homepage, riservato agli utenti registrati. Si
tratta di un notiziario inviato via mail con una periodicità più o meno fissa. Non sostituisce le News
del sito ma le approfondisce. E’ un invito periodico a collegarsi al sito e tiene vivo l’interesse del
lettore sui suoi contenuti
Usefull Tools