Uno dei più importanti principi di progettazione centrata sull’utente è quello della percepibilità, molto simile al principio di visibilità di Norman¹.

Unendo diverse definizioni potremmo dire che secondo questo principio ogni informazione e ogni comando necessario per l’utilizzo del prodotto dovrebbe essere sempre chiaramente percepibile, senza informazioni estranee o ridondanti.

Non è, come può sembrare, solo un problema grafico. Per soddisfare il principio bisogna infatti compiere due tipi di atttività:

1. essere sicuri di quale siano il comando o l’informazione necessari
2. renderli propriamente percepibili.

La prima attività richiede un’accurata analisi, la seconda competenze grafiche e visuali.

Cosa deve essere visibile

Il primo punto richiede di definire qual è l’informazione o il comando necessario. Per farlo dovremmo capire come l’utente intende muoversi e come capisce l’oggetto/sito. Ad esempio:

• In una pagina di articolo deve essere presente anche un elenco di articoli correlati? Oppure l’elenco di tutti gli articoli? O altri tipi di menu?
• In una galleria di immagini e di prodotti, quali sono gli strumenti che l’utente si aspetta di trovare per navigare fra le immagini o i prodotti? Una serie di frecce avanti/indietro? Un elenco completo di tutti i prodotti o le immagini disponibili? E in questo caso, in forma di miniatura o in forma di elenco di link?

Decidere quale informazione o quale comando sono necessari per l’utilizzo del prodotto dipende da una buona conoscenza degli utenti e da una chiara definizione dei task e degli scenari. Ecco perché progettare per la percepibilità richiede alcune attività di analisi preliminare, indispensabili per ridurre la distanza fra il modello mentale del progettista e quello degli utenti.

Le tecniche utili per affrontare queste fase sono:

• Analisi dei requisiti
• Interviste con utilizzatori
• Analisi dei compiti
• Scenari
• Uso delle convenzioni
• Test con utenti

Quel che c’è si vede?

Una volta compiuta la scelta più difficile, quella di stabilire quali informazioni e quali strumenti è utile inserire in un certo contesto, supposta una loro utilità per l’utente, rimane da rendere questi strumenti o queste informazioni percepibili. Il che significa:

1. Che possibilmente lo strumento o l’informazione non dovrebbe essere del tipo “a comparsa”, cioè disponibile solo quando l’utente compie una certa azione (come nel caso di un menu a tendina); e in quel caso, comunque, il comando che attiva la presentazione dell’opzione dovrebbe essere sufficientemente visibile (non un punto a caso dello schermo come capita con alcuni videogiochi, che hanno ovviamente altre logiche di interazione). Quando l’informazione diventa attiva, comunque, deve rispettare il punto 2.
2. Che lo strumento o l’informazione abbiano dimensione e grado di contrasto percettivo sufficienti a essere percepite dagli utenti target.

Approfondiamo entrambi questi punti.

Comandi e informazioni a “comparsa”

In generale le informazioni importanti dovrebbero sempre disponibili fin da subito, perché altrimenti l’utente potrebbe non capire che ci sono e come fare ad attivarle.

Tuttavia non sempre è possibile o utile presentare tutto ciò che potrebbe essere usato dall’utente, perché lo spazio disponibile nell’interfaccia è limitato. Per questa ragione e per aiutare il focus dell’utente bisogna evitare le informazioni superflue, che tolgono attenzione alle componenti importanti.

Ma che fare con informazioni che non sono superflue, ma, semplicemente, servono solo in alcune circostanze? Queste possono essere attivate a comparsa, in maniera che non affollino l’interfaccia nelle operazioni di routine.

Anche qui ci vengono in aiuto attività di analisi come la definizione degli scenari d’uso più comuni. E’ bene rendere sempre visibili i comandi e le informazioni che servono in questi casi, e valutare soluzioni differenti (ad esempio a comparsa) per gli scenari più occasionali. Tuttavia, come detto, l’evento che attiva i nuovi comandi dovrebbe essere sufficientemente significativo per essere chiaramente identificato.

Informazioni a strati: la “progressive disclosure”

La tecnica di rivelare via via nuove informazioni “a comparsa” nel design di interfacce quando lo spazio disponibile è poco e le informazioni che bisognerebbe presentare all’utente sono molte è chiamata progressive disclosure. Molto usata nelle finestre di dialogo dei software, quando un tasto al termine della finestra rivela una nuova porzione “a comparsa” della finestra, la tecnica è in uso fin dagli anni ’80, anche se sulla sua efficacia mancano prove empiriche definitive.

