Web Design
Fabio Vitali
Fabio Vitali
Sommario

Oggi esaminiamo in breve categorie e soluzioni
di progettazione di siti Web. In particolare:







La progettazione dell’informazione
Le peculiarità del Web come medium
Principi di design del Web
Principi di organizzazione dei contenuti
Principi di navigazione
Principi di presentazione
L’usabilità di un sito Web
2
Fabio Vitali
Tre dimensioni della interazione



Information Design: l’organizzazione e la presentazione
di dati al fine di una loro significativa trasformazione in
informazione. E’ una disciplina molto recente.
Interaction Design: il creare e raccontare le storie. Il
medium ha un’influenza determinante sullo stile del
racconto. In particolare il ruolo dell’interazione con lo
spettatore può essere molto diverso. E’ arte antica e
scienza nuova.
Sensorial Design: l’utilizzo ottimale di tutte le tecniche
che usiamo nel comunicare: graphic design,
cinematografia, tipografia, ingegneria dei suoni, musica,
più tutti i sensi ancora non esplorati: tatto, olfatto,
gusto, ecc.
3
Fabio Vitali
Information Design (1)



Si occupa di aspetti della comunicazione come
organizzazione, presentazione, senso e messaggio,
chiarezza e complessità.
Alla base di tutto c’è la consapevolezza che il dato, in sé,
è sostanzialmente inutile o neutro. E’ nella sua
preparazione per la comunicazione che acquista significato
e valore, che diventa informazione.
Inoltre l’informazione non è la conclusione del continuum
chiamato comprensione: l’informazione va trasformata in
conoscenza, che a sua volta, digerita e connessa con il
resto, diventa sapienza.
4
Fabio Vitali
Information Design (2)
5
Fabio Vitali
Tre dimensioni del Web (1)

Informazione (contenuto,
publishing)


Informazione
Promozione

Promozione (entertainment,
marketing)

Transazione


libri, articoli, manuali, specifiche
L’unità base è il fatto (anche se
opinionato)
Immagine, senso della
comunità, atteggiamento
mentale
L’unità base è l’esperienza
Transazione (vendita, scambio)


Ordini, e-commerce, B2B, B2C
L’unità base è la transazione
6
Fabio Vitali
Tre dimensioni del Web (2)

Molti siti (in particolare quelli commerciali) in realtà
presentano una mescolanza delle tre dimensioni:
Novità
Gioco a
premi
Informazione
Specifiche
del prodotto
Catalogo dei
prodotti
Promozione
Giochi,
concorsi,
esibizioni
Acquisto e
gestione
dell’ordine
Transazione
Rapporto
annuale
7
Fabio Vitali
Biblioteca e galleria d'arte

Jeffrey Veen propone una classificazione in un continuum tra gli
estremi di massimizzazione della presentazione e
massimizzazione dei contenuti:


La biblioteca ha una grande collezione di informazioni disponibili. Si
preoccupa di fornirti i mezzi per accedere a questa informazione nella
maniera più semplice e universale possibile. Il criterio di valutazione è
la conoscenza.
La galleria d'arte offre una presentazione controllata dei suoi
contenuti. Si preoccupa di fornirti una presentazione orchestrata per
darti un'esperienza estetica meticolosamente curata.
contenuti
Biblioteca
presentazione
Galleria d'arte8
Fabio Vitali
La gestione dei contenuti

Rendere i contenuti accessibili a chiunque




Gestire in maniera semplice e uniforme tutte le fasi di
gestazione di un prodotto editoriale
Gestire in maniera semplice ed uniforme tutti i possibili usi
di un medesimo contenuto: su carta, su video, su
terminale Braille, su sintetizzatore vocale, ecc.
Gestire in maniera semplice ed uniforme tutti i possibili
riusi di un medesimo contenuto: libro, indice, sito web,
catalogo, archivio, …
Rendere il testo accessibile nel tempo





Il recupero dei dati del Census Bureau del 1960 (19761982)
Il recupero dei dati per il progetto LUNR del 1969 (1986????)
Brewster Kahle http://www.archive.org/
Bruce Sterling http://www.deadmedia.org/
Boeing e la digitalizzazione dei manuali degli aerei.
9
Fabio Vitali
Accessibilità nel tempo (1)

Medium fisico


Hardware



La periferica usata per la scrittura e lettura delle informazioni
Il computer su cui questa periferica funziona
Software




