Farby



Už dlhšiu dobu plánujem napísať článok o voľbe farieb pre užívateľské rozhrania (UI). Podobne ako s inými problémami spojenými s použiteľnosťou, aj k princípom voľby správnej farebnej škály som sa rozhodol rovnako analyzovať možnosti a štandardné postupy, zistiť ako správne postupovať pri selekcií jednotlivých farieb a "odkukať", ako to robia ostatní.

Na vysokej škole nám bola odprezentovaná zaujímavá štúdia, kde skúmali, prečo ľudia volia tak škaredé a nezmyselné farby pre paneláky. Nepamätám si presne priebeh, ani presné čísla z tejto štúdie, ale výsledok bol zaujímavý: skončilo to nerozhodne. Volili farby nenápadné, vyblednuté, alebo extrémne farby bez žiadneho súvisu. Dokonca sa mi zdá, že aj kvalitatívny prieskum potvrdil, že rozdielne farebné škály sa páčili obyvateľom 50/50. Niekoľkokrát som poukázal na to, ako si ľudia tvoria príbehy o veciach a sami si dotvoria trojuholník a tak podobne. Rovnako si volia aj farby. Ak niekde videli podobnú farebnú škálu, zdá sa im povedomá a zároveň aj blízka. Takú farbu si "dotvoria" aj na svoj panelák.



Dizajnéri poznajú teóriu farieb dôverne. Pri interiéri je to najdôležitejšie. Každá farba je vhodná na niečo iné. Obývačka nebude miestom pre relax, pokiaľ budú steny červené. Naopak, vyfarbíte ju v zemitej škále a hneď opadne všetok stres. V jedálni budete jesť menej, pokiaľ vyfarbíte steny na modro (veľa  modrých reštaurácií zrejme nenájdete). Výrobcovia chladničiek by mali dávať dnu modré svetlo a určite by tak zlepšili hrozivé výsledky nočných chladničkových výjazdov atď. Tak preto na tej farbe tak záleží...



Tak, čo teda s farbou a UX? Môžem lákať na určité informácie (červené chybové hlásenie), môžem charakterizovať niektoré prvky, štruktúru (dôležité info je na viac kontrastnom pozadí), môžem napodobniť reálne objekty a navodiť tak pocit familiárnosti (bledožltý papier), môžem symbolizovať stavy predmetov (červená a zelená - semafor), môžem vyvolať príťažlivosť, zapamätateľnosť a lepšie porozumenie (modrý text - odkazy). Neúspešnými experimentami som sa poučil, že nie je dobré vymýšlať nové farebné kombinácie v UI, ale držať sa toho, čo ľudia poznajú: ak dám chybové hlásenie oranžovou, namiesto červenej, môžem vyvolať malú pochybnosť, či sa naozaj jedná o chybové hlásenie. Všeobecne sa odporúča neprestreliť to s farbami v UI. Platí tu zrejme magické pravidlo: 7 ± 2 (Millerovo magické číslo, wiki). Edit: Millerovo pravidlo sa uplatňuje na kognitívne limity. Nedopátral som sa k inému vysvetleniu, prečo na nás funguje len limitovaná kombinácia farieb. (thx Pavol Fabo) Rýchly prieskum v teréne dokazuje, že farebné škály sú väčšinou ladené do maximálne štyroch farieb a využívajú skôr rôzne stupne odtieňov, t.j. viac podielu čiernej, prípadne iné tónovanie. Farebnú škálu mi pomáhajú vytvoriť stránka colourlovers, alebo kuler priamo vo Photoshope.



To, čo je zaujímavé je však to, ako farby ovplyvňujú používateľské vlastnosti produktu. Na paškál si opäť vezmem iOS7 a jeho rozmazané pozadie a na ňom pekná typografia, symboly, prípadne monochromatické  ikony. Vyzerá to naozaj pekne, ale problémy môžu nastať v kontrastoch a to má priamy dopad na čitateľnosť. Kontrast je číslo jedna, čo sa komfortu aplikácie týka a teda je aj z hľadiska farebnej teórie najdôležitejšou súčasťou UX. Photoshop poskytuje užitočné nástroje na overenie kontrastov: "color proof" (screenshot), alebo jednoducho zobrazenie v odtieňoch šedej. Chrome má tiež zaujimavú extension na overenie existujúcich stránok a ešte je tu aj webová appka checkmycolours. O boji proti nízkym kontrastom píšu aj maďarskí UX-áci.

Tu však narážam na problém - customizácia, prispôsobenie požiadavkám používateľa. Paradoxne customizácia dáva používateľom možnosti, ktoré sú nebezpečné pre UX ako "centropenka" v rukách batoľaťa. Pri customizácií treba naozaj postupovať mimoriadne opatrne.



