Usabile.it

usabilità, accessibilità e interaction-design per il web

home » Articoli » Usabilità e fogli di stile

4/11/2002

Usabilità e fogli di stile

[di Maurizio Boscarol]

I Fogli di stile (CSS, cascading style sheet) sono una tecnologia che si sta lentamente imponendo all'attenzione di coloro che realizzano siti. Si tratta di un linguaggio per il visual design, ovvero per controllare l'aspetto visivo degli elementi che costituiscono la vostra pagina HTML. I CSS sono una specifica diversa da HTML. HTML può contenere al suo interno delle istruzioni CSS associate ai tag HTML, oppure può fare riferimento, con un'apposita dichiarazione, ad un foglio di stile separato, che ha un URI proprio.

HTML e CSS: alle origini dei due codici

Perché il W3C si è preso la briga, nel 1996, di progettare una cosa come i CSS? La risposta è piuttosto semplice: per dare agli sviluppatori il pieno controllo dell'aspetto delle pagine web, senza che nell'HTML venissero usati tag e attributi che si occupassero della presentazione: ovvero, dell'aspetto visivo. Per separare, insomma, struttura e contenuto da una parte, e visualizzazione o presentazione dall'altra.

In origine, infatti, HTML è stato pensato per scopi più ristretti che per definire un visual design. Ciò che HTML fa o dovrebbe fare è definire il ruolo strutturale che gli elementi contenuti nella pagina hanno all'interno del documento: ovvero se si tratti di paragrafi, di titoli, di link, di tabelle, di immagini, di liste...

Come questi elementi dovrebbero essere presentati sullo schermo del computer dal browser, be', non dovrebbe essere HTML a deciderlo. Perché non è nato per quello, e perché la sua logica di lavoro è un'altra. In questo modo, indipendentemente da come ogni singolo browser presenta un paragrafo o una lista, si avrà la certezza che il documento sia portabile, comprensibile e riutilizzabile senza difficoltà. Il web nasce infatti proprio come ambiente di scambio e condivisione di documenti. Già molti formati esistevano per definire in maniera accurata la formattazione visiva dei documenti, ma ciascuno di essi aveva specifici problemi di portabilità e di compatibilità con alcuni sistemi operativi o con software specifici. HTML è leggibile da qualunque editor testuale, su qualunque sistema operativo, e qualunque browser ne dovrebbe consentire una presentazione che ne rispetti almeno la struttura.

L'evoluzione del web

La storia del web ha preso un'altra direzione: esigenze di pubblico e commerciali hanno spinto verso un design di pagine che tentasse di replicare il design complesso che siamo abituati a vedere su riviste e giornali, sui manifesti e persino alla tv. Non c'è nulla di male in questa pratica: è solo che HTML non è adatto allo scopo, mentre è adatto alla condivisione di documenti.
Per un certo periodo si sono usati degli stratagemmi per controllare la presentazione delle pagine web. Tag HTML nati per marcare elementi specifici come le tabelle di dati sono stati usati per creare "gabbie" di impaginazione, all'interno delle quali tag non previsti dalle specifiche ma creati e incoraggiati dai principali produttori di browser consentivano di impostare il testo con la precisione del pixel. Colori e stili diventavano realtà, ma i tag strutturali diventavano sempre meno usati e conosciuti. A parte il tradimento "ideale" degli scopi del web, questa pratica porta anche a problemi concreti.

Se un documento nasce per essere presentato visivamente in un certo modo, ebbene, non appena lo si visualizzerà con una tecnologia diversa da quella per cui è stato progettato, immediatamente si avranno degli svantaggi:

  1. la tecnologia 'imprevista' potrebbe essere inadeguata a presentare quel design (dato che, come abbiamo visto, utilizza impropriamente alcuni tag HTML e ne usa di altri non previsti dalle specifiche)
  2. La risoluzione del monitor potrebbe essere diversa
  3. potrebbero non essere visualizzate le immagini;