La corretta conservazione delle tracce ottiche, elettriche o
magnetiche sul supporto fisico prescelto.
Sistema operativo in grado di far funzionare il computer
Driver in grado di far funzionare le periferiche prescelte
Applicazione in grado di leggere i dati dal medium fisico
Interpretazione


Il formato dei dati in cui il contenuto è stato scritto( mescolando
il contenuto vero e proprio con funzioni dell'applicazione
originaria)
La codifica dei caratteri usata (il meccanismo di conversione dei
codici numerici in caratteri di un alfabeto)
10
Fabio Vitali
Accessibilità nel tempo (2)

Problema HW: migrazione dei dati


Problema SW: conversione



La predominanza degli hard disk sui medium esterni e
il costo in diminuzione dell'hardware connesso rendono
possibile il trasferimento di tutti i dati sulla nuova
macchina appena acquistata
Non altrettanto semplice, non altrettanto efficace, non
altrettanto automatizzabile, non altrettanto universale.
Richiede ancora una buona dose di lavoro manuale, in
quantità proporzionale alla quantità di dati da trattare.
Entrambe richiedono attenzione costante nel
tempo, ma per il software è più difficile.
11
Fabio Vitali
Livelli diversi di riuso

Riaccedere in lettura ai dati


Reinterpretare i dati


Disponibilità e compatibilità (diretta o via emulazione) delle
applicazioni originali
Modificare e aggiornare i dati


Corretta identificazione delle caratteristiche del formato dati
Rieseguire le applicazioni di manipolazione


Corretta lettura del media fisico
Conversione dei dati alle applicazioni odierne senza perdita
di informazioni
Realizzare nuove funzionalità sui dati

Adattare le vecchie informazioni alle nuove applicazioni in
modo da permettere l'esecuzione di nuove funzionalità
12
Fabio Vitali
Cos’è il markup?





Definiamo markup ogni mezzo per rendere esplicita
una particolare interpretazione di un testo.
Per esempio, tutte quelle aggiunte al testo scritto che
permettono di renderlo più fruibile.
Oltre a rendere il testo più leggibile, il markup permette
anche di specificare ulteriori usi del testo.
Con il markup per sistemi informatici (il nostro caso),
specifichiamo le modalità esatte di utilizzo del testo nel
sistema stesso.
Il markup non è soltanto un’inevitabile e sgradevole
risultato della informatizzazione dell’arte tipografica. Non
è qualcosa che sta con noi a causa dell’informatica.
13
Fabio Vitali
Modi del markup:
proprietario vs. pubblico



Un formato proprietario è stato creato da una specifica
azienda con uno specifico scopo commerciale. L'azienda ne
detiene i diritti, e dunque è in grado di modificarlo,
aggiornarlo o rivoluzionarlo in qualunque momento e per
qualunque motivo.
Un formato pubblico è stato creato da un gruppo di
interesse (individui, aziende, enti non commerciali, ecc.)
come modello di armonizzazione tra le esigenze di ciascun
partecipante.
Il gruppo tipicamente pubblica le specifiche del formato,
permettendo a chiunque di realizzare strumenti software
per quel formato. A volte questo si concretizza in uno
standard ufficiale, avente valore normativo.
14
Fabio Vitali
Modi del markup:
binario vs. leggibile



Un formato binario è la memorizzazione esatta delle
strutture in memoria dell'applicazione, che niente hanno
a che vedere con le esigenze di comprensione di esseri
umani. Il testo non è visibile o è visibile per caso.
Un formato leggibile invece è fatto per essere, in casi
speciali, letto anche da esseri umani, che possono
intervenire per operazioni di emergenza.
L'applicazione deve trasformare quanto legge in una
struttura interna utile per le operazioni di modifica o
presentazione. Questa fase si chiama parsing.
15
Fabio Vitali
Esempio: .doc di MS Word
16
Fabio Vitali
Esempio: Quark Xpress
17
Fabio Vitali
Esempio: Adobe PageMaker
18
Fabio Vitali
Esempio: PDF
19
Fabio Vitali
Esempio: RTF di MS Word
20
Fabio Vitali
Esempio: PostScript
21
Fabio Vitali
Esempio: HTML
22
Fabio Vitali
Esempio: XML
23
Fabio Vitali
Modi del markup:
interno vs. esterno




