Perché dovresti evitare le combinazioni di colori vibranti

In questo breve articolo imparerai come la vibrazione del colore influenza la leggibilità dell'interfaccia nel contesto della progettazione di interfacce e web.

Grassetto o Garish?

C'è una tendenza emergente tra i progettisti di interfacce a imitare gli schemi di colori sgargianti che si trovano spesso nella progettazione di stampa. Mentre in parte a causa di tendenze ideologiche, questo impulso emerge anche dalla nuova gamma tipografica disponibile per il moderno web designer, che incoraggia layout di stampa e caratteri di grandi dimensioni. È importante notare le distinzioni tra ciascun mezzo che fa sì che il colore vibrante sia un po 'più permissibile nella stampa, e meno così per il web.

Colori vibranti sul sito web di Frooti

Nella stampa, l'uso di una combinazione di colori in grassetto spesso significa la differenza tra l'essere ignorato su un portariviste e fare una vendita. D'altra parte, nell'interfaccia utente, abbiamo altre considerazioni che hanno la precedenza sull'attirare l'attenzione dell'utente con la forza, in particolare, la leggibilità del testo.

Cos'è la vibrazione?

Uno dei fenomeni primari che emerge da schemi di colori audaci e altamente saturi è un colore apparentemente "vibrante", un evento in cui i bordi di due colori direttamente adiacenti sembrano fondersi, sfocare e brillare, dando l'illusione del movimento.

I due campioni esterni hanno testo con colori vibranti, mentre il campione medio ha testo con valore di equilibrio.

Josef Albers, il noto teorico dei colori, ha messo in guardia contro l'uso dei colori vibranti nel suo classico, Interactions of Color:

"Questo effetto inizialmente eccitante si sente anche aggressivo e spesso anche a disagio ai nostri occhi. Lo si trova raramente usato tranne che per un effetto urlante nella pubblicità, e di conseguenza è sgradevole, non gradito ed evitato. "

Perché una coppia di colori abbia una bassa visibilità l'una contro l'altra, è necessario che siano equilumenanti, con un valore di luminosità simile. Tuttavia, per vibrare notevolmente, i colori saranno generalmente di alta saturazione ed essere complementari l'uno all'altro, spostati di circa 180 ° sulla ruota dei colori.

Blu (HSB 210, 99, 100) su rosso (HSB 12, 99, 100)

Nell'esempio sopra, le tonalità rosse e blu possono essere trovate sui lati opposti della ruota dei colori (anche se no direttamente di fronte) ed entrambi hanno una luminosità di 100.

Spotify EDM

Spotify è diventato sinonimo di schemi di colori audaci, usati con grande effetto per attirare l'attenzione. A volte queste combinazioni possono essere scoraggianti, anche se non vibrano nel vero senso della parola; come il pulsante sullo sfondo viola nell'esempio sopra. Gli occhi degli utenti riconosceranno quello che è, ma alcuni potrebbero avere difficoltà a determinare i bordi esterni della forma. 

Leggibilità

Il testo dell'interfaccia è notevolmente ostacolato quando è impostato in un colore vibrante ed equiluminante. Ho personalizzato questi colori vibranti:

Quando si verifica la vibrazione del colore, l'elemento maggiormente influenzato dall'effetto di distorsione incandescente è il bordo tra i due colori. Questo è il motivo per cui le vibrazioni sono particolarmente pericolose nel contesto di caratteri UI, piccole icone e altri elementi dettagliati che non sono abbastanza grandi da compensare i loro bordi vibranti sfocati.

Ecco lo stesso insieme di campioni, questa volta visti da qualcuno con la completa mancanza di colore:

Oltre ai colori vibranti e sfuocati spesso fastidiosi per coloro che vedono a colori, con colori uguali di luminanza, quelli con il daltonismo possono finire per non vedere nulla. Mentre ci sono diversi livelli di daltonismo, è meglio giocare sul sicuro quando si tratta di accessibilità.

Qui, ad esempio, l'icona del cestino sull'Apple Watch non è visibile a coloro che soffrono di cecità ai colori:

Visione a colori (a sinistra) contro daltonismo (a destra)

Conclusione

I colori vibranti possono essere usati con buoni risultati, ma presentano reali pericoli nell'usabilità delle interfacce utente e possono essere pesanti se non presi in considerazione deliberatamente prima dell'uso. Tienilo a mente durante la progettazione!