Klikací barvy. Skript pro výběr optimální barvy pro reklamy RSA. Jak moc můžete zvýšit konverze pomocí barev?

Která barva tlačítka má nejvyšší konverzní poměr je stará filozofická otázka, na kterou mnoho lidí zná odpověď. „Červená“ – odpoví začínající obchodníci. „Kontrastní“ – odpoví zkušení marketéři. Na toto téma jsme testovali 21 666 uživatelů. A došli jsme k docela zajímavým závěrům.

Na začátek článku je potřeba přidat intriky a vzrušující fakta, abyste upoutali pozornost. Na základě této rady mohu říci, že v praxi jsme dosáhli zvýšení konverze až o 65 % pouhou změnou barvy tlačítka. V tomto článku budeme hovořit o výsledcích a jak na to.

Jak moc můžete zvýšit konverze pomocí barev?

Neřeknu vám, že jsme vynalezli kouzelnou pilulku na řízení konverzí. V případech rostoucích konverzí jsem došel k jednoduchému závěru. Neexistují žádná 100% prohlášení, která budou vždy fungovat pro všechny. Kouzelné pilulky taky. Již dříve jsme psali o tom, jak v některých případech slovo „zdarma“ snižuje konverze. Co můžeme říci o dalších „stoprocentních“ pravdách.

O kolik tedy můžete zvýšit míru konverze pouhou změnou barev tlačítek?

Zaznamenali jsme až 65% nárůst konverze. 65 % byl maximální výsledek testu. Průměr byl 11 %. Ale i toto zvýšení konverze je velmi dobrý výsledek. Vzhledem k tomu, že toho lze dosáhnout změnou barvy tlačítka.

Červená je barvou vítězů

Mnoho odborných testů říká, že nejvíce má červené tlačítko vysoká konverze. Proč? Víme, že každá barva má své vlastní asociace a vyvolává určité emoce. Červená barva znamená zastavení, nebezpečí a vášeň. A ve většině případů (věří se) to vede k nejlepší výsledky v internetovém marketingu.

Níže je uveden algoritmus pro vytváření A/B testů:

1. Vytvořte widget v konstruktoru. Trvá 5 minut.
2. Zkopírujte jej a proveďte změny pro test. Trvá 1 minutu.
3. Vytvořte A/B test a vyberte tyto widgety. Trvá 1 minutu.

1. Vytvoření widgetu v konstruktoru

Chcete-li vytvořit widget, musíte být zaregistrováni v konstruktoru.

Proces tvorby se skládá ze 3 kroků:

1. Vyberte šablonu widgetu, kterou budete používat.
2. Upravte widget: - napište požadovaný text - změňte barvu a v případě potřeby nahrajte obrázek
3. Vyberte nastavení zobrazení: - kdy se má widget zobrazit (podle času, při odchodu, při rolování stránky atd.) - na jakých zařízeních (počítač, mobil, tablet) - co dělat po konverzi (poděkovat, přesměrovat přes odkaz nebo jednoduše zavřete widget)

Můžete se podívat na toto video o vytváření widgetu. Každá fáze je zde podrobně popsána. Textový návod na vytvoření widgetu naleznete zde.

Rád bych poznamenal, že v návrháři je mnohem více možností přizpůsobení. Například zobrazení při prohlížení určitého počtu stránek, podle dne v týdnu, podle zdroje doporučení, frekvence zobrazení a mnoho dalšího. Nejprve vám však doporučuji použít základní nastavení a poté experimentovat s dalšími.

2. Zkopírujte widget a proveďte změny pro test

Po vytvoření widgetu si musíte vytvořit jeho kopii. Chcete-li provést změny v novém widgetu a spustit test A/B. Chcete-li to provést, klikněte na ikonu „Kopírovat“ ve vytvořeném widgetu.

Na webu je automaticky povolena. Nyní jej musíme vypnout, protože není upravován. Chcete-li to provést, změňte stav.

Nyní přejděte do jeho nastavení kliknutím na ikonu „Přidat do editoru“.

Zde změňte požadovaný prvek, který chcete testovat. Změňme například barvu tlačítka. To se provádí jedním kliknutím. Stačí si vybrat jinou barvu tlačítka.

