Farby na klikanie. Skript na výber optimálnej farby pre reklamy Ryana. O koľko môžete zvýšiť konverzie pomocou farieb

Aká farba tlačidla má najvyššiu konverziu, je stará filozofická otázka, na ktorú mnohí poznajú odpoveď. "Červená" - odpovedia začínajúci obchodníci. "Kontrastné" - odpovedia skúsení obchodníci. Na túto tému sme otestovali 21 666 používateľov. A prišli k celkom zaujímavým záverom.

Na začiatok článku treba pridať intrigy a znepokojujúce fakty, aby ste upútali pozornosť. Na základe tejto rady môžem povedať, že v praxi sme sa dočkali zvýšenia konverzie až o 65 % jednoduchou zmenou farby tlačidla. V tomto článku si povieme o výsledkoch a o tom, ako na to.

O koľko môžete zvýšiť konverzie pomocou farieb?

Nepoviem vám, že sme vynašli magickú pilulku na riadenie konverzií. V prípadoch zvýšenej konverzie som dospel k jednoduchému záveru. Neexistujú žiadne stopercentné vyhlásenia, ktoré budú fungovať vždy a pre každého. Aj magické pilulky. Predtým sme písali o tom, ako slovo „zadarmo“ v niektorých prípadoch znižuje konverziu. Čo môžeme povedať o iných „stopercentných“ pravdách.

O koľko teda môžete zvýšiť konverzie jednoduchou zmenou farieb tlačidiel?

Dosiahli sme až 65% nárast konverzného pomeru. 65 % bolo najvyššie skóre v testoch. Priemerná hodnota bola na úrovni 11 %. Ale aj takýto nárast konverzie je veľmi dobrý výsledok. Vzhľadom na to, že to možno dosiahnuť zmenou farby tlačidla.

Červená je farba víťazov

Mnohé odborné testy hovoria, že najviac má tlačidlo červenej farby vysoká konverzia. prečo? Vieme, že každá farba má svoje vlastné asociácie a vyvoláva určité emócie. Červená znamená zastavenie, nebezpečenstvo a vášeň. A vo väčšine prípadov (ako sa verí) vedie k lepším výsledkom v internetovom marketingu.

Nižšie je uvedený algoritmus na vytváranie testov A / B:

1. Vytvorte widget v konštruktore. Trvá 5 minút.
2. Skopírujte ho a vykonajte zmeny pre test. Trvá 1 minútu.
3. Vytvorte A/B test a vyberte tieto miniaplikácie. Trvá 1 minútu.

1. Vytvorenie widgetu v konštruktore

Ak chcete vytvoriť widget, musíte byť zaregistrovaný v konštruktore.

Proces vytvárania pozostáva z 3 krokov:

1. Vyberte šablónu miniaplikácie, ktorú budete používať.
2. Upravte widget: - napíšte požadovaný text - zmeňte farbu a v prípade potreby nahrajte obrázok
3. Vyberte nastavenia zobrazenia: - kedy sa má widget zobraziť (podľa času, pri odchode, pri posúvaní stránky atď.) - na akých zariadeniach (počítač, mobil, tablet) - čo robiť po konverzii (poďakovanie, presmerovanie na odkaz alebo jednoducho zatvorte miniaplikáciu)

Môžete si pozrieť toto video o vytváraní miniaplikácie. Každá fáza je tu podrobne diskutovaná. Nájdete tu textové pokyny na vytvorenie miniaplikácie.

Chcem poznamenať, že v konštruktore je oveľa viac možností nastavení. Napríklad zobrazenie pri prezeraní určitého počtu stránok, podľa dňa v týždni, podľa zdroja sprostredkovania, frekvencie zobrazovania a oveľa viac. Najprv vám však odporúčam použiť základné nastavenia a potom experimentovať s ďalšími.

2. Skopírujte miniaplikáciu a vykonajte zmeny pre test

Po vytvorení miniaplikácie si musíte vytvoriť jej kópiu. Ak chcete vykonať zmeny v novom miniaplikácii a vložiť ho do testu A / B. Ak to chcete urobiť, kliknite na ikonu "Kopírovať" vo vytvorenom miniaplikácii.

Na stránke je automaticky povolená. Teraz ho musíme vypnúť, keďže nie je upravovaný. Ak to chcete urobiť, zmeňte stav.

