I siti web delle biblioteche venete

ANALISI E VALUTAZIONE

§8. Il design del sito

Con design del sito ci si riferisce a tutte le sue componenti grafiche. Visciola, nel quinto capitolo del suo libro "Usabilità dei siti web", analizza lâaspetto esteriore dei siti da un punto di vista molto stimolante:

"dalla prospettiva dellâutente finale, la grafica può risultare principalmente seduttiva e/o persuasiva";

"lâappeal di una realizzazione grafica è il risultato dellâequilibrio tra la tendenza a sedurre e la tendenza a persuadere" [1].

Sedurre lâutente per farlo entrare nel sito è un punto di partenza ed è molto importante: anche per una Biblioteca, come per unâazienda, può essere una strategia di mercato, poiché anchâessa mira ad aumentare il numero dei propri utenti. Visciola raccomanda, però, di non fermarsi alla seduzione, che si limita a creare aspettative e, in questa accezione, ha un valore negativo, ma di passare anche alla persuasione, che soddisfa quelle aspettative, convincendo a restare nel sito e a tornarci. Per persuadere, continua Visciola, si deve conoscere il proprio utente, ma anche la Biblioteca di cui si sta creando il sito: lâutente per sapere cosa si aspetta dalla Biblioteca; la Biblioteca per sapere cosa è in grado di offrire allâutente.[2 ]Perciò è preferibile che chi crea il sito sia un bibliotecario ed è indispensabile, non solo per scegliere la grafica, ma anche i contenuti adatti, compiere indagini, periodicamente ripetute, sullâutenza, per conoscere lâevoluzione delle sue esigenze ed essere sempre in grado di rispondervi.
Questa strategia non è valida solo per la scelta della grafica e, soprattutto nel sito di una Biblioteca, dovrebbe essere applicata ai contenuti prima che ad ogni altra cosa. Preso, però, atto che la maggior parte dei siti di biblioteche che si vedono oggi si affida molto allâaspetto estetico e che anche lâutenza vi dà importanza, la cosa migliore da fare è servirsi di immagini, colori e animazioni nel modo più efficace possibile.
I siti costruiti basando lâimpatto solo sulla grafica risultano attraenti solo in un primo momento: non appena li si consideri dal punto di vista dellâinformazione che forniscono e dellâusabilità è facile rimanere delusi. Ciò non significa che siano privi di contenuti, ma che questi sono organizzati superficialmente o penalizzati da un design troppo pesante e dispendioso. Certo esistono siti esteticamente ricchi, che sono anche miniere di informazioni, ma si tratta di casi rari.
HEAD [1999] sostiene che

"A well ­ designed tool is one that is easy to interpret and satisfying to use. In fact, many software developers say that the best designs are ones that users never give a second thought about. They describe this quality as invisibility and it is the hallmark of effortless user interaction and good design".[3]

HEAD [1999] spiega che il linguaggio del design descrive il modo in cui unâinterfaccia comunica allâutente che cosâè un certo oggetto.
Unâinterfaccia, secondo la definizione data dallâautrice, è " la parte visibile di un sistema che lâutente vede, sente o tocca". Perciò lâinterfaccia della Biblioteca (lâhome page) è il mezzo che lâutente ha di vedere, sentire o toccare le informazioni che cerca (i contenuti). Head continua spiegando che il design di unâinterfaccia ha tre parti:

gli elementi, cioè i colori e le funzioni che appaiono sullo schermo e che Head identifica con le icone;

i principi organizzativi, cioè le regole per combinare gli elementi del design tra loro in modo da comunicare un certo significato;

i principi qualificativi, che considerano il design allâinterno del contesto dei media, con le relative opportunità e limitazioni (opportunità di creare degli ipertesti e limitazioni per le caratteristiche dei diversi browser).

Queste definizioni aiutano nelle scelte da compiere riguardo allâimpostazione del design del sito. Lâimpatto che queste scelte hanno sugli utenti e il modo in cui gli utenti interagiscono con il sistema è alla base dello studio compiuto dallâHuman Computer Interaction . Questa disciplina, secondo le definizioni riportate dallâautrice, è lo studio delle persone e della tecnologia dei computer, di come queste interagiscono e si influenzano lâuna con lâaltra e di come rendere la tecnologia usabile dalle persone.[4] LâHCI studia lâuomo e il computer per fare in modo che il primo possa usare al meglio il secondo e che il computer sia il più possibile comprensibile dallâuomo.
Questo approccio mette lâutente al centro della scelta del design da applicare al sito. Lâestetica del sito non deve soddisfare la voglia di colore ed eleganza dei bibliotecari, ma le esigenze di informazione degli utenti, perciò deve tenere conto di numerosi fattori, quali la cultura dellâutente, le funzioni del sistema, i problemi organizzativi... [5]
Come spiega Nielsen nellâintervista in HEAD [1999][6] (e le sue considerazioni valgono sia per il design che per i contenuti), molti siti falliscono perché i creatori non considerano, nel costruirli, le esigenze degli utenti, ma li vedono solo da un punto di vista interno, secondo lâottica dello staff dellâorganizzazione, per il quale molte cose possono essere date per scontate: per un utente no. Il design deve partire sempre dai bisogni dellâutente, perché la Biblioteca è al suo servizio; perciò è fondamentale conoscerli, come si è già detto sopra. COOPER [1997a], suggerisce di scoprire che tipo di browser usa la maggior parte dellâutenza primaria, per fare in modo che la visualizzazione del sito con esso sia ottimizzata[7], ma questa sembra una strategia poco corretta nei confronti degli utenti occasionali, che hanno gli stessi diritti degli altri: è giusto che una biblioteca accademica offra solo agli studenti e ai docenti la possibilità di accedere con una password alla consultazione delle basi dati cui è abbonata, perché si tratta di un servizio interno, ma non è corretto che non faccia in modo di rendere le proprie pagine facilmente visualizzabili ad un utente remoto, che vuole informarsi sui servizi offerti dalla biblioteca e dal suo sito.
Un aspetto importante di cui occuparsi al momento di allestire il sito, invece, è che esso sia supportato da qualsiasi browser, di ogni marca, anche dal meno aggiornato, come un browser testuale, qual è, ad esempio, Lynx. Certo, ormai la maggior parte delle macchine è al passo coi tempi, ma la Biblioteca resta sempre un servizio e deve essere accessibile anche a chi non è tecnologicamente aggiornato. Si fornirà sempre, dunque, anche una versione solo testo della propria home page e dei documenti pi� importanti del sito. Inoltre si dovrà cercare di non sovraccaricare le pagine, per non rendere troppo lento il loro caricamento.

