Testarea diferitelor stiluri în butoanele de finalizare a comenzii

Astăzi vă aduc un alt test A/B pe care îl rulăm de câteva luni. Ca întotdeauna în cadrul acestei serii de articole lunare, vom vedea în detaliu ipoteza de îmbunătățire pe care am făcut-o, aplicarea acesteia prin crearea de variații ale unei pagini de pe site-ul nostru și rezultatele pe care le-am obținut.

Cu ceva timp în urmă studiam culoarea butoanelor de acțiune de pe pagina principală a Nelio Content. Datorită unui test A/B al stilurilor CSS, am putut vedea cum culoarea verde funcționează cel mai bine pentru vizitatorii noștri vorbitori de engleză ai paginii respective.

Nu putem presupune că acesta va fi cazul pentru orice pagină. De aceea astăzi vom testa culoarea și dimensiunea butoanelor de finalizare a achiziției din tabelul de prețuri care apare pe pagina de achiziție Nelio A/B Testing.

Definiția testului A/B

Ipoteza noastră de îmbunătățire este că schimbarea culorii și dimensiunii butoanelor de finalizare a comenzii din tabelul de prețuri Nelio A/B Testing va obține mai multe clicuri pe aceste butoane și, în consecință, vom avea mai multe vânzări.

Versiunea originală a tabelului de prețuri Nelio A/B Testing arată cele trei planuri pe care le vindem, fiecare cu prețul, detaliile și un buton pentru a vă abona la serviciu. O puteți vedea în următoarea captură de ecran:

Butoanele sunt de o culoare gri care iese putin in evidenta, cu exceptia planului profesional, care are un buton albastru inchis pentru a pune mai mult accent acestui plan in comparatie cu celelalte doua.

Primul lucru pe care îl vom verifica este dacă schimbarea culorii acestor butoane pentru a le face mai frapante este mai bine sau nu. Pentru aceasta, versiunea alternativă pe care am propus-o include o schimbare a stilurilor CSS cu culori noi, după cum puteți vedea mai jos:

Am ținut evidențiat planul profesional, dar acum celelalte planuri sunt albastru închis și acest plan intermediar are o culoare portocalie mai proeminentă. Conform studiilor în psihologia culorilor, portocaliul este o alegere bună pentru butoanele de acțiune, așa că am decis să alegem acest portocaliu pe care l-ați văzut în imaginea anterioară pentru planul profesional.

Deoarece ipoteza noastră a afirmat că dimensiunea butoanelor ar trebui să afecteze și performanța acestora, am păstrat modificările de culori propuse în varianta anterioară pentru a crea una nouă în care dimensiunile butoanelor au fost mărite. Puteți vedea această schimbare în următoarea captură de ecran:

Prin urmare, avem trei versiuni diferite ale stilurilor CSS ale tabelului de prețuri Nelio A/B Testing:

• Originalul, fără modificări de stil.
• O primă variantă cu culori mai proeminente pe butoane.
• O a doua variantă cu culori proeminente și o dimensiune mai mare a nasturii.

Cu toată această muncă făcută, putem traduce acest lucru într-un test A/B al stilurilor CSS. Pentru aceasta, Nelio A/B Testing vă permite să creați un test A/B al diferitelor stiluri CSS cu care puteți testa cu ușurință modificările de stil în WordPress.

Creăm noul test CSS A/B și cele trei alternative din cadrul acestuia. De fapt, capturile de ecran pe care le-ați văzut înainte ale variațiilor sunt capturi de ecran ale editorului de stil CSS pe care Nelio A/B Testing îl include pentru a crea alternative.

După cum puteți vedea în captura de ecran de mai sus, am limitat domeniul de aplicare al testului la pagina de prețuri Nelio A/B Testing, precum și faptul că am definit cinci obiective care trebuie măsurate în cadrul testului:

