Cum afectează culoarea UX și comportamentul utilizatorului
Publicat: 2016-12-24Culoare: când un design este corect, probabil că nu îl observați niciodată, dar când îl înțelege greșit? Nu contează dacă este un fundal exagerat de strălucitor, care uimește ochiul sau text negru pe un fundal gri închis, alegerile de culoare necorespunzătoare pot distruge chiar și cea mai funcțională aplicație. La fel ca și alte aspecte ale designului, culoarea nu este doar acolo pentru a condimenta o aplicație. Culoarea poate fi un instrument la fel ca orice altă caracteristică a experienței utilizatorului.
Filosofia de design grafic folosită pentru a proiecta o aplicație - de la dimensiunea fiecărui element, la modul în care alunecă prin interfața de utilizare, până la da, culoarea - influențează comportamentul utilizatorului. Există un motiv întemeiat pentru care designerii petrec frecvent primele luni ale unui proiect chinuindu-se pe palete de culori și nu pe wireframes, până la urmă.
Alegerea paletei perfecte poate fi diferența dintre proiectarea unei aplicații de meditație care îi ajută de fapt pe utilizatori să se relaxeze și una care îi determină să-și dorească să-și arunce telefonul în perete. Este diferența dintre o aplicație bancară care te face nervos să-ți verifici soldul și una care îți poate alina anxietățile legate de momentul în care urmează următorul salariu.
Deci, cum reușiți să o faceți corect - și ce puteți face pentru a stăpâni culoarea în designul dvs.?
Filosofia designului grafic: Teoria culorii
Înainte de a intra în adâncul filozofiei (și psihologiei!) a designului grafic, este important să înțelegeți câteva principii de bază ale culorii și designului. În timp ce culoarea ar putea să nu pară un subiect extrem de complex, există un motiv bun pentru care fiecare oră de artă începe nu numai cu o lecție despre cum să folosești culoarea, ci și cum să faci culoarea.
Elementele de bază - așa cum sunt explicate de roata de culori - sunt simple: culorile primare (roșu, galben și albastru) pot fi combinate pentru a crea culori secundare (verde, violet și portocaliu). De asemenea, diferite fracții de alb pot fi adăugate unei culori pentru a crea nuanțe, iar negrul poate fi adăugat pentru a crea nuanțe.

Culorile opuse una față de alta (cum ar fi roșu și verde, sau albastru și portocaliu) sunt considerate complementare. Aceste culori contrastează puternic, făcându-le să iasă în evidență atunci când sunt lângă (sau deasupra) una de cealaltă.
Culorile care sunt una lângă alta sunt considerate a fi analoge. Aceste culori au un contrast mult mai mic, ceea ce înseamnă că tind să nu iasă la fel de mult în evidență atunci când sunt apropiate.
Nu există nimic în mod inerent „corect” sau „greșit” la culorile cu contrast ridicat sau scăzut. Uneori, o aplicație va solicita culori strălucitoare, care contrastează puternic unele cu altele. Alteori, îți vei dori ceva puțin mai blând. În general, cu cât vrei să iasă mai mult în evidență, cu atât mai mult ar trebui să te bazezi pe culori contrastante.
Cea mai bună modalitate de a înțelege cum merg (și nu) culorile împreună este să te joci cu ele. Chiar dacă nu lucrați la un proiect în acest moment, o rotire rapidă a roții de culoare Adobe vă poate face să vă gândiți la culoare într-un mod nou.
Mostre de emoție: culoare și psihologie
Când consolidați filosofia de design grafic din spatele aplicației dvs., nu vă puteți gândi doar la cum arată lucrurile, ci trebuie să vă gândiți la cum se simt. Nu vorbim nici despre feedback haptic. De când Johann Wolfgang Goethe a studiat efectele fiziologice ale culorii, am fost obsedați să folosim culoarea pentru a produce efecte fizice și emoționale.
Chiar și astăzi, culoarea ocupă centrul atenției în filosofia de design a multor mărci. Asistența medicală, afacerile și guvernul tind să folosească albastrul, deoarece emană un sentiment de încredere și profesionalism. Verdele este văzut ca o culoare tinerească, plină de energie – și, desigur, reflectă un sentiment de mediu și apropiere de natură. Roșul este energic și impulsiv, dând impresia de viteză, eficiență și putere. Fiecare culoare pe care o vedem (și cu siguranță fiecare culoare pe care o asociem în mod intrinsec cu anumite mărci) implică ceva, fie direct, fie indirect, care ne ajută să ne stimulăm percepția asupra mărcilor individuale.
Gândiți-vă la mărcile și simbolurile pe care le recunoașteți ca fiind foarte centrate pe culoare. Apple, Wikipedia și The New York Times au toate culorile în tonuri de gri, simbolizând o încredere calmă. Aceste mărci sunt considerate echilibrate și de încredere. Whole Foods, John Deere și Starbucks prezintă toate nuanțe verzi în logo-urile lor, conectând natura și sănătatea cu marca și produsele lor.
Unele culori chiar depășesc mărcile lor, definind industrii întregi. Gândiți-vă la câte lanțuri de fast-food sau restaurante folosesc scheme de culori roșii sau galbene, de exemplu. Aceste culori ne ajută să ne declanșăm mental, plasându-ne într-un anumit loc psihologic care ne determină să achiziționăm un fel de produs.
Deși acest lucru este ceva pe care specialiștii de marketing și-au dat seama cu mult timp în urmă, știința justifică multe dintre sentimentele noastre reciproce despre culoare. S-a descoperit că roșul, de exemplu, îi face pe unii oameni să reacționeze mai rapid și mai puternic la anumiți stimuli. De asemenea, poate intimida: cercetătorii au descoperit că atunci când cei care iau testul au văzut culoarea roșie, scorurile lor au fost mai slabe.
Chiar mai străin? Culoarea unei pastile are un efect ușor asupra modului în care funcționează. Pastilele albastre funcționează cel mai bine ca sedative, galbenul funcționează cel mai bine ca antidepresiv și, în toate cazurile, culorile strălucitoare funcționează cel mai bine. Deși acesta este probabil doar efectul placebo care ne stimulează răspunsurile la medicamentele active, efectul este suficient de puternic pentru ca companiile să-l ia în considerare atunci când produc noi produse farmaceutice.
Acum, nu spunem că utilizarea unei scheme de culori pe bază de galben în aplicația de urmărire a stării de spirit o va face eficientă ca antidepresiv, dar paleta de culori pe care o alegeți ar putea avea un impact rezonabil asupra stării de spirit a unui utilizator - așa că alegeți cu înțelepciune.
Recomandat pentru tine:
Culoare și utilizare
Designul nu este doar despre a arăta frumos, ci este despre funcționalitate și utilizare, cele două principii care sunt probabil cele mai importante pentru orice designer UX. Dacă UX-ul nu este neted, nu contează cât de frumoasă este paleta de culori aleasă sau cât de uimitoare este UI. Dacă un utilizator nu poate trece prin el eficient, nu va avea nicio putere de rezistență.