Come afferma NOTESS [1996]

"Most publishers on the Internet want to reach the broadest possible audience. Writing HTML documents that can only be viewed by a portion of Internet users limits the market penetration of any document. Thus, the better managed sites that want to demonstrate their technological wizardry by using the latest Netscape developments will also create alternative pages for users of other browsers."[8]

La normativa internazionale per la costruzione di siti web accessibili è data dal W3C[9], che definisce quattordici "linee guida per lâaccessibilità ai contenuti del Web", che vale la pena ricordare:

1. Fornire alternative equivalenti al contenuto audio e visivo
2. Non fare affidamento sul solo colore
3. Usare marcatori e fogli di stile e farlo in modo appropriato
4. Chiarire lâuso di linguaggi naturali
5. Creare tabelle che si trasformino in maniera elegante
6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante
7. Assicurarsi che lâutente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo
8. Assicurare lâaccessibilitˆ diretta delle interfacce utente incorporate
9. Progettare per garantire lâindipendenza da dispositivo
10. Usare soluzioni provvisorie
11. Usare le tecnologie e le raccomandazioni del W3C
12. Fornire informazione per la contestualizzazione e lâorientamento
13. Fornire chiari meccanismi di navigazione
14. Assicurarsi che i documenti siano chiari e semplici

Queste linee guida non riguardano solo il design del sito, ma hanno lo scopo di sensibilizzare i creatori di pagine web affinché rendano i contenuti di queste accessibili a tutti. Lâabstract del documento chiarisce:

"Le presenti linee guida spiegano come rendere contenuti Web accessibili a persone disabili. [...] Lâobiettivo principale di queste linee guida consiste nel promuovere lâaccessibilità. Seguendole, si otterrà il risultato di rendere i contenuti Web più facilmente fruibili da tutti gli utenti, a prescindere dal particolare interprete in uso (ad es. browser normali, browser basati su dispositivi di sintesi vocale, telefoni cellulari, personal computer per automobili, ecc.) o da eventuali limitazioni a cui essi possono essere costretti (ad es., ambienti rumorosi, stanze sottoilluminate o sovrailluminate, ambienti in cui occorra avere in qualunque momento le mani libere, ecc.). Il conformarsi a queste linee guida consentirà agli utenti di reperire sul Web informazioni in maniera più veloce. Queste linee guida non invitano gli sviluppatori di contenuti a non utilizzare immagini, video, ecc., suggeriscono invece come rendere i contenuti multimediali accessibili a un pubblico più vasto." [10]

Il documento, quindi, fornisce principi che permettono di progettare siti web accessibili alle persone disabili e quindi più usabili anche da tutti gli altri utenti. La prima cosa da decidere, organizzando la grafica di una pagina web, è lâaspetto dellâimpaginazione. HEAD [1999] sostiene che "i siti più usabili sono quelli più intuitivi" [11]: un utente decide durante i primi minuti di visita a un sito se quello che ha davanti è ciò che fa per lui o no e, una volta c apitane la struttura, è in grado di destreggiarsi un poâ ovunque. LâHCI definisce un sito usabile quando esso risponde alle domande:

"Is the interface easy to learn?

Is the interface easy to remember?

Is the interface pleasant to use?

Does the interface design cause few errors?"[12]

Inoltre, le pagine devono essere coerenti, cioè deve esserci al loro interno una certa uniformità strutturale e grafica (non solo contenutistica come già detto). Head [1999] dà alcune linee guida anche per valutare questâultima[13], spiegando che il lay­out deve essere lo stesso su ogni pagina del sito, i tasti con le funzioni fondamentali (aiuto, stampa, uscita, ricerca) devono essere sempre nella stessa posizione, ecc.
Molti dei testi analizzati forniscono esempi per la costruzione grafica della pagina, alcuni creando degli schemi guida[14], altri mostrando pagine di siti giˆ esistenti.[15]
È evidente che gli autori legano fra loro strettamente il modo in cui è costruito il sito e il modo in cui esso è visitato. La struttura del sito guida la navigazione degli utenti e il design gioca un ruolo decisivo, perché mette in evidenza alcuni tratti della pagina e attira lâattenzione sul servizio o sulla risorsa che i creatori del sito vogliono che lâutente veda per prima.
Secondo HEAD [1999] la grafica è ben usata quando serve a guidare gli utenti nelle operazioni da compiere allâinterno del sito per recuperare lâinformazione voluta

"Just as landmarks help people navigate in the physical world, design landmarks such as icons, menu bars, and site maps, help users navigate the virtual landscape."[16]

e non deve essere vista come fonte di molti dei problemi che si rilevano nella navigazione e nellâusabilità del sito.[17]
SPOOL [1999] parla di "shell strategy" e di " shell sites" [18], riferendosi alle ossature della pagina web, che vengono preparate da esperti di grafica e poi "riempite" con i servizi offerti dal sito da una persona che conosca bene quali devono essere gli scopi di questâultimo, nel nostro caso da un bibliotecario.[19] La regola empirica per riconoscere uno "shell site" è questa:

"If you could remove more than half of the site content without having to update the home page, itâs most likely a shell site" [20]

Più avanti nel testo SPOOL [1999] spiega che spesso gli utenti si perdono perché non riescono a crearsi mappe mentali del sito[21]. Perché un navigatore possa rendersi sempre conto di dove si trova e di come câè arrivato è fondamentale che su ogni pagina, oltre al già più volte menzionato logo della biblioteca, ci sia lâindicazione del "livello di ingresso" nel sito. Anche di questo si è già parlato: una riga di testo che indica da dove si è partiti e quanto si è penetrati nella gerarchia del sito, secondo la struttura home > sezione interna di primo grado > sezione interna di secondo grado > titolo della pagina in cui ci si trova. A questo scopo rispondono anche le mappe del sito, che forniscono una visione complessiva della sua struttura, dando modo di vedere dove portano i link. Nellâindagine condotta da SPOOL [1999] è stato rilevato che usare la mappa di un sito dà il doppio delle possibilità di trovare ciò che si cerca, ma che spesso gli utenti si perdono perchŽé non usano i dispositivi di navigazione che vengono loro forniti[22]. Una regola dâoro per la struttura della pagina è quella del "magical number seven", spiegata da HEAD [1999]:

"The concept is based on research that shows that most people are unable to recall more than seven different numbers or words because of the limited span of their short-term memory. [...] Menus with more than seven choices are going to be difficult for the majority of users to remember. "[23]

Il design, però, non riguarda solo la struttura e lâimpaginazione, ma anche i colori, le immagini, il testo e lo sfondo della pagina.
Questâultimo deve sempre far risaltare quanto scritto sulla pagina stessa, perciò il colore del testo deve essere tale da creare contrasto con esso, in modo da saltare agli occhi, ma senza ferirli e affaticarne il lavoro. Niente colori troppo vivaci, quindi, o fluorescenti, per lo sfondo, ma nemmeno troppo scuri, non solo perché lâocchio legge più faticosamente un colore chiaro su fondo scuro, ma anche perché lâuso di uno sfondo, per esempio, nero non permette di fare stampe chiare della pagina.
I colori non devono essere mai più di quattro per schermata, perchè "lâattenzione del lettore possa concentrarsi solo su quelli e vengano minimizzati gli effetti di disordine" [24]. Essi determinano la percezione della pagina nella sua interezza, ma anche del testo e delle immagini. HEAD [1999] si sofferma a lungo su questo argomento, ricordando che i colori possono essere interpretati diversamente anche a causa delle diverse connotazioni culturali che assumono. Non bisogna poi dimenticare che ci sono persone che non riescono a distinguerli, confondendo in particolare il verde col rosso e il blu col giallo, perciò si dovrà cercare di evitare di usare questi ultimi per evidenziare punti importanti della pagina.
Si torna così al problema dellâaccesso per tutti, anche per chi ha p roblemi di visualizzazione e comprensione con lâuso del computer.

HEAD [1999] spiega che lâHCI si è occupata troppo poco dei problemi riguardanti lâaccessibilità del Web alle persone disabili, secondo alcuni perché si trattava di uno studio che richiedeva molte risorse, ma garantiva il riscontro di una "clientela" limitata. Permettere a tutti di accedere al Web non significa solo rimuovere le barriere che impediscono lâuso "fisico" del computer, per esempio, a chi non può muovere le mani o non può vedere lo schermo, ma anche permettere a costoro di navigare con facilità, quindi di usare la Rete e avere delle macchine che siano in grado di svolgere i compiti e soddisfare le richieste fatte loro da questo tipo di utenti [25]. VISCIOLA [2000] illustra molto bene i diversi mezzi che permettono di navigare alle persone con problemi fisici, i cosiddetti sistemi adattivi o adattativi [26], come i display vocali o speech synthesizer per i non vedenti, ma non sempre le pagine web sono create in modo da essere leggibili anche da queste macchine. Il W3C si occupa di garantire anche questo tipo di leggibilità nelle sue linee guida. VISCIOLA [2000] evidenzia che ci sono almeno tre tipi di utenti disabili "tradizionali", cioè utenti non vedenti, utenti affetti da sordità, utenti anziani. A questi, però, aggiunge gli utenti che si collegano alla Rete con il cellulare, la WebTV o i device mobili, sottolineando come, con questa distinzione, aumenti significativamente la percentuale di disabili di cui tenere conto quando si cerca di creare un sito usabile da tutti. Egli ricorda come spesso i bisogni di questi tipo di utenti non siano noti che ad un ristretto numero di specialisti, ciò che rende più difficile, soprattutto in Italia e in Europa, una sensibilizzazione e una diffusione adeguata delle conoscenze necessarie a soddisfare anche le loro esigenze [27].
Perché le pagine siano davvero usabili da tutti gli utenti, allora, si dovrà tenere conto di alcuni accorgimenti:

Evitare le combinazioni di colori blu/giallo e rosso /verde, che non sono visibili a chi è affetto da discromatopsia (malattia degli occhi a causa della quale si percepisce una mescolanza dei colori diversa dal normale) o da dicromatismo (imperfezione della percezione visiva, che permette di compiere solo due discriminazioni tra i colori base o i loro derivati, invece delle tre distinzioni percepite da un occhio sano). Per essere certi di non aver usato colori difficili da distinguere per una persona daltonica, si può, ad esempio, visualizzare la pagina in scala di grigi, verificando cos“ se il contrasto tra il testo e lo sfondo � sufficiente. È bene fare questo esperimento anche per verificare il contrasto tra il colore dei link visitati e quello dei link ancora da visitare, assicurandosi che sia sufficiente, perchŽ ci sono anche tipi di daltonismo che confondono violetto e azzurro, i colori standard per i link.
Il contrasto tra lo sfondo della pagina e il testo aiuta a mettere a fuoco l e parole, ma, come già detto, è meglio evitare i contrasti che disturbano la vista: niente colori fluorescenti, né troppo chiari, per i testi, perché sono difficili da leggere e da stampare. Il contrasto migliore per la leggibilità del testo si ottiene con testo nero su fondo bianco, mentre il contrasto minore, quindi la peggiore leggibilità, si ha con una combinazione di testo rosa su fondo verde: questi due colori, inoltre, rendono la pagina invisibile alle persone affette anche da un leggero daltonismo[28]. La scelta dei colori è molto importante soprattutto quando si parla di link: convenzionalmente il testo di un link non ancora visitato è blu, mentre quello di un link già visitato �è viola e questa coppia di colori va mantenuta costante, per evitare confusioni [29]. SPOOL [1999] conferma questa regola con i risultati concreti dellâindagine descritta nel suo testo:

"Of all the graphic design elements we looked at, the only one that is strongly tied to user success was use of browser-default link color. [...] Our theory is that use of the default colors is helpful because users donât have to relearn every time they go to a new site" [30]