Mojím obľúbeným postupom pri návrhu wireframe (v preklade obrys, škica, kresba v linke atď.) je vynechať farebnosť úplne a pracovať len s odtieňmi šedej. Viem si tak jednoducho nastaviť "hĺbku" dizajnu a odstupňovať tak dôležitosť prvkov na úrovni kontrastov. Tie najvýrazjnešie a najkontrastnejšie elementy figurujú "blízko" a tie menej dôležité sú uložené "vzadu". Okrem toho to dobre podčiarkuje myšlienku toho, na čo je takýto wireframe určený: návrh štruktúry a vzťahov UI elementov, prípadne stratégia obsahu.



Postupne sa prepracovávam ku základným konceptom pri návrhu tlačidiel výzvy do akcií, "call-to-action" a zvýrazňovaniu stavu inverziou, "reverse video". Call-to-action by malo byť primárne zvýraznené kontrastom voči pozadiu, optimálne aj kontrastom voči celkovej farebnosti aplikácie odlišnou farbou ako štandardný obsah. V práci s farebnosťou platí, že vyššia miera saturácie spomaľuje používateľa, kým desaturované farby zjednodušujú kĺzanie pohľadu v priestore. Call-to-action má byť preto viac saturované. Reverse video je spôsob, ako zvýrazniť miesto, položku... napríklad v kontextovom menu sa používa pri prejdení kurzorom nad položkou. K tomuto malá poznámka: Rovnako dobre sa číta čierny text na bielom pozadí ako biely text na čiernom pozadí. Edit: pri dlhých textoch a próze vyžadujúcej porozumenie sa neodporúča biely text na čiernom pozadí. Tak ako v prírode neexistuje absolútna čierna a absolútna biela, nemala by sa objavovať ani v digitálnom prostredí. (thx Pavol Fabo)



Kultúrne možnosti tiež priamo zasahujú do voľby farebnej schémy a návrhu farebnosti UI prvkov. Predpokladám, že kultúrne vplyvy Slovákov sú každému jasné, ale pozor si treba dávať pri tých zo sveta. Hinduisti majú posvätnú farbu oranžovú, Čínania považujú modrú za "babskú" farbu, východná Ázia a Blízky východ považuje bielu farbu za smútočnú, tak ako červená je farbou smútku pre Afričanov, kým pre Indov znamená čistotu a pre nás agresiu, vášeň. Zelená je pre nás povel "choď!", pre Malajcov "bacha!". Vybral som si globálnu značku a porovnal jej stránky v rôznych krajinách: Coca-Cola .sk, .in, .jp a je jasne vidieť, že to nie je klišé ani pri dnešnej úrovni globalizácie. Na stránke Information is beautiful som našiel prehľadný diagram kultúrnych rozdielov vo vnímaní farieb.



Súhrn:
  • ľudia vidia radi farebné koncepty, ktoré niekde už postrehli a pripadajú im povedomé (ako Slováci vyberajú farby pre paneláky)
  • farby majú nepriamy dosah dokonca až na fyziologické procesy ľudí (napríklad: viac nám chutí pri červenej)
  • 4 farby pre škálu v digitálnom dizajne sú úplne postačujúce, ľudská kapacita však obsiahne až 7 ± 2
  • farebné štandardy sa nevypláca meniť (chybové hlásenie červenou je lepšie ako oranžovou)
  • kontrast je najdôležitejšou súčasťou UX (červený text na modrom pozadí má "pekný" efekt: vaše oči začnú vracať)
  • customizácia je jednou z možností, ako dovoliť používateľovi spraviť chybu, opatrne s tým!
  • dôležitosť elementov posúvam do priestoru, kde najdôležitejšie prvky sú blízko a menej dôležité ďaleko
  • call-to-actionreverse video slúžia ako pútače pozornosti, viac dôležitý je kontrast ako samotná farba (aj červená môže fungovať dobre pre call-to-action)
  • pri medzinárodných projektoch pozor na kultúrne, etnické a náboženské vnímanie zvolených farebných škál - prieskum a testovanie by mali byť vhodnými nástrojmi ako to overiť.
Tento blog mi trvalo pripraviť trochu dlhšie - bol som skoro mesiac na dovolenke a aj som sa zameral na väčší prieskum, lebo som o tejto téme skoro nič nevedel na 100%. S voľbou správnych farieb mám doteraz problém a častokrát sa rozhodujem medzi niekoľkými diametrálne odlišnými variantami. Menované nástroje mi tento proces zľahčujú míľovými krokmi, lebo dokážem jednoducho eliminovať zlé možnosti. Aké nástroje využívate vy pri návrhu farebných schém?


0 komentárov :

Zverejnenie komentára