Barvy a psychologie nakupování: co platí a co je mýtus
Červené tlačítko samo o sobě neprodává. Prodává tlačítko, které je vidět, a barvy, které znamenají na celém webu totéž. Ukážeme, co o barvách v ecommerce říkají výzkumy a jak je používat bez pověr.
O barvách v ecommerce koluje víc mýtů než o čemkoli jiném v designu. „Červená zvyšuje impulzivní nákupy.“ „Zelené tlačítko přineslo o 30 % víc objednávek.“ „Modrá je barva důvěry, proto ji mají banky.“ Na každém z těch tvrzení je zrnko pravdy a hodně zjednodušení. Pro e-shop je užitečnější vědět, co je doložené a na čem opravdu záleží, když vybíráte barvy tlačítek, cen, štítků a celé značky.
Stručně: barvy pomáhají prodávat hlavně tím, že usnadňují orientaci. Zákazník rychle najde tlačítko do košíku, pozná slevu, pochopí chybu ve formuláři a nepochybuje, na jakém webu je. To je méně kouzelné než „psychologie barev“, ale dá se to změřit a opravit.
Co je doložené a co ne
Výzkum barev v marketingu existuje a je poměrně rozsáhlý. Jeho závěry jsou ale opatrnější, než jak je citují blogy.
| Tvrzení | Co o něm víme |
|---|---|
| Existuje jedna nejlépe prodávající barva tlačítka | Nedoložené. Výsledky A/B testů barev závisí na okolí tlačítka a na konkrétním webu. |
| Tlačítko musí vynikat proti okolí | Doložené. Vyplývá z principu vizuální odlišnosti a z pravidel přístupnosti. |
| Barvy mají obecné asociace | Částečně. Studie popisují spojení například červené s energií a vzrušením a modré s kompetencí. Jsou to tendence, ne zákony. |
| Barva značky má odpovídat její osobnosti | Doložené. Studie Labrecque a Milne (2012) ukázala, že vnímání značky ovlivňuje soulad barvy s tím, co značka slibuje. |
| Barvy znamenají všude totéž | Nepravda. Významy barev se liší mezi kulturami, jak shrnuje přehledová studie Aslama (2006). |
| Konkrétní procenta „kolik lidí se rozhoduje podle barvy“ | Často citovaná čísla typu „90 % podle barvy“ se obvykle nedají dohledat k metodice, která by je podporovala. Nepoužívejte je. |
Slavné testy „červené tlačítko porazilo zelené“ obvykle ukazují jedno: tlačítko, které se odlišilo od zbytku stránky, bylo vidět víc. Když byla stránka laděná do zelena, vyhrála červená. Na červeném webu by to mohlo dopadnout obráceně.
Kontrast a von Restorffův efekt
Von Restorffův efekt, jinak také efekt izolace, popisuje, že ze skupiny podobných věcí si lidé nejspíš všimnou a zapamatují tu, která se od ostatních liší. V designu e-shopu je to hlavní důvod, proč má mít hlavní akce vlastní barvu, kterou nic jiného na stránce nepoužívá.
Co z toho plyne v praxi:
- Jedna akcentová barva pro hlavní akci. „Do košíku“ a „Pokračovat k objednávce“ mají stejnou barvu na celém webu. Bannery, štítky ani ikony ji nepoužívají.
- Zdrženlivost. Když svítí všechno, nevyniká nic. Deset barevných štítků, blikající banner a oranžové tlačítko spolu soupeří a zákazník neví, kam kliknout.
- Hierarchie tlačítek. Primární tlačítko je plné a výrazné, sekundární obrysové nebo tlumené. „Přidat do oblíbených“ nemá vypadat stejně důležitě jako „Do košíku“.
- Kontrast i bez barvy. Tlačítko musí být poznat i na černobílém screenshotu. Pokud splývá, barva sama nepomůže.
Nielsen Norman Group ve svém doporučení k barvám radí omezit paletu, typicky na zhruba tři barvy, a používat je konzistentně. Menší počet barev posiluje vizuální hierarchii, protože uživatele méně věcí rozptyluje.
Konzistence: barva jako slovník
Zákazník se barvy na vašem webu učí. Po pár kliknutích ví, že červená znamená slevu, zelená skladem a modře podtržený text je odkaz. Když stejná barva na jiné stránce znamená něco jiného, musí přemýšlet, a to brzdí.
Typické konvence v ecommerce, které se vyplatí držet:
- Cena ve slevě výrazně, často v červené, přeškrtnutá původní cena tlumeně.
- Dostupnost zeleně pro skladem, jinou barvou pro na objednávku nebo vyprodáno.
- Chyby ve formuláři červeně, ale vždy s textem a ikonou.
- Odkazy jednotnou barvou, odlišnou od běžného textu.
- Úspěch (přidáno do košíku, objednávka odeslána) jednotně, obvykle zeleně.
Nejspolehlivější způsob, jak konzistenci udržet, je definovat barvy jako design tokeny s významem, ne jen s odstínem. Token „barva-akce-primární“ se používá jen pro hlavní akce, „barva-stav-chyba“ jen pro chyby. Když se pak mění odstín, mění se všude najednou. Tokeny jsou základ každého design systému, víc o tom v článku Design system pro e-shop.
Barvy a přístupnost
Barva nesmí být jediný nositel informace. Poruchu barvocitu má podle běžně citovaných údajů pro evropskou populaci zhruba 8 % mužů a 0,5 % žen, nejčastěji s rozlišením červené a zelené. Na e-shopu s tisíci návštěv denně to jsou desítky lidí každý den.
Pravidla WCAG k barvám jsou konkrétní:
- 1.4.1 Použití barvy: informace nesmí být předávána jen barvou. Chybné pole potřebuje i text, stav skladem i slovo „skladem“.
- 1.4.3 Kontrast (minimum): běžný text aspoň 4,5 : 1 vůči pozadí, velký text 3 : 1.
- 1.4.11 Kontrast netextových prvků: okraje polí, ikony a stavy ovládacích prvků aspoň 3 : 1 vůči okolí. Světle šedé okraje formulářů na bílém pozadí tímhle testem často neprojdou.
Typický problém e-shopů jsou světle šedé texty (cena bez DPH, poznámky u dopravy), bílý text na světle zeleném nebo žlutém tlačítku a výběr barvy varianty jen jako barevný čtvereček bez názvu. Většinou se to dá opravit bez změny značky, jen úpravou odstínů. Přístupnosti se podrobně věnujeme v článku Accessibility (WCAG) pro e-shopy.
Kulturní asociace a obor
Význam barev se liší mezi kulturami i obory. Bílá je v Evropě barvou čistoty a svateb, v části východní Asie se tradičně pojí se smutkem. Zelená u nás evokuje přírodu, zdraví a čerstvost. Pokud prodáváte do zahraničí, ověřte si, jak barvy značky a kampaní působí na cílovém trhu.
Uvnitř jednoho trhu hraje velkou roli obor a zvyklosti konkurence. Biopotraviny, dětské zboží, luxusní kosmetika a nářadí mají každé svou vizuální řeč. Nemusíte ji kopírovat, ale měli byste vědět, že od ní odbočujete. Právě tady má smysl zjištění Labrecque a Milne: barva funguje, když odpovídá tomu, co značka slibuje. Levný diskont v barvách luxusní značky působí nevěrohodně, a naopak.
Jak na to prakticky: audit barev e-shopu
- Vypište všechny barvy, které web používá. Často jich je přes dvacet, z toho polovina náhodou.
- Přiřaďte každé barvě význam. Akce, cena, sleva, stav, chyba, odkaz, pozadí. Co význam nemá, zrušte nebo sjednoťte.
- Zkontrolujte, že akcentovou barvu používá jen hlavní akce. Bannery a štítky ji nesmí kopírovat.
- Změřte kontrast. Text, tlačítka, okraje polí, ikony. Použijte libovolný nástroj na kontrolu kontrastu podle WCAG.
- Zkontrolujte, že nic nestojí jen na barvě. Chyby, dostupnost, varianty, grafy.
- Zapište barvy jako tokeny a používejte je v šabloně i v e-mailech.
- Změny barev hlavních akcí testujte. Ne kvůli „psychologii barvy“, ale abyste ověřili, že nový návrh je vidět víc.
Když potřebujete barevnost sjednotit nebo navrhnout znovu, pomůžeme v rámci grafiky a brandingu. Pokud chcete změny ověřit na datech, navazuje CRO a A/B testování. Širší pohled na psychologii nákupu nabízí článek CRO: psychologie nakupování a jak ji využít a navazující téma písma rozebírá Typografie v ecommerce.
Potřebujete s tím pomoct?