Estetica, usabilità e accessibilità dei siti web

Introduzione al problema

Estetica, usabilità ed accessibilità sono un insieme inscindibile e sono il problema centrale non solo della progettazione e realizzazione dei siti web, ma anche del loro posizionamento sui motori di ricerca.

Ciò che noi oggi conosciamo come "internet", ma a cui dovremmo in realtà riferirci come "World Wide Web", nasce proprio per risolvere i problemi di estetica, usabilità ed accessibilità delle informazioni disponibili in rete, in quella che era la rete "prima" del web.

L'estetica di un sito web

È a questo proposito che quasi sempre nascono le prime complicazioni nei rapporti fra il committente ed il progettista di un sito internet.

Obiettivamente non è facile convincersi che un sito web è un programma che viene usato, un oggetto informatico sul quale si agisce per ottenere un risultato, non "qualcosa" che si guarda perché "è bello".

È ovvio che un sito internet deve essere bello, ma deve essere bello per chi ci naviga, per i visitatori, non per te che del sito sei il committente, o che hai fatto tanta fatica per progettarlo e realizzartelo da solo; altrimenti finisci per essere l'unico che ci naviga dopo aver buttato via soldi e tempo, spesso molti soldi e molto tempo.

Come ho scritto poco sopra, un sito web è un ipertesto complesso, un oggetto informatico che impone all'utente di prendere delle decisioni su cosa fare, cosa leggere, dove andare. Dove andare è l'aspetto centrale del problema: se il tuo sito non piace ai visitatori questi se ne vanno e non tornano più.

Un paragone con qualcosa di noto

Hai presente come ci si comporta con le riviste nella sala d'aspetto del medico? Si prende a caso la prima che ci attira, a cui di solito manca la copertina, si inizia a leggere una pagina qualsiasi e, se i contenuti ci piacciono e ci interessano, si continua a leggere sino a quando viene l'infermiera a chiamarci. Se invece le prime due o tre pagine non ci soddisfano, si butta la rivista sul tavolino e se ne prende un'altra.

L'acceso all'informazione su internet avviene esattamente nello stesso modo: si arriva su di un sito sconosciuto dopo una ricerca con Google o Yahoo, spesso in una pagina interna e non sull'home page, e, se ciò che abbiamo trovato non ci soddisfa nel giro di pochi secondi, si torna indietro alla pagina del motore di ricerca da cui siamo partiti.

Ma si torna rapidamente indietro al motore di ricerca anche se non si capisce dove si possa andare partendo dalla pagina su cui siamo capitati per caso, se gli strumenti per la navigazione nel sito non ci mettono immediatamente in grado di capire quanto possano essere interessanti per noi le altre pagine di quel sito internet.

E solitamente su quel sito non si torna mai più.

La differenza è che, quando siamo nella sala d'aspetto del medico, la lettura delle riviste è un di più, tanto per distrarci dal nostro problema del momento e perdere un po' di tempo in attesa della visita; quando navighiamo in internet, i siti che cerchiamo sono lo scopo della nostra navigazione e, anche quando stiamo navigando solo per passatempo, finiamo per  fermarci solo su quei siti, per usare solo quei siti, che soddisfano le nostre esigenze di contenuto ma anche di razionalità e semplicità d'uso.

L'estetica di un sito web deve avere lo scopo di aiutare i visitatori e semplificare l'uso e la navigazione nel sito

Come ho scritto in tanti altri punti di questo sito, ciò non vuol dire che il tuo sito debba essere brutto, anzi, ribadisco che deve essere bello, ma bello per chi lo deve usare, non necessariamente per te che lo hai realizzato.

Se l'ideale di bellezza del rospo è la rospa e tu devi rivolgerti ai rospi: allora adeguati

L'usabilità di un sito web

Possiamo dividere l'argomento in due parti:

Strumenti per la navigazione nel sito web

