Contenuti della

presentazione d’esame
Andrea Crevola
andrea.crevola@3juice.com
http://webdesign.3juice.com
Premessa

La presentazione d’esame consiste di una serie di attività finalizzate alla
progettazione di un sito web (tema a piacere)

Le attività richieste in tal senso sono 4:

1. Descrizione del personaggio (metodo delle personae)
2. Redazione del content plan
3. Information architecture (o “albero” del sito)
4. Design dei wireframe di:

Home page

Pagina interna di contenuto

Pagina “particolare” (es. form di registrazione, motore di ricerca, carrello della spesa ecc)

Lo sviluppo del sito è opzionale: lo studente non riceverà alcuna

penalizzazione per non aver implementato il sito web, ma il suo svolgimento
rappresenterà ovviamente un merito da tenere in considerazione; NOTA
BENE: qualora si decidesse di sperimentare anche questa attività si richiede di
seguire le indicazioni fornite in sede di descrizione delle tecnologie web (cioè
usare XHTML + CSS) e di limitarsi alle tre pagine progettate con i wireframes.

Inoltre, come sesta attività, è richiesta una valutazione di accessibilità di un

ALTRO sito web
Attività #1
Persona

Immaginate vi venga chiesto di realizzare un sito web ex-novo o una nuova
versione di un sito esistente. Provate a costruire una persona che corrisponda
ad un ipotetico utente di tale sito.

Non limitatevi al vostro punto di vista; provate a coinvolgere amici o compagni di corso
che utilizzano o potrebbero usare il sito da voi scelto e chiedete loro come lo utilizzano
e cosa vi vorrebbero poter trovare: evidenziate obiettivi e comportamenti ricorrenti;

Fornite un profilo verosimile, colorandolo con elementi che diano riconoscibilità e “vita”
alla persona: date un nome al vostro personaggio e cercate di attribuire ad esso un
volto e una descrizione plausibile. Cercate on-line una fotografia che rappresenti il
vostro personaggio;

Immaginate un breve elenco di obiettivi che questo personaggio potrebbe avere

nell’interazione con il sito; chiedetevi se questi sono coerenti o meno con l’utente che
avete descritto e cercate di restringerli a quelli che vi paiono prioritari per quel
particolare utente;

Siate sintetici: una pagina è più che sufficiente!

Attività #2
Scrivere un content plan

Stabilite l’elenco dei contenuti che vorreste pubblicati sul sito da voi progettato;

Definire un piano dei contenuti significa dare risposta a:

Quali sono le tipologie?

In ciascuna tipologia, come sono strutturati i contenuti?

Quali metadati mi interessa raccogliere?

Quali informazioni saranno visibili all’utente finale?

Inserite tutte le informazioni in una tabella / foglio di calcolo: l’obiettivo è produrre uno schema che fornisca una
descrizione sintetica delle tipologie di contenuto previste dal sito web e che, di conseguenza, consenta di
condurre alcune valutazioni preliminari nonché di preparare il terreno alle successive attività di design.

Per ciascuna tipologia, è possibile prevedere un gruppo di titoli? Si aggiunga per ognuno una breve descrizione
del futuro contenuto e si cerchi di compilare i metadati relativi ad essi;

Provate a formulare semplici simulazioni: considerando un solo redattore, quanto tempo sarà necessario per
completare tutti i contenuti previsti? quale potrà essere la frequenza di aggiornamento dei contenuti più dinamici?
Qual è il dispendio, in termini di tempo, per la ricerca di un’immagine per ogni testo?

Provate a stimare l’impegno di lavoro necessario a tenere “vivo” il sito: quante ore al mese devono essere dedicati
al sito solo per la redazione dei contenuti? Di quanti redattori ho bisogno?
Attività #3
Progettare l’information architecture di un sito

Dato il content plan, provate a organizzare i contenuti ipotizzando quali saranno i percorsi di navigazione
dell’utente;