Oggi il “read more…”, o “continua..” che si legge nelle prime pagine dei blog o dei siti di news è un’applicazione del progressive disclosure.

Molte pagine di configurazione di preferenze, sia su desktop che su web, utilizzano questa tecnica per far aprire nuove sezioni di pagina con preferenze più avanzate. E’ interessante notare come su desktop questa tecnica venga attivata normalmente da tasti, mentre sul web è più spesso risolta con dei normali link e dei puntini di sospensione.

Difficoltà di manipolazione degli oggetti a comparsa

Le considerazioni su quali informazioni rendere disponibili a comparsa devono tener conto anche di altri fattori:

1. E’ facile per l’utente operare sul comando?
2. E’ facile mantenere l’attivazione della funzionalità a comparsa?
3. E’ facile operare all’interno del comando apparso?
4. Sono evitate situazioni in cui l’utente, dopo aver attivato il comando a comparsa, non è in grado di disattivarlo e tornare allo stato precedente (come può accadere nel caso di comandi modali che attivano nuovi strumenti di interfaccia)?

I menu a tendina sono un caso particolare di questo tipo di interazione: sono spesso diffficili da manovrare per utenti non esperti, specie se non sono costruiti in maniera robusta.
Tuttavia, se ben congegnati a volte possono essere necessari, soprattutto nelle applicazioni (desktop e web), le quali hanno spesso un numero elevatissimo di funzioni che non è possibile rendere contemporaneamente visibili.

Bisogna fare attenzione però a non presentare i menu con le label di navigazione attraverso strumenti a comparsa nei siti informativi. Infatti la presenza di link verbali con gli argomenti di cui si occupa un sito offre punti di ingresso semanticamente significativi al lettore (profumo dell’informazione). In loro assenza, semplicemente potrebbe darsi che il fruitore non attivi gli strumenti a comparsa e non veda il link più adeguato ai propri bisogni informativi. La differenza con le applicazioni web qui è data anche dal fatto che su un sito informativo il comportamento è più rapido, impreciso, meno sistematico e continuo di quello che gli utenti hanno di solito su applicazioni che usano più frequentemente e con le quali apprendono strategie d’interazione.

E’ inoltre evidente che strumenti a comparsa “stabili”, che si aprono e rimangono aperti fino alla chiusura da parte dell’utente sono preferibili a strumenti “transitori”, che compaiono e scompaiono al semplice movimento del mouse. Tuttavia, questa stabilità ha dei prezzi: l’utilizzo di questi strumenti richiede un maggior numero di azioni e richiede che sia chiaro come chiudere o rimuovere quel particolare oggetto.

Percepibilità come dimensione sufficiente

Uno dei fattori principali che rende le informazioni percepibili è la loro dimensione. Gli oggetti più grandi sono meglio percepibili di quelli piccoli, naturalmente. Questo riguarda testi, bottoni e altri comandi.
Una ricerca del SURL ha comparato alcuni font tipici a diverse dimensioni: 10, 12 e 14 pixel. In sintesi, ecco i risultati:

1. Non vi è significativa differenza né del tipo di font né della dimensione per quanto riguarda l’accuratezza della lettura e il numero di errori.
2. Vi è invece una differenza significativa sia per il tipo di font che per la dimensione per quanto riguarda il tempo di lettura. Times e Arial si leggono in modo significativamente più rapido di Courier, Schoolbook e Georgia. E i testi a 10 pixel si leggono più lentamente dei testi a 12 pixel. Queste differenze relative al tempo di lettura sono però piccole².

Per altri interessanti risultati che riguardano la percezione di leggibilità e di piacevolezza dei font vi rimando allo studio originale.

Percepibilità come sufficiente contrasto

La percepibilità degli oggetti è influenzata da molti principi e leggi percettive. Per brevità citeremo qui solo il più importante per la progettazione web, cioè il contrasto fra primo piano e sfondo: vale per i testi e per le immagini dotate di significati, così come per i comandi (bottoni, caselle di opzione, ecc.).

Per determinare se i colori scelti sono sufficienti sono stati sviluppati diversi algoritmi. Il più famoso è quello obbligatorio per la legge Stanca, che però è stato sviluppato attraverso una procedura sperimentale abbastanza criticabile, che teneva in considerazione solo un sottoinsieme di colori websafe e utenti che non avevano alcun deficit di percezione del colore.

