Adevărul despre cele mai bune culori pentru butoanele de apel la acțiune pentru site-ul dvs. web

S-au spus multe pe internet despre culorile care funcționează cel mai bine pe o pagină web. Veți găsi mii de articole despre el. De la cel în care un utilizator întreabă ce culoare este mai bună și primește răspunsuri contradictorii (ce surpriză, nu?), până la cunoscutul articol care explică testele pe care Google le-a făcut cu multe nuanțe de albastru pentru link-urile sale.

Realitatea din spatele tuturor acestor lucruri este că nimeni nu poate asigura că o anumită culoare va funcționa mai bine sau mai rău pe un site web fără să o încerce. Dacă îți spun altfel, te mint. Și sunt sigur că nu-ți place să fii mințit.

Nici eu, așa că când citeam acest articol de la Yahoo! Small Business unde se spune că cele mai bune culori de folosit la butoane sunt roșu, verde și portocaliu sau galben, primul lucru pe care m-am gândit este că ar trebui să-l încerc pe propriul nostru site.

Dacă ați urmărit seria de articole pe care le scriam lunar despre testarea A/B, cu siguranță știți deja că una dintre cele mai importante pagini de pe site-ul nostru este pagina de destinație a Nelio Content, alături de pagina sa de prețuri. Pe ambele pagini, butoanele de îndemn pe care le avem sunt portocalii.

Roșul sau verdele vor funcționa mai bine în comparație cu culoarea portocalie pe care o folosim deja pe site-ul nostru pentru butoanele de îndemn? Aceasta este întrebarea pe care mi-am pus-o și la care voi răspunde aici cu date reale de la vizitatorii noștri. Opinie nu subiectivă. Date reale.

Să mergem!

Crearea unui test A/B de CSS

Cel mai simplu mod de a schimba culoarea butoanelor dintr-o pagină este să adăugați câteva reguli CSS suplimentare pentru a aplica noua culoare. Puneți o nouă regulă background-color butonului cu culoarea dorită și atât. Ușor de gălăgie.

Cu Nelio A/B Testing aveți posibilitatea de a crea un test A/B de stiluri CSS pentru a testa diferite variante ale regulilor CSS suplimentare. Trebuie doar să creați un nou test și să selectați opțiunea CSS din selectorul de tip de test:

Acest lucru vă va duce la editorul de teste, unde primul lucru pe care trebuie să-l faceți este să creați variantele. Rețineți că în acest tip de test prima variantă este cea care arată pagina cu aspectul actual, fără CSS suplimentar.

Apoi creați o variantă pentru, în cazul nostru, fiecare dintre culorile suplimentare pe care urmează să le testăm: una pentru verde și una pentru roșu. Prima variantă este deja portocalie, așa că cu aceasta avem totul gata.

Pentru fiecare variantă suplimentară puteți merge să o editați pentru a adăuga regulile CSS suplimentare care schimbă culoarea butoanelor. Regulile CSS de care veți avea nevoie vor depinde de tema pe care o utilizați în WordPress. În editorul CSS oferit de Nelio A/B Testing, puteți vedea în timp real cum noile dvs. reguli CSS schimbă aspectul site-ului dvs. Acest lucru vă va ajuta să verificați dacă procedați corect.

Iată cum arată butoanele de acțiune din editorul de stil CSS al fiecărei variante a testului A/B pe care îl instalăm. După cum am menționat mai sus, mai întâi aveți versiunea originală, cu butoanele portocalii. Celelalte două variante includ CSS pentru a transforma butoanele în verde și respectiv roșu:

Odată ce avem variantele pregătite, este timpul să definim obiectivele de conversie pe care dorim să le măsurăm. În acest caz, după cum puteți vedea în captura de ecran a editorului de testare, avem două obiective.

Primul obiectiv va măsura clicurile pe butoanele de acțiune, în timp ce în al doilea vom măsura și acele clicuri, dar numai pe cele care au loc pe pagina de prețuri Nelio Content.

În cele din urmă, rețineți că testele A/B ale CSS vor afecta toate paginile site-ului dvs. Pentru a limita acest comportament în Nelio A/B Testing, în bara laterală din dreapta a editorului de teste A/B aveți opțiunea de a limita domeniul de aplicare al testului. Am făcut-o astfel încât să afecteze numai pagina principală a Nelio Content și pagina de prețuri.

