Jaká barva je na webu nejlepší?

Jaká barva je na webu nejlepší?

Barvy jsou nedílnou součástí toho, jak vnímáme svět. Podle barvy si určíme, zda se nám něco líbí či nikoliv, barvy kolem nás ovlivňují naši náladu, barvami vyjadřujeme své pocity. A právě z těchto důvodů jsou tak důležité i na webu. Které z nich jsou tedy na web nejlepší?

Všechny věci v našem světě mají různé barvy. Různé barvy nás mohou pozvednout nebo poslat ke dnu. Barvy jsou dokonce spojeny i s psychologií – některé z nich jsou spojovány s různými vlastnostmi a emocemi. Mohou barvy pomoci, aby na web přitáhly více návštěvníků?

V různých kulturách mohou různé barvy znamenat různé věci. Například bílá je v čínské kultuře barvou smutku a smrti, v Brazílii je barvou smrti fialová. Žlutá je posvátná pro hinduisty, ale v Řecku představuje smutek a ve Francii žárlivost. V Severní Americe je zase se žárlivostí typicky spojována zelená. Lidé z tropických zemí reagují nejpříznivěji na teplé barvy, lidé ze severních oblastí zase na chladnější. V severoamerické kultuře modrá navozuje pocit důvěry, ale také povzbuzuje chuť k jídlu. Zelená znamená čerstvost, růst a peníze, žlutá s sebou přináší slunce a štěstí. A tak dále…

Ano, všechno tohle je pravda. Ale můžeme to využít k tomu, abychom na web přilákali více zákazníků?

Experimentujte s barvami

Červená z vás může udělat vítěze…

Červená znamená všeobecně stop. Červená znamená nebezpečí. Červená znamená horko. A analýzou z olympiády v roce 2004 vědci také zjistili, že červená znamená rovněž dominanci.

Zkoumali box, taekwondo, řecko-římský zápas a freestylové zápasení – všechny z těchto sportů byly v roce 2004 na Olympijských hrách. V těchto sportech jsou závodníci náhodně oblečeni do červeného nebo modrého oblečení, nikdo nemůže mít svou vlastní soupravu.

wrestling

V 16 z 21 případů vyhrál ten, kdo měl na sobě červenou barvu. Podobné tendence byly pozorovány i v roce 2004 na Evropském šampionátu ve fotbale. Vědci však opatrně zdůrazňují, že ten efekt je pouze jemný. A že červená může být rozhodujícím faktorem pouze v případě, kdy jsou síly obou stran vyrovnané. Ale stále tu ten efekt je.

„Zjistili jsme, že ten, kdo na sobě má červenou, má trvale vyšší pravděpodobnost výhry,“ napsali Russel Hill a Robert Barton, vědci z Durhamské univerzity.

… a poraženého

Výzkumníci z Rochesterské univerzity zase zjistili, že červená barva nás může dovést k lepším výsledkům v testech. Ve svých experimentech chtěli zjistit, zda bude mít vnímání červené nějaký vliv na výsledky důležitých testů jako je IQ test nebo velké akademické zkoušky. V tomto smyslu je totiž červená tradičně spojována s označením chyby.

Výsledek

Čtyři experimenty, které byly provedeny, ukázaly, že i krátké vnímání červené barvy má negativní vliv na výsledky. „Bez jejich vědomí to vede lidi k horšímu výsledku,“ řekl Elliot (jeden z autorů).

Výsledky ukazují, že „je třeba dbát na to, jak se červená používá“ a vědci také hlásí, že „ukázali, jak může barva působit jako životní povel, který má významný vliv na naše chování.“

Barva a chuť horké čokolády

hotChocolate

Ukázalo se, že barva obalu, ve kterém je prodáváno jídlo nebo pití, přispívá k vůni na jídlo nebo pití. Tento závěr vysvětluje Betina Piqueras-Fiszman, výzkumnice na Polytechnické univerzitě ve Valencii, i s kolegou Charlesem Spencem z Oxfordu v případě horké čokolády.

Experimentu se účastní 57 účastníků, kteří měli hodnotit vzorky horké čokolády podávané ve čtyřech různých barvách (bílá, krémová, oranžová a červená) plastových kelímků. Všechny byly stejné velikosti a všechny byly uvnitř bílé.

Výsledek

Výsledky ukazují, že chuť horké čokolády podávané v oranžovém a krémovém kelímku byla účastníky výzkumu posouzena jako lepší. Nicméně sladkost i aroma byly ve všech kelímcích bez ohledu na barvu stejné. Ve všech byla stejná čokoláda.

„Neexistuje žádné pravidlo o tom, že chuť a vůně se liší v závislosti na barvě nebo odstínu kelímku,“ vysvětluje Piqueras-Fiszman. „Ve skutečnosti se liší v závislosti na druhu potravy, ale pravdou je, že by se mělo věnovat více pozornosti barvě obalu, protože má větší potenciál, než si může člověk představit.“

