LO STRUMENTO PRINCIPALE: IL SITO WEB

1  

Content Management System (CMS) •  Software (web based) dedicati alla gestione

di un sito web: portali, siti aziendali, intranet, blog, Wiki…

•  L’obiettivo è consentire operazioni complesse fornendo un’interfaccia utente trasparente senza richiedere competenze tecniche di programmazione e senza preoccupazione della resa finale

2  

Content Management System (CMS) •  Gestione dei contenuti: sono presenti

maschere che permettono all’utente di scrivere i contenuti in modo: – Strutturato; – WYSIWYG; – Soggetto a vincoli (es. compilazione di

campi obbligatori, inserimento testi alternativi ecc)

3  

CMS e redazione distribuita

•  I CMS sono strumenti multiutente, ossia consentono a più autori contemporaneamente di interagire con i contenuti del sito, anche e soprattutto a distanza

•  Ai vari utenti è assegnato un profilo di accesso: dopo un’autenticazione (login/password), l’utente ha accesso al set di funzionalità che gli è stato assegnato

4  

CMS e redazione distribuita •  Utenti amministratori e redattori: –  I redattori possono essere ulteriormente

organizzati: possibilità di realizzare un workflow redazionale

•  Utenti amministratori possono effettuare operazioni di più alto livello: –  Gestire / accreditare gli utenti; –  Gestire l’architettura del sito; –  Gestire lo stile di presentazione;

5  

vantaggi •  Un CMS permette di costruire e aggiornare un

sito dinamico, anche molto complesso ed esteso, senza la necessità di scrivere una riga di HTML e senza conoscere linguaggi di programmazione lato server (come PHP) o progettare un apposito database.

•  L'aspetto esteriore delle pagine può essere gestito e personalizzato scegliendo un foglio di stile CSS appositamente progettato per un determinato CMS.

6  

vantaggi •  Gestione trasparente del sito e dei contenuti •  Gestione unificata dei siti multi-lingua •  Indicizzazione automatica dei contenuti •  Opportunità di multicanalità •  Separazione tra contenuti, interfaccia e

applicazione •  Semplicità di manutenzione / aggiornamento •  Solidità ed efficienza •  Rapidità di implementazione •  Autonomia!

7  

Esempi di CMS Open Source •  CMS Made Simple •  Docebo CMS •  Joomla •  Drupal •  Mambo •  PHPNuke •  ZenCart •  WordPress •  …

8  

I CONTENUTI PER IL SITO WEB

9  

i contenuti •  Tipologie di contenuti: articoli,

recensioni, news, schede-prodotto, pagine istituzionali ecc.

Frammenti di contenuto: •  In quali segmenti è possibile suddividere

un contenuto? •  Esempi: titolo, sommario, testo,

immagini, elenchi, tabelle ecc.

10  

11  

scrivere per il web Uno studio di Nielsen rivela che: •  la lettura a video è molto più lenta (25% rispetto alla

carta) •  gli utenti non leggono sul web: piuttosto,

scansionano la pagina cercando di comprendere il significato a partire da poche frasi o parti di esse

•  gli utenti non amano le pagine lunghe e prolisse: amano testi brevi e mirati al “dunque”;

•  gli utenti detestano il linguaggio “marketingoriented” e preferiscono un informazione più referenziale e oggettiva

•  Il web è il regno della concretezza e della concisione!

12  

leggibilità del testo

13  

la struttura visiva dei contenuti •  Considerate le abitudini di fruizione

degli utenti, è importante rendere più efficiente la percezione della pagina: – Spezzare i periodi: date all’occhio

l’opportunità di spostarsi rapidamente in modo preciso da un paragrafo all’altro

– Evidenziare le parole chiave in grassetto (no corsivo, no sottolineato)

– Usare colonne di testo la cui larghezza sia percepibile in un solo sguardo

14  

la struttura visiva dei contenuti •  Utilizzare elenchi •  Scegliere colori che abbiano un buon