Teraz prejdite na jeho nastavenia kliknutím na ikonu "Do editora".

Tu zmeňte požadovaný prvok, ktorý chcete testovať. Napríklad zmeňme farbu tlačidla. To sa deje jedným kliknutím. Stačí si vybrať inú farbu gombíka.

Kliknite na "Farba tlačidla" a vyberte požadovanú farbu.

Potom widget uložíme. V 4. kroku nemôžete nič zmeniť, aby ste opustili nastavenia predchádzajúceho widgetu. Ak to chcete urobiť, jednoducho kliknite na tlačidlo "Uložiť".

Teraz máte 2 miniaplikácie s rôznymi farbami tlačidiel. Môžete prejsť na vytvorenie testu A / B. Pre pohodlie zostáva iba zmeniť názov v druhej miniaplikácii.

3. Vytvorte A/B test

Ak chcete vytvoriť test, musíte prejsť do ponuky "A / B testy". A kliknite na tlačidlo „Vytvoriť test“.

Tu potrebujete:

Vyberte si stránku - napíšte názov testu

Vyberte typ testu

Čo sa týka typu testu. V KEPLER LEADS sú 2 odlišné typy A/B test: klasický a individuálny. Rozdiel je v zobrazovaní widgetov vracajúcim sa návštevníkom. Ak chcete, aby vracajúci sa návštevník videl novú variáciu miniaplikácie, vyberte Klasický test. Ak nechcete, aby sa vracajúcemu sa používateľovi zobrazovala iná verzia miniaplikácie (zapamätá sa prvá zobrazená verzia a vždy funguje iba tá, v závislosti od nastavení zobrazenia), vyberte možnosť Individuálne.

Po výbere typu testu kliknite na tlačidlo „Pridať“. zostane posledný krok- vyberte widgety na test. Ak to chcete urobiť, kliknite na bunku "Widgety" a vyberte ich.

Po výbere miniaplikácií skontrolujte, či sú všetky aktívne. Ak existujú neaktívne miniaplikácie, môžete ich povoliť priamo tu.

Všetky! Test bol vytvorený. Všetky výsledky si môžete pozrieť v štatistike testu. Ak to chcete urobiť, kliknite na ikonu „Zobraziť“ napravo od názvu testu. Odporúča testovanie na celkovej návštevnosti z 1 000 zobrazení (môžete to vidieť v stĺpci Zobrazenia). Potom sa rozhodnite spustiť ďalší test.

Záver

Vaša práca tam nekončí. Teraz musíme sledovať výsledky a po dosiahnutí významných údajov (odporúčame od 1000 návštevníkov) testovať ďalšie hypotézy. Môžu to byť nadpisy, texty s výzvou na akciu, hodnotové návrhy, obrázky atď. O ďalších A/B testoch si napíšeme v ďalších článkoch. Povedzte nám o svojich výsledkoch v komentároch.

Pomocou HTML môžete nastaviť farby pre všetky odkazy na stránke, ako aj zmeniť farby pre jednotlivé odkazy.

Nastavte farbu všetkých odkazov na stránke

Farby odkazu sú nastavené ako atribúty tagov . Atribúty sú voliteľné a ak nie sú špecifikované, použijú sa predvolené hodnoty.

