61 Il testo che deve essere letto dovrebbe avere un alto contrasto


Sintesi del contesto di applicazione
Situazione: normale utilizzo dell'interfaccia.
Problema: il testo si confonde con lo sfondo e risulta poco leggibile.
Accorgimenti in sede progettuale: Dare contrasto sfondo/carattere, evitare fondi grigi e immagini ricche di dettagli

Stato dell'analisi Completa


Applicazione del principio Il contrasto, ossia la differenza di luminosità tra i caratteri e lo sfondo, è uno dei fattori che maggiormente incidono sulla leggibilità di un testo scritto nonché sul riconoscimento di informazioni basate su segnali visivi. La leggibilità svolge un ruolo molto importante per garantire al meglio la massima comprensione di un testo o di un comando.
Interfaccia nei siti web:
f.01
Nella prima immagine abbiamo un chiaro esempio di basso contrasto tra i colori scelti di sfondo e carattere di testo; Il grigio ed il giallo sono colori troppo chiari per poter riuscire a contrastare la luminosità del bianco.
Nel secondo esempio invece abbiamo comunque l'utilizzo della stessa palette di colori, ma utilizzati in maniera differente: il giallo funge da carattere di testo per il titolo, su uno sfondo bianco, mentre laddove il giallo diventa colore di sfondo, il carattere di testo viene colorato di un nero puro ad alto livello contrastante.



Applicabilità a oggetti fisici e prodotti La scelta di usare testi poco contrastati non deriva oggi quasi mai da esigenze tecniche o economiche ma da una discutibile ricerca formale.
Nei prodotti industriali è molto diffusa la tendenza a mimetizzare le componenti tecnologiche e questo porta spesso a nascondere volutamente anche alcuni indispensabili elementi funzionali come ad esempio i pulsanti di comando e le loro etichette. È una tendenza che coinvolge anche la progettazione di oggetti in cui i pulsanti sono la principale, se non unica, funzione del dispositivo, come ad esempio i telefoni cellulari.
f.02
Lo stesso problema lo riscontrerò nell'interfaccia dei prodotti fisici qualvolta vorrò predisporre una serie di comandi e di pulsanti mantenendo lo stesso colore e la stessa gradazione. In questo caso, mantenendo lo stesso colore, anche il livello di contrasto tra le due parti sarà uguale e dunque nullo. L'esempio corretto lo si può vedere nella seconda immagine, laddove l'utilizzo del contrasto tra schermata e pulsanti (o schermata e display) risulta evidente e deciso. La mancanza di contrasto può essere sfruttata qualvolta si voglia nascondere un tasto o un pulsante, ma in questo caso questi ultimi sono tutti volti all'interazione con il prodotto e dunque necessari per l'utilizzo.
f.03



fig.01
fig.02
fig.03
Parole chiave colorazionecontrasto

approfondimento a cura di GIORGIA GUZZO


Enunciato originale del principio Favor black text on white or pale yellow backgrounds. Avoid gray backgrounds.
(fonte: Bruce Tognazzini, First Principles of Interaction Design)



pagina visitata 61 volte dal 28/11/2023