Il markup interno inserisce istruzioni di presentazione
all'interno del testo, in mezzo alle parole.
Il markup esterno prevede due blocchi di informazioni: il
contenuto e il markup, separati e collegati da meccanismi
di indirezione
Il markup interno richiede sintassi particolari per
distinguere il markup dal contenuto. Tipicamente si
adottano segnalatori particolari che cambiano il tipo di
interpretazione del documento. La presenza del carattere
segnalatore nel testo richiede l'adozione di tecniche di
escaping.
Il markup esterno richiede un meccanismo di indirezione,
basato su indirizzi, offset o identificatori, per associare
con correttezza il markup al contenuto.
24
Fabio Vitali
Modi del markup:
procedurale vs. descrittivo

Markup procedurale



Il markup procedurale consiste nell’indicare con
precisione ad un sistema automatico che effetto
attivare e che procedura (serie di istruzioni) eseguire
nella visualizzazione del contenuto.
In definitiva, utilizzo le capacità del sistema di
presentazione per avere con precisione l’effetto voluto.
Markup descrittivo


Il markup descrittivo consiste nell’identificare
strutturalmente il tipo di ogni elemento del contenuto.
Invece di specificare effetti grafici come l’allineamento
o l’interlinea, ne individuo il ruolo all’interno del
documento, specificando che un elemento è un titolo,
un paragrafo, o una citazione.
25
Fabio Vitali
Effetti dei modi del markup

Formati proprietari, binari, procedurali sono
intrinsecamente legati ad un hic et nunc, che
lega e limita:




Scopo del contenuto
Strumento di accesso al contenuto
Durata della disponibilità del contenuto
Un formato pubblico, testo, dichiarativo, al
contrario, può permettere:



Nuove applicazioni dello stesso contenuto
Accesso con strumenti diversi e futuribili
Lunga vita ai contenuti
26
Fabio Vitali
L’usabilità di un sito Web
Nello studio dell’usabilità, dobbiamo valutare:
 Come organizzare i contenuti
 Come organizzare la navigazione
 Come organizzare la presentazione
 Cosa contribuisce all’usabilità
 Evitare gli errori più comuni di usabilità
 Organizzare il feedback degli utenti.
27
Fabio Vitali
Organizzazione dei contenuti

Individuazione della gerarchia dei contenuti
(profondità vs. ampiezza)

Gestione della gerarchia dei contenuti (subsites,
directories, canali)

Presentazione all’utente della gerarchia e
dell’ampiezza dei contenuti (essenzialità vs.
eclettismo)
28
Fabio Vitali
Organizzazione della navigazione
“dove sono?” e “dove posso andare?”
Sfruttamento di:
 Navigation bars
 Breadcrumbs trails
 Sitemaps
 Titoli di pagina
 Links
 Logo con link alla home page
 Motori di ricerca
29
Fabio Vitali
Organizzazione della presentazione

Coerenza

Discrezione (sobrietà)

Scansionabilità
30
Fabio Vitali
L’usabilità di un sito Web (1)

Uno studio importante (Jared Spool) ha valutato l’effettiva
usabilità dei siti con un controllo a doppio cieco. In particolare
ha messo alla prova alcuni preconcetti. Ecco alcuni risultati.

La progettazione dell’usabilità è uguale per applicazioni di
desktop e siti Web -> I siti Web non sono come le
applicazioni del computer.
• L’usability testing usato per le applicazioni è poco adatto per il Web.
Ad esempio, la user preference nelle applicazioni è una misura della
usabilità, nel Web dell’interesse totale.

L’usabilità dei siti Web è indipendente da natura e scopo > L’information retrieval non è il surfing.
• Nel surfing, l’utente si aspetta sorprese e serendipità.
• Nell’information retrieval, si aspetta di ottenere e presto le
informazioni che gli servono.
31
Fabio Vitali
L’usabilità di un sito Web (2)

La grafica aiuta -> La progettazione grafica non
guasta… ma non aiuta!
• Siti molto testuali rendevano altrettanto di siti molto grafici.
L’uso della grafica non sposta in maniera sensibile l”usabilità
del sito.

E’ possibile progettare il sito indipendentemente
dai contenuti -> Navigazione e contenuto sono
inseparabili.
• La shell strategy (qualcuno che si occupa del feeling
generale del sito, e lascia ai vari dipartimenti di creare il
contenuto relativo) funziona poco. Non genera un struttura
chiara e uniforme.