Predisporre una versione solo testo della pagina, attivabile premendo un tasto che deve essere ben visibile sullo schermo (perfetto un tasto con la scritta SOLO TESTO). Segnalare questa funzione con icone, immagini, iniziali, non ha molto senso, perché lo scopo è che la versione sia chiaramente visibile dallo speech synthesizer. Il testo, non solo per quanto riguarda le pagine alternative, che utilizzeranno unâimpaginazione molto semplice, ma soprattutto per le pagine web in generale, deve essere molto curato anche nella scelta del carattere e delle sue dimensioni: NIELSEN [2000] consiglia di non impostare una dimensione assoluta per il testo

"Piuttosto specificate tutte le dimensioni in rapporto alla dimensione base costituita dalle preferenze dellâutente" [31]

in modo che egli possa ingrandire e rimpicciolire secondo le proprie esigenze la pagina, senza essere vincolato alle scelte dei creatori del sito.

Predisporre schermate non troppo lunghe, perché chi le visualizza con un display piccolo si trova in difficoltà a percepirle nella loro interezza, quindi ad orientarsi al loro interno.
Anche la larghezza delle schermate va controllata, perché scorrere il testo in orizzontale è ancora più scomodo che scorrerlo in verticale, in quanto lo si deve fare molte più volte, cioè ad ogni riga che si legge. Sarebbe preferibile, perciò, un testo che si sviluppa in lunghezza ad uno che si sviluppa in larghezza, ma certo possono esserci eccezioni, che dipendono dal contenuto della pagina [32]: se essa è composta di sola grafica o di brevi sezioni di testo, farla sviluppare in larghezza anziché in lunghezza non dovrebbe, in linea di massima, creare problemi. Anche un testo lungo potrebbe essere disposto in larghezza, a patto che sia organizzato in colonne alte come una schermata e che preveda solo uno sviluppo orizzontale e non verticale e orizzontale insieme: in tal modo dovrebbe essere letto scorrendo il foglio orizzontalmente, come se si srotolasse un papiro.
A tal proposito, VISCIOLA [2000] "per ridurre la necessitˆ di fare scrolling nella pagina" propone di "porre gli ausili alla navigazione o i link in posizione fissa sulla testata della pagina stessa (centralmente o sulla sinistra va ugualmente bene)" [33].
NIELSEN [2000] suggerisce di

"[...] non presupporre nessuna larghezza standard; è molto meglio creare pagine che funzionino con una vasta gamma di schermi di dimensioni e risoluzioni diverse. Non solo gli utenti hanno schermi di dimensioni e risoluzioni diverse, ma spesso usano finestre che non li occupano per intero"[34].

Evitare lâuso di animazioni sulla pagina, perché disturbano la concentrazione[35]. Si è già accennato al fatto che le animazioni non sono sempre da demonizzare e possono rivelarsi simpatiche, per esempio, in un sito dedicato allâinfanzia [36], ma solo se si predispongono i dovuti accorgimenti perché esse non siano elemento di disturbo per la visualizzazione, per esempio allungando il tempo di caricamento della pagina o impedendo agli utenti la lettura del testo vicino [37].
Anche NIELSEN [2000] assicura che

"La maggioranza degli utenti [...] afferma di essere infastidita dalle animazioni. In particolare, quasi tutti gli utenti odiano il testo scorrevole"[38]

ma elenca sette casi in cui le animazioni possono rivelarsi utili, perché usate davvero per scopi utili e non per puro compiacimento grafico:

" Dare un senso di continuità alle transizioni;

Indicare una direzione nelle transizioni;

Illustrare lâevoluzione nel corso del tempo;

Mostrare pi� insiemi di dati in una stessa porzione di schermo;

Arricchire le presentazioni grafiche;

Visualizzare strutture tridimensionali;

Attirare lâattenzione."[39]

Torna su

Per una spiegazione più dettagliata della funzione positiva delle animazioni, si rimanda ai commenti dellâautore, precisando qui che, per quanto riguarda il sito di una biblioteca, lâunico caso in cui si ritiene che unâanimazione possa essere, forse, giustificabile, è lâultimo di quelli elencati da NIELSEN [2000]: "attirare lâattenzione ".
In ogni caso si dovrà fornire un testo esplicativo dellâimmagine animata, tramite lâuso del tag <alt>[40]. Quando si includono file video o audio, HEAD [1999] consiglia di fornire sempre anche delle spiegazioni testuali degli stessi, con le informazioni necessarie per il loro uso, in modo che un utente disabile possa attivare la versione alternativa[41].
In ogni caso, sarà bene evitare lâuso di contenuti multimediali in genere, suoni, video o immagini animate che siano, se non è strettamente necessario, perché, nella maggior parte dei casi, questi non possono essere usufruiti dalle persone disabili, e ciò può essere uno svantaggio, se si tratta di una risorsa importante per lâuso del sito.

Non sottovalutare lâimportanza dello spazio bianco: nella maggior parte dei siti i vuoti di testo e immagini sono quasi demonizzati e non esiste angolino senza contenuto, grafico o testuale che sia. Gli esperti, invece, dicono che, mentre le zone scure magnetizzano lâattenzione, lo spazio bianco serve a isolare lâinformazione e a renderla più evidente[42], anche se dallâindagine condotta da SPOOL [1999] risulta che non è vero che i siti che sfruttano questa teoria siano più usabili degli altri, anzi accade il contrario [43]. La conclusione di questâultimo è che la teoria valga per il testo stampato e non per quello elettronico, dove il lettore non vede, con un solo colpo dâocchio, tutta la pagina, come accade invece con un libro o un giornale, ma deve immaginarla al di là dei più o meno ristretti confini dello schermo.
Fare molta attenzione allâinclusione di immagini nel sito e al loro conseguente trattamento. Le immagini, come gli altri elementi grafici di cui si è parlato fino ad ora, non vanno demonizzate e viste solo come un elemento opzionale che crea difficoltà, ma nemmeno considerate la soluzione migliore[44]: anche in questo caso basta osservare alcuni accorgimenti perché esse possano offrire al meglio il loro valore aggiunto agli utenti che le possono visualizzare e non disturbare lâaccesso al sito di chi invece non ha un browser sufficientemente aggiornato per trattarle.
Come giustamente fa notare SNYDER [1996]:

