The Power of Color

La potenza del colore nella progettazione di applicazioni mobile è il secondo aspetto importante nella realizzazione di un app. Le interazioni Human-Computer sono fortemente basate sulla interazione con gli elementi grafici della UI (User Interface), dove i colori ricoprono un ruolo critico. Essi aiutano a interpretare i contenuti dell’applicazione, e permettono di far interagire lo user con i giusti elementi. Nella progettazione di un app, definisco uno schema colore primario per le aree principali, utilizzando le logiche della teoria del colore.

Definire una giusta palette colori (o schema colore) è un’operazione molto delicata. I fattori in gioco possono essere il colore del brand o del logo, il contrasto visivo, il mood ecc…

Solitamente non supero mai una palette colori di 3 / 5 soluzioni cromatiche, questo per non rendere l’interfaccia UI di difficile lettura. Partendo dalla ruota colore classica, definisco il mio colore principale dal quale declinerò i restanti 2 o 4 colori.

Ruota a 12 colori, molto utile nella definizione del colore base.
Ruota a 12 colori, molto utile nella definizione del colore base.

Progettare con colori monocromatici

Lo schema più semplice è quello della scelta di una palette monocromatica, con sfumature che partono dal colore principale. Come potete vedere dall’immagine che segue, partendo dal colore blu della ruota colore, definisco una scala di 6 cromie di blu.

colorapp
I colori monocromatici sono derivazioni del tono colore principale.
colorapp-12

 

Un esempio che può rappresentare una interfaccia UI con questo schema colore è mostrato nella prossima immagine. Difatti ogni elemento non ha tinte o colori al di fuori di questo schema.

coreapp

 

I colori analoghi

Con i colori prossimi a quello principale, possiamo definire uno schema colore di tonalità analoghe al principale. Nella seguente immagine, potete capire come individuare i colori vicini a quello principale.

colorapp-2

redscheme

 

Un’interfaccia UI basata su questo schema colori è la soluzione riportata nella immagine seguente, in cui con una mappa di calore definita con i colori, viene descritto il peso di ogni informazione.

 

colorapp-10

 

Complementari

I colori complementari sono i colori opposti a quello principale. Il grande contrasto che ne deriva, attrae l’attenzione visiva dello user. La scelta dei colori, deve essere ponderata sulla fisica della luce e su come essa interagisce sul nostro cervello. Essendo noi umani molto più sensibili al verde, possiamo sfruttare queste caratteristiche visive per accentuare l’importanza di un elemento e magari focalizzare l’attenzione ad un particolare(Verde), usando un colore di contrasto (Rosso). E’ il caso dell’icona di iMessage che vedete in figura.

colorapp-2

 

L’impatto del contrasto nei colori

Tipicamente i colori degli oggetti, dei testi e delle aree nelle UI non sono isolati ma bensì mescolati o sovrapposti tra loro. E’ quindi necessario un giusto contrasto per enfatizzare o meno, l’attenzione all’elemento di interfaccia. Pensiamo ad un pulsante che si attivi solo dopo aver inserito nel campo username e password i dati, il pulsante si attiverà solo dopo aver popolato i text field (i campi) con nome e password.

colorapp-7

Progettare per il daltonismo

Personalmente non mi era mai capitato di progettare un app o un sito web per user che soffrissero di daltonismo, fin quando non ho avuto nel mio team di sviluppo un programmatore affetto da daltonismo. Da quel momento in poi, nella mia mente c’è sempre una forma di attenzione a chi ha problematiche cognitive di qualsiasi genere. Nel caso del daltonismo, si parla della incapacità da parte del cervello di percepire alcuni colori. Il rosso e il verde sono combinazioni di colori che danno maggiori problemi, difatti il daltonico è “cieco” davanti a queste situazioni.

colorapp-4
In questa immagine, la simulazione di due possibili ruote colore percepite dai daltonici
E’ importante, quindi, definire nella nostra app visuali multiple per comunicare degli status importanti dell’app. Mai fare affidamento su un colore solo per indicare qualche status importante di sistema, ma sfruttare anche animazioni e contrasti così come nella grafica seguente.

Grazie a Photoshop, possiamo disporre di strumenti per simulare cosa visiona una persona affetta da daltonismo, ne è un caso l’immagine seguente.

colorapp-6

 

In conclusione, abbiamo affrontato i principali fondamenti della teoria del colore applicata alla progettazione di UI e di UX. Affinare le abilità all’uso dei colori deve essere uno sforzo continuo!

 

Walter Fantauzzi

 

About the author: Walter

Business Model Maker