Klikněte na „Barva tlačítka“ a vyberte požadovanou barvu.

Poté widget uložte. V kroku 4 nemusíte nic měnit, abyste zachovali nastavení předchozího widgetu. Chcete-li to provést, jednoduše klikněte na tlačítko „Uložit“.

Nyní jste vytvořili 2 widgety s různými barvami tlačítek. Můžete přejít k vytvoření A/B testu. Pro pohodlí zbývá pouze změnit název ve druhém widgetu.

3. Vytvořte A/B test

Chcete-li vytvořit test, musíte přejít do nabídky „A/B testy“. A klikněte na tlačítko „Vytvořit test“.

Zde potřebujete:

Vyberte web - napište název testu

Vyberte typ testu

Ohledně typu testu. KEPLER LEADS má 2 odlišné typy A/B test: klasický a individuální. Rozdíl je v zobrazování widgetů vracejícím se návštěvníkům. Pokud chcete vracejícímu se návštěvníkovi zobrazit novou možnost widgetu, vyberte Klasický test. Pokud chcete, aby se vracejícímu se uživateli nezobrazovala další možnost widgetu (první zobrazená je zapamatována a vždy se spustí pouze tato, v závislosti na nastavení zobrazení), vyberte možnost Individuální.

Po výběru typu testu klikněte na tlačítko „Přidat“. Zůstane poslední krok- vyberte widgety pro test. Chcete-li to provést, klikněte na buňku „Widgety“ a vyberte je.

Po výběru widgetů zkontrolujte, zda jsou všechny aktivní. Pokud existují neaktivní widgety, můžete je povolit přímo zde.

Všechno! Test byl vytvořen. Všechny výsledky můžete vidět ve statistice testu. Chcete-li to provést, klikněte na ikonu „Zobrazit“ vpravo od názvu testu. Doporučuje spustit testy na celkové návštěvnosti z 1000 zobrazení (toto lze vidět ve sloupci Zobrazení). Poté se rozhodněte spustit další test.

Závěr

Vaše práce tím nekončí. Nyní musíme sledovat výsledky a po dosažení významných dat (doporučujeme 1000 a více návštěvníků) testovat další hypotézy. Mohou to být nadpisy, texty s výzvou k akci, hodnotové návrhy, obrázky atd. O dalších A/B testech si napíšeme v následujících článcích. Podělte se o své výsledky v komentářích.

Pomocí HTML můžete nastavit barvy všech odkazů na stránce a také změnit barvy jednotlivých odkazů.

Nastavte barvu všech odkazů na stránce

Barvy odkazu jsou nastaveny jako atributy značek . Atributy jsou volitelné a pokud nejsou specifikovány, použijí se výchozí hodnoty.