Avem totul pregătit pentru a începe testul. Odată ce o facem, Nelio A/B Testing se ocupă de împărțirea traficului care vizitează aceste două pagini pentru dvs. și de afișarea diferitelor variante de culoare, precum și de urmărirea conversiilor (clic pe butoane).

Amintiți-vă, trebuie doar să așteptați ca vizitatorii să treacă prin acele pagini pentru a începe să vedeți rezultate.

Analizarea Rezultatelor

Testul A/B al culorilor butoanelor rulează pe site-ul nostru timp de o lună și jumătate pe site-ul spaniol și aproape o lună pe site-ul englez. În versiunea în limba engleză am oprit-o mai devreme pentru că am obținut rezultate semnificative statistic mai rapid, cu o valoare mare de încredere.

Dar să începem cu rezultatele testului de pe web-ul nostru în spaniolă:

După cum puteți vedea în captura de ecran de mai sus, în scopul de a măsura clicurile pe ambele pagini, se pare că variantele verde și roșu ale butoanelor funcționează ceva mai bine decât versiunea originală portocalie. Totuși, statisticile ne spun că îmbunătățirea nu este substanțială și, prin urmare, nu putem spune că aceste culori sunt mai bune decât portocaliul.

Pentru cel de-al doilea obiectiv, care măsura doar clicurile pe pagina de prețuri Nelio Content, vedem că nici nu există o culoare câștigătoare clară. Putem chiar observa cum verdele aici are rezultate mai proaste decât portocaliul. Deși nu putem trage concluzii puternice cu datele pe care Nelio A/B Testing le-a colectat de la vizitatorii noștri:

Să mergem acum să vedem rezultatele testului în versiunea în limba engleză a paginii. Aici, în primul obiectiv, care măsura clicurile pe oricare dintre cele două pagini ale Nelio Content, vedem că atât verde, cât și roșu sunt culori care produc o rată de clic mai bună.

În plus, aici putem afirma că culoarea verde este culoarea câștigătoare a testului. Rezultatele sunt semnificative statistic, cu un grad de încredere mai mare de 99%. Verdele este cea mai bună culoare pe care o putem folosi pe site-ul nostru în limba engleză pentru butoanele din paginile Nelio Content.

Dacă ne uităm doar la clicurile de pe pagina de prețuri Nelio Content (al doilea obiectiv al testului), vedem că rezultatele sunt în concordanță cu cele ale primului obiectiv al testului:

După ce am văzut acest lucru, putem spune că verdele este culoarea care a funcționat cel mai bine pentru publicul nostru în limba engleză pe paginile Nelio Content. Cu toate acestea, pentru publicul nostru spaniol, nu am reușit să găsim o culoare care să funcționeze mai bine decât cea pe care o aveam deja.

Concluzii

Aici am arătat rezultatele unui test A/B cu date reale de la vizitatorii care au navigat prin două dintre cele mai relevante pagini ale site-ului nostru. Și ați putut să verificați că ceea ce funcționează cel mai bine pentru un anumit public nu trebuie să funcționeze cel mai bine pentru altul.

Butoanele verzi funcționează cel mai bine pentru vizitatorii noștri vorbitori de engleză. Dar asta nu înseamnă că este același lucru pentru alți vizitatori. Din acest motiv, am schimbat doar culoarea butoanelor de acțiune ale paginilor Nelio Content în verde în versiunea în limba engleză a acestor pagini. Cele în spaniolă rămân portocalii.

Aș fi prost dacă ți-aș spune că trebuie să folosești culoarea verde pe pagina ta. Nimeni nu ar trebui să-ți spună asta. Nu eu, nu oricine. Habar n-am dacă verdele va funcționa pentru tine.

Din acest motiv, înainte de a fi atent la numeroșii guru pe care îi veți găsi pe internet, faceți singur testul. Crearea testului A/B este foarte ușoară. Și este singura modalitate de a descoperi ce funcționează (sau nu) mai bine pe site-ul tău. Cu publicul tău real.

Imagine prezentată de Robert Katzki pe Unsplash.