Per rendere conto dei limiti di questo primo algoritmo sono state proposte formule alternative. Silvia Zuffi, Giordano Beretta e Carlo Brambilla ne hanno proposto recentemente uno basato sulla luminosità. Quasi in contemporanea le wcag 2.0 ne hanno proposto uno in sostanza molto simile, reso disponibile da un test automatico su Juicy Studio.

Il consiglio è di valutare i vostri contrasti con tutti questi algoritmi.

Non esiste un modo affidabile al 100% per controllare in automatico un contrasto cromatico. Nel dubbio è meglio essere conservativi, e scegliere contrasti abbastanza alti.

Non solo testi

La percepibilità, sia per problemi di dimensione che di contrasto, riguarda come abbiamo detto anche le immagini. Sotto vediamo un esempio di mappa immagine (qui non attiva) che ha un doppio problema: le regioni d’Italia sono troppo piccole (se si clicca sul molise o sull’umbria si rischia di sbagliare) e con un difetto evidente di contrasto sia nei bordi che nello sfondo.

Fig. 1 – Una mappa dell’italia con contrasto e dimensioni insufficienti a garantire il principio di percepibilità.

La moda dei testi grigi

Sfortunatamente una moda recente del web design vede l’utilizzo di testi grigi, anche molto chiari, per i testi. Questo riduce di molto la leggibilità delle pagine, tanto più se i testi sono piccoli. La riduzione vale non solo per i disabili, ma anche per chi ha difficoltà di vista piuttosto comuni, usa gli occhiali o le lenti, o semplicemente affatica la vista con molte ore al monitor. I problemi si acuiscono con il procedere dell’età, dunque un numero sempre crescente di utenti ne sarà coinvolto: la moda dovrebbe tendere proprio in senso inverso!

Una conseguenza poco discussa di questa moda è che molte volte i siti mantengono il testo grigio anche nelle versioni per la stampa. Stampare il testo in grigio su carta significa creare grossi problemi di leggibilità, soprattutto se il carattere è piccolo. La retinatura effettuata da stampanti laser o a getto d’inchiostro provoca grandi ostacoli. Se non riuscite a rinunciare ad un grigio (scuro!) su monitor, è vietatissimo mantenere lo stesso colore per la stampa. Un più tradizionale nero su bianco rimane, in questo caso, una delle poche regole certe del web-design.

Conclusioni

Riassumiamo alcune linee guida pratiche:

1. preferire dimensioni non inferiori a 10px per i testi più piccoli (testi di contorno, link minori).
2. usare almeno la dimensione di 12px (espressa in altra unità di misura, ad esempio em o percentuali, per ragioni di accessibilità) per i testi principali.
3. Lo stesso si dovrebbe dire di qualunque unità informativa significativa, dunque anche di comandi, bottoni, opzioni. Ma anche di piccole icone o di mappe immagine da cliccare o da leggere: se le dimensioni sono troppo piccole è molto probabile che gli utenti non riescano a percepirle correttamente o si verifichino errori.
4. Il testo grigio è elegante ma molto meno leggibile: aumentate il contrasto, preferendo il nero, su fondo chiaro (bianco o neutro).
5. Il testo più spesso (e più grande) solitamente è più leggibile anche se il contrasto è minore. Per i titoli o per testi più grandi ed evidenti potete dunque accettare soglie un po’ diverse, ma con grande cautela.
6. Evitare colori troppo sgargianti come sfondo: scegliere un colore poco saturo per lo sfondo e un colore più saturo per il primo piano.
7. Evitare motivi grafici ripetuti come sfondo sotto il testo
8. Evitare foto, anche virate, sotto il testo. L’unico caso accettabile è usare immagini di sfondo molto leggere, come una filigrana, a condizione che la funzione sia soltanto decorativa
9. Evitare sfumature che ostacolino la lettura del testo. Vi è attualmente la moda di creare bottoni in 3 dimensioni, un po’ nello stile dell’interfaccia Aqua del Mac: alcuni di questi contrasti sono accettabili, ma altri sono troppo violenti e ostacolanti; bisogna porre particolare attenzione al tipo di sfumatura del bottone.
10. Nel foglio di stile per la stampa esplicitare il colore nero per i testi e il bianco per lo sfondo