I link di testo sono un’inutile ripetizione -> I link
testuali sono fondamentali.
• Il testo viene disponibile prima dell’immagine. Per un
surfing senza scopo, o per una ricerca di informazioni
specifiche, il link di testo viene cliccato più spesso, ancora
prima che la pagina abbia finito di caricare.
32
Fabio Vitali
Progettazione del contenuto (1)
Jakob Nielsen, 1999
 Velocità:




Il tempo di risposta tra click e pagina completa dovrebbe
essere ≤ 1sec per Intranet, e ≤ 10 sec per Internet.
Questi sono risultati teorici universali: la percezione di
continuità dell’azione si interrompe per attese superiori al
decimo di secondo. Dopo un secondo, la percezione di
lentezza è evidente. Dopo dieci secondi, l’attenzione è
inevitabilmente attratta altrove e l’utente inizia a svolgere
un’altra azione.
Con un modem a 56 Kb, questo significa pagine
(complessivamente) < 4kb per Intranet, e < 60 kb per
Internet.
Broken link:

Gli utenti odiano i broken link (404 not found). Secondo
un’indagine del 1998, 23% delle pagine ne contiene uno. Da
notare che esistono tool per controllare automaticamente i
link.
33
Fabio Vitali
Progettazione del contenuto (2)

Graceful degradation:


Scrolling:


Ogni nuova versione di browser ci mette circa 2 anni per
diventare diffusa. Inoltre nuovi meccanismi di accesso
limiteranno la disponibilità di browser sofisticati (PDA,
telefonini, ecc.).
pochi utenti scrollano oltre la prima schermata di una pagina.
E’ necessario tenere le pagine corte, e mettere gli elementi di
contenuto più importanti nella prima schermata. Le righe
orizzontali suggeriscono psicologicamente la fine della pagina.
Scan vs. read:

la maggior parte degli utenti non leggono la pagina parola per
parola, ma fanno una scansione approssimativa fermandosi su
termini evidenziati, prime righe dei paragrafi, link.
34
Fabio Vitali
Progettazione del contenuto (3)

Color overload (link overload):


Rari i link interni alla pagina:


I link interni possono confondere gli utenti, perché si aspettano
si essere portati ad altre pagine.
URL come parte dell’interfaccia:


Se tutto è evidenziato, grassetto, link,ecc., niente è più
identificabile. Troppi link, e link troppo lunghi, sono nocivi.
L’URL viene usato spesso come meccanismo per comprendere la
struttura e il modello concettuale di un sito. URL corti, con
domini facili da ricordare, nomi significativi, e facili da digitare
aiutano a ricordarsi.
Meta-informazioni, search e titoli:

Spesso il lettore arriva alla pagina attraverso un motore di
ricerca. Bisogna indirizzare correttamente questi lettori. Per
esempio rendendo le pagine elementi autonomi del sito
(sempre tutte le informazioni di contesto).
35
Fabio Vitali
Principi di navigazione (1)
Fleming, 1998
 La navigazione è ciò che differenzia il WWW da altri
medium. Alla base di una navigazione di successo c’è
l’orientamento.
 Quattro sono le domande che si pone l’utente a riguardo
della navigazione:





Dove sono?
Dove posso andare?
Come ci arrivo?
Come faccio a tornare dove ero prima?
Esistono dei principi che ci possono aiutare nel dare
risposta a queste domande?
36
Fabio Vitali
Principi di navigazione (2)

Facilità dell’apprendimento:
• anche se il contenuto è misterioso, arrivarvi non dovrebbe
esserlo. Tanto più tempo è speso per capire i meccanismi di
navigazione, tanto meno è speso per il contenuto. L’utente
non possiede un sito come possiede un software, quindi non
acconsentirà ad una curva di apprendimento lunga!

Coerenza:
• L’abilità di predire gli elementi navigazionali di un sito è
fondamentale nel fare scelte sensate. La coerenza aiuta a
mantenere un senso di stabilità e predicibilità utile.

Feedback:
• siamo abituati a aspettarci reazioni agendo sugli oggetti. Il
feedback è l’unico modo che abbiamo per sapere se la
nostra azione sta andando in porto.
37
Fabio Vitali
Principi di navigazione (3)