Devono essere chiari ed immediati da interpretare e quindi devono essere i più semplici possibili in base ai contenuti del sito.

Questo sito è composto di due sezioni logicamente distinte: nella prima descrivo chi sono, cosa faccio di mestiere e come contattarmi; nella seconda ti parlo della progettazione e realizzazione di un sito internet.

La prima sezione ha dimensioni fisse: si tratta di poche pagine delle quali, ogni tanto, aggiornerò il contenuto ma che non cambieranno mai di numero; la seconda sezione è destinata a crescere nel tempo, man mano che aggiungerò nuovi capitoli a questo ipertesto.

Tutte le pagine della prima sezione sono raggiungibili con la barra di navigazione orizzontale che non cambierà mai di larghezza, tutte le pagine della seconda con la barra laterale sinistra che potrà allungarsi quanto necessario.

Tutte le pagine, compresa l'home page, sono organizzate esattamente nello stesso modo: quando hai capito il meccanismo una prima volta non devi più scoprire nient'altro su come navigare in questo sito.

Se il tuo sito è più complesso dovrai progettare strumenti di navigazione più complessi, ma sempre i più semplici e facili da capire possibili.

Leggibilità delle pagine

Grammatica, sintassi e ortografia: spero proprio che non siano un problema in questo sito e sono certo che non lo sono nemmeno nel tuo. Ma in rete si legge certa roba...

Caratteri adeguati per tipo e dimensioni: io ho scelto l'Arial per intestazione, titoli, sottotitoli ed il questionario di feed-back in fondo ad ogni pagina, e il Times New Roman per il testo; per entrambi i font scelti ci sono eccellenti tipi di caratteri equivalenti su tutti i sistemi operativi, in grado di ottenere lo stesso effetto anche per chi non usa MS Windows.

Come avrai notato ho scelto delle dimensioni un po' più grandi del solito per i caratteri del testo, in questo modo ottengo non più di circa ottanta caratteri per ogni riga, contemporaneamente anche chi ha qualche leggero problema di vista non dovrebbe affaticare troppo gli occhi. Ho anche spaziato nettamente i paragrafi per evidenziare la scansione di lettura del testo, cosa indispensabile in pagine dal contenuto così lungo come queste.

Contrasti cromatici e, soprattutto, contrasti di luminosità forti, che separino nettamente il contenuto dallo sfondo, sia che si tratti di testo scuro su sfondo chiaro sia che si tratti di testo chiaro su sfondo scuro. Ho usato solo cinque colori: il bianco, il nero, un tono di verde molto scuro, un grigio canna di fucile per lo sfondo dei link nell'intestazione e un giallo vivo per il link alla pagina "Accessibilità e Usabilità", a cui volevo dare il massimo risalto.

Rendere ben evidenti i link contenuti nel testo: la sottolineatura è sempre il metodo migliore, perché viene usato a questo scopo sul web sin dal 1991 e tutti lo capiscono.

Come vedi si tratta di dettagli, che approfondirò in altri capitoli, ma sono dettagli fondamentali: perché i problemi di usabilità di un sito web si trasformano rapidamente in problemi di accessibilità del sito.

L'accessibilità di un sito web

Trascuriamo per il momento i casi estremi dei non vedenti o di chi non è in grado di servirsi del mouse per spostarsi "in due dimensioni" all'interno della pagina, come coloro che non possono usare le mani.

Pensa ad un visitatore molto miope o molto presbite: quasi sicuramente avrà impostato il proprio browser per aumentare le dimensioni di base dei caratteri — tu magari non sai nemmeno come si fa, perché non ne hai bisogno, ma lui è stato costretto ad impararlo subito, altrimenti non sarebbe in grado di navigare — cosa succede all'impaginazione del tuo sito in questo caso? Resta idonea a presentare bene il contenuto delle tue pagine o queste diventano praticamente incomprensibili con testi e immagini malamente sovrapposti?

