Web Design

Fabio Vitali

Fabio Vitali

2

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

Fabio Vitali

3

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.

Fabio Vitali

4

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.

Fabio Vitali

5

Information Design (2)

Fabio Vitali

6

Informazione Promozione

Transazione

Tre dimensioni del Web (1) Informazione (contenuto,

publishing) libri, articoli, manuali, specifiche L’unità base è il fatto (anche se

opinionato) Promozione (entertainment,

marketing) Immagine, senso della comunità,

atteggiamento mentale L’unità base è l’esperienza

Transazione (vendita, scambio) Ordini, e-commerce, B2B, B2C L’unità base è la transazione

Fabio Vitali

7

Informazione Promozione

Transazione

Tre dimensioni del Web (2) Molti siti (in particolare quelli commerciali) in realtà

presentano una mescolanza delle tre dimensioni:

Specifiche del prodotto

Giochi, concorsi, esibizioni

Acquisto e gestione

dell’ordine

Rapporto annuale

Catalogo dei prodotti

NovitàGioco a

premi

Fabio Vitali

8

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 presentazione

Biblioteca Galleria d'arte

Fabio Vitali

9

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 (1976-1982) 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.

Fabio Vitali

10

Accessibilità nel tempo (1) Medium fisico

La corretta conservazione delle tracce ottiche, elettriche o magnetiche sul supporto fisico prescelto.

Hardware La periferica usata per la scrittura e lettura delle informazioni Il computer su cui questa periferica funziona

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

Fabio Vitali

11

Accessibilità nel tempo (2) Problema HW: migrazione dei dati

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

Problema SW: conversione 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.

Fabio Vitali

12

Livelli diversi di riuso Riaccedere in lettura ai dati

Corretta lettura del media fisico Reinterpretare i dati

Corretta identificazione delle caratteristiche del formato dati Rieseguire le applicazioni di manipolazione

Disponibilità e compatibilità (diretta o via emulazione) delle applicazioni originali

Modificare e aggiornare i dati 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à

Fabio Vitali

13

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.

Fabio Vitali

14

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.

Fabio Vitali

15

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.

Fabio Vitali

16

Esempio: .doc di MS Word

Fabio Vitali

17

Esempio: Quark Xpress

Fabio Vitali

18

Esempio: Adobe PageMaker

Fabio Vitali

19

Esempio: PDF

Fabio Vitali

20

Esempio: RTF di MS Word

Fabio Vitali

21

Esempio: PostScript

Fabio Vitali

22

Esempio: HTML

Fabio Vitali

23

Esempio: XML

Fabio Vitali

24

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.

Fabio Vitali

25

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.

Fabio Vitali

26

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

Fabio Vitali

27

L’usabilità di un sito WebNello 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.

Fabio Vitali

28

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)

Fabio Vitali

29

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

Fabio Vitali

30

Organizzazione della presentazione Coerenza

Discrezione (sobrietà)

Scansionabilità

Fabio Vitali

31

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.

Fabio Vitali

32

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.

Fabio Vitali

33

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.

Fabio Vitali

34

Progettazione del contenuto (2) Graceful degradation:

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

Scrolling: 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.

Fabio Vitali

35

Progettazione del contenuto (3) Color overload (link overload):

Se tutto è evidenziato, grassetto, link,ecc., niente è più identificabile. Troppi link, e link troppo lunghi, sono nocivi.

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:

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

Fabio Vitali

36

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?

Fabio Vitali

37

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.

Fabio Vitali

38

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.

Fabio Vitali

39

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.

Fabio Vitali

40

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.

Fabio Vitali

41

Principi di progettazione dell’impatto (1)

Jeffrey Veen - 1999 Semplicità

Essere capiti immediatamente è più elegante di essere decodificati. E’ importante essere ovvi online.

Velocità Grandi colori. Poche immagini grandi. Se si deve osare, meglio osare

in grande. Chiarezza

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.

Fabio Vitali

42

Principi di progettazione dell’impatto (2)

Padroneggia l’ipertestualità 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.

Temi la multimedialità 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.

Fabio Vitali

43

Riduzione della complessità

Steve Krug, 2000Approccio 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

Fabio Vitali

44

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

Fabio Vitali

45

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.

Fabio Vitali

46

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)

Fabio Vitali

47

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é?)

Fabio Vitali

48

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.

Fabio Vitali

49

I dieci errori del Web design (3) Siti senza archivio

Anche l’informazione vecchia è buona informazione. Non buttar via la roba vecchia senza motivo. Lo spazio su disco è a buon mercato.

Cambiare gli URL 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

Fabio Vitali

50

I dieci errori del Web design (4) Adottare ogni singola tecnologia di moda

Push, chat, 3D, Flash, ecc. affascinano i tecnologi e possono fornire qualche beneficio, ma nulla può risollevare un sito strutturato e pensato male.

Risposta del server lenta 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.

Fabio Vitali

51

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

Fabio Vitali

52

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

Fabio Vitali

53

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 diventa possibile specificare la presentazione preferita.

Fabio Vitali

54

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.

Fabio Vitali

55

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, bi-weekly column, http://www.useit.com/alertbox/

Keith Instone, The usable Web, http://usableweb.com/