Sfruttamento del contesto:
• quando eseguo azioni, ho bisogno degli strumenti a portata
di mano. Quando navigo, ho bisogno di strumenti di
navigazione vicino. In ogni caso, non basarsi MAI su un
percorso prestabilito.

Proposta di alternative:
• alternative sia tecnologiche (supporto per browser vecchi)
sia di navigazione (site map, percorsi multipli, ecc.)
permettono all’utente di massimizzare la propria esperienza
relativamente alle proprie possibilità e necessità.

Economia di azioni e tempi:
• in macchina, in aereo, sul Web, la gente perde interesse se
il viaggio è lungo. Livelli e livelli di categorie e
sottocategorie allungano l’interazione inutilmente.
38
Fabio Vitali
Principi di navigazione (4)

Chiari messaggi visuali:
• il design grafico non serve solo per abbellire, ma anche e
soprattutto per dare guida visuale. Gerarchie, movimenti,
colori, posizioni e dimensioni aiutano a fornire
suggerimenti sulle parti della pagina

Etichette chiare e comprensibili:
• usare la terminologia appropriata per lo scopo. Ad
esempio, “mappa” va bene in siti di un certo tipo, ma se il
sito è di una città o un luogo fisico, molta gente si
aspetterà una piantina del luogo o della città stessa.
39
Fabio Vitali
Principi di navigazione (5)

Appropriatezza allo scopo del sito:
• la navigazione di un sito di shopping non è la stessa di un
sito di informazioni o di comunità. Il meccanismo di
navigazione deve rafforzare il senso del sito. Un approccio
alla navigazione basato su icone misteriose ha senso in un
sito di entertainment, pochissimo in un sito di identità
aziendale.

Supporto di goal e comportamenti dell’utente:
• di conseguenza, il sito deve favorire i goal più appropriati
alla natura del sito stesso, e i comportamenti più comuni.
40
Fabio Vitali
Principi di progettazione dell’impatto (1)
Jeffrey Veen - 1999
 Semplicità


Velocità


Grandi colori. Poche immagini grandi. Se si deve osare, meglio osare
in grande.
Chiarezza


Essere capiti immediatamente è più elegante di essere decodificati. E’
importante essere ovvi online.
Competizione significa meno tempo per essere compresi ed
apprezzati. Devi spiegare, o esplorare? Ricordarsi che chiaro non è
necessariamente noioso.
Combatti le gerarchie

Navigare è lungo e difficile. Pochi link fondamentali. No
all’annidamento.
41
Fabio Vitali
Principi di progettazione dell’impatto (2)

Padroneggia l’ipertestualità


Temi la multimedialità


Nessuno legge, tutti cliccano. C’è un ritmo nella
lettura, che viene spezzato dal blu dei link. Bisogna
capire quando vale la pena mettere un link. Bisogna
evitare di interrompere.
Video, animazioni e suoni sono affascinanti e
pericolosi. I plug-in sono belli ma richiedono azioni.
Segui l’audience

Personalizzare il servizio, ma non eccedere. Osserva
l’utente, ma senza invaderne la privacy.
42
Fabio Vitali
Riduzione della complessità
Steve Krug, 2000
Approccio reale all'uso del Web


Scansione, girovagare, approccio suffifacente
(una via di mezzo tra sufficiente e soddisfacente)
Difficoltà nella comprensione dell'organizzazione del sito
(senso della scala, della direzione, della locazione)
Riduzione del carico cognitivo






Sfruttamento della struttura e del layout
(immediata comprensione delle parti del sito)
Scelte immediate ed ovvie
(strutture strette e profonde o larghe e poco profonde)
Keyword semplici e universali
Riduzione del testo da leggere
Imitazione e adeguamento al mercato
Ausili alla navigazione: breadcrumbs, segnali di locazione,
link alla home page
43
Fabio Vitali
I pericoli dei plug-in

I plug-in permettono di arricchire l'esperienza Web con nuove
rutilanti modalità, colorate, animate, sofisticate. Tuttavia bisogna
ricordare che:




Gli oggetti dei plug-in sono ospiti ma estranei alla pagina Web: non
funziona il search, non vengono indicizzati dai motori di ricerca, non
permettono visualizzazioni personalizzate, possono interagire in
maniera strana con Back e Forward e con i bookmark.
I plug-in sono tipicamente orientati ad un uso specifico: ad esempio, la
visione su schermi a colori di personal computer collegati ad alta
velocità ad Internet. Gli oggetti dei plug-in sono quindi inaccessibili al
di fuori di queste situazioni.
I plug-in aggiungono un ulteriore membro all'equazione complessa che
lega le versioni e le marche dei browser, la disponibilità di specifiche
feature, la internaziolizzabilità dei contenuti: la mancanza del plug-in
corretto, la non disponibilità per il proprio sistema operativo, la non
compatibilità per il proprio sistema operativo, la non compatibilità con
altri software opzionali che possono avere alcuni utenti.
Inserire contenuti nei plug-in (invece che solo
decorazioni) ne predetermina una vita limitata e
breve
44
Fabio Vitali
Principi di progettazione delle pagine Web









Nome e logo su tutte le pagine
Search se il sito ha più di 100 pagine
Titoli di pagina e di paragrafo che abbiano senso fuori
contesto.
Facilitare lo scanning della pagina
Strutturare la pagina in blocchi di dimensione ragionevole, e
usare funzioanlità ipertestuali.
Usare foto, ma con cautela
Utilizzare tecniche di riduzione delle immagini basate sulla
rilevanza.
Usare i titoli nei link
Adeguarsi a quello che fanno gli altri.
Jakob’s law on Web User Experience: la gente passa la
maggior parte del tempo online in altri siti, ed è lì che si forma
le aspettative sul tuo.
45
Fabio Vitali
I dieci errori del Web design (0)










Impedire l’uso del bottone Back
Aprire nuove finestre
Uso non standard di widget standard
Pagine anonime (senza autori)
Siti senza archivio
Cambiare gli URL
Titoli senza senso fuori dal contesto
Adottare ogni singola tecnologia di moda
Risposta del server lenta
Banner e pubblicità (soprattutto cose che gli
assomiglino)
46
Fabio Vitali
I dieci errori del Web design (1)

Impedire l’uso del bottone Back