"Graphics can be useful. But generally, Web designers stick useless and bandwidth-hogging graphics on their pages without thinking about whether they further the goal of the page or just take up a space. If youâre going to stick graphics on your pages, make them useful." [45]

Si è già detto dellâimportanza del logo della Biblioteca sulla home page e su tutte le altre pagine del sito, ma si deve fare attenzione che non si tratti di unâimmagine molto pesante. Poiché lo scopo è segnalare allâutente dove si trova, può essere sufficiente il nome della Biblioteca, se si inserisce anche un logo, sarà necessario fare uso del tag <alt> per visualizzare un testo esplicativo, tipo "Logo della Biblioteca X", magari con una breve descrizione del disegno. Una foto della Biblioteca sulla home page è significativa e anche per questa si dovrà usare il tag <alt> che reciterà "Fotografia della facciata dellâedificio che ospita la Biblioteca X" oppure "Fotografia della sala di lettura", ecc. Lo scopo è soltanto fare in modo che anche chi visualizza soltanto quegli antipatici quadratini bianchi con la crocetta rossa possa almeno soddisfare la curiosità di sapere che si perde la foto dellâingresso e non, invece, qualcosa di ben più importante. Quando le immagini servono a spiegare allâutente comâè fatto lâedificio, come si arriva in Biblioteca (nel caso della cartina topografica con le indicazioni stradali) o chi sono i bibliotecari, si può pensare che non siano informazioni fondamentali che danno al sito un valore aggiunto e, se non visualizzabili, tolgono allâutente una parte importante dellâinformazione, senza la quale non potrà proseguire la ricerca. Le immagini possono essere veramente utili solo quando sono esse stesse contenuto, come nel caso di una mostra virtuale di manoscritti o altre opere appartenenti alla Biblioteca e digitalizzate sul suo sito, oppure nel caso di immagini che rappresentano schemi informativi (la soluzione potrebbe essere renderli con tabelle, che sono, però, sconsigliate dal W3C, e liste HTML).
Un caso in cui davvero non si dovrebbe mai usare unâimmagine, invece, è per rappresentare la home page: METZ ­ JUNION­METZ [1996] suggerisce di usare una foto della Biblioteca[46], per esempio una panoramica dellâingresso o della sala principale, per rappresentare lâhome page (lâingresso) del sito: in questa " Biblioteca Virtuale" la foto del Catalogo rappresenterebbe lâaccesso allâOPAC, la foto del Bibliotecario lâaccesso alla pagina con i nomi e i recapiti dello staff e, forse, facendo clic col mouse sulla foto dellâorologio si potrebbero visualizzare gli orari di apertura della Biblioteca. Questa scelta, originale e divertente, non è per niente democratica: non solo impedisce a chiunque non riesca a visualizzare lâimmagine di entrare nel sito, ma non è nemmeno chiara, perché, a meno che non ci sia anche un testo che spiega quale collegamento si celi dietro gli oggetti, lâinterpretazione che viene data alla loro funzione non è uguale da parte di tutti gli utenti, che non necessariamente interpreteranno un anonimo mobile con i cassettini come un link allâOPAC (qualcuno potrebbe aspettarsi che ad esso si acceda attraverso un clic sulla foto di un computer). Volendo per forza includere unâimage map nel proprio sito, si potrebbero aiutare gli utenti che non sono in grado di visualizzarla affiancandole un menu testuale dei link che essa comprende. Le immagini, dunque, non sembrano essere mai davvero fondamentali per raggiungere lo scopo prefisso da un sito di Biblioteca, cioè fornire informazione di qualità e aggiornata a tutti. Molti autori, tuttavia, forniscono utili suggerimenti per trattarle in modo da rendere il sito davvero usabile.
I testi e le immagini di una pagina web si trovano in file separati, uno per il testo e uno per ciascuna immagine. La visualizzazione di una pagina web avviene attraverso la lettura del file HTML[47] che contiene, codificati, i comandi per rappresentare il testo del documento: ogni volta che si carica sul proprio browser una pagina web, attraverso un codice contenuto nel formato HTML vengono richiamati tutti i file immagine da caricare sulla pagina. FALK [1996b] precisa che le immagini devono essere in formato GIF o JPEG, che riducono lâestensione del file, rendendone più veloce la trasmissione. Egli elenca anche alcune delle soluzioni comunemente adottate per risparmiare lunghe attese agli utenti che vogliono visualizzare una pagina. Un metodo consiste nel visualizzare prima tutto il testo della pagina, così lâutente può leggerlo mentre aspetta che le immagini siano aggiunte mano a mano che vengono ricevute: se poi si accorge che la pagina non gli interessa o che può anche tralasciare di vedere le immagini, può uscire dal sito prima che queste siano state completamente caricate. Un altro modo di velocizzare il caricamento della pagina è la trasmissione delle immagini in segmenti: lâapparizione dellâimmagine intera richiede più tempo del suo caricamento a porzioni.
Infine una soluzione molto più rapida (per lâutente, non per la Biblioteca, che deve creare due versioni della stessa pagina) è quella di dare allâutente la possibilità di scegliere di visualizzare solo il testo della pagina oppure la sua versione completa di immagini[48]. Nel caso di link ad immagini che si trovano su unâaltra pagina, GARLOCK ­ PIONTEK [1996] consiglia di segnalarne le dimensioni, in modo che lâutente possa scegliere se visualizzarle o no[49]. Un altro modo per avvisare riguardo la pesantezza dellâimmagine, senza togliere la possibilità di vederla è darne una versione più piccola, quindi più leggera, sulla pagina corrente, affiancata da una didascalia che spieghi la possibilità di visualizzare lâimmagine in formato completo facendo clic col mouse o con il tasto "Invio" su di essa.
Le image map, di cui si è già parlato brevemente, sono delle figure che contengono link ipertestuali[50]: ogni link corrisponde ad una regione della mappa, attivando la quale si attiva il collegamento corrispondente. Il repertorio delle Biblioteche italiane in Internet del Politecnico di Torino, ad esempio, utilizza unâimage map costituita dalla figura dellâItalia con le regioni chiaramente distinguibili tra loro: facendo clic col mouse o con la tastiera su una regione, si raggiunge la pagina con il repertorio delle Biblioteche presenti in Internet relative alla regione scelta. Anche lâesempio descritto sopra sullâuso di unâimage map per rappresentare lâhome page è un caso analogo[51]. Secondo HEAD [1999] le image map dovrebbero includere sempre un menu sostitutivo per chi non è in grado di visualizzarle. Lâautrice parla nel suo libro anche di un software che riformatta le pagine ad uso degli utenti disabili, ignorando le immagini e dando invece solo una lista alfabetica dei link contenuti nella pagina: vengono ignorati, però i link costituiti soltanto dallâindicazione "clicca QUI!"[52], motivo in pi� per non usare questa ambigua indicazione.
SNYDER [1996] rileva anche altri problemi che possono dare le image map, soprattutto nel caso di siti in cui la maggior parte delle pagine è costruita con questa tecnica:

"If I happen to be running without graphics turned on (which I do to speed things up), I have no idea of what is going on there" [53].

Le icone, tasti che, attraverso un simbolo grafico, rappresentano la funzione che attiveranno una volta che lâutente vi avrà cliccato sopra, sono uno dei bersagli preferiti dalla fantasia degli Web designer. Spesso la loro funzione non è così chiara come potrebbe sembrare a chi le crea, perché i simboli e i disegni usati non sempre vengono interpretati ugualmente da tutti gli utenti, soprattutto da chi non è esperto del Web o delle Biblioteche. I simboli sono di certo utili e intuitivi finché si tratta di tasti con funzioni più complesse del semplice link alla home page, che pu˜ò essere facilmente rappresentato da una casa (ovviamente corredata dalla didascalia HOME o dal tag <alt>). È perciò indispensabile affiancare alle icone grafiche unâetichetta che ne sveli il significato[54], anche in previsione della visita di un utente che non può visualizzare le immagini: senza il testo esplicativo, costui sarebbe impossibilitato a conoscere lo scopo dellâicona che non riesce a vedere.
Si è già parlato dellâimportanza di arricchire ogni link con un commento che ne spieghi la destinazione e questo va fatto anche con le icone, che celano, appunto, dei link, anche se a risorse interne: si deve sempre tenere presente che un utente deve sapere dove sta andando con il suo clic. Dallâindagine di SPOOL [1999] risulta che i link senza commento mandano i lettori fuori strada, mentre "câè un legame positivo tra i link corredati di immagine e il successo (degli sforzi) degli utenti"[55]: a questo si può aggiungere che non sempre unâimmagine è sufficiente ed è sempre meglio aggiungere ad essa un commento testuale. Infine, come raccomanda HEAD [1999] le icone devono essere sufficientemente grandi da poter essere facilmente selezionate anche da persone con difficoltà di movimento.
Molti autori raccomandano di non usare soluzioni grafiche particolari soltanto perché è ormai unâabitudine e una moda, ma di fare molta attenzione a servirsi di esse soltanto per migliorare lâaspetto e lâusabilità del sito. La grafica può servire ad evidenziare parti importanti di un testo[56], a spiegare le diverse funzioni del sito e ad orientare il navigatore; si deve sempre fare molta attenzione a non perdere di vista la mission del sito.
SPOOL [1999] rileva che la grafica convenzionalmente rende i siti più interessanti, serve ad attirare lâattenzione e a mantenerla focalizzata sulla pagina o sul sito, in modo che lâutente non se ne vada. Dalla sua indagine, però, non risulta che il sito più interessante fosse anche quello su cui gli utenti spendevano più tempo e quello più usabile; perciò lâautore conclude che la teoria è degna di nota, ma "non ha riscontro nella realtà"[57].

Dalla ricerca è infatti risultato che la qualità del design avesse un ruolo minimo nellâabilitˆàdellâutente di trovare ciò che cercava

"Graphic elements per se did not seem to add to or detract from usersâ ability to find information."[58]

Anche SNYDER [1996] afferma che, se un sito non funziona senza grafica, bisogna rivederlo, perché significa che non è ben fatto e aggiunge

"Keep in mind that lots of people are on slow phone lines, have slow browsers, or donât have the time to waste waiting for your graphics to load."[59]

Concludendo sembra importante ricordare le utili tabelle guida di HEAD[60] e di METZ ­ JUNION­METZ [1996] [61], che spiegano quali scelte grafiche fare per il proprio sito, raccomandando ancora una volta:

"Get patrons involved in updating your web design. Consider forming a patron feedback group to give you ongoing advice on how well your pages are designed."[62]

Torna su

---

[1] VISCIOLA [2000], p. 111.

[2 ]VISCIOLA [2000], p. 112 e segg.

[3] "Una risorsa con un buon design è una risorsa facile da interpretare e soddisfacente da usare. Infatti, molti sviluppatori di software dicono che il design migliore è quello più immediato da usare per gli utenti. Descrivono la qualità di questo design come invisibilità, che è il marchio di garanzia dellâinterazione senza sforzo con lâutente e del buon design." HEAD [1999], p. 4.

[4] HEAD [1999], p. 8-15 .

[5] HEAD [1999], p. 32.

[6] HEAD [1999], p. 34-37.

[7] COOPER [1997a], p. 6. Anche SPOOL [1999], che si riferisce principalmente al design di siti commerciali, è dâaccordo con questa teoria, che però è evidentemente solo una strategia di mercato, che davvero non ha senso applicata ad un sito di servizi, qual è quello di una Biblioteca.

[8] "La maggior parte degli editori su Internet vuole raggiungere lâaudience più vasta possibile. Scrivere documenti HTML che possono essere visualizzati solo da una parte degli utenti di Internet, però, limita la penetrazione del mercato di qualsiasi documento. Così, i siti meglio gestiti che vogliano dimostrare la loro stregoneria usando lâultima versione di Netscape, dovranno anche creare versioni alternative per gli utenti con altri browser." NOTESS [1996], p. 65.