Pensa ad un visitatore daltonico: le scritte rosse su fondo verde, che per te sono ben leggibili e contrastate, a lui probabilmente appaiono come due toni di grigio quasi identici e potrebbe non essere in grado di distinguere il testo dallo sfondo. Se, per caso, il tuo logo aziendale usa questo tipo di contrasti cromatici, magari dalla metà del secolo scorso, sul tuo sito internet potrebbe essere indispensabile inserire anche del testo aggiuntivo che sia visibile da chiunque.

E nota bene che, se non considerare le esigenze dei navigatori svantaggiati, potrebbe essere solo un problema di political incorrectness per un sito web commerciale, la pubblica amministrazione è tenuta a rispettare i 22 requisiti della Verifica Tecnica (D.M. 8/7/2005 - Allegato A) della Legge 4/2004 - Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici.

Se però non ti ho ancora convinto di quanto sia importante considerare le esigenze dei navigatori con disabilità sensoriali o motorie, credo di avere l'argomento definitivo per farlo.

I non vedenti possono fare accesso ad internet con strumenti oggi molto evoluti, quali i dispositivi Braille, sovente uniti a sintetizzatori vocali in grado di leggere il testo mentre scorre sotto le dita dell'utilizzatore del dispositivo.

Naturalmente questo tipo di dispositivi non può mostrare le immagini, non può mostrare un filmato e nemmeno un'animazione fatta con Flash: tutti questi elementi per lui praticamente non esistono.

Se però il testo è stato scritto e inserito in una struttura semantica di titoli e sottotitoli, le immagini e i filmati sono corredati di didascalie e testi alternativi adeguati e sono state previste pagine alternative che descrivono il contenuto di un'animazione Flash, anche in presenza di una disabilità tanto pesante, la navigazione e l'uso di un sito sono possibili. Se però un sito è stato progettato trascurando queste esigenze nessun ausilio elettronico può aiutare.

L'esempio negativo più classico è rappresentato dall'assenza di qualsiasi testo alternativo al logo aziendale, unita spesso all'inadeguatezza di altri elementi semantici della pagina, come un titolo chiaro ed esplicativo messo nel punto giusto: in queste situazioni un cieco rischia di non poter nemmeno capire su che sito si trova.

I motori di ricerca leggono il tuo sito esattamente come può farlo un cieco

Ai robot di Google e di Yahoo non importa assolutamente nulla delle tue immagini, anche se bellissime e perfettamente pertinenti con i contenuti della pagina, non interessano i tuoi filmati e le tue animazioni Flash — anche se sembra che Google, oggi, riesca ad indicizzare parzialmente e grossolanamente anche i contenuti Flash.

Ai motori di ricerca interessano unicamente il contenuto testuale delle tue pagine, la loro struttura semantica di titoli e sottotitoli e alcune codifiche particolari — meta tag — nascoste nel codice della pagina: tutto il resto NON esiste.

Tutti i testi contenuti nelle immagini, che tu puoi vedere benissimo ed interpretare adeguatamente, tutti i pulsanti di navigazione costituiti unicamente da grafica, per un cieco e per Google sono totalmente insignificanti.

Se vuoi sapere cosa vede — e soprattutto indicizza — Google del tuo sito prova a visitarlo con un browser puramente testuale come Lynx (in Bibliografia puoi trovare il link alla pagina di questo fondamentale strumento di controllo della qualità di un sito).

Se il tuo sito è fatto bene troverai che le mancanze e le incongruenze rispetto alle tue aspettative sono piccole, se non sono piccole, beh, in questo caso farai meglio a meditarci sopra e a prendere delle decisioni.

E probabilmente saranno decisioni drastiche

Se hai trovato utile questa pagina, potrebbero interessarti anche:

Se desideri essere informato sulla pubblicazione di nuovi capitoli, puoi iscriverti alla newsletter, sarai sempre libero di cancellarti dalla mailing-list se quanto scrivo non ti piacerà.