E’ un widget usatissimo (2º dopo i link)
E’ il modo più comune per ri-orientarsi
Evitare nuove finestre (vedi #2), redirect immediati o
pagine che impediscono il caching.
Aprire nuove finestre



Un atto aggressivo nei confronti dell’utente (chi ha il
controllo del mio monitor?)
Un nuovo elemento del desktop che non aggiunge
nessuna utilità all’utente.
Anzi spesso spesso non si accorge della nuova finestra
(il bottone Back è grigio; perché?)
47
Fabio Vitali
I dieci errori del Web design (2)

Uso non standard di widget standard




La coerenza è uno dei fattori più importanti nell’usabilità
dei siti. Fornisce prevedibilità, senso di controllo all’utente,
conservazione delle energie mentali.
La principale violazione della coerenza è l’uso di widget
non standard o di widget standard in modo non standard.
Es.: I bottoni radio servono per scegliere opzioni esclusive,
non per opzioni multiple e soprattutto NON per attivare
comandi. Stessa cosa per i menu pop-up.
Pagine anonime (senza autori)


Gli utenti vogliono sapere chi c’è dietro alle pagine lette.
Una pagina senza autori è come una lettera anonima.
Fornire un link mailto: è sbagliato: un conto è sapere chi
sei, un altro è volerti conoscere.
48
Fabio Vitali
I dieci errori del Web design (3)

Siti senza archivio


Cambiare gli URL


Anche l’informazione vecchia è buona informazione. Non
buttar via la roba vecchia senza motivo. Lo spazio su disco è a
buon mercato.
Cambiare gli URL significa impedire il ritorno ai tuoi vecchi
utenti, quelli che erano così interessati da segnarsi il
bookmark o addirittura da includere il tuo URL in un loro
documento.
Titoli senza senso fuori dal contesto

I titoli di pagine e capitoli sono elementi dell’interfaccia e aiuti
per la navigazione. I titoli sono spesso usati negli indici, dai
motori di ricerca e nei bookmark degli utenti. Fuorviare è
sempre, alla lunga, controproducente
49
Fabio Vitali
I dieci errori del Web design (4)

Adottare ogni singola tecnologia di moda


Risposta del server lenta


Push, chat, 3D, Flash, ecc. affascinano i tecnologi e possono
fornire qualche beneficio, ma nulla può risollevare un sito
strutturato e pensato male.
Computer lenti o sottodimensionati. Grafiche pesanti. Dinamismi
eccessi, accessi a database su altri computer…agli utenti non
importa quale sia la causa, il punto è che se non trovano qualcosa
di interessante entro due/tre secondi, se ne andranno.
Banner e pubblicità (ed ogni cosa che gli assomigli)


Gli utenti sono abituati ad usare attenzione selettiva nel fare lo
scanning di una pagina. La pubblicità su Internet è diventata
sempre meno efficace e sempre più ignorata.
Non solo non conviene fare pubblicità, ma è opportuno anche
usare widget che ricordino banner pubblicitari, perché verranno
ignorati.
50
Fabio Vitali
Le domande che spaventano gli utenti










10 Prego, identifica il tipo del tuo browser
9 Prego, scarica questo plug-in/upgrade/xxx
8 Prego, attiva Java/Javascript/stylesheet
7 Prego, ingrandisci la finestra/togli i bottoni del
browser
6 Prego, accetta/rifiuta questo certificato
5 Prego, accetta/rifiuta questo cookie
4 Conferma che hai richiesto una pagina non sicura
3 Prego, inserisci nome e password
2 Prego, riempi il questionario qui sotto con
informazioni su di te
1 Prego, inserisci il numero e la scadenza della tua
carta di credito
51
Fabio Vitali
Ignorare le linee guida

Ripeto quanto magistralmente sostenuto da
Nico Bondi nella sua esercitazione:



"Trasgredire alle regole di usabilità vuol dire
innanzitutto conoscerle e tenerle in mente.
La trasgressione deve avere una ragione di ordine
comunicazionale, e in generale è apprezzata solo dagli
utenti esperti.
È necessario adottare una ‘grammatica della
trasgressione’, che permetta di inferire la nuova
chiave di lettura. Altrimenti si rischia il caos cognitivo."
52
Fabio Vitali
Conclusioni







C'è differenza tra TV e Web? Tra CD-ROM e Web? Tra stampa e
Web? Il grande successo del WWW come medium ha spinto alla
progettazione di siti molte figure professionali formate su altri
media.
Il grande successo del Web come vetrina commerciale a basso costo
ha fatto privilegiare negli ultimi anni le scelte grafiche sul contenuto.
Risultato: il Web commerciale è oggi una collezione di veicoli
pubblicitari, propri o impropri, che determinano e soffocano i
contenuti.
Soprattutto, è un medium effimero e aggregato: i link non durano
nel tempo, non esistono gli archivi, facciamo link non alle sezioni,
non alle pagine, ma ai siti.
La contrapposizione tra contenuto e presentazione ha visto ad oggi
un chiaro perdente: in contenuto. E' possibile salvare capra e cavoli?
Sì: attraverso una chiara distinzione tra contenuti e
presentazione, che permetta di applicare dinamicamente i criteri
grafici più avanzati e di moda a contenuti che possono resistere nel
tempo.
Per questo XML è così importante: perché fornisce un meccanismo
neutro e privo di semantica per la creazione di contenuti, su cui
53
diventa possibile specificare la presentazione preferita.
Fabio Vitali
Riferimenti - libri






J. Nielsen, Web Usability, Apogeo, 2000
M. Visciola, Usabilità dei siti Web, Apogeo, 2000
D. Siegel, Creating Killer Web sites (2nd Edition),
Hayden Books, 1997.
J. Fleming, Web Navigation, designing the user
experience, O’Reilly, 1998
J. Veen, Hot Wired Style, Principles for building smart
Web sites, Wired Books, 1997.
J. Spool, T. Scanlon, W. Schroeder, C. Snyder, T.
DeAngelo, Web Site Usability, Morgan kaufmann, 1999.
54
Fabio Vitali
Riferimenti - risorse on-line





D. Siegel, The Balkanization of the Web,
http://www.dsiegel.com/balkanization/
N. Shedroff, Information Interaction Design: a Unified Field
Theory of Design, in R. Jacobson, W.S. Wurman (eds.),
Information Design, MIT Press, 1999.
http://www.nathan.com/thoughts/unified/
K. Andrews, Human-Computer Interaction Lecture Notes,
Final Version of 13 July 1999, http://www.iicm.edu/hci/
J. Nielsen, The alertbox: current issues in Web usability, biweekly column, http://www.useit.com/alertbox/
Keith Instone, The usable Web, http://usableweb.com/
55