Ingegner Martino Benzi

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;
  • Leggibilità delle pagine.

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. E lo devono essere a tutte le risoluzioni dello schermo, a partire dai più piccoli smartphone sino ai più grandi monitor ad alta risoluzione.

Come esempio di ciò che intendo, ti espongo in dettaglio le mie scelte per questo sito che, a febbraio 2013, ho riprogettato — lasciando praticamente inalterati i testi — secondo i principi del Responsive Web Design; come puoi vedere ho conservato un'impostazione estremamente classica: non voglio perdere lettori perché non trovano immediatamente ciò che gli serve.

Ecco la descrizione dell'aspetto che assumono le pagine al decrescere della risoluzione dello schermo.

Schermi di computer desktop, netbook e tablet in modalità landscape

Sono i monitor classici per uso di ufficio o di casa, fissi o portatili, e i tablet come l'iPad usato con il lato lungo in orizzontale.

  1. Una barra superiore subito sotto al logo permette di raggiungere l'home page e le cinque sezioni del sito, lo sfondo del link alla sezione attiva è di colore diverso dagli altri per rendere evidente a quale sezione appartiene la pagina.
  2. Una barra laterale sinistra contiene l'indice della sezione a cui appartiene la pagina ed è evidenziato in colore il link alla pagina corrente. Ogni voce indice della sezione dedicata al manuale è articolata su titolo e sottotitolo, mentre le altre sono su di una sola riga.
  3. Una barra laterale destra contiene i riferimenti agli argomenti in primo piano, quelli su cui voglio richiamare l'attenzione dei visitatori.
  4. Il testo della pagina compare in una colonna centrale di larghezza doppia delle altre due.

Tablet in modalità portrait

Questo orientamento dello schermo dei tablet è usato soprattutto da chi è abituato a servirsene per leggere testi e documenti, compresa narrativa e saggistica, e visto che questo sito è compostoa soprattutto da testi lunghi, per me è quasi una situazione ideale. Lo schermo è troppo stretto per consentire una buona lettura della pagina su tre colonne, quindi:

  1. La barra di navigazione superiore sotto al logo resta inalterata.
  2. La barra di navigazione verticale sinistra si trasforma in una barra superiore espandibile e chiudibile a richiesta: in questo modo occupa uno spazio minimo senza perdere alcuna funzionalità.
  3. Restano inalterate la colonna con il testo, che adesso è posizionata a sinistra e la barra con gli argomenti in primo piano sulla destra.

Smartphone

Lo schermo può essere davvero molto piccolo, sino ad un minimo di 240x320 pixel, e in molti casi l'utente aumenta la dimensione di base dei caratteri per riuscire a leggere. Resta veramente poco spazio per gli strumenti di navigazione e il testo.

  1. Entrambe le barre di navigazione superiori diventano espandibili a richiesta.
  2. Gli argomenti in primo piano sono accodati al testo ma restano facilmente leggibili e accessibili perché
  3. Il testo della pagina viene interrotto dopo le prime righe, che contengono le informazioni che immediatamente chiariscono di cosa parla la pagina, e la lettura completa si attiva con il link "Leggi tutto" (questa caratteristica è assente sia in questa pagina sia in quella dedicata esplicitamente al Responsive Web Design per non appesantire le tue prove).

Se il tuo sito è più complesso — in particolare se hai delle pagine dedicate alle specifiche dei tuoi prodotti particolarmente corpose — 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 il font Calibri per tutto il sito; ha una leggibilità altissima su schermi di tutte le dimensioni e ci sono eccellenti tipi di caratteri equivalenti per ogni sistema operativo, in grado di ottenere lo stesso effetto anche per chi non usa le ultime versioni di 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 (in realtà un grigio scurissimo che fornisce una leggibilità migliore), un tono di verde molto scuro, un grigio canna di fucile per lo sfondo dei link nell'intestazione e il bordeaux per i link nel testo.

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: infatti 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à.