Inoltre potrebbero esserci specifici problemi di fruizione della pagina per determinati utenti:

  1. i caratteri potrebbero essere troppo piccoli e potrebbe non essere possibile ingrandirli
  2. I colori potrebbero non essere adeguati per daltonici e discromatici, e potrebbe essere impossibile cambiarli

E così via.
I fogli di stile sono nati per superare questa situazione di fatto: separando istruzioni di visualizzazione dai tag strutturali dell'HTML, è possibile conservare i vantaggi di portabilità e di condivisione dei documenti, e avere un ottimo design sui browser e sulle piattaforme in grado di "capire" i CSS. La stessa pagina sarebbe comunque fruibile in versione solo testo dai browser e dalle tecnologie che i CSS non li capiscono.

Compatibilità e scelte

Tutto a meraviglia, dunque? No. Perché per lungo tempo i produttori di browser non hanno supportato adeguatamente i CSS, rendendoli di fatto inutilizzabili. Ora, dopo sei anni dalla loro nascita e due versioni successive (CSS1 e CSS2), i fogli di stile si avvicinano ad un'adolescenza turbolenta ma promettente. Come dimostra il recente redesign di Usabile.it e quello di numerosi altri siti, è ora possibile utilizzare i CSS assieme ad un codice valido, cioè che rispetta le specifiche del W3C, per realizzare documenti compatibili con la più vasta quantità di dispositivi, e fornendo al tempo stesso ai principali browser visuali un design ricco ed elegante.

Il problema nell'uso di questo tipo di web design costituito da un'impiego di (X)HTML valido e CSS2 è che alcuni vecchi browser non visualizzano correttamente i fogli di stile. Questo problema può essere affrontato in diversi modi a seconda del tipo di sito e del suo target. Il browser più problematico rimane Netscape 4. Se il sito ha un'ampia utenza che utilizza ancora questo browser, è possibile usare un approccio di transizione al design, usando sempre i fogli di stile, ma mantenendo anche le tabelle per l'impostazione grafica.

In caso contrario, è possibile fare scelte più radicali e fornire ai browser più vecchi un foglio di stile ad hoc o addirittura il solo (X)HTML, che verrà così visualizzato privo del design, con le impostazioni di default del browser. E' da notare che in questo modo il contenuto sarà comunque pienamente accessibile: a non essere compatibile all'indietro è solo il visual design. E' importante però "nascondere" con tecniche opportune i CSS ai browser più datati, ma che hanno un lieve e imperfetto supporto dei CSS: in quei browser il rischio è quello di una situazione "ibrida", ovvero un visual design sballato, che comprometta anche la fruizione normale. Per fortuna, anche per questo ci sono delle tecniche. Dunque, a seconda delle esigenze è possibile adottare l'approccio migliore per il singolo sito.

Naturalmente, il visual design ha un impatto decisivo sull'usabilità. Non parliamo tanto della grafica o dello stile, quanto proprio della disposizione degli elementi e della loro affordance percepita, cioè quello che gli oggetti (ad esempio i link) comunicano all'utente in termini di significato e funzionalità. Privare i documenti del design, significa rendere sì, i dati accessibili, ma probabilmente significa incidere in qualche modo sull'usabilità. Il gioco vale comunque la candela, perché un documento ben strutturato difficilmente ha un'usabilità pessima, e perché questi utenti sono una schiacciante minoranza. Per essi, è necessario progettare una versione lineare del testo il più semplice e usabile possibile, da arricchire poi con i CSS per la maggioranza degli utenti. Queste pratiche di design non escludono nessuno e non portano a doppie versioni del documento, ma solo a multiple versioni della sua visualizzazione: dalla più semplice alla più complessa. Ognuna di esse deve funzionare a dovere.

I vantaggi dei CSS per l'usabilità

