Utilizarea hărților termice în pagina de prețuri

Să începem „Testul A/B al lunii” cu un test care nu este A/B. Înainte de a fugi într-un alt colț de internet, permiteți-mi să vă explic de ce vom începe cu hărțile termice.

Una dintre cauzele principale pentru care nu utilizați în mod regulat testarea A/B pe site-ul dvs. web este să nu știți de unde să începeți: ce modificări încerc, unde și de ce? Acestea sunt întrebările cheie pe care vi le veți pune. Dacă nu știi cum să le răspunzi, vei renunța la testare.

Pentru a depăși acest lucru, ceea ce vă recomand este ca primul lucru pe care îl faceți este să alegeți o pagină de pe site-ul dvs. pentru a începe. Această pagină trebuie să fie relevantă pentru obiectivele dvs. Aceasta înseamnă că este o pagină în care primești multe vizite, sau este o pagină cheie pentru activitatea sau afacerea ta.

În exemplul de astăzi, am ales să începem cu paginile de prețuri ale pluginurilor noastre premium: Nelio A/B Testing și Nelio Content. Aceste pagini sunt cheia afacerii noastre, deoarece veniturile companiei noastre vin prin ambele.

Acum că am ales paginile, pentru a ști ce modificări să facem și de ce, este mai bine să începem prin a rula un test de hărți termice. Facem acest lucru deoarece hărțile termice ne oferă date reale despre modul în care vizitatorii noștri interacționează cu site-ul nostru.

Când vedem într-adevăr modul în care paginile noastre funcționează cu datele reale ale utilizatorilor, este mult mai ușor să obținem idei pentru teste viitoare. Acesta este motivul pentru care hărțile termice sunt întotdeauna un început bun.

Cum se creează un test Heatmap în WordPress

Crearea unui test de hărți termice pentru o pagină WordPress este foarte ușoară. Trebuie doar să selectați pagina aleasă și să începeți testul.

În Nelio A/B Testing, creați un nou test de hartă termică selectând acest tip de test din caseta de dialog care se deschide când faceți clic pe butonul pentru a adăuga un nou test.

Pe ecranul de editare a testului setați un nume pentru testul dvs., astfel încât să fie ușor de identificat mai târziu. De asemenea, puteți adăuga o descriere a ceea ce doriți să încercați în test. Nu în ultimul rând, trebuie să selectați pagina pe care doriți să faceți testul hărții termice:

Când aveți totul gata (după cum vedeți în captura de ecran anterioară, este foarte ușor), faceți clic pe butonul din colțul din dreapta sus al ferestrei pentru a începe testul. Trebuie doar să așteptați să vină vizitatorii dvs., astfel încât Nelio A/B Testing să colecteze date din comportamentul lor pe pagină și să proceseze rezultatele.

Rezultate Heatmap

În cazul nostru, am avut două teste de hărți termice care rulează în același timp pe site-ul nostru: unul pentru pagina de prețuri a Nelio A/B Testing și altul pentru pagina de prețuri a Nelio Content.

Fiecare test a colectat date de aproximativ 20 de zile și a analizat comportamentul a aproximativ 500 de vizitatori. Acest lucru este mai mult decât suficient pentru a putea trage anumite concluzii și a ne gândi la viitoarele teste A/B pe care le putem rula în aceste pagini.

Rețineți că aceste pagini nu sunt cele cu mai multe vizite pe site-ul nostru. Acestea reprezintă etapa finală a pâlniei de conversie, prin urmare traficul se pierde pe parcurs. Dar amintiți-vă că i-am ales din cauza importanței lor pentru afacerea noastră. În testele viitoare vom studia și alte pagini cu mai mult trafic, din alte motive pe care le vom explica.

Pagina de prețuri a Nelio A/B Testing

Să începem cu rezultatele obținute pentru pagina de prețuri a Nelio A/B Testing. Testul hărții termice ne arată datele din trei perspective diferite: hărțile termice, scrollmap și confetti. Încorporarea aici a celor 3 imagini complete este prea mult, pentru că sunt destul de mari în ceea ce privește înălțimea în pixeli. Pentru a nu te obliga să defilezi în sus și în jos până la capăt, le-am legat aici:

• Harta termică a paginii de prețuri a Nelio A/B Testing.
• Harta de defilare a paginii de prețuri a Nelio A/B Testing.
• Confetti de pe pagina de prețuri a Nelio A/B Testing.

Să ne uităm acum la cele mai relevante fragmente ale rezultatelor anterioare:

După cum puteți vedea în imaginea anterioară, o hartă termică este o reprezentare grafică care arată interacțiunea utilizatorilor cu elementele paginii, într-un mod agregat și cu o scară de culori unde o culoare caldă indică o mare relevanță.

În pagina de prețuri a Nelio A/B Testing, primul fold al paginii este locul în care există mai multe puncte fierbinți. Dacă o analizăm în detaliu, elementele din zona planului de bază și a planului profesional capătă mai multă relevanță decât cea a întreprinderii. Având în vedere acest lucru, poate că am putea reordona planurile de preț pentru a afișa mai întâi planul de întreprindere. Rețineți că suntem obișnuiți să citim de la stânga la dreapta, așa că afișarea celui mai scump plan pe pagina de prețuri poate fi o schimbare bună de încercat într-un test A/B.