V dalším pokusu bylo zase prokázáno, že jahodová pěna se jeví jako sladší a intenzivnější na bílém talířku než na černém.

Nejlepší barva pro tlačítka

Je rozhodně dobré vědět, že červená může zlepšit vaše šance na výhru ve sportu a že horká čokoláda chutná lépe v určité barvě šálku, ale co to má co do činění s barvami na webu? Opravdu by červená mohla přilákat více zákazníků?

Válka zeleného a červeného tlačítka

Už se objevilo mnoho diskuzí o tom, jaká barva je nejlepší pro tlačítko. Na Unbounce například prohlásili, že nejlepším tlačítkem, které vyzývá uživatele k akci, je tlačítko BOB. To je zkratka pro Big Orange Button, tedy velké oranžové tlačítko.

K dispozici je celá řada zajímavých studií případů, kdy bojuje oranžová (nebo v našem případě červená) proti konkurenci v podobě různých jiných barev včetně zelené.

Když o tom popřemýšlíte, zelená je většinou spojena s pozitivními emocemi. Když se semafory zazelenají, znamená to, že můžete pokračovat v jízdě. S červenou je to naopak. Ta je většinou spojována s negativními emocemi. V případě našich semaforů na červenou musíte zastavit.

Tak co si myslíte? Která barva vyhraje? Zelená nebo červená, červená nebo zelená? Přečtěte si následující případové studie a zjistíte to.

Případová studie 1

dmix

Na Dmix píšou o jednom ze svých projektů, ve kterém testují tlačítko se zelenou a červenou barvou. V jejich testování, do kterého se zapojilo 600 subjektů, zjistili, že když bylo použito červené tlačítko, konverze se zvýšila o 34%.

34% je slušná hodnota. 1:0 pro červené tlačítko.

Případová studie 2

hubspot

Další test provedli v HubSpot. Zkusili podobný test se zeleným a červeným tlačítkem na webové stránce jednoho z jejich klientů. Test nechali běžet po dobu několika dnů provozu a za tu dobu se na webu objevilo přes 2000 návštěvníků.

Výsledkem bylo, že červené tlačítko překonalo zelené o 21%. 2:0 pro červené tlačítko.

Případová studie 3

visual-1

Třetí test pochází od Visual Website Optimizer. Jejich klient měl eshop prodávající mobilní telefony a příslušenství. Na jeho stránkách otestovali různobarevné tlačítko Buy Now – tedy Koupit. Proti sobě se v boji postavilo bílé tlačítko se zeleným textem a červené (tmavě oranžové) tlačítko s bílým textem.

A vítězem se stalo… Ano, máte pravdu – bylo to červené tlačítko. Tentokrát bylo o 5% lepší. Takže 3:0 pro červené tlačítko.

Případová studie 4

monetate-1

Zatím jsme viděli celkovou dominanci červeného tlačítka. Takže pojďme to změnit. Tentokrát uvidíme, jak ve studii Monetate figuruje místo zeleného modré tlačítko. A to modré tlačítko v testech překvapivě vyhrálo – a to o zhruba 9%. Možná je to jen anomálie, třeba je s tímto testem něco špatně.

Ale tak či tak, konečné výsledky jsou takové, že červené tlačítko vyhrálo 3:1. Z toho tedy můžeme bezpečně soudit, že na základě různých testování, je nejlepší barvou pro tlačítka vyzývající k akci červená.

Nebo ne?

Peep Laja napsal ve svém příspěvku o barvách webdesignu toto:

Mám rád tenhle tweet od Naomi Niles.

 

Nemohu nic jiného než s ní souhlasit. Tyto druhy článku dávají lidem mylnou představu o tom, co je to testování. Ano jistě, někdy barva ovlivňuje výsledky – a to zejména pokud se to týká vizuální hierarchie či toho, aby výzva k akci více vynikla. Ale podstatou testování dvou možností není „zelená vs. oranžová“. Je to o pochopení cílového publika. Dělat výzkum a analýzu může být únavné a je to určitě těžká práce, ale udělat to prostě musíte.

Opravdové zisky nepřicházejí z barevné psychologické lsti, ale z analýzy toho, co vaši zákazníci opravdu potřebují, jakým stylem se s nimi máte domlouvat a jak chtějí nakupovat. Je to o relevanci a vnímání hodnoty celkové nabídky.

Poslední případová studie

Podívejme se ale ještě na jeden poslední příklad, který tomu všemu dá větší smysl. RIPT Apparel testoval, zda má barva tlačítka Koupit na spodním řádku, nějaký význam.

Toto je původní verze:

original

A toto je nové tlačítko:

green-button2

Není žádným velkým překvapením, že se konverze zvýšily. Kdybychom se nyní podívali na předchozí případy, dalo by se říci, že pokud by to tlačítku udělali ještě červené, změny by byly ještě lepší.

No, ne tak docela.

Podívejte se znovu na původní verzi, zda neuvidíte něco divného. Nebo něco, co by tam mělo být, ale není.