Poiché l'argomento più usato contro i CSS è che non hanno compatibilità all'indietro (che è vero, ma solo con browser di 5 anni fa e più... e comunque il contenuto rimane accessibile), bisogna anche abituarsi a vedere il bicchiere mezzo pieno. L'uso dei CSS, infatti, può contribuire a rendere l'interazione più ricca e il sito più usabile.

Come? In diversi modi.

  1. Innanzitutto, rendendo l'HTML più leggero, e dunque facendolo caricare più velocemente. In questo sito, ogni pagina ridisegnata con i CSS ha 3-4 Kbyte in meno della versione precedente. Una media del 15-20% in meno per ogni documento! Questi Kilobyte sono a carico dei CSS, che vanno caricati assieme all'HTML, ma è bene notare che vengono caricati una volta sola: tutte le pagine sono infatti controllate dagli stessi CSS. Le pagine successive alla prima rimangono più leggere.
  2. Migliorando l'interazione attraverso l'ampliamento della zona sensibile dei link. Un esempio sono i menu a destra in questo sito. In questa pagina (in alto) potete provare a ingrandire il testo con le tre opzioni offerte. Un tempo, la zona sensibile (quella in cui si attiva la "manina") sarebbe stata solo quella del testo. Con i CSS è possibile ampliarla a tutta la larghezza della colonna, rendendo più comodo il click (ai test di usabilità è frequente incontrare utenti che SBAGLIANO a cliccare perché mancano il link senza accorgersene, a causa dello scarso controllo che hanno sul mouse e dell'area insufficiente del link).
  3. Sfruttando al meglio effetti di rollover senza l'uso di javascript.
  4. Dando la possibilità di ingrandire il testo e di modificare le impostazioni anche del design senza ricorrere a Javascript e ad applicazioni server-side.
  5. Eliminando la necessità di una versione stampabile separata. L'utente può stampare direttamente dal browser.
  6. Arricchendo l'interazione con la creazione di menu contestuali a scomparsa attivabili solo con i CSS, con un uso minimo di eventi javascript. In alcuni siti, infatti, avere molte voci di menu può comportare un elevato aumento della complessità della pagina. Questi menu possono essere organizzati in gruppi e resi disponibili alla pressione di un link utilizzando la proprietà display dei CSS. (Attenzione: questi espedienti non sono usabili in sè, ma vanno valutati caso per caso. Contribuiscono comunque a rendere più divertente la navigazione, anche se a volte questo può andare a scapito dell'efficacia).
  7. Migliorando la coerenza visiva delle pagine. Basandosi su regole che valgono per l'intero sito, i CSS aiutano a dare coerenza visiva alle diverse pagine, e un senso di ordine che contribuisce a rendere la visita più piacevole.

Inoltre i CSS consentono di modificare in meglio il design con prove successive in maniera economica, anche mentre il sito è online, accorciando di fatto i tempi e i costi del processo di miglioramento e modifica. Poiché la modifica di un sito per sopperire a problemi di usabilità riscontrati dagli utenti o nei test è il processo fondamentale in un design centrato sull'utente, i CSS, consentendo di svolgere questo processo senza toccare l'html, si dimostrano una tecnologia particolarmente utile e orientata all'usabilità.

Naturalmente, non basta usare i CSS per dire di aver fatto un sito usabile. Un buon uso dei colori, dei posizionamenti, degli spazi bianchi dipende dalla capacità del designer. Una navigazione coerente e un labeling system adeguato all'utenza, delle procedure che supportino il compito che l'utente vuole svolgere, sono tutti aspetti cruciali, che i CSS possono contribuire a rendere al meglio, ma che non possono certo prescindere dalle capacità del progettista e dai risultati dei test di usabilità. Ci sono molti siti brutti o mediocri realizzati con i CSS, così come con le tabelle. Ma questo dipende dall'uomo, come sempre, e non dalla tecnologia.

Precedente:

Successivo:

torna su Torna su