Tıklana bilən rənglər. Rayan reklamları üçün optimal rəng seçmək üçün skript. Rənglə çevrilmələri nə qədər artıra bilərsiniz

Hansı düymə rənginin ən yüksək çevrilməsi var, çoxlarının cavabını bildiyi köhnə fəlsəfi sualdır. "Qırmızı" - təcrübəsiz marketoloqlar cavab verəcəklər. "Təzadlı" - təcrübəli marketoloqlar cavab verəcəklər. Bu mövzuda 21,666 istifadəçini sınaqdan keçirdik. Və olduqca maraqlı nəticələrə gəldilər.

Yazının əvvəlində diqqəti cəlb etmək üçün intriqa və narahatedici faktlar əlavə etməlisiniz. Bu məsləhətə əsaslanaraq deyə bilərəm ki, praktikada düymənin rənginin sadə bir dəyişməsi ilə konversiyada 65%-ə qədər artım əldə etmişik. Bu yazıda nəticələr və bunu necə edəcəyimiz barədə danışacağıq.

Rənglə dönüşümləri nə qədər artıra bilərsiniz?

Konversiyanı idarə etmək üçün sehrli bir həb icad etdiyimizi sizə deməyəcəyəm. Artan dönüşüm vəziyyətlərində sadə bir nəticəyə gəldim. Həmişə və hər kəs üçün işləyəcək yüz faiz ifadələr mövcud deyil. Sehrli həblər də. Əvvəllər “Pulsuz” sözünün bəzi hallarda dönüşümü necə aşağı salması haqqında yazmışdıq. Başqa “yüz faiz” həqiqətləri haqqında nə deyə bilərik.

Beləliklə, sadəcə düymələrin rənglərini dəyişdirməklə dönüşümləri nə qədər artırmaq olar?

65%-ə qədər çevrilmə nisbətində artım əldə etdik. Sınaqlarda ən yüksək nəticə 65% olub. Orta qiymət 11% səviyyəsində olub. Amma hətta çevrilmənin belə artması çox yaxşı nəticədir. Nəzərə alsaq ki, buna düymənin rəngini dəyişdirməklə nail olmaq olar.

Qırmızı rəng qaliblərin rəngidir

Bir çox ekspert testləri qırmızı rəngli düymənin ən çox olduğunu söyləyir yüksək dönüşüm. Niyə? Biz bilirik ki, hər rəngin öz assosiasiyası var və müəyyən emosiyalar doğurur. Qırmızı dayanmaq, təhlükə və ehtiras deməkdir. Və əksər hallarda (inanıldığı kimi) gətirib çıxarır ən yaxşı nəticələr internet marketinqində.

Aşağıda A / B testlərinin yaradılması alqoritmi verilmişdir:

1. Konstruktorda vidjet yaradın. 5 dəqiqə çəkir.
2. Onu kopyalayın və test üçün dəyişikliklər edin. 1 dəqiqə çəkir.
3. A/B testi yaradın və bu vidjetləri seçin. 1 dəqiqə çəkir.

1. Konstruktorda vidcetin yaradılması

Vidcet yaratmaq üçün konstruktorda qeydiyyatdan keçməlisiniz.

Yaratma prosesi 3 mərhələdən ibarətdir:

1. İstifadə edəcəyiniz widget şablonunu seçin.
2. Vidceti redaktə edin: - istədiyiniz mətni yazın - lazım olduqda rəngi dəyişdirin və şəkil yükləyin
3. Ekran parametrlərini seçin: - vidceti nə vaxt göstərməli (vaxt üzrə, çıxdıqda, səhifəni sürüşdürərkən və s.) - hansı cihazlarda (kompüter, mobil, planşet) - çevrildikdən sonra nə etməli (təşəkkür edin, bir səhifəyə yönləndirin. link və ya sadəcə widgetı bağlayın)

Widget yaratmaq haqqında bu videoya baxa bilərsiniz. Burada hər bir mərhələ ətraflı müzakirə olunur. Widget yaratmaq üçün mətn təlimatları yerləşir.

