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

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

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

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 gestisceEFFICACIA = contenuto appropriato, rilevante, corretto, ben presentato, facile da navigareAGGIORNAMENTO = mantenimento e continuo aggiornamento dei contenutiACCESSIBILITÀ = disponibile per tutti gli utenti qualsiasi sia la tecnologia che usanoUSER CENTERED = facile da usare, intuitivo, con meccanismi di valutazione e di feedbackREATTIVITA’ = contattabile dai clienti, disponibile a dare risposte, aperto alla condivisioneMULTILINGUISMO = prospettiva internazionaleGESTIONE = rispetto delle norme legali, del diritto d’autore, della privacy

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

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

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

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

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

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

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

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

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

❖ 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

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

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

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

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)

Il layoutL’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.

Il layoutL’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)

© Copyright 2014 | Tutti i diritti riservati | MILANO | P.IVA 04765770963

TEMPLATEHEADER

menù navigazione

LOGO

FOOTER

COMMITMENT

La “gabbia” di un sito

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

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.

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.

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

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

❖ 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

❖ 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