• Faceți clic pe butoanele oricărui plan.
• Faceți clic pe butoanele planului de bază.
• Faceți clic pe butoanele planului profesional.
• Faceți clic pe butoanele planului de întreprindere.
• Valoarea achizițiilor.

Cu toate acestea create, ceva care nu vă va lua mai mult de 10 minute, începem testul și așteptăm să vină rezultatele. Acum este rândul lui Nelio A/B Testing să facă treaba. Pluginul nostru este responsabil de împărțirea traficului de intrare între diferitele variații și de numărarea conversiilor în fiecare obiectiv definit în testul A/B.

Analiza rezultatelor testului A/B

Acest test A/B rulează timp de trei luni pe site-ul nostru. Rezultatele pot fi văzute mai jos. Vom analiza fiecare obiectiv în detaliu pentru a înțelege concluziile pe care le-am tras din acest test.

Primul obiectiv a fost măsurarea clicurilor care s-au făcut pe oricare dintre butoanele planurilor din tabelul de prețuri. În acest caz, rezultatele arată că varianta cu culorile modificate realizează cu 17,2% mai multe clicuri. Pe de altă parte, varianta care s-a schimbat de culori și dimensiuni este cu 15% mai proastă decât versiunea originală a paginii.

Cu toate acestea, niciunul dintre aceste cifre nu a atins un nivel suficient de încredere statistică pentru a identifica în mod clar o versiune câștigătoare pentru acest obiectiv.

Al doilea obiectiv a numărat clicurile doar pe butoanele planului de bază. În acest caz, rezultatele sunt similare cu obiectivul anterior. Avem versiunea cu culori schimbate ca fiind cea mai bună dintre cele trei și versiunea cu culori și dimensiuni ca fiind cea mai proastă.

În mod similar, statisticile nu sunt capabile să identifice versiunea cu noile culori ca un câștigător clar cu suficientă încredere.

Cazul celui de-al treilea obiectiv, în care măsurăm clicurile în planul profesional, este puțin diferit. Ca si pana acum, varianta cu culori este mai buna iar varianta care combina culorile si marimile este mai proasta. Cu toate acestea, acum statisticile ne spun că în mod clar versiunea câștigătoare are suficientă încredere.

Putem spune că folosind culori mai proeminente obținem un număr mai mare de clicuri. Butonul portocaliu funcționează mai bine decât butonul albastru pe care îl aveam înainte.

În cazul clicurilor din planul enterprise, aici revenim la aceeași stare ca și la primele două obiective. Dar aici diferențele dintre varianta originală și varianta cu culorile schimbate sunt neglijabile. Versiunea care pare mult mai proastă este cea care include modificări de culoare și dimensiune.

Toate aceste chestii de clicuri sunt în regulă. Dar dacă ne uităm doar la rezultatele anterioare, vom avea o viziune parțială a realității.

Din acest motiv am adaugat ultimul obiectiv in care masuram numarul de achizitii realizate de fiecare varianta. Puteți obține o variantă care obține mai multe clicuri, dar dacă nu poate obține și mai multe vânzări, veți alege un câștigător fals.

În următoarele rezultate vedem că exact asta se întâmplă. Versiunea cu noile culori realizează cu 24,5% mai puține vânzări, în timp ce versiunea care combină culori și mărimi se vinde cu 16,6% mai puțin decât versiunea actuală a paginii noastre (cea fără modificări).

Cu aceste rezultate, ceea ce trebuie să vedem este că pâlnia de conversie este complexă și, deși adesea o împărțim în faze și numărăm micro-conversiile, nu trebuie să pierdem din vedere întreaga imagine.

Avantajul creării de teste A/B multi-goal este că putem avea toate perspectivele pe care le dorim pentru a obține o imagine completă a cât de bine (sau prost) funcționează site-ul nostru. Doar făcând acest lucru vom putea avea încrederea de a alege un câștigător cu o liniște completă privind datele rezultatelor testului A/B.

Imagine prezentată de Grooveland Designs pe Unsplash.