[9] Il World Wide Web Consortium è unâorganizzazione, fondata nellâottobre 1994, che ha come obiettivo la realizzazione delle massime potenzialità del Web " [...] by developing common protocols that promote its evolution and ensure its interoperability." ("[...] sviluppando protocolli comuni e promuovendo la loro reciproca adattabilitˆ"); "W3C in 7 points" . Il W3C, dunque, promuove lo sviluppo di un Web che trasmetta contenuti leggibili attraverso ogni tipo di software, agendo in tal senso anche in accordo con le industrie e incoraggiandole a confrontarsi fra loro. Promuove i principi di semplicità, modularità, compatibilità ed estensibilità perché i nuovi prodotti tecnici siano compatibili fra loro e con quelli più vecchi. A questo scopo ha elaborato le linee guida cui si è accennato. La versione cui si fa qui riferimento è consultabile allâURL http://www.aib.it/aib/cwai/cwai.htm : si tratta di una traduzione, dove si specifica che la sola versione ad avere valore normativo è quella in lingua inglese, disponibile allâURL http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505.
Anche HEAD [1999] propone una tabella di "Universal design principles ", p. 121-123, per la quale si rimanda allâAppendice a questo testo.

[10] W3C [2000], abstract.

[11] HEAD [1999], p. 53.

[12] "È semplice imparare a usare lâinterfaccia? Lâinterfaccia è facile da ricordare? Lâinterfaccia è piacevole da usare? Il design dellâinterfaccia causa pochi errori?", HEAD [1999], p. 53.

[13] HEAD [1999], p. 53 e 57.

[14] GARLOCK ­ PIONTEK [1996], p. 95-97; COOPER [1997]; HEAD [1999], p. 62-63.

[15] METZ ­ JUNION­METZ [1996], p. 227-262.

[16] "Come i punti di riferimento aiutano a navigare nel mondo fisico, così i punti di riferimento grafici, come le icone, le barre dei menu e le mappe del sito aiutano gli utenti a navigare nel paesaggio virtuale." HEAD [1999], p. 57.

[17] HEAD [1999], p. 111.

[18] " Weâve heard a lot about shell strategy ­ a technique that lets developers design a navigational structure and hierarchy first, then just plug the content into it. For example, one of our clients (a large multinational bank) has one department working on the overall look and feel of the site, including the home page, navigation bars, style sheets, and templates for different types of interactions. Other departments are responsible for creating the content. The developers of the overall structure ­ or shell ­ donât know what the content will be plugged in later"; " Abbiamo sentito molto parlare di shell strategy ­ una tecnica che lascia agli sviluppatori il compito di disegnare una struttura di navigazione ed una gerarchia prima, quindi di inserirvi il contenuto. Per esempio, uno dei nostri clienti (una grande banca multinazionale) ha una sezione che lavora soprattutto per lâaspetto estetico del sito, inclusa lâhome page, le barre di navigazione, gli style sheets e gli esempi per i diversi tipi di interazione. Le altre sezioni si occupano di creare i contenuti. Gli sviluppatori di tutta la struttura ­ o guscio ­ non sanno di quale contenuto si tratterà, perché questo verrà inserito in un secondo momento." SPOOL [1999], p. 10-11. Bisogna distinguere gli shell sites dai template , poiché i primi si riferiscono allâintera struttura del sito, mentre i secondi indicano soltanto gli schemi organizzativi di una singola pagina, il suo lay ­ out. Un esempio di templates, si pu˜ trovare in GARLOCK-PIONTEK [1996].

[19] Lâautore e i suoi collaboratori hanno compiuto lâindagine esclusivamente su siti commerciali.

[20] " Se si può rimuovere piò di metà del contenuto del sito senza che si debba aggiornare la home page, è sicuramente uno shell site." SPOOL [1999], p. 11.

[21] SPOOL [1999], p. 28.

[22] SPOOL [1999], p. 20-29.

[23] "Il concetto si basa su una ricerca che dimostra che la maggior parte delle persone non è in grado di ricordare più di sette diversi numeri o parole, a causa della durata limitata della propria memoria a breve termine. Menù con più di sette scelte possono essere difficili da ricordare per la maggior parte degli utenti." HEAD [1999], p. 49.

[24] HEAD [1999], p. 57.

[25] HEAD [1999], p. 116.

[26] "Si tratta di tecnologie che trasformano le caratteristiche dellâinterfaccia e del compito, rendendole compatibili con le limitazioni degli utenti. Ad esempio, nel caso dei non vedenti, la tecnologia adattiva trasforma i contenuti e il sistema di navigazione basati su stimoli visivi presenti nel sito in stimoli uditivi, tramite i cosiddetti speech synthesizer. Se si tratta invece di utenti con problemi nella messa a fuoco e nellâacuità visiva, i caratteri del video vengono ingranditi in modo graduale e confacente tramite un programma specifico di screen magnification ." VISCIOLA [2000], p. 42.

[27] VISCIOLA [2000], p. 40-41.

[28] NIELSEN [2000], p. 126.

[29] "Contrasting white or gray backgrounds with darken colored text and brightly colored links should ensure that guides are easy to view." ;"Uno sfondo bianco o grigio con testo scuro e link di colori chiari assicura una facile comprensione della guida". COOPER [1997], p. 53.

[30] "Di tutti gli elementi di design grafico analizzati, lâunico strettamente legato al successo dellâutente era lâuso dei colori di default del browser per i link. [...] La nostra teoria è che lâuso dei colori di default aiuta perché lâutente non deve impararli di nuovo ogni volta che entra in un nuovo sito." SPOOL [1999], p. 85.

Torna su

[31] NIELSEN [2000], p. 84.

[32] Lâhome page del sito di Radio Deejay , per esempio, si sviluppa tutta e solo in larghezza.

[33] VISCIOLA [2000], p. 47.

[34] NIELSEN [2000], p. 174.

[35] "Users could not concentrate when there was animation on the screen"; "Gli utenti non riuscivano a concentrarsi quando câerano animazioni sullo schermo". "Users find this animation uniformly irritatine"; "Gli utenti trovano le animazioni sempre irritanti". SPOOL [1999], p. 83 e p. 89.