odkaz – Definuje barvu odkazů na webové stránce (výchozí barva je modrá, #0000FF).

vlink - barva již navštívených odkazů. Výchozí barva je fialová, #800080.

V HTML barvy jsou obvykle uvedeny čísly v hexadecimálním kódu ve tvaru #rrggbb, kde r, g a b označují červenou, zelenou a modrou složku. U každé barvy je specifikováno hexadecimální hodnotu 00 až FF, což odpovídá rozsahu 0 až 255 v desítkové soustavě. Tyto hodnoty jsou poté sloučeny do jediného čísla, kterému předchází symbol # (příklad 1).

Příklad 1: Nastavení barev odkazu

Obsah webu

Barva nemusí být zadána v hexadecimálním formátu, můžete také použít klíčová slova. V v tomto příkladu Barva pozadí webové stránky je nastavena na černou a barva odkazu na červenou.

Pro změnu barvy odkazů je výhodnější použít CSS. Chcete-li nastavit barvu pro všechny odkazy na webové stránce, aplikují se následující pseudotřídy a přidají se do selektoru A.

navštíveno — Styl navštíveného odkazu.

aktivní — Styl pro aktivní odkaz. Odkaz se stane aktivním, když na něj kliknete.

Příklad 2 ukazuje, jak změnit barvu odkazů na webové stránce pomocí stylů. K tomu použijeme vlastnost color style; nastavuje barvu konkrétního textu, v tomto případě odkazů.

Příklad 2. Barva odkazů určená pomocí stylů

Obsah webu

Nastavení barvy jednotlivých odkazů na stránce

Výše uvedený způsob nastavení barev funguje pro všechny odkazy na webové stránce. Někdy je však nutné použít různé barvy současně. Světlé barvy například pro tmavé oblasti webové stránky a tmavé barvy pro světlé oblasti. K tomu můžete použít i styly.

Chcete-li změnit barvu odkazu, použijte ve značce atribut style="color: #rrggbb". , kde #rrggbb je barva v šestnáctkové soustavě. Můžete také použít názvy barev nebo určit barvu ve formátu: rgb (132, 33, 65) . Desítkové hodnoty pro červenou, zelenou a modrou barvu jsou uvedeny v závorkách (příklad 3).

Spočítali to američtí vědci běžný uživatel stráví na jednom internetovém portálu přibližně 2 minuty. Z toho je pro nás – SEO specialisty rozhodujících posledních 4-7 sekund, i když to platí i pro designéry. Během této doby uživatel buď opustí webovou stránku, nebo klikne na jemu nabízenou reklamu. Výběr závisí na barvy webových stránek a reklamních bloků. „Nejhorší“ (nežádoucí a neklikatelná) možnost design webových stránek- to je design webu v šedých nebo červených tónech. Návštěvnost se přiblíží nule (míra prokliku), stejně jako účinnost reklamy umístěné na internetovém zdroji. Pohodlí a klid zažívají uživatelé, kteří jsou na místech, kde je dominantní bílá barva. Dobře klikají na bannery, kontextová reklama je zaujme pouze tehdy, když jsou nadpisy nečekaně (velmi) světlé a vysoce kontrastní a text a URL mají maximální velikost. Téměř totéž se děje se zelenými vzory.

Modrý design portálu je pro důvěru a žlutý je nejlepší pro kontext

Webové stránky s modrým designem a rozložením vzbuzují důvěru (ty, které se vám okamžitě vybaví, jsou: sociální média"VKontakte" a "Facebook"). Zajímavé je, že reklama zde funguje, pokud je umístěna na bílém pozadí a nadpisy jsou nastaveny v barvě o 2 odstíny tmavší (a opět to vyhovuje našemu oblíbenému „VKontakte“ a Facebooku). Většina vítězných barva designu webových stránek, podle britských psychologů, žlutá. Poměr návštěv a kliknutí je zde 1 ku 2,5, protože mnoho uživatelů internetu zobrazí 2-3 reklamy najednou. Ale bannery na všech žlutých stránkách jsou neúčinné. Další dobrou barvou pro design portálů, kde lidé klikají na reklamní bloky a bannery, je nekontrastní hnědá. Zde je výsledek u bannerové reklamy 1 kliknutí na 3 návštěvy, u kontextové reklamy je to přibližně 1 ku 2.

PS. Pojďme si to shrnout. První věc, která nás mate, je, že testované publikum samozřejmě není rusky mluvící, máme jinou mentalitu. Přesto obyvatelé SNS nejsou obyvateli Ameriky ani Evropy. Ruské webové stránky se vždy vyznačovaly duhovými barvami a odstíny v designu, na rozdíl od omezených evropských a amerických internetových zdrojů (výrazným příkladem je web Apple). Za druhé, v souvislosti s tím jsou naše reklamy „kliknuté“ (můj vlastní postřeh), protože jsou světlé a kontrastní. O žlutých webech a portálech můžete nesouhlasit - nevzbuzují důvěru mezi tuzemskými uživateli sítě (o velkém žlutém portálu ani neřeknu hned - ani jeden mě nenapadá), snad kromě malých dětí (i když tohle je moje názor)! Obecně budete pravděpodobně muset provést malý test, o kterém budu hovořit v části „experimenty“.

Práce s barvami je nejdůležitější dovedností každého webdesignéra. Jeho správné používání může webu přinést úspěch a i malá chyba při vytváření sortimentu může v budoucnu způsobit spoustu problémů. V tomto článku se podíváme na 10 chyb, kterých se návrháři při práci s barvou na webu dopouštějí, a řekneme si, jak se jim vyhnout.

Neochota zavádět psychologické techniky

Například oranžová je skvělá barva, která motivuje k nákupu. Perfektně zprostředkovává výzvy k akci, vhodné pro internetové obchody.

Zelená symbolizuje důvěru, a co může být důležitější než důvěra, pokud jde o jídlo?

1. Slepá imitace

I když se vám určitá stránka opravdu líbí, dobře si rozmyslete, než si objednáte „naprosto to samé, ale o mých produktech“.

2. Nedostatečná výzva k akci

3. Přílišná barevná paleta webu

Při výběru barevné palety doporučujeme použít alespoň barevné kolečko. Při výběru barev s jeho pomocí musíte mít na paměti, že sousední barvy a ty, které se nacházejí naproti nim, se k sobě hodí.


Doporučujeme také používat specializované stránky. Zde si můžete vytvořit svůj vlastní sortiment nebo použít některý z již připravených.

V prvním příkladu jsou pro návrh textu použity 3 barvy, ve druhém pouze dvě. Právě druhá možnost vypadá lépe a text na ní se lépe čte.

4. Různé barvy pro podobné prvky

Zde je příklad dvou tlačítek se stejným účelem na stejném webu. Špatné rozhodnutí.

5. Stejné barvy pro různé typy prvků

6. Nedostatek kontrastu

7. Nestandardní barva odkazu

• Odkazy by měly být viditelné, aniž by se nad nimi nacházelo.


• Odkaz by měl po najetí myší změnit barvu.


• Navštívené odkazy musí být označeny jinou barvou, což je zvláště důležité, pokud mluvíme o informačním webu s mnoha publikacemi.

8. Vybledlý minimalismus není pro impulzivní prodej.

Tyto dva módní trendy jsou nejčastěji neslučitelné. Nemůžete prodávat na základě emocí, pokud vaše stránky při prohlížení nevytvářejí právě tyto emoce.

To ale neznamená, že emocionální vstupní stránka, která prodává, by měla zářit všemi barvami duhy.

9. Nevhodná černá

Naše zvyky, stejně jako metody obchodníků, migrují ze supermarketů na internet. Například webová stránka klenotnické společnosti, vyrobená v černé barvě, vypadá elegantně a draze:


Pokud poskytujete služby v segmentu nízkých cen nebo prodáváte levné zboží, neměli byste na svých webových stránkách používat hodně černé barvy jako pozadí. Dojmy návštěvníků na vašem webu nebudou odpovídat vaší prodejní nabídce.

10. Omezení barev pro návrháře

Vaše vize může být tak krásná, jak chcete, ale nechte designéra, aby nabídl svou vlastní. Pokud vám návrhář ani po několika pokusech nemůže ukázat něco, co se vám líbí, teprve pak mu nastavte přísné hranice ve výběru barev.

Další výjimka: pokud jste si jisti, že je vaše možnost barevného provedení dobře promyšlená a můžete si tuto volbu sami zdůvodnit. Zákazníci zpravidla neberou v potaz to, co zohledňuje designér – čitelnost textu, dostatečný jas tlačítek a optimální množství barvy.

závěry

Rozmazali jsme například první obrazovku Aviasales.ru - pozornost poutají bloky prvků 1, 2 a 3. Po přečtení nadpisu, tzn. Když uživatel vytvoří správná očekávání, (pamatujte na pravidla kontrastu) se podívá na nezbytné prvky pro výběr parametrů a výzvu k akci.


A podívejte se, jak jasně vyniká hlavní akce na webu ostrovok.ru na rozostřeném pozadí.


Pokud vaše rozhraní projdou takovými testy na výbornou, pak by další vylepšení webu měla být provedena na základě pochopení psychologie uživatele, tzn. analyzovat zpětnou vazbu od skutečných uživatelů. Pomocí otázek jako: „Kde jste se podívali jako první: které 3 prvky webu a v jakém pořadí? Kam chcete kliknout jako první a proč?“ v AskUsers můžete pochopit nejen to, jak je distribuována pozornost uživatelů, ale také to, proč se uživatelé dívají na určité prvky. Tato informace pomůže identifikovat řadu problémů v aktuálním rozhraní a najít jejich optimální řešení.

Pamatujte, že forma je podřízena obsahu. Barevný design slouží jako nástroj, jak zaměřit pozornost uživatele na informace, které jsou důležité pro uživatele a vlastníka webu.