contrasto •  Allineare i contenuti a sinistra •  Utilizzare caratteri standard e ottimizzati

per il supporto: – Verdana, Arial, Helvetica (Sans-serif) per il

video; –  Times, Georgia, Garamond, Courier (Serif) per

la stampa

15  

un confronto

IL CORSO DI INTERACTION DESIGN HA COME OBIETTIVO FORNIRE GLI STRUMENTI CONCETTUALI E PRATICI PER PROGETTARE, REALIZZARE E VALUTARE LA QUALITA’ DI UN SITO WEB. PER QUESTO MOTIVO L’ESAME CONSISTE IN UNA PARTE ORALE, CHE AVRA’ PER OGGETTO IL MATERIALE FORNITO DURANTE IL CORSO E UNA PARTE PRATICA NELLA QUALE LO STUDENTE DOVRA’ PREPARARE UNA PRESENTAZIONE DI UN IPOTETICO SITO WEB

?

16  

un confronto

IL CORSO DI INTERACTION DESIGN HA COME OBIETTIVO FORNIRE GLI STRUMENTI CONCETTUALI E PRATICI PER PROGETTARE, REALIZZARE E VALUTARE LA QUALITA’ DI UN SITO WEB. PER QUESTO MOTIVO L’ESAME CONSISTE IN UNA PARTE ORALE, CHE AVRA’ PER OGGETTO IL MATERIALE FORNITO DURANTE IL CORSO E UNA PARTE PRATICA NELLA QUALE LO STUDENTE DOVRA’ PREPARARE UNA PRESENTAZIONE DI UN IPOTETICO SITO WEB

Interaction Design •  Obiettivi: fornire strumenti

concettuali e pratici per progettare, realizzare e valutare la qualità di un sito web

•  Esame –  Orale: materiale fornito

durante il corso –  Parte pratica: preparare

la presentazione di un sito web

17  

linee guida

•  Il linguaggio deve riferirsi all’utente, alla sua esperienza, ai suoi scopi e con i termini che egli utilizzerebbe

•  Evitare la ridondanza: anziché enfatizzare, confonde

•  I titoli devono essere semplici, diretti e informativi: da soli dovrebbero informare sul significato della pagina

18  

linee guida •  Adottare uno standard editoriale da

applicare con rigore (es. uso dei grassetti, trattamento delle parole straniere)

•  Se qualcosa si spiega da solo, evitare di farlo (es. il menu, un box…): non trattate i vostri utenti come fossero troppo incapaci

•  Evitare esclamazioni!!! e carattere maiuscolo per dare importanza (“se lo avete scritto ce l’ha”)

19  

linee guida

•  Evitare di usare il carattere sottolineato: sul web ha un preciso significato

•  Spiegare gli acronimi (ed evitare di usarli come link…)

•  Usare esempi: la comprensione del testo viene incrementata, è facilitato il ricordo, e tendenzialmente richiedono meno parole di una complessa spiegazione

20  

linee guida •  Rendere link parole che esprimono il significato del

contenuto collegato: evitare i “clicca qui”!!! –  Nel caso si colleghino risorse non HTML, dichiarare

sempre il tipo e le dimensioni del file collegato (MP3, PDF, AVI, ecc.): l’utente deve sapere a cosa va incontro

•  News o rassegne stampa devono:

–  Avere titoli brevi e descrittivi –  Se pubblicati in home page, avere un abstract

riassuntivo –  Avere il titolo come link –  Avere la data di pubblicazione (ma solo se vi è un chiaro

e frequente aggiornamento)

21  

linee guida •  Le immagini devono avere sempre un testo

alternativo •  Meglio utilizzare pochi colori: uno per lo sfondo (no

ad immagini in background al testo), uno per il testo, uno per i link ancora da visitare, uno per i link già visitati

•  Verificare sempre come viene stampata la vostra pagina web: molto spesso gli utenti preferiscono “tornare” alla carta quando hanno individuato cosa gli interessa.

•  Rileggere i contenuti ed eliminare parole e frasi non necessarie.

22