ESB Forum è indicizzato da LPI: Letteratura professionale italiana, BIB: Bibliografia italiana delle biblioteche del libro e dell'informazione e DoIS: Documents in Information Science

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