La struttura del sito dovrà essere rappresentata mediante il vocabolario visuale di Garrett
(http://jjg.net/ia/visvocab/italian.html)

Cercate di essere piuttosto dettagliati: cercate di rappresentare

le unità di informazione,

le possibilità di navigazione dall’una all’altra,

l’esistenza di vincoli alla visione di determinate pagine

ecc.

Cercate di comprendere se esistono punti del sito dove la struttura è lineare anziché gerarchica: per esempio una
sezione di registrazione o un carrello della spesa;

Prestate attenzione anche agli strumenti di navigazione supplementare / ausiliaria (mappe del sito, motore di
ricerca, indice dei contenuti);

Considerate il vostro utente: la struttura che avete preparato è in sintonia con il suo modello di
organizzazione? Gli sarà facile raggiungere l’informazione? Esistono delle opportunità per semplificare la sua
ricerca?

Il diagramma deve essere comprensibile anche in vostra assenza: siate chiari e accompagnate il tutto
con note, call-out, legende ecc.
Attività #4
Progettare i wireframes delle pagine

Provate a disegnare la home page, la pagina interna e una pagina “particolare” del vostro sito (per
esempio la registrazione a una newsletter);

Utilizzate un software di grafica, Powerpoint o al limite gli strumenti di disegno di un Word Processor;

Le pagine vanno progettate prevedendo tutti gli elementi di navigazione e un anteprima della
struttura che avranno i contenuti;

L’information design, per quanto prototipale, dovrebbe cercare il più possibile di avvicinarsi al risultato
finale (prestare attenzione alle proporzioni degli elementi, all’uso del colore, font dei testi ecc.);

Trattandosi di uno strumento di lavoro interno al team di progetto e sviluppo, i wireframes dovrebbero
essere arricchiti dalle annotazioni necessarie a togliere ogni dubbio in vista della realizzazione
grafica definitiva;

NOTA BENE: si cerchi di testare il design delle pagine alla luce delle linee guida contenute nel capitolo 3
del libro di testo e alle considerazioni sul web writing condotte a lezione;

Importante: documentare i punti di forza e le problematiche di usabilità del wireframe;

Si cerchi di applicare alcuni dei pattern presentati a lezione adattandoli al contesto del proprio sito;

Come ispirazione, si veda l’esempio della diapositiva successiva;

 Il logo è un collegamento
Utilizzare immagini di sfondo Utilizzare immagini di
all’home page
collegate all’idea di… bandiere?

ENG | ESP | ITA

Il menu si deve
aprire fino al terzo Titolo del sito
livello ricerca
Home page | Contatti | Mappa del sito

• Il Progetto Titolo pagina Eventi

• Il coordinatore Lorem ipsum dolor sit amet, • alfa (12.02.2006)
consectetuer adipiscing elit. bla bla bla bla…
• I Partners
Pellentesque ornare augue
• il Comitato di progetto nec odio. Cum sociis • beta (13.03.2006)
natoque penatibus et bla bla bla bla..
• Il progetto in movimento magnis dis parturient
montes, nascetur ridiculus [archivio]
• Newsletter
mus. Cras enim. Sed aliquet
• I documenti rhoncus urna. Nunc varius
lacinia odio. Pellentesque
• Links
consequat luctus nisi. News
• alfa (12.02.2006)
Lorem ipsum dolor sit amet, consectetuer bla bla bla bla…
adipiscing elit. Pellentesque ornare augue nec
odio. Cum sociis natoque penatibus et magnis dis • beta (13.03.2006)
Banner parturient montes, nascetur ridiculus mus. bla bla bla bla..
Questionario (Link a contenuti correlati) [archivio]

Icona per accedere

alla versione
stampabile
Email – credits - copyright
Attività #5
Template XHTML / CSS

A partire dal wireframes allestite una struttura XHTML che rispetti i
seguenti criteri:

superi l’esame del validatore w3c;

applichi in modo conforme e semanticamente corretto le specifiche di
comandi XHTML;

Tale struttura dovrà riguardare le pagine disegnate con il metodo dei
wireframes;

Sulla struttura, individuare le porzioni di informazione (header, footer,
colonne) e applicare adeguatamente i tag <div>;

Sulla struttura XHTML impostare un layout CSS;

Nota bene:

Questa attività è opzionale: la sua mancata esecuzione non
pregiudica in alcun modo il superamento dell’esame, ma data la sua
importanza nella realizzazione di un sito web sarà un fattore distintivo e
valutato molto positivamente (anche limitatamente al solo XHTML).
Attività #6
Valutazione di accessibilità

Prendete in esame il sito di una città italiana o di un’altra pubblica amministrazione di
interesse:

Verificate i requisiti tecnici rispetto alla home page di questo sito, cercando il più
possibile di attenervi alla metodologia di valutazione descritta dal decreto ministeriale 8
luglio 2005 (allegato A);

Mettete alla prova la pagina usando la sola tastiera, verificando la validità del codice,
togliendo il foglio di stile, aiutandovi con la Web Accessibility Toolbar (o strumenti
analoghi);

Per ciascun requisito scrivete se è superato pienamente, se esistono dei punti
problematici (indicando quali) oppure se non viene rispettato affatto;

Per i requisiti non superati, totalmente o parzialmente, provate ad indicare un metodo
per correggere il problema di accessibilità;

Per raccogliere le valutazioni potete usare il modello di documento fornito dal
ministero: http://www.pubbliaccesso.gov.it/logo/rapp_conclusivo_PA.doc

Provate a navigare la pagina con uno screen reader (potete usare Jaws in versione demo)
e uno screen magnifier (potete usare il magnificatore di windows): raccogliete in una
pagina le vostre considerazioni in merito alla luce delle vostre conoscenze di
accessibilità.