Qeyd etmək istəyirəm ki, konstruktorda parametrlər üçün daha çox seçim var. Məsələn, müəyyən sayda səhifəyə baxarkən, həftənin gününə, istinad mənbəyinə, ekran tezliyinə və s. Ancaq əvvəlcə əsas parametrlərdən istifadə etməyi, sonra isə əlavə parametrlərlə sınaqdan keçirməyi məsləhət görürəm.

2. Vidceti kopyalayın və test üçün dəyişikliklər edin

Vidcet yaratdıqdan sonra onun surətini çıxarmalısınız. Yeni vidcetə dəyişiklik etmək və onu A / B testinə qoymaq üçün. Bunun üçün yaradılmış vidcetdə "Kopyala" işarəsini sıxırsınız.

Saytda avtomatik olaraq aktivləşdirilir. İndi redaktə olunmadığı üçün onu söndürməliyik. Bunu etmək üçün statusu dəyişdirin.

İndi "Redaktora" işarəsini vuraraq onun parametrlərinə keçin.

Burada sınamaq istədiyiniz elementi dəyişdirin. Məsələn, düymənin rəngini dəyişək. Bu bir kliklə edilir. Sadəcə fərqli bir düymə rəngi seçməlisiniz.

"Düymə Rəngi" üzərinə klikləyin və istədiyinizi seçin.

Bundan sonra biz widgetı saxlayırıq. 4-cü addımda əvvəlki vidcetin parametrlərini tərk etmək üçün heç nə dəyişə bilməzsiniz. Bunu etmək üçün "Saxla" düyməsini sıxmağınız kifayətdir.

İndi müxtəlif düymə rəngləri olan 2 vidcetiniz var. A / B testi yaratmağa davam edə bilərsiniz. Rahatlıq üçün yalnız ikinci vidjetdə adı dəyişdirmək qalır.

3. A/B testi yaradın

Test yaratmaq üçün "A / B testləri" menyusuna keçməlisiniz. Və "Test yarat" düyməsini basın.

Burada sizə lazımdır:

Bir sayt seçin - testin adını yazın

Test növünü seçin

Testin növü ilə bağlı. KEPLER LEEDS-də 2 var fərqli növlər A/B testi: Klassik və Fərdi. Fərq geri qayıdan ziyarətçilərə vidjetlərin göstərilməsindədir. Geri qayıdan ziyarətçinin vidcetin yeni variantını görməsini istəyirsinizsə, Klassik Test seçin. Əgər siz geri qayıdan istifadəçinin vidcetin başqa versiyasını görməməsini istəyirsinizsə (göstərilən birinci versiya yadda qalır və yalnız ekran parametrlərindən asılı olaraq həmişə işləyir), onda Fərdi seçin.

Test növünü seçdikdən sonra "Əlavə et" düyməsini basın. qalacaq son addım- test üçün vidjetləri seçin. Bunu etmək üçün "Vidjetlər" xanasına klikləyin və onları seçin.

Vidcetləri seçdikdən sonra onların hamısının aktiv olub olmadığını yoxlayın. Əgər qeyri-aktiv vidjetlər varsa, onları burada aktivləşdirə bilərsiniz.

Hamısı! Test yaradılıb. Bütün nəticələri test statistikasında görə bilərsiniz. Bunu etmək üçün test adının sağ tərəfindəki "Görünüş" işarəsinə klikləyin. 1000 təəssüratdan ümumi trafik üzrə test etməyi tövsiyə edir (bunu Baxışlar sütununda görmək olar). Bundan sonra növbəti testi keçirməyə qərar verin.

Nəticə

İşiniz bununla bitmir. İndi biz nəticələri izləməliyik və əhəmiyyətli məlumatlara çatdıqdan sonra (1000 ziyarətçidən tövsiyə edirik) digər fərziyyələri sınaqdan keçirməliyik. Bunlar başlıqlar, hərəkətə çağırış mətnləri, dəyər təklifləri, şəkillər və s. ola bilər. Digər A/B testləri haqqında gələcək məqalələrdə yazacağıq. Nəticələriniz barədə şərhlərdə bizə məlumat verin.

HTML-dən istifadə edərək, siz səhifədəki bütün keçidlər üçün rəngləri təyin edə, həmçinin fərdi keçidlərin rənglərini dəyişə bilərsiniz.

Səhifədəki bütün keçidlərin rəngini təyin edin

