In che modo il colore influisce sulla UX e sul comportamento degli utenti
Pubblicato: 2016-12-24Colore: quando un design funziona bene, probabilmente non te ne accorgi mai, ma quando sbaglia? Non importa se si tratta di uno sfondo eccessivamente luminoso e sbalorditivo o di un testo nero su uno sfondo grigio scuro, le scelte di colore scadenti possono rovinare anche l'app più funzionale. Proprio come altri aspetti del design, il colore non serve solo per ravvivare un'app. Il colore può essere uno strumento come qualsiasi altra caratteristica dell'esperienza utente.
La filosofia di progettazione grafica utilizzata per progettare un'app, dalle dimensioni di ciascun elemento, al modo in cui scorre nell'interfaccia utente, al sì, al colore, influisce sul comportamento dell'utente. Dopotutto, c'è una buona ragione per cui i designer trascorrono spesso i primi mesi di un progetto agonizzante sulle tavolozze dei colori e non sui wireframe.
Scegliere la tavolozza perfetta può fare la differenza tra la progettazione di un'app di meditazione che aiuta effettivamente gli utenti a rilassarsi e quella che li induce a voler lanciare il telefono contro il muro. È la differenza tra un'app bancaria che ti rende nervoso per il controllo del tuo saldo e una che può lenire le tue ansie riguardo all'arrivo del prossimo stipendio.
Quindi, come fai a farlo bene e cosa puoi fare per padroneggiare il colore nel tuo design?
Filosofia del design grafico: la teoria del colore
Prima di entrare nel vivo della filosofia del design grafico (e della psicologia!), è importante comprendere alcuni principi di base del colore e del design. Anche se il colore potrebbe non sembrare un argomento estremamente complesso, c'è una buona ragione per cui ogni lezione d'arte inizia non solo con una lezione su come usare il colore, ma anche su come creare il colore.
Le basi, come spiegato dalla ruota dei colori, sono semplici: i colori primari (rosso, giallo e blu) possono essere combinati per creare colori secondari (verde, viola e arancione). Allo stesso modo, a un colore possono essere aggiunte varie frazioni di bianco per creare sfumature e il nero può essere aggiunto per creare sfumature.
I colori opposti l'uno all'altro (come il rosso e il verde, o il blu e l'arancione) sono considerati complementari. Questi colori contrastano fortemente, facendoli risaltare quando sono vicini (o sopra) l'uno sull'altro.
I colori che sono uno accanto all'altro sono considerati analoghi. Questi colori hanno un contrasto molto più basso, il che significa che tendono a non risaltare tanto quando sono vicini tra loro.
Non c'è nulla di intrinsecamente "giusto" o "sbagliato" nei colori con contrasto alto o basso. A volte un'applicazione richiede colori brillanti che contrastano nettamente l'uno con l'altro. Altre volte, vorrai qualcosa di un po' più delicato. In generale, più vuoi che qualcosa si distingua, più dovresti fare affidamento su colori contrastanti.
Il modo migliore per avere un'idea di come i colori vanno (e non vanno) insieme è giocare con loro. Anche se non stai lavorando a un progetto in questo momento, un rapido giro della ruota dei colori di Adobe potrebbe farti pensare al colore in un modo nuovo.
Campioni di emozione: colore e psicologia
Quando stai consolidando la filosofia di progettazione grafica alla base della tua app, non puoi semplicemente pensare a come appaiono le cose, devi pensare a come si sentono. Non stiamo nemmeno parlando di feedback tattile. Da quando Johann Wolfgang Goethe ha studiato gli effetti fisiologici del colore, siamo ossessionati dall'uso del colore per produrre effetti fisici ed emotivi.
Ancora oggi, il colore è al centro della filosofia di design di molti brand. Sanità, affari e governo tendono tutti a usare il blu, poiché emana un senso di fiducia e professionalità. Il verde è visto come un colore giovanile pieno di energia e, naturalmente, riflette un senso di ambientalismo e vicinanza alla natura. Il rosso è energico e impulsivo, e dà l'impressione di velocità, efficienza e potenza. Ogni colore che vediamo (e certamente ogni colore che associamo intrinsecamente a determinati marchi) implica qualcosa, direttamente o indirettamente, che aiuta a guidare la nostra percezione dei singoli marchi.
Pensa ai marchi e ai simboli che riconosci come molto incentrati sul colore. Apple, Wikipedia e The New York Times presentano tutti colori in scala di grigi, a simboleggiare una calma affidabilità. Questi marchi sono considerati equilibrati e affidabili. Whole Foods, John Deere e Starbucks presentano tutti sfumature verdi nei loro loghi, collegando natura e genuinità al loro marchio e ai loro prodotti.
Alcuni colori vanno anche oltre i loro marchi, definendo interi settori. Pensa a quante catene di fast food o ristoranti utilizzano combinazioni di colori rosso o giallo, ad esempio. Questi colori ci aiutano a stimolarci mentalmente, ponendoci in un determinato luogo psicologico che ci prepara ad acquistare una sorta di prodotto.
Anche se questo è qualcosa che i marketer hanno capito molto tempo fa, la scienza giustifica molti dei nostri sentimenti reciproci sul colore. È stato scoperto che il rosso, ad esempio, fa reagire alcune persone più velocemente e con più forza a determinati stimoli. Può anche intimidire: i ricercatori hanno scoperto che quando i partecipanti al test hanno visto il colore rosso, i loro punteggi erano peggiori.
Ancora più strano? Il colore di una pillola ha un lieve effetto su come funziona. Le pillole blu funzionano meglio come sedativi, il giallo funziona meglio come antidepressivo e, in tutti i casi, i colori vivaci funzionano meglio. Sebbene questo sia probabilmente solo l'effetto placebo che aumenta le nostre risposte ai farmaci attivi, l'effetto è abbastanza forte da consentire alle aziende di prenderlo in considerazione quando producono nuovi farmaci.
Ora, non stiamo dicendo che l'uso di una combinazione di colori a base di giallo nella tua app di monitoraggio dell'umore lo renderà efficace come antidepressivo, ma la tavolozza dei colori che scegli potrebbe ragionevolmente avere un impatto sull'umore di un utente, quindi scegli con saggezza.
Raccomandato per te:
Come Metaverse trasformerà l'industria automobilistica indiana
Cosa significa la disposizione anti-profitto per le startup indiane?
In che modo le startup Edtech stanno aiutando la forza lavoro indiana a migliorare le competenze e a diventare pronte per il futuro...
Azioni tecnologiche new-age questa settimana: i problemi di Zomato continuano, EaseMyTrip pubblica stro...
Le startup indiane prendono scorciatoie alla ricerca di finanziamenti
Piattaforma di marketing digitale Logicserve Borse INR 80 Cr Finanziamenti, rinomina come LS Dig...
Colore e usabilità
Il design non riguarda solo l'aspetto carino: riguarda la funzionalità e l'usabilità, i due principi che sono probabilmente i più importanti per qualsiasi designer di UX. Se l'esperienza utente non è fluida, non importa quanto sia bella la tavolozza dei colori scelta o quanto sia straordinaria la tua interfaccia utente. Se un utente non riesce a scorrerlo in modo efficiente, non avrà alcuna capacità di resistenza.
Ma cosa c'entra il colore con tutto questo?
Semplice: il colore è uno strumento che può aiutare a guidare lo sguardo . Se riesci a utilizzare il colore in modo efficiente, puoi guidare un nuovo utente attraverso la tua app senza un lungo tutorial, una serie di video complessi o persino una singola parola. Un'interfaccia utente intuitiva utilizza il colore per indirizzare non solo l'attenzione dell'utente, ma anche le sue interazioni con l'intera esperienza.
Immagina, per un secondo, di sviluppare un'app per un'azienda di catering che aiuti le grandi organizzazioni a personalizzare facilmente gli ordini di cibo. Un potenziale cliente scarica la tua app per la prima volta e la apre. Cosa vedono?
Nell'app, la maggior parte delle voci di menu, inclusi lo sfondo e tutte le caselle informative, sono colorate in una tavolozza tenue e opaca di colori in scala di grigi. L'unica eccezione è una casella rosso-arancio che dice "ordina". Come designer, sai che la cosa numero uno che gli utenti vogliono fare quando usano la tua app è impostare in modo indolore il loro ordine di cibo. Invece di nascondere questa funzione in profondità nell'app o richiedere loro di scorrere pagina dopo pagina per accedervi, la stai mettendo in primo piano. Non solo, ma stai attirando immediatamente la loro attenzione. Il colore lo aiuta a distinguersi e mostra ai nuovi utenti esattamente dove devono andare.
Allo stesso modo, interagiamo quotidianamente con il colore in vari modi e costruiamo alcune associazioni sociali nella nostra mente. Prendi un semaforo, ad esempio: verde significa andare, rosso significa fermarsi e giallo significa rallentare (o ci avvisa di qualcosa più avanti). Mettendo un avviso importante in giallo o usando il rosso per evidenziare qualcosa, puoi trasmettere in modo potente un messaggio che prepara un utente al suo input.
Tuttavia, la stessa logica può essere utilizzata per qualcosa di più delle semplici schermate di avviso. La modifica del colore di un pulsante sulla tua app che porta ad acquisti in-app può influire in modo significativo sui tassi di conversione.
Sebbene non fosse all'interno di un'app, HubSpot ha scoperto che potevano aumentare il tasso di conversione del 21% semplicemente rendendo un pulsante rosso anziché verde. Ora, questo non significa che dovresti cambiare ogni pulsante di acquisto in-app in un cremisi brillante, ma c'è un argomento da sostenere qui che il colore non può solo far parte della tua filosofia di design: deve essere centrale per tutta la tua filosofia di sviluppo delle app.
Usare saggiamente il colore: una filosofia di design e accessibilità
In Proto.io, l'accessibilità è sempre al primo posto nella nostra filosofia di design. Per essere schietti, l'accessibilità è qualcosa che deve essere integrato in un buon design. Se non è lì, il design semplicemente non è molto buono.
Circa l'8% degli uomini e lo 0,5% delle donne hanno una qualche forma di daltonismo. Contrariamente al pensiero popolare, non esiste un tipo singolare di daltonismo, ma il daltonismo rosso/verde tende ad essere il più comune. Chi soffre di questa forma di daltonismo avrà generalmente difficoltà a vedere le variazioni sia del rosso che del verde. Sebbene la gravità di questa forma di daltonismo vari un po', anche un lieve daltonismo rosso/verde può rendere praticamente impossibile l'utilizzo di molte app.
Al di fuori del daltonismo, gli utenti miopi spesso faticano a leggere il testo con un contrasto basso a meno che non avvicinino lo schermo al viso, cosa che può potenzialmente compromettere l'usabilità di molte app.
La soluzione a entrambi questi problemi è abbastanza semplice: evita di usare colori non contrastanti quando visualizzi il testo su uno sfondo . Anche se non puoi garantire che tutti possano vedere la tua app nel modo in cui intendi, se utilizzi colori contrastanti, almeno darai alle persone un'app che possono utilizzare. Allo stesso modo, l'uso di colori ad alto contrasto renderà il testo più facile da leggere per tutti, anche se non hanno problemi di vista.
Un'altra opzione per aumentare l'accessibilità consiste nell'offrire tavolozze di colori intercambiabili nell'app. Sebbene questa non sia un'opzione per tutti, può aumentare notevolmente l'accessibilità della tua app. Potresti anche consentire agli utenti di cambiare il colore di funzionalità specifiche. Ad esempio, potresti avere un'opzione che cambia il colore dell'accento della tua app o il colore del testo in tutta l'app. Sebbene entrambe queste opzioni possano toglierti il controllo, garantiranno che la tua app sia accessibile a un pubblico più ampio.
Se stai ancora lottando per capire come integrare il colore nella tua filosofia di progettazione in un modo che non danneggi l'accessibilità della tua app, ti suggeriamo di controllare la libreria di progettazione dei materiali di Google.
Scegliere la tavolozza perfetta: consolidare la tua filosofia di progettazione
Anche se dovrebbe essere chiaro che ci sono alcune regole da seguire quando si tratta di colore, non è nemmeno necessariamente una scienza. Il colore riguarda spesso cose più astratte, come il tatto. Anche se la tua app non sta cercando di manifestare una sorta di emozione in un utente, ciò non significa che non lo farà. Anche se trovare la tavolozza perfetta non è un'impresa in bianco e nero, suggeriamo di iniziare con qualcosa in scala di grigi .
Crea un prototipo piatto della tua app in una sfumatura in scala di grigi e usalo come linea di base. Prendi nota di come appare e di come si sente: passalo al tuo team di controllo qualità e guarda cosa hanno da dire. Il tuo processo di onboarding è oscuro senza colore? Stai attirando l'attenzione sulle parti sbagliate della tua app? Con questo feedback, progetta altri prototipi, questa volta portando il colore. Non fare affidamento su una tavolozza singolare. Invece, prendi spunto dal sito Web di progettazione dei materiali di Google e gioca con alcuni dei loro campioni.
Invia anche queste revisioni al QA. Non aver paura di testarli A/B l'uno contro l'altro (e contro la versione originale in scala di grigi). Assicurati di fare alcune domande difficili sui colori che stai portando nella mischia. Stai usando il colore per guidare l'occhio dell'utente nell'app? Stai solo lanciando colore sullo schermo per aggiungere una scintilla? Il colore distrae l'utente dall'arrivare dove vuole?
Non dimenticare la psicologia dell'utente o l'accessibilità. Se stai creando un'app di viaggio, vuoi davvero che tutto sia rosso brillante? Se stai creando un'app sanitaria, il tuo sfondo dovrebbe essere davvero verde? I tuoi colori contrastano abbastanza da rendere leggibile il testo?
Un buon design dell'esperienza utente tiene conto di tutte queste domande: dopotutto, il colore ha un impatto definitivo sul comportamento e sul divertimento dell'utente. Se la tua filosofia di progettazione non tiene conto di questo, potresti creare un'app che non è accessibile o utilizzabile come pensi. Assicurati di creare prototipi del tuo design in ogni fase del processo e non rimanere troppo attaccato a uno o due colori.
Sperimenta, scegli un altro colore e continua a modificare finché non atterrerai su una tavolozza perfetta per te.