Chybějící tlačítko. V původním návrhu totiž chybí tlačítko! Tlačítko „Buy Now“ se prostě v celkovém konceptu ztratí a vy si ho ani nevšimnete. Nové tlačítko je jasně viditelné, barva už není tolik důležitá. A to je vlastně to, jak začal velký spor červených/oranžových tlačítek. Když se podíváte na ty testy, uvidíte úžasné výsledky, které vám sdělí, že tato nebo tato barva je prostě lepší.

To je v pořádku, dokud to ale neprozkoumáte blíže. Více než často totiž výsledky ve skutečnosti odhalují to, že v předchozím návrhu tlačítko úplně chybělo nebo je to současné mnohem výraznější. A to je celý fígl. Není to tolik o té barvě.

Monetate (autoři testu modré vs. oranžové tlačítko) o tom napsali toto:

„Ale pokud se na výsledky podíváte podrobněji, uvidíte, že oranžové tlačítko bylo téměř vždy testováno proti tlačítku, které v podstatě vůbec nebylo tlačítkem. V případech, jako jsou tyto, je sotva překvapením, že oranžové tlačítko vykázalo lepší výsledky. Samozřejmě že ano, když nebylo srovnáváno s žádným tlačítkem. Každé tlačítko bez ohledu na barvu bude mít větší význam než žádné tlačítko.“

V případě RIPT Apparel byl pak proveden ještě jeden test. Testovali poslední finální verzi tlačítka – tentokrát žlutého:

yellow-button

S nejnovější verzí se konverze zvýšila o dalších 6,3%. Takže žlutá je lepší než zelená? Ne, ne, ne.

Barva sama o sobě je malým rozdílem

Barva tlačítka má malý nebo žádný účinek. Co je ale důležitější, je změna vizuální hierarchie celé stránky, aby dala vyniknout výzvě k akci, další informace a tlačítko samo o sobě.

Je to také o tom, na co jsme zvyklí. Bing zvýšil své příjmy o 80 milionů dolarů jenom tím, že našel tu správnou modrou barvu pro své odkazy. Proč tomu tak je? Je to proto, že lidé jsou zvyklí na to, že odkazy jsou modré. Už v začátcích webu byly odkazy modré. Inženýři Microsoftu navíc přiznali toto: „… byl to odstín modré docela podobný tomu, který používá Google.“

Neexistuje žádná nejlepší barva pro webové stránky, která by na ně přivedla více uživatelů.

V případě žlutého tlačítka byla síla také v tom, že bylo přidáno zdůraznění časového omezení (10 dolarů pouze na 24 hodin). To vždycky zvedá konverzi. V případě Bingu a modrých odkazů to byla síla našich zvyků.

Zpět k HubSpot

Totéž lze říci o příkladu HubSpot. Podívejte se na něj znovu:

hubspot

Podívejte se na původní zelenou nalevo a na novou červenou. Všimli jste si, co by mohlo přispět k tomu, že bylo červené tlačítko úspěšnější? Něco v celkovém vzhledu stránky?

Něco jako že zelená je jedna z hlavních barev na webu? Bingo! Zelená je dominantní barvou pro celou stránku. A co se stane, když do toho přidáte ještě zelené tlačítko?

Nebude dostatečně viditelné. Mohli tedy proti zelené testovat téměř jakoukoliv jinou barvu a došli by ke stejnému výsledku.

HubSpot řekli ve své případové studii, že stejně „nelze generalizovat tyto výsledky ve všech situacích. Nejvíce, co můžeme říci, je to, že to funguje v podmínkách, ve kterých k tomu došlo: s designem této stránky, s touto stránkou, s publikem, které si ji zobrazovalo.“

Závěr

Na využití barev někdy hodně záleží. Ale říkat, že jedna barva přiláká více zákazníků než druhá, je prostě hloupé. Neexistuje univerzální nejlepší barva. To, co funguje na jednom webu, nemusí nutně fungovat na jiném.

Záleží spíše na vizuální hierarchii a na tom, jak vaše tlačítko vyzývající k akci vynikne. Takže ani „zelená vs. červená“ není tolik boj o barvě, ale spíše o tom, jestli dané tlačítko dostatečně ze stránky vystupuje a pokud ne, jak to můžeme zlepšit.

Zdroj: conversionxl.com, obrázky: Filckr – slagheap, awduthie, gwilmoreDmix, Hubspot, Visual Website Optimizer, Monetate, Visual Website Optimizer

Komentáře

  • Petr

    Díky za takovéto články, to sem patří, tohle tu chci číst.. nikoliv o D.R. v bazénu.

  • Petr

    Díky za takovéto články, to sem patří, tohle tu chci číst.. nikoliv o D.R. v bazénu.

    • Trosku jsem si vzal nazory nekterych ctenaru k srdci :-) D.R. v bazenu tu asi bude, ale v mensi mire :-)

  • DavidPetr

    Skvělý článek! Vážně naprostá bomba.
    Ale i „žblepty od Kolesy“ si tu rád přečtu ;)

Nahoru