Design di un sito WWW
Il sito WWW di successo, come un database ed un programma, e' stato
realizzato in piu' fasi:
- progettazione
- implementazione
- testing
- modifica continua
Il progetto di un sito WWW si suddivide in molti aspetti:
- progettazione del contenuto
- design cognitivo
- considerazioni sull'udienza
- progettazione della navigazione
- layout delle singole pagine
- design degli elementi grafici
Progettazione del Contenuto
Il contenuto e' fatto di informazioni e relazioni o associazioni tra
le informazioni.
Il contenuto causa pensiero ed esplorazione. Include descrizioni, riassunti,
mappe, biografie, informazioni su luoghi, glossari, indici, missioni,
opinioni, critiche, FAQ (Frequently Asked Questions) e
molto di piu'.
Si identificano cinque tipi di siti riguardo al contenuto:
- siti orientati al commercio
- siti interni di Intranet
- siti topici
- siti personali
- siti di collaborazione di gruppi
I 'surfisti' adorano il contenuto, che deve essere pertinente,
abbondante e divertente. Il contenuto va progettato in cooperazione con
vari partner e se possibile deve essere il risultato di 'feedback'
degli utenti stessi.
Gli utenti sono alla ricerca di contenuto perche vogliono incrementare
la propria:
- educazione - imparare qualcosa
- performance - imparare a fare qualcosa
Vi sono cinque tipi di contenuto:
- fatti - Qual'e'
- usare immagini a colori per il display di fatti
- usare tabelle ed altri strumenti per mostrare codici, dati, luoghi,
tempi, ecc.
- acquisire strumenti presentativi extra (cercarli in Yahoo)
- concetti - Cos'e'
- usare grafica, immagini GIF e JPEG, per spiegare nuovi termini ed idee
- usare il testo per brevi definizioni da glossario
- spiegare anche quello che un nuovo concetto NON e'
- testare la comprensione con giochi, quiz, ecc.
- procedure - Come si fa'
- fornire liste numerate che dettagliano la procedura
- svrivere un passo per linea
- usare frasi corte con verbi di azione
- inserire immagini che evidenziano a che punto si e' arrivati
- usare link per variazioni di procedura
- includere le ragioni per cui si compiono le azioni
- processi - Come funziona
- usare animazioni per drammatizzare l'azione
- inserire audio per riassunti e frasi chiave
- fornire testo per spiegazioni dettagliate di funzionamento
- separare i processi in fasi e stadi
- porre il fuoco su funzioni, movimenti, condizioni e il loro risultato
- principi - Cosa farebbe un esperto
- spiegare la causa e l'effetto di un principio
- identificare gli esperti e le fonti autorevoli
- identificare linee guida e incoraggiare la flessibilita'
- fornire piu' opinioni, anche discordanti
- fornire canali di interattivita' come chat, forum, gruppi di news
o liste di posta
- fornire un database di successo
Altre linee guida:
- venire incontro agli scopi e propositi dell'utente
- scrivere per l'udienza culturale Web
- ridisegnare il testo per il web
- enfatizzare le cose importanti
- usare e porre il fuoco sui link
- accorciare il testo
- rimuovere la retorica ed evitare i cliches
- modernizzare il linguaggio ed assumere un'udienza colta
- non usare:
- messaggi di Sito in Costruzione
- troppi contatori di accesso, solo la pagina principale puo' averlo
- messaggi pubblicitari ai browser da usare
- etichette che certificano il successo della pagina (Top 5 Percent,
Cool Site, ecc)
- studiare siti di successo e riapplicarne i metodi
Design Cognitivo
Gli psicologi cognitivi studiano le reazioni dell'essere umano
confrontato con l'informazione. Dobbiamo interessarci a come un utente:
- riceve l'informazione
- registra e richiama l'informazione
- analizza l'informazione
- agisce in conseguenza all'informazione
- gestisce l'informazione
Il design cognitivo e' basato sulla comprensione di come l'utente pensa.
Un utente ha dei bisogni:
- linguaggio - e' la base comunicativa
- immagini - valgono mille parole
- numeri - offrono organizzazione
- logica - deve essere prevalente e comprensibile
- ritmo - fa' fluire il discorso a velocita' diverse
- colore - causa reazioni a volte dipendenti dalla cultura
- percezione spaziale - generata dallo spazio bianco
L'utente e' compiaciuto da 'finezze' di design come:
- ordine ed eleganza
- domande e sfide intellettuali
- rafforzamento positivo dei concetti chiave
- preparazione e progettazione curata ed evidente
- chiarezza espositiva
- personalizzazione ai requisiti dell'utente
- cambiamento ed evoluzione del sito
La ricezione dell'informazione e' aiutata da un'accurata progettazione
dei tre elementi della pagina:
- il foreground - primo piano dell'azione, ove il messaggio
e' piu' evidente
- blinking
- movimento
- animazioni
- marquee
- immagini in evidenza
- il middleground - spazio contenitore della gran parte delle informazioni
di secondo livello
- uso dei colori appropriato
- tabelle
- raggruppamenti
- blocchi di informazioni
- uso dello spazio bianco
- uso dei corpi e stili tipografici
- il background - da' informazioni a livello quasi subliminale
- immagini di sfondo, logo, tematica
- colore di sfondo: esprime emozione, stabilita', forza, confidenza,
autorevolezza
- suono di sfondo: rinforza messaggi, identifica la pagina
La memorizzazione dell'informazione e' aiutata da:
- design dello URL della pagina - per facile memorizzazione e associazione di
idee
- nome del sito - per identificazione con lo scopo, facile richiamo
mentale, asserzione di autorevolezza e potere
L' analisi dell'informazione e' determinata dalle seguenti
linee guida:
- facile discriminazione tra informazioni importanti e meno importanti
- accuratezza dell'informazione
- evitare lo overload cognitivo
- comprensione chiara dello scopo
- raggruppamento di elementi simili
- uso dei logo
- uso di immagini con impatto sulla comprensione
- evitare immagini non pertinenti
- spiegazioni e capzioni alle immagini
- presenza di un sommario
Si vuole evitare a tutti i costi l'effetto che si chiama 'essere persi
nell'iperspazio' - un utente ha seguito tanti link non organizzati
che non sa piu' dove si trova in relazione alla mappa del sito.
Occorre far si' che l'utente generi presto una comprensione mentale della
mappa del sito: fornire una 'mappa mentale'.
Per l'azione dell'utente in conseguenza dell'informazione ricevuta
occorre:
- incoraggiare l'utente a fornire feedback e dare l'impressione positiva
che tale feedback e' desiderato, valutato e si prendono azioni migliorative o
correttive di conseguenza
- convincere l'utente a ritornare al sito in futuro
La gestione dell'informazione e' aiutata da:
- personalizzazione della presentazione:
- generazione di pagine dinamiche
- uso di cookies per identificare l'utente
- accesso a statistiche sul sito
- possibilita' di comunicare con l'amministratore del sito
Considerazioni sull'Udienza
L'udienza va categorizzata e di conseguenza il sito o le singole
pagine vengono dirette ad una o piu' udienze specifiche. La
categorizzazione riguarda:
- il livello di skill dell'utente - ridurre il numero di bottoni,
spiegare cosa si ottiene premendo un bottone, spiegare lo scrolling della
pagina, dare istruzioni sul riempimento di moduli
- il livello tecnologico della piattaforma utente - sistema operativo
usato, browser usato, tipo di schermo grafico, numero di colori, uso
da laptop
- l'esperienza di surfing dell'utente - uso di convenzioni 'ben affermate',
competenza nell'uso del browser, esperienza di navigazione
Occorre definire gli scopi che ci si prefigge dalla pubblicazione
di pagine web e di conseguenza il target audience. Definire
quindi le aspettative, rispetto all'utente, di tipo:
- cognitivo
- tecnico
- di contenuto
- linguistico
Puo' essere necessario considerare il design per una udienza
internazionale, con considerazioni di elementi che possono
variare anche drasticamente in altre culture, quali:
- uso di costrutti linguistici
- uso di simbologia grafica
- uso di parole e concetti tabu': societa', donne, sesso, religione, politica
- presenza di regole nazionali
- differenti organizzazioni del business
- uso di standard internazionali
Progettazione della Navigazione
Una pagina non vive da sola ma in un gruppo o cluster di pagine.
La struttura del cluster influenza la facilita' di navigazione e
dipende dal tipo di informazione offerta. Si possono avere
cluster di tipo:
- lineare
- a maglia
- gerarchico
- a graticola
L'utente desidera giungere all'informazione desiderata con il minor numero
di click e pagine intermedie.
I link sono una caratteristica fondamentale di un sistema ipertestuale, ma
troppi link confondono. L'utente puo' seguire soltanto alcuni link ed ha
l'impressione di aver perso qualcosa di essenziale in quelli non
visitati.
I link a pagine esterne devono essere raggruppati in sezioni ben identificate,
per evitare che l'utente esca dal nostro sito non intenzionalmente.
Le immagini inline prelevate da altri siti devono essere evitate ad ogni
costo.
Il cluster di pagine deve essere percepito come una collezione completa
ed esaustiva sull'argomento dato.
I bottoni o strumenti di navigazione tra le pagine del cluster devono
essere consistenti in tutte le pagine. L'utente deve sapere dove si trova
nel cluster, e non sentirsi perduto.
Documenti lunghi devono avere dei link 'intra-documento'.
Le ricerche devono essere a due livelli: facili di default, con una complessita'
aggiunta per gli esperti.
Layout delle Singole Pagine
La filosofia HTML e' quella di lasciare il layout e la resa delle pagine
al browser. D'altronde e' pur vero che si cerca di ottenere un layout
visivo quanto piu' determinabile a priori. Per forzare il layout, fino
all'adozione massiccia dei Cascading Style Sheets e' meglio
limitarsi all'uso di tabelle.
La pagina individuale deve essere:
- leggibile
- efficace per i nostri scopi
- piacevole
Una pagina deve creare varieta' visuale, non essere una noiosa ripetizione
di blocchi uguali. Deve avere variazioni di luminosita' del testo,
ottenute con colori e sfondi approriati. Deve usare affiancamento
orizzontale dei blocchi oltre che verticale, rendendosi conto che il video
tipico e' piu' largo che lungo.
Occorre definire ed ottenere i punti focali in ciascuna pagina.
Pagine diverse di uno stesso cluster devono avere elementi comuni
che le associano logicamente, facilitano la navigazione e velocizzano il
caricamento di elementi grafici ripetuti:
- intestazione e pedici
- barre di navigazione
- logo
- stile grafico
- righe separatrici, frecce, bullets
- suggerimenti cognitivi - icone che indicano importanza, sussidiarieta',
possibilita' di inviare posta, link ad elementi multimediali
Design degli Elementi Grafici
La grafica puo' aggiungere chiarezza e forza ad una pagina ma puo' anche
renderla spiacevole, lenta da caricare, inadatta a certe piattaforme hardware.
Considerazioni sulla grafica sono:
- dimensione in pixel, orizzontale e verticale
- rapporto delle immagini con altre immagini circostanti e col testo
- dimensioni in byte
- le immagini in background devono essere piccole e piacevoli quando
sottoposte a tiling; i confini dei tiles non si devono vedere
- il logo deve essere comprensibile ma piccolo
- le imagemap devono essere tutte contenute in una singola videata,
quindi max ca. 450x320 pixel, preferibilmente a zone di colore continuo
o in formato JPEG
- l'immagine principale deve essere piccola, preferibilmente orizzontale,
e densa, cioe' deve dare molte informazioni in poco spazio
- i bullet devono essere veramente piccoli
- le icone devono essere di pochi tipi diversi
- le righe orizzontali devono essere con pochi colori
- le barre di navigazione devono variare il meno possibile
da pagina a pagina, p.es. costruendole con molti elementi separati
- le fotografie devono essere piccole compatibilmente con la comprensione
del contenuto: le foto grandi vanno caricate a richiesta, con avvertimento
della dimensione
Orientativamente vi sono in una pagina 10 elementi di barra del titolo,
di cui uno variante, due bullet di tipo diverso, una riga grafica,
tre icone, due fotografie.
Le pagine con foto piu' grandi o imagemap non devono contenere molti
altri elementi grafici.
Una pagina ha dimensione tipica di 10 KBytes per la parte testuale e non piu'
di 40-80 KByte per la somma di tutti gli elementi grafici, di cui
qualcuno e' ripetuto.
Ogni elemento grafico deve avere la specifica come attributo delle
sue dimensioni, per accelerare la formattazione globale di pagina ancora
prima del caricamento di tutti gli elementi.
Ogni elemento grafico deve essere corredato di un testo alternativo:
- per le foto questo e' una capzione
- per le righe separatrici e', p.es. una sequenza di '---------'
<
- per i bullet e' un aterisco
- per gli elementi di navigazione sono parole come NEXT, UP, ecc.
Quando vi sono 'imagemap' queste non devono essere l'unico metodo per
accedere ai link a cui puntano ma deve esserci anche
un metodo di navigazione testuale.
Occorre sempre pianificare le pagine in modo che la grafica sia
molto apprezzata ma non indispensabile.