Un alt element care primește multă interacțiune cu utilizatorul este linkul pentru a derula în jos pentru a vedea comparația detaliată a planurilor. Acest lucru este bine, deoarece înseamnă că există interes pentru a vedea mai multe detalii despre planuri.

Ceea ce nu este atât de bine este că există multe interacțiuni în elemente care nu se pot face clic. Îl puteți vedea în confetti, care este reprezentarea grafică în care puteți vedea toate clicurile făcute de vizitatori:

În întregul bloc de planuri pe care îl puteți vedea în captura de ecran anterioară, doar butoanele care apar în fiecare plan sunt elemente pe care se pot face clic. Rețineți că a face clic pe orice altceva nu are niciun efect. Interfața noastră actuală generează confuzie.

Vizitatorii fac clic pe textele și pictogramele caracteristicilor fiecărui plan, care sunt elemente care nu se pot face clic. De aici putem înțelege că ei încearcă să găsească mai multe informații despre el, dar în schimb avem aceste informații mai jos în pagină.

Un alt test A/B pe care l-am putea încerca aici este să schimbăm fiecare dintre caracteristicile planurilor, astfel încât acestea să aibă un element plutitor care apare atunci când trecem cu mouse-ul peste text și să ofere mai multe informații contextuale vizitatorului. Am putea testa această versiune cu ajutor contextual față de versiunea actuală pentru a vedea care dintre ele ajunge să genereze mai multe achiziții.

Confettiul ne oferă și informații agregate ale vizitatorilor, extrase din clicurile pe care le-au făcut. Nelio A/B Testing include mai multe tipuri de filtre pentru a înțelege mai bine diferitele caracteristici ale vizitatorilor, așa cum puteți vedea aici:

Din aceste filtre am extras următoarele date:

• Chrome și Firefox sunt, de departe, cele mai utilizate browsere de către vizitatorii noștri. Prin urmare, trebuie să facem web-ul să arate bine, cel puțin, în aceste browsere.
• Jumătate dintre vizitatorii acestei pagini provin din Statele Unite. Aceasta se potrivește cu datele noastre de vânzări.
• Vizitatorii ne vizitează mai mult în primele 3 zile ale săptămânii. Cunoașterea acestor informații poate fi utilă, de exemplu, pentru a face oferte în celelalte zile în alte zone ale web-ului, și astfel atrage trafic în zilele cu trafic redus.
• Aproape 100% dintre vizitatori accesează pagina de pe un computer desktop sau un laptop. Abia avem vizite de pe dispozitive mobile. Acesta este ceva de studiat în viitor.
• Windows 10 și Mac OS X sunt sistemele de operare de pe care oamenii ne vizitează. Se potrivește cu datele anterioare, deoarece nu avem vizitatori din sistemele de operare pentru dispozitive mobile.
• Avem mai mulți vizitatori în timpul zilei de lucru (testul a fost efectuat în fusul orar Chicago). Are sens, deoarece clientul nostru principal este din SUA.
• Vizitele se fac pe ecrane cu o lățime minimă mai mare de 1500 pixeli. Un alt fapt care confirmă că vizitele sunt de pe computere desktop sau laptopuri.

Dacă verificați versiunile complete ale hărții termice și confetti, veți vedea că toate celelalte secțiuni ale paginii de prețuri a Nelio A/B Testing sunt mai puțin relevante. Având în vedere acest lucru, să verificăm următoarea hartă de defilare:

Dacă verificați harta completă, puteți vedea că foarte puțini vizitatori trec dincolo de prima îndoire a paginii. Acest lucru mă face să cred că poate ar trebui să mergem cu o versiune mult mai scurtă a paginii de prețuri a Nelio A/B Testing, condensând informațiile relevante de mai sus.

Secțiunile de după prima îndoire a paginii au mult text, iar vizitatorii nu îl citesc. Mai puțin de 20% vin să vadă și să interacționeze cu tabelul detaliat care compară planurile, pe care îl puteți găsi în partea de jos a web-ului. Toate aceste date sunt furnizate de scrollmap:

Testarea cu versiuni mai scurte ale paginii, inclusiv mai multe secțiuni vizuale, poate ajuta să convingă potențialul cumpărător și să obțină o pagină de prețuri mult mai eficientă și mai eficientă. Aceasta este o altă idee despre o posibilă schimbare de încercat cu un test A/B.

Avem deja câteva idei pe care le-am putea testa în viitor, așa că este clar că informațiile pe care ni le oferă hărțile termice sunt foarte utile pentru a obține idei pe care apoi să le aplicăm în testele A/B.

Pagina de prețuri a conținutului Nelio

Ca și în pagina de prețuri a Nelio A/B Testing, aici aveți imaginile complete cu rezultatele hărții termice pentru pagina de prețuri a Nelio Content:

• Harta termică a paginii de prețuri a Nelio Content.
• Harta de defilare a paginii de prețuri a Nelio Content.
• Confetti din pagina de prețuri a Nelio Content.

Pagina de prețuri a Nelio Content este mai simplă și mai scurtă decât cea pentru Nelio A/B Testing. Printre alte motive, această pagină are un singur plan, în timp ce cu Nelio A/B Testing am avut 3 planuri diferite.

Dacă te uiți la harta termică completă și o compari cu cea a Nelio A/B Testing, vei vedea că în acest caz există mai multe puncte fierbinți în alte părți ale paginii, în afară de primul fold.

În imaginea anterioară vedem că butoanele de acțiune din tabelul de comparare a planurilor capătă o relevanță deosebită. Acest lucru este bine, pentru că le avem acolo din acest motiv. Cu toate acestea, rețineți că planul Starter din tabel, care nu este altceva decât versiunea gratuită a Nelio Content, capătă o relevanță deosebită.

Aici întrebarea este dacă ar trebui să avem un link către directorul de pluginuri WordPress în pagina noastră de prețuri, astfel încât vizitatorii să poată descărca sau nu versiunea gratuită a Nelio Content. Acum îl avem, dar harta termică arată că probabil mai mulți vizitatori părăsesc pagina noastră de prețuri pentru a alege versiunea gratuită.

Acest subiect este controversat și sursa unor lungi discuții în întâlnirile noastre. Pe de o parte, păstrarea linkului nu este bună pentru că pierzi o posibilă vânzare directă în pagina de prețuri. Dar, chiar dacă vizitatorii părăsesc site-ul nostru, se poate întâmpla ca încercarea gratuită a Conținutului Nelio să fie un lucru bun. Utilizatorii pot iubi instrumentul și pot ajunge să îl cumpere mai târziu, după ce l-au testat. În Nelio am discutat despre asta de mai multe ori și presupun că astăzi nu va fi ultima dată când o vom face?. Deocamdată, linkul rămâne. Ce crezi despre asta?

De asemenea, vedem că videoclipul atrage foarte multă atenție. Am creat un videoclip foarte tare și poate l-am putea arăta mai devreme în pagină. Am putea încerca această modificare cu un test A/B pentru că nici secțiunea de după primul fold nu primește atât de multă relevanță.

Pe de altă parte, vedem pe scrollmap că pierderea de vizitatori este mai puțin bruscă pe măsură ce derulăm în jos pe pagină. Acest lucru confirmă că o pagină de preț mai scurtă poate funcționa mai bine dacă ceea ce ne dorim este ca vizitatorul să vadă cât mai mult conținut posibil.

În plus, combinat cu harta termică anterioară, vedem că cele două secțiuni de după primul fold, care vorbesc despre caracteristici specifice și arată părerile oamenilor, ar putea avea nevoie de o reproiectare. Sunt secțiuni cu prea mult text și care nu atrag prea multă atenție. Am putea încerca o versiune alternativă mai vizuală și directă.

În ceea ce privește graficul confetiului de clicuri, este interesant să vedem cantitatea de clicuri incorecte care sunt făcute în zonele care nu se pot face clic în primul pliu al paginii:

Chiar dacă majoritatea acestor clicuri nu pot fi evitate (da, presupunem că oamenii dau clic pe zone laterale, în special în partea dreaptă, când derulează), există altele care sunt rezultatul unor vizitatori confuzi. Acesta este cazul clicurilor pe numărul de preț lunar pe care îl vedeți în captura de ecran anterioară. Acest preț nu este un articol pe care se poate face clic; trebuie să faceți clic pe butonul portocaliu. Cu toate acestea, numărul anual de preț afișat mai jos este un link adecvat.

Trebuie să căutăm un alt mod mai puțin confuz de a arăta cele două prețuri, cu o interacțiune egală pentru ambele cazuri. Acesta este un alt test A/B pe care l-am putea rula pe această pagină.

Și acum ce?

Am început fără să avem idee despre ce teste A/B am putea rula pe site-ul nostru. Am văzut că hărțile termice ne ajută să obținem idei ușor de testat în testele A/B de pe paginile noastre. Odată ce avem aceste idei de testare, ceea ce trebuie să facem este să le acordăm prioritate în funcție de nevoile noastre.

Amintiți-vă că modificările din primul fold a paginii sunt mai rapid de testat deoarece mai multe persoane le vor vedea și astfel veți obține rezultate mai rapid. Puteți începe să prioritizați testele A/B care încearcă modificări în acea parte a paginii.

Și cea mai importantă lecție aici este: odată ce începeți să testați, nu vă opriți. După fiecare iterație a procesului de testare, veți învăța ceva nou atât de la site-ul dvs., cât și de la vizitatori.

Ne vedem luna viitoare cu un alt tip de test in care vom analiza rezultate reale. Nu uita să-mi lași un comentariu cu părerea ta despre această postare și tot ce am explicat aici. Pe ce pagină a site-ului dvs. ați rula o hartă termică?

Imagine prezentată de Steve Halama pe Unsplash.