link – určuje farbu odkazov na webovej stránke (predvolená farba je modrá, #0000FF).

vlink - farba už navštívených odkazov. Predvolená farba je fialová, #800080.

AT HTML farby sú zvyčajne špecifikované ako hexadecimálne číslice v tvare #rrggbb , kde r, g a b označujú červenú, zelenú a modrú zložku. Každá farba má priradenú hexadecimálnu hodnotu od 00 do FF, čo zodpovedá rozsahu 0 až 255 v desiatkovej sústave. Tieto hodnoty sa potom spoja do jedného čísla, ktorému predchádza symbol # (príklad 1).

Príklad 1: Nastavenie farieb odkazu

Obsah stránky

Farba nemusí byť uvedená v hexadecimálnom formáte, môžete použiť aj Kľúčové slová. AT tento príklad Farba pozadia webovej stránky je nastavená na čiernu a farba odkazu je nastavená na červenú.

Na zmenu farby odkazov je pohodlnejšie použiť CSS. Na nastavenie farby pre všetky odkazy na webovej stránke slúžia nasledujúce pseudotriedy, ktoré sa pridávajú do selektora A .

navštívené – štýl navštíveného odkazu.

aktívny – Štýl pre aktívny odkaz. Odkaz sa stane aktívnym, keď naň kliknete.

Príklad 2 ukazuje, ako zmeniť farbu odkazov na webovej stránke pomocou štýlov. Na to používame vlastnosť štýlu color , nastavuje farbu určitého textu, v tomto prípade odkazov.

Príklad 2. Farba odkazov nastavená pomocou štýlov

Obsah stránky

Nastavte farbu jednotlivých odkazov na stránke

Vyššie uvedený spôsob nastavenia farieb funguje pre všetky odkazy na webovej stránke. Niekedy je však potrebné použiť rôzne farby súčasne. Svetlé farby napríklad pre tmavé oblasti webovej stránky a tmavé farby pre svetlé. Na to môžete použiť aj štýly.

Ak chcete zmeniť farbu odkazu, použite atribút style="color: #rrggbb" v značke , kde #rrggbb je hexadecimálna farba. Môžete tiež použiť názvy farieb alebo určiť farbu vo formáte: rgb (132, 33, 65) . V zátvorkách sú desatinné hodnoty červenej, zelenej a modrej (príklad 3).

V tomto príklade sú tri rôzne cesty nastavenie farieb so štýlmi.

Netreba sa snažiť uhádnuť farebnú schému reklám, na ktoré návštevníci kliknú s väčšou pravdepodobnosťou. Musíte experimentovať so zobrazovaním reklám v rôznych farbách. A na základe jeho výsledkov sa dozvedáme preferencie návštevníkov vašej stránky. Avšak za oknami 21. storočia. Preto napíšeme malý scenár, ktorý všetko urobí za nás.

Aké farby zvoliť pre inzeráty

V mojom experimente som sa rozhodol pre tri základné farby: modrá, červená a zelená. Vzal každý z nich s iným stupňom jasu. A pridal som k nim ešte jednu farbu - farbu odkazov na mojej stránke. Na mojom experimente sa teda zúčastní sedem farieb.

Skript na striedanie farieb reklamy

Ako základ beriem skript na zobrazovanie reklám YAN (Yandex Advertising Network), ktorý mi dal CSP Profit-Partner. Pridajme k tomu automatickú zmenu farby. Vytvorme jedinečný štítok pre každú z farieb. Aby ste v budúcnosti pomocou týchto sekcií mohli analyzovať, ktorá farba reklám na vašej stránke je pre návštevníkov atraktívnejšia.

Spustíme skript a začneme zbierať dáta. Plátky vytvorené naším skriptom sa objavia v štatistikách.

Ako vykonať experiment s výberom reklám s farebným dizajnom

Experiment by sa mal vykonávať nepretržite najmenej týždeň. Zohľadniť všetky časové závislosti a vlastnosti víkendov a pracovných dní. Je dôležité, aby každá farebná schéma bola zobrazená aspoň 1000-krát.

Závery na základe výsledkov experimentu, ktorá farba je lepšia

Ak si vyberiete z troch základných farieb, potom na mojej stránke nie je jasný vodca. Rozdiel niekoľkých percent môže byť spôsobený chybou. Všeobecný trend sa však zhoduje s odporúčaniami CSC špecialistov Profit-Partner – čím viac sa dá kliknúť na červenú.

Ak sa pozrieme na všetkých sedem farieb podrobne, potom nasledujúca skupina spôsobuje preferencie medzi návštevníkmi: tmavo červená (#990000), svetlozelená (#00CC00) a tmavomodrá (#000099).

Odporúčam vám, aby ste sa nepozerali na moje štatistiky, ale aby ste vykonali vlastný experiment s výberom farieb pre reklamy v reklamnej sieti Yandex.
Ak máte niekoľko stránok, musíte pre každú stránku vykonať vlastný experiment.
Ak ste zmenili dizajn, skúste to znova.
Ak máte niekoľko reklamných jednotiek ako ja, musíte pre každú reklamnú jednotku vykonať aj vlastný experiment. Budete prekvapení, ale na mojej stránke sa preferencie používateľov líšia v reklamných jednotkách v strede a na konci článku.
Experiment sa musí vykonávať nepretržite najmenej 7 dní.

Pokračujem v uverejňovaní zaujímavých a podľa mňa aj užitočných správ z veľkého a rozľahlého sveta SEO. Dnes si povieme niečo o farbách dizajnu webu... Áno, áno, reč je o farebných schémach. Nuž, začnime. Farba dizajnu webových stránok ovplyvňuje klikateľnosť reklamy, domnievajú sa psychológovia z Oxfordskej univerzity v USA.

Behaviorálne: vplyv farby stránky na mieru prekliku reklamy na portáloch

Americkí vedci to vypočítali bežný používateľ strávi na jednom internetovom portáli približne 2 minúty. Z toho je pre nás – seo špecialistov rozhodujúcich posledných 4-7 sekúnd, aj keď to platí aj pre dizajnérov. počas tohto obdobia používateľ buď opustí webovú stránku, alebo klikne na reklamu, ktorá je mu ponúknutá. Výber závisí od farby stránok a reklamných blokov. Najviac „zlá“ (nežiaduca a neklikateľná) možnosť rozloženie dizajnu stránky- ide o dizajn stránky v sivej alebo červenej farbe. Návštevnosť sa priblíži k nule (miera prekliku), účinnosť reklamy umiestnenej na internetovom zdroji tiež. Pohodlie a pokoj zažívajú používatelia, ktorí sú na stránkach, kde dominuje biela. Dobre sa im kliká na bannery, kontextová reklama ich zaujme len vtedy, ak sú nadpisy nečakane (veľmi) svetlé a kontrastné a text a URL majú maximálnu veľkosť. Takmer to isté sa deje so zelenými vzormi.

Modrý dizajn portálu je dôvera a žltý je najlepší pre kontext

Stránky s modrým dizajnom a rozložením vzbudzujú dôveru (ihneď mi napadnú sociálne siete"VKontakte" a "Facebook"). Zaujímavé je, že reklama tu funguje, ak je umiestnená na bielom pozadí a titulky sú farebne nastavené o 2 tóny tmavšie (a opäť to sedí na náš obľúbený VKontakte a Facebook). Najviac víťazné farba dizajnu webovej stránky, podľa britských psychológov, žltá. Pomer návštev ku kliknutiam je tu 1 ku 2,5, keďže veľa užívateľov internetu si pozrie 2-3 inzeráty naraz. Bannery na všetkých žltých stránkach sú však neúčinné. Ďalšou dobrou farbou na navrhovanie portálov, kde sa kliká na reklamné jednotky a bannery, je nekontrastná hnedá. Tu je výsledok pre bannerovú reklamu 1 klik na 3 návštevy, pre kontextovú reklamu je to približne 1 až 2.

PS. Poďme si to zhrnúť. Po prvé, je trápne, že, samozrejme, testované publikum nie je rusky hovoriace, máme inú mentalitu. Obyvatelia SNŠ však nie sú obyvateľmi Ameriky ani Európy. Ruské stránky sa vždy vyznačovali dúhovými farbami a odtieňmi v dizajne, na rozdiel od obmedzených európskych a amerických internetových zdrojov (stránka Apple je živým príkladom). Po druhé, v súvislosti s tým „klikajú“ aj na reklamu u nás (vlastné pozorovanie) svetlé a kontrastné. So žltými stránkami a portálmi sa dá nesúhlasiť - nevzbudzujú dôveru medzi domácimi užívateľmi siete (o veľkom žltom portáli ani nepoviem hneď - napadá ma nejeden), okrem malých detí (aj keď toto je môj názor)! Vo všeobecnosti bude pravdepodobne potrebné vykonať malý test, o ktorom budem hovoriť v časti „experimenty“.

Práca s farbami je nevyhnutnou zručnosťou pre každého webového dizajnéra. Jeho správne používanie môže priniesť na stránku úspech a aj malá chyba pri vytváraní gama prinesie v budúcnosti veľa problémov. V tomto článku sa pozrieme na 10 chýb, ktorých sa dizajnéri dopúšťajú pri práci s farbami na webe, a povieme vám, ako sa im vyhnúť.

Neochota zaviesť psychologické techniky

Skvelým nákupným motivátorom je napríklad pomaranč. Dokonale prenáša výzvy na akciu, vhodné pre internetové obchody.

Zelená symbolizuje dôveru a čo môže byť dôležitejšie ako dôvera, pokiaľ ide o jedlo?

1. Slepá imitácia

Aj keď sa vám nejaká stránka naozaj páči, dobre si rozmyslite, či si objednáte „presne to isté, ale o mojich produktoch“.

2. Stlmte výzvu na akciu

3. Nadmerná farebná paleta stránok

Pri výbere farebnej palety vám odporúčame použiť aspoň farebné koliesko. Pri výbere farieb s ním musíte pamätať na to, že susedné farby a tie, ktoré sú opačné, sú navzájom dobre kombinované.


Odporúčame tiež použiť špecializované stránky. Tu si môžete vytvoriť svoj vlastný sortiment alebo použiť jeden z hotových.

V prvom príklade sú na ozdobenie textu použité 3 farby, v druhom iba dve. Práve druhá možnosť vyzerá lepšie a text na nej sa lepšie číta.

4. Iná farba pre rovnaký typ prvkov

Napríklad dve tlačidlá s rovnakým účelom na tej istej stránke. Zlé rozhodnutie.

5. Rovnaké farby pre rôzne typy prvkov

6. Nedostatok kontrastu

7. Neštandardná farba odkazu

• Odkazy by mali byť viditeľné bez toho, aby ste na ne umiestnili kurzor myši.


• Pri umiestnení kurzora myši by mal odkaz zmeniť farbu.


• Navštívené odkazy musia byť označené inou farbou, čo je obzvlášť dôležité, ak ide o informačnú stránku s množstvom publikácií.

8. Vyblednutý minimalizmus nie je na impulzívny predaj

Tieto dva módne trendy sú najčastejšie nezlučiteľné. Nemôžete predávať na základe emócií, ak vaša stránka nevyvoláva rovnaké emócie pri prezeraní.

To však neznamená, že predajná emocionálna vstupná stránka by mala žiariť všetkými farbami dúhy.

9. Nevhodná čierna

Naše zvyky, ako aj metódy obchodníkov, migrujú zo supermarketov na internet, napríklad webová stránka klenotníckej spoločnosti, vyrobená v čiernej farbe, vyzerá elegantne a draho:


Ak poskytujete služby v nízkom cenovom segmente alebo predávate lacný tovar, nemali by ste na stránke používať veľa čiernej ako pozadie. Dojmy návštevníkov zo stránky nebudú zodpovedať vašej predajnej ponuke.

10. Farebné obmedzenia pre dizajnéra

Vaša vízia môže byť taká krásna, ako chcete, ale nechajte dizajnéra, aby ponúkol svoju vlastnú. Ak po niekoľkých pokusoch dizajnér stále nedokáže ukázať niečo, čo sa vám páči, potom sa oplatí nastaviť mu pevný rámec pri výbere farieb.

Ďalšia výnimka: ak ste si istí, že vaša farebná schéma je dobre premyslená a môžete si túto voľbu zdôvodniť. Zákazníci spravidla neberú do úvahy to, čo zohľadňuje dizajnér – čitateľnosť textu, dostatočný jas tlačidiel a optimálne množstvo farby.

závery

Napríklad sme rozmazali prvú obrazovku Aviasales.ru - bloky prvkov 1, 2 a 3 priťahujú pozornosť. vytvorenie správnych očakávaní pre používateľa, (pripomeňme si pravidlá kontrastu) sa pozrie na potrebné prvky na výber parametrov a výzvu na akciu.


A pozrite sa, ako jasne vyniká hlavná akcia na stránke ostrovok.ru na rozmazanom pozadí.


Ak vaše rozhrania úspešne prejdú takýmito testami, ďalšie vylepšenia stránky by sa mali vykonať na základe pochopenia psychológie používateľov, t.j. analýzu spätnej väzby od skutočných používateľov. S otázkami ako: „Kde ste sa pozreli ako prvé: ktoré 3 prvky stránky a v akom poradí? Kde chcete kliknúť ako prvé a prečo?“ v AskUsers môžete pochopiť nielen to, ako je rozložená pozornosť používateľov, ale aj to, prečo sa používatelia pozerajú na určité prvky. Táto informácia pomôže identifikovať množstvo problémov v aktuálnom rozhraní a nájsť najlepšie možnosti ich riešenia.

Pamätajte, že forma nasleduje po obsahu. Farebný dizajn slúži ako nástroj na zameranie pozornosti používateľa na informácie, ktoré sú dôležité pre používateľa a vlastníka stránky.