[36] Anche se SPOOL [1999] non sembra essere dâaccordo: "In fairness, we need to say that weâre sure someone somewhere is using animation to actually enhance the information retrieval or reading process, but we didnât see it. None of the sites we tested actually used animation to support the content. The animation was gratuitous ­ it could be removed and nothing would be lost from the content of the site." " Francamente, dobbiamo dire che siamo sicuri che qualcuno da qualche parte sta usando delle animazioni per valorizzare realmente il recupero dellâinformazione o il processo di lettura, ma noi non lâabbiamo visto. Davvero nessuno dei siti esaminati usava le animazioni per mettere in luce il contenuto. Lâanimazione era gratuita ­ avrebbe potuto essere tolta e nulla sarebbe andato perso del contenuto del sito." SPOOL [1999], p. 89. Posso fare la stessa affermazione riguardo i siti delle Biblioteche venete visitati durante la rilevazione dei dati per questo censimento. Non avevano alcuno scopo informativo né il nome lampeggiante della biblioteca (tra lâaltro assai arduo da stampare), né i diversi brani musicali che accoglievano lâingresso in ciascuna delle pagine del sito, né le cornette del telefono che lampeggiavano invitando a chiamare la biblioteca per ulteriori informazioni sui servizi disponibili.

[37] SPOOL [1999], p. 89.

[38] NIELSEN [2000], p. 143.

[39] NIELSEN [2000], p. 143 e 145.

[40] Il tag <alt>, al passaggio del mouse, permette di visualizzare una finestra con un breve testo esplicativo, che viene visualizzato anche qualora il browser non sia in grado di caricare la grafica della pagina. Fa parte del linguaggio HTML, descritto più ampiamente nel cap. I, par. 11.

[41] HEAD [1999], p. 125.

[42] "Strategic placement of blank space and lines will serve to draw the viewerâs attention to the next section of the guide and emphasize its overall organization."; "Un posizionamento strategico dello spazio bianco e delle linee può guidare lâattenzione dellâutente alla prossima sezione della guida (della biblioteca) ed evidenziare la sua intera organizzazione" COOPER [1997b], p. 53. "Lo spazio vuoto può guidare lo sguardo e aiutare gli utenti a comprendere il modo in cui le informazioni sono strutturate. Se potete scegliere fra separare due porzioni di contenuto con una linea o barra, e separarle con uno spazio vuoto, spesso la soluzione più piacevole visivamente sarà lo spazio vuoto, che quasi sempre avrà anche un caricamento più rapido." NIELSEN [2000], p. 18.

[43] SPOOL [1999], p. 75.

[44] Non sono dâaccordo con questa affermazione: "[...] lengthy textual descriptions of things [...] could be best handled with images", GARLOCK ­ PIONTEK [1996], p. 55. Sembra quasi che la Biblioteca voglia evitare di pensare allâelaborazione di una spiegazione più breve.

[45] "La grafica può essere utile. Ma in genere, gli web designer infilano nelle loro pagine grafica inutile e che appesantisce la navigazione, senza pensare se così facendo favoriscono lo scopo della pagina o occupano solo spazio. Se avete intenzione di infilare della grafica nelle vostre pagine, fate in modo che si tratti di qualcosa di utile." SNYDER [1996], p. 26.

[46] Si tratta di una image map, di cui si parla diffusamente più avanti. METZ ­ JUNION­ METZ [1996], p. 119. Gli autori raccomando di fornire anche una versione alternativa solo testuale.

[47] Si veda anche cap. I, par. 9.

[48] FALK [1996b], p. 456

[49] GARLOCK ­ PIONTEK [1996], p. 54.

[50] METZ ­ JUNION­METZ [1996], p.119.

[51] METZ ­ JUNION­METZ [1996], p.120. Vedi anche nota 38.

[52] HEAD [1999], p. 119.

[53] "Se io capitassi in un sito come questo usando un browser cui ho disattivato la modalità di visualizzazione della grafica ( per navigare più veloce), non potrei avere idea di cosa sta succedendo. "; SNYDER [1996], p. 26.

[54] "Icons are one place where some Web designers commit heinous crimes. All icons should have text descriptions built into each one. Web sites are not like word processing packages: they arenât visited so often that people really learn the icons used within. A good icon has some graphical element that indicates its function, and it has a text element that makes the meaning crystal clear. Bad icons, like bad graphics, are worse than useless ­ they hinder the use of your site."; " Le icone sono oggetti sui quali gli web designer commettono atroci delitti. Ogni icona dovrebbe avere una descrizione testuale di ciò a cui serve. I siti web non sono come pacchetti di word processor: non sono visitati tanto spesso che le persone davvero imparano le funzioni delle icone in essi usate. Ogni buona icona ha qualche elemento grafico che ne indica la funzione e un testo esplicativo che ne spiega il significato con assoluta chiarezza. Le icone fatte male, come la cattiva grafica, sono peggio che inutili ­ ostacolano lâuso del vostro sito" SNYDER [1996], p. 26-27.

[55] SPOOL [1999], p. 42-43.

[56] METZ ­ JUNION­METZ [1996], p. 102, consiglia di mettere le informazioni più importanti a 1/3 della pagina sulla destra, poiché questo è il punto focale, quello su cui lo sguardo degli utenti si concentra più facilmente e di non inserire immagini in contrasto con la direzione del testo, da destra verso sinistra, perché interrompono il flusso di lettura.

[57] SPOOL [1999], p. 84.

[58] "Gli elementi grafici di per se sembrano non aggiungere né sottrarre nulla allâabilità degli utenti di recuperare lâinformazione"; SPOOL [1999], p. 86.

[59] "Ricordate sempre che molti utenti sono collegati con linee telefoniche lente (e costose), che hanno browser lenti, che non hanno tempo da perdere ad aspettare che la vostra grafica si carichi." SNYDER [1996], p. 27.

[60] HEAD [1999], p. 62-64; 121-123; 124-126 e 127-129.

[61] METZ ­ JUNION­METZ [1996], p. 101-104.

[62] "Coinvolgete gli utenti nellâaggiornamento del design del Web della Biblioteca. Potete formare un gruppo di utenti che vi aggiornino sistematicamente sulle soluzioni grafiche migliori per le vostre pagine"; METZ ­ JUNION­METZ [1996], p. 104.

Torna su

---

PRECEDENTE - INDICE - SUCCESSIVO