Link rəngləri etiket atributları kimi təyin edilir . Atributlar isteğe bağlıdır və göstərilməyibsə, standart dəyərlər istifadə olunur.

link - veb-səhifədəki keçidlərin rəngini müəyyən edir (standart rəng mavidir, #0000FF).

vlink - artıq ziyarət edilmiş bağlantıların rəngi. Defolt rəng bənövşəyidir, #800080.

IN HTML rəngləri adətən #rrggbb formasında onaltılıq rəqəmlər kimi göstərilir, burada r, g və b müvafiq olaraq qırmızı, yaşıl və mavi komponentləri bildirir. Hər rəng üçün verilir hex dəyəri 00-dan FF-ə qədər, bu, onluqda 0-dan 255-ə qədər olan diapazona uyğundur. Bu dəyərlər daha sonra # simvolundan əvvəl bir ədədə birləşdirilir (Nümunə 1).

Nümunə 1: Link Rənglərinin qurulması

Sayt məzmunu

Rəngin onaltılıq formatda göstərilməsinə ehtiyac yoxdur, siz də istifadə edə bilərsiniz açar sözlər. IN bu misal Veb səhifənin fon rəngi qara, keçid rəngi isə qırmızı olaraq təyin edilib.

Bağlantıların rəngini dəyişdirmək üçün CSS-dən istifadə etmək daha rahatdır. Veb səhifədəki bütün keçidlərin rəngini təyin etmək üçün A selektoruna əlavə olunan aşağıdakı psevdo-siniflərdən istifadə olunur.

ziyarət edildi - Ziyarət edilən link üçün üslub.

aktiv - Aktiv keçid üçün üslub. Link üzərinə kliklədikdə aktiv olur.

Nümunə 2 üslublardan istifadə edərək veb-səhifədəki keçidlərin rəngini necə dəyişməyi göstərir. Bunu etmək üçün biz stil xüsusiyyətindən istifadə edirik rəng , o, müəyyən mətnin rəngini təyin edir, bu halda bağlantılar.

Nümunə 2. Üslublar vasitəsilə təyin olunan keçidlərin rəngi

Sayt məzmunu

Səhifədə fərdi keçidlərin rəngini təyin edin

Rəngləri təyin etmək üçün yuxarıda göstərilən üsul veb səhifədəki bütün keçidlər üçün işləyir. Ancaq bəzən eyni anda müxtəlif rənglərdən istifadə etmək lazım gəlir. Açıq rənglər, məsələn, veb səhifənin qaranlıq sahələri üçün və açıq rənglər üçün müvafiq olaraq tünd rənglər. Bunun üçün üslublardan da istifadə edə bilərsiniz.

Linkin rəngini dəyişmək üçün etiketdəki style="color: #rrggbb" atributundan istifadə edin , burada #rrggbb onaltılıq rəngdir. Siz həmçinin rəng adlarından istifadə edə və ya formatda rəng təyin edə bilərsiniz: rgb (132, 33, 65) . Mötərizədə qırmızı, yaşıl və mavinin onluq dəyərləri verilmişdir (nümunə 3).

Amerika alimləri bunu hesablayıblar adi istifadəçi bir internet portalında təxminən 2 dəqiqə sərf edir. Bunlardan bizim - seo mütəxəssisləri üçün son 4-7 saniyə həlledicidir, baxmayaraq ki, bu, dizaynerlərə də aiddir. məhz bu müddət ərzində istifadəçi ya saytı tərk edir, ya da ona təklif olunan reklama klik edir. Seçim ondan asılıdır sayt və reklam vahidinin rəngləri. Ən "pis" (arzuolunmaz və kliklənməyən) seçim saytın dizayn tərtibatı- bu, saytı boz və ya qırmızı rənglərdə dizayn etməkdir. Trafik sıfıra yaxınlaşacaq (klikləmə dərəcəsi), İnternet resursunda yerləşdirilən reklamın effektivliyi də. Rahatlıq və əmin-amanlıq ağ rəngin üstünlük təşkil etdiyi saytlarda olan istifadəçilər tərəfindən yaşanır. Bannerləri yaxşı klikləyirlər, kontekstli reklam onları yalnız başlıqlar gözlənilmədən (çox) parlaq və yüksək kontrastlı olduqda, mətn və URL maksimum ölçüdə olduqda cəlb edir. Demək olar ki, eyni şey yaşıl dizaynlarla olur.

Mavi portal dizaynı etibardır və sarı kontekst üçün ən yaxşısıdır

Mavi dizaynı və tərtibatı olan saytlar etimadı ilhamlandırır (dərhal ağlıma gəlir sosial Mediya"VKontakte" və "Facebook"). Maraqlıdır ki, reklam ağ fonda yerləşirsə və başlıqlar 2 ton daha tünd rəngə malikdirsə (və bu, bizim sevimli VKontakte və Facebook-a uyğun gəlir) burada işləyir. Ən çox qazanan vebsayt dizaynının rəngi, İngilis psixoloqlarına görə sarı. Buradakı ziyarətlərin kliklərə nisbəti 1-dən 2,5-ə qədərdir, çünki bir çox internet istifadəçisi eyni vaxtda 2-3 reklama baxır. Amma bütün sarı saytlardakı bannerlər təsirsizdir. Reklam bölmələrinin və bannerlərin kliklədiyi portalların dizaynı üçün başqa bir yaxşı rəng kontrast yaratmayan qəhvəyi rəngdir. Burada banner reklamı üçün nəticə hər 3 ziyarətə 1 klik, kontekstli reklam üçün isə təxminən 1-dən 2-ə bərabərdir.

PS. Gəlin ümumiləşdirək. Birincisi, biabırçı odur ki, sınaqdan keçən auditoriya təbii ki, rusdilli deyil, bizdə fərqli mentalitet var. Bununla belə, MDB sakinləri Amerika və ya Avropanın sakinləri deyillər. Rusiya saytları həmişə təmkinli Avropa və Amerika internet resurslarından fərqli olaraq dizaynda göy qurşağı rəngləri və çalarları ilə seçilib (Apple-ın saytı bunun bariz nümunəsidir). İkincisi, bununla əlaqədar olaraq, onlar da ölkəmizdəki (öz müşahidəsi) parlaq və təzadlı reklamlara “klikləyirlər”. Sarı saytlar və portallar haqqında fikir ayrılığı yarana bilər - onlar yerli şəbəkə istifadəçiləri arasında inam yaratmır (hətta böyük sarı portal haqqında dərhal demirəm - ağlıma birdən çox gəlir), kiçik uşaqlar istisna olmaqla (baxmayaraq ki, bu mənim fikrim)! Ümumiyyətlə, yəqin ki, "təcrübələr" bölməsində danışacağım kiçik bir test aparmaq lazım olacaq.

Rənglə işləmək hər hansı bir veb dizayneri üçün vacib bir bacarıqdır. Ondan düzgün istifadə sayta uğur gətirə bilər və qammanın yaradılmasında kiçik bir səhv belə gələcəkdə çoxlu bəlalar gətirəcək. Bu yazıda dizaynerlərin vebsaytda rənglə işləyərkən buraxdığı 10 səhvə nəzər salacağıq və onlardan necə qaçınacağınızı sizə xəbər verəcəyik.

Psixoloji texnikaları təqdim etmək istəməməsi

Məsələn, portağal əla alış-veriş motivatorudur. Onlayn mağazalar üçün uyğun olan hərəkətə çağırışları mükəmməl şəkildə çatdırır.

Yaşıl etimadı simvollaşdırır və qidaya gəldikdə etibardan daha vacib nə ola bilər?

1. Kor təqlid

Bəzi saytları həqiqətən bəyənsəniz belə, "tam olaraq eyni, lakin mənim məhsullarım haqqında" sifariş verməzdən əvvəl iki dəfə düşünün.

2. Fəaliyyətə çağırışı zəiflədin

3. Həddindən artıq sayt rəng palitrası

Rəng palitrası seçərkən ən azı rəng çarxından istifadə etməyi məsləhət görürük. Onunla rəngləri seçərkən, bitişik rənglərin və əks olanların bir-biri ilə yaxşı birləşdiyini xatırlamaq lazımdır.


Xüsusi saytlardan istifadə etməyi də tövsiyə edirik. Burada siz öz çeşidinizi yarada və ya hazır olanlardan birini istifadə edə bilərsiniz.

Birinci misalda mətni bəzəmək üçün 3 rəng, ikincidə isə yalnız iki rəng istifadə olunur. Bu, daha yaxşı görünən ikinci variantdır və üzərindəki mətni oxumaq daha asandır.

4. Eyni tipli elementlər üçün müxtəlif rəng

Məsələn, eyni saytda eyni məqsədli iki düymə. Səhv qərar.

5. Müxtəlif növ elementlər üçün eyni rənglər

6. Kontrastın olmaması

7. Qeyri-standart keçid rəngi

• Linklər onların üzərinə keçmədən görünməlidir.


• Üzərinə keçərkən keçid rəngini dəyişməlidir.


• Ziyarət edilən keçidlər fərqli rəngdə qeyd edilməlidir, bu, çoxlu nəşrləri olan məlumat saytına gəldikdə xüsusilə vacibdir.

8. Solğun minimalizm impulsiv satış üçün deyil

Bu iki moda meylləri çox vaxt uyğun gəlmir. Saytınız baxarkən eyni emosiyaları yaratmırsa, emosiyalar əsasında satış edə bilməzsiniz.

Amma bu o demək deyil ki, satış emosional açılış səhifəsi göy qurşağının bütün rəngləri ilə parlasın.

9. Uyğun olmayan qara

Bizim vərdişlərimiz, eləcə də marketoloqların üsulları supermarketlərdən internetə köçür, məsələn, qara rəngdə hazırlanmış zərgərlik şirkətinin saytı zərif və bahalı görünür:


Aşağı qiymət seqmentində xidmət göstərirsinizsə və ya ucuz mallar satırsınızsa, saytda fon kimi çox qara rəngdən istifadə etməməlisiniz. Ziyarətçilərin saytla bağlı təəssüratları satış təklifinizə uyğun gəlməyəcək.

10. Dizayner üçün rəng məhdudiyyətləri

Vizyonunuz istədiyiniz qədər gözəl ola bilər, amma qoy dizayner öz fikrini təklif etsin. Bir neçə cəhddən sonra dizayner hələ də bəyəndiyiniz bir şeyi göstərə bilmirsə, yalnız o zaman rəng seçimində ona sərt bir çərçivə qoymağa dəyər.

Başqa bir istisna: rəng sxeminizin yaxşı düşünülmüş olduğuna əminsinizsə və bu seçimi özünüzə əsaslandıra bilərsiniz. Bir qayda olaraq, müştərilər dizaynerin nəyi nəzərə aldığını nəzərə almırlar - mətnin oxunaqlılığı, düymələrin kifayət qədər parlaqlığı və optimal məbləğ rənglər.

nəticələr

Məsələn, Aviasales.ru-nun ilk ekranını bulandırdıq - 1, 2 və 3-cü elementlərin blokları diqqəti cəlb edir. istifadəçi üçün düzgün gözləntilərin formalaşması, o (kontrast qaydaları haqqında xatırlayın) parametrləri və hərəkətə çağırış seçmək üçün lazımi elementlərə baxacaq.


Və ostrovok.ru saytındakı əsas hərəkətin bulanıq bir fonda necə aydın şəkildə seçildiyinə baxın.


İnterfeysləriniz bu cür testlərdən zərbə ilə keçərsə, o zaman saytın daha da təkmilləşdirilməsi istifadəçi psixologiyasını başa düşmək əsasında aparılmalıdır, yəni. real istifadəçilərdən gələn rəylərin təhlili. Kimi suallarla: “İlk olaraq hara baxdınız: saytın hansı 3 elementinə və hansı ardıcıllıqla? İlk olaraq hara və niyə klikləmək istəyirsiniz?” AskUsers-də siz yalnız istifadəçilərin diqqətinin necə paylandığını deyil, həm də istifadəçilərin müəyyən elementlərə niyə baxdıqlarını başa düşə bilərsiniz. Bu məlumat cari interfeysdə bir sıra problemləri müəyyən etməyə və onların həlli üçün ən yaxşı variantları tapmağa kömək edəcəkdir.

Unutmayın ki, forma məzmundan sonra gəlir. Rəng dizaynı istifadəçinin diqqətini istifadəçi və sayt sahibi üçün vacib olan məlumatlara yönəltmək üçün bir vasitə kimi xidmət edir.