Dar ce legătură are culoarea cu toate acestea?
Simplu: culoarea este un instrument care poate ajuta la ghidarea ochiului . Dacă puteți utiliza eficient culoarea, puteți ghida un utilizator nou prin aplicația dvs. fără un tutorial lung, o serie de videoclipuri complexe sau chiar un singur cuvânt. O interfață de utilizare intuitivă folosește culoarea pentru a dirija nu doar atenția utilizatorului, ci și interacțiunile acestuia cu întreaga experiență.

Imaginați-vă, pentru o secundă, că dezvoltați o aplicație pentru o companie de catering care ajută organizațiile mari să personalizeze cu ușurință comenzile de mâncare. Un client potențial vă descarcă aplicația pentru prima dată și o deschide. Ce văd ei?
În aplicație, majoritatea elementelor de meniu - inclusiv fundalul și orice casete de informații - sunt colorate într-o paletă de culori dezactivată și tocită de gri. Singura excepție este o casetă portocalie-roșu pe care scrie „comandă”. În calitate de designer, știți că primul lucru pe care utilizatorii doresc să-l facă atunci când vă folosesc aplicația este să își configureze fără durere comanda de mâncare. În loc să ascundeți această caracteristică adânc în aplicație sau să le cereți să deruleze în jos pagină după pagină pentru a ajunge la ea, o puneți în față și în centru. Nu numai asta, dar le atragi imediat privirea asupra ei. Culoarea îl ajută să iasă în evidență și le arată utilizatorilor noi exact unde trebuie să meargă.
De asemenea, interacționăm cu culoarea în diferite moduri în fiecare zi și construim anumite asociații sociale în mintea noastră. Luați un semafor, de exemplu: verde înseamnă mergeți, roșu înseamnă opriți, iar galben înseamnă încetinirea (sau ne avertizează despre ceva în față). Punând un avertisment important în galben sau folosind roșu pentru a evidenția ceva, puteți transmite cu putere un mesaj care stimulează utilizatorul pentru intrarea sa.
Cu toate acestea, aceeași logică poate fi folosită pentru mai mult decât doar ecrane de avertizare. Schimbarea culorii unui buton din aplicația dvs. care duce la achiziții în aplicație poate avea un impact semnificativ asupra ratelor de conversie.
Deși nu se afla în interiorul unei aplicații, HubSpot a descoperit că își pot crește rata de conversie cu 21% pur și simplu făcând un buton roșu în loc de verde. Acum, acest lucru nu înseamnă că ar trebui să schimbați fiecare buton de achiziție în aplicație cu un purpuriu strălucitor, dar există un argument de făcut aici că culoarea nu poate face doar parte din filozofia dvs. de design: trebuie să fie esențială pentru întreaga filozofie de dezvoltare a aplicației.

Folosirea cu înțelepciune a culorilor: o filozofie a designului și a accesibilității
La Proto.io, accesibilitatea este întotdeauna în fruntea filozofiei noastre de design. Pentru a fi direct, accesibilitatea este ceva care trebuie integrat într-un design bun. Dacă nu există, atunci designul pur și simplu nu este foarte bun.
Aproximativ 8% dintre bărbați și 0,5% dintre femei au o formă de daltonism. Contrar gândirii populare, nu există un singur tip de daltonism, dar daltonismul roșu/verde tinde să fie cel mai frecvent. Cineva care suferă de această formă de daltonism va avea în general dificultăți în a vedea variațiile atât de roșu, cât și de verde. În timp ce severitatea acestei forme de daltonism variază destul de mult, chiar și daltonismul ușor roșu/verde poate face ca utilizarea multor aplicații să fie practic imposibilă.
În afara daltonismului, utilizatorii miopi se luptă adesea să citească textul cu contrast scăzut, cu excepția cazului în care mută ecranul aproape de fața lor - ceva care poate distruge capacitatea de utilizare a multor aplicații.
Soluția la ambele probleme este destul de simplă: evitați să utilizați culori fără contrast atunci când afișați text pe fundal . Deși nu puteți garanta că toată lumea va putea vedea aplicația dvs. așa cum doriți, dacă utilizați culori contrastante, cel puțin le veți oferi oamenilor o aplicație pe care o pot folosi. De asemenea, utilizarea culorilor cu contrast ridicat va face textul mai ușor de citit pentru toată lumea – chiar dacă nu au probleme de vedere.
O altă opțiune pentru a crește accesibilitatea este de a oferi palete de culori interschimbabile în aplicația dvs. Deși aceasta nu este o opțiune pentru toată lumea, poate crește foarte mult accesibilitatea aplicației dvs. De asemenea, puteți permite utilizatorilor să schimbe culoarea unor caracteristici specifice. De exemplu, ați putea avea o opțiune care schimbă culoarea de accent a aplicației sau culoarea textului în întreaga aplicație. Deși ambele opțiuni vă pot lua un anumit control, ele se vor asigura că aplicația dvs. este accesibilă unui public mai larg.
Dacă încă vă străduiți să înțelegeți cum să integrați culoarea în filosofia dvs. de design într-un mod care să nu afecteze accesibilitatea aplicației dvs., vă sugerăm să consultați biblioteca de design de materiale de la Google.
Alegerea paletei perfecte: consolidarea filozofiei dvs. de design
Chiar dacă ar trebui să fie clar că există unele reguli de urmat atunci când vine vorba de culoare, nici aceasta nu este neapărat o știință. Culoarea se referă adesea la lucruri mai abstracte, cum ar fi simțul. Chiar dacă aplicația dvs. nu încearcă să manifeste un fel de emoție într-un utilizator, asta nu înseamnă că nu o va face. Deși găsirea paletei perfecte nu este un efort alb-negru, vă sugerăm să începeți cu ceva în tonuri de gri .
Construiți un prototip plat al aplicației dvs. într-un gradient în tonuri de gri și utilizați-l ca linie de bază. Rețineți cum arată și cum se simte: transmiteți-o echipei dvs. de QA și vedeți ce au de spus. Procesul dvs. de integrare este tulbure fără culoare? Atrageți atenția asupra părților greșite ale aplicației dvs.? Cu acest feedback, mai proiectați câteva prototipuri, de data aceasta aducând culoare. Nu vă bazați pe o paletă singulară. În schimb, urmăriți site-ul web de design de materiale Google și jucați-vă cu câteva dintre mostrele lor.

Trimiteți aceste revizuiri și către QA. Nu vă fie teamă să le testați A/B unul împotriva celuilalt (și față de versiunea originală în tonuri de gri). Asigurați-vă că puneți câteva întrebări grele despre culorile pe care le aduceți în luptă. Folosiți culoarea pentru a ghida ochiul utilizatorului în aplicație? Doar arunci culoare pe ecran de dragul de a adăuga o scânteie? Culoarea distrage atenția utilizatorului de la a ajunge acolo unde își dorește să ajungă?
Nu uitați de psihologia utilizatorului sau de accesibilitate. Dacă creați o aplicație de călătorie, chiar doriți ca totul să fie roșu aprins? Dacă creați o aplicație de asistență medicală, fundalul dvs. ar trebui să fie într-adevăr verde? Culorile tale contrastează suficient pentru ca textul să fie lizibil?
Un design bun UX ține cont de toate aceste întrebări - la urma urmei, culoarea are un impact definitiv asupra comportamentului și plăcerii utilizatorilor. Dacă filozofia dvs. de design nu ține cont de acest lucru, ați putea crea o aplicație care nu este atât de accesibilă sau utilizabilă pe cât credeți că este. Asigurați-vă că faceți prototipul designului dvs. la fiecare pas și nu vă agățați prea mult de una sau două culori.
Experimentați, alegeți o altă culoare și continuați să revizuiți până când ajungeți la o paletă perfectă pentru dvs.






