Menguji gaya yang berbeda di tombol checkout

Hari ini saya membawakan Anda tes A/B lain yang telah kami jalankan selama beberapa bulan. Seperti biasa dalam rangkaian artikel bulanan ini, kita akan melihat secara rinci hipotesis peningkatan yang telah kita buat, penerapannya dengan membuat variasi halaman di situs web kita, dan hasil yang kita peroleh.

Beberapa waktu lalu kami mempelajari warna tombol aksi di halaman utama Konten Nelio. Berkat pengujian A/B gaya CSS, kami dapat melihat bagaimana warna hijau bekerja paling baik untuk pengunjung berbahasa Inggris kami ke halaman tersebut.

Kami tidak dapat berasumsi bahwa ini akan menjadi kasus untuk halaman mana pun. Itulah mengapa hari ini kita akan menguji warna dan ukuran tombol checkout dari tabel harga yang muncul di halaman pembelian Nelio A/B Testing.

Definisi tes A/B

Hipotesis kami untuk peningkatan adalah bahwa mengubah warna dan ukuran tombol checkout di tabel harga Pengujian A/B Nelio akan mendapatkan lebih banyak klik pada tombol ini dan, sebagai akibatnya, kami akan memiliki lebih banyak penjualan.

Versi asli tabel harga Pengujian A/B Nelio menunjukkan tiga paket yang kami jual, masing-masing dengan harga, detail, dan tombol untuk berlangganan layanan. Anda dapat melihatnya di tangkapan layar berikut:

Tombolnya berwarna abu-abu yang sedikit menonjol, kecuali untuk paket profesional, yang memiliki tombol biru tua untuk memberi penekanan lebih pada paket ini dibandingkan dengan dua lainnya.

Hal pertama yang akan kita periksa adalah apakah mengubah warna tombol-tombol ini untuk membuatnya lebih mencolok lebih baik atau tidak. Untuk itu, versi alternatif yang kami usulkan mencakup perubahan gaya CSS dengan warna baru, seperti yang Anda lihat di bawah ini:

Kami telah membuat rencana profesional disorot, tetapi sekarang rencana lainnya berwarna biru tua dan rencana perantara ini memiliki warna oranye yang lebih menonjol. Menurut studi dalam psikologi warna, oranye adalah pilihan yang baik untuk tombol tindakan, jadi kami memutuskan untuk memilih oranye ini yang telah Anda lihat di gambar sebelumnya untuk paket profesional.

Karena hipotesis kami menyatakan bahwa ukuran tombol juga harus memengaruhi kinerjanya, kami telah mempertahankan perubahan warna yang diusulkan dalam variasi sebelumnya untuk membuat yang baru di mana ukuran tombol telah ditingkatkan. Anda dapat melihat perubahan ini pada tangkapan layar berikut:

Oleh karena itu, kami memiliki tiga versi berbeda dari gaya CSS dari tabel harga Pengujian A/B Nelio:

• Asli, tanpa perubahan gaya.
• Varian pertama dengan warna yang lebih menonjol pada tombol.
• Varian kedua dengan warna yang menonjol dan ukuran tombol yang lebih besar.

Dengan semua pekerjaan ini selesai, kami dapat menerjemahkan ini ke dalam pengujian A/B gaya CSS. Untuk itu, Pengujian A/B Nelio memungkinkan Anda membuat pengujian A/B dari berbagai gaya CSS yang dapat digunakan dengan mudah untuk menguji perubahan gaya di WordPress.

Kami membuat pengujian A/B CSS baru dan tiga alternatif di dalamnya. Faktanya, tangkapan layar yang telah Anda lihat sebelumnya dari variasi tersebut adalah tangkapan layar dari editor gaya CSS yang disertakan oleh Pengujian A/B Nelio untuk membuat alternatif.

Seperti yang Anda lihat pada tangkapan layar di atas, kami membatasi ruang lingkup pengujian pada halaman harga Pengujian A/B Nelio, serta fakta bahwa kami menetapkan lima sasaran yang akan diukur dalam pengujian:

• Klik pada tombol rencana apa pun.
• Klik pada tombol dari rencana dasar.
• Klik pada tombol rencana profesional.
• Klik pada tombol rencana perusahaan.
• Jumlah pembelian.

Dengan semua ini dibuat, sesuatu yang tidak akan memakan waktu lebih dari 10 menit, kami memulai tes dan menunggu hasilnya datang. Sekarang giliran Nelio A/B Testing untuk melakukan pekerjaan itu. Plugin kami bertugas membagi lalu lintas masuk antara variasi yang berbeda dan menghitung konversi di setiap sasaran yang ditentukan dalam pengujian A/B.

Analisis hasil uji A/B

Tes A/B ini berjalan selama tiga bulan di situs web kami. Hasilnya bisa dilihat di bawah ini. Kami akan menganalisis setiap tujuan secara rinci untuk memahami kesimpulan yang telah kami tarik dari tes ini.

Tujuan pertama adalah mengukur klik yang dilakukan pada salah satu tombol paket di tabel harga. Dalam hal ini, hasilnya menunjukkan bahwa varian dengan warna yang diubah mencapai 17,2% lebih banyak klik. Di sisi lain, varian yang berubah warna dan ukuran 15% lebih buruk dari versi asli halaman.

Namun, tidak satu pun dari angka-angka ini mencapai tingkat kepercayaan statistik yang memadai untuk secara jelas mengidentifikasi versi pemenang untuk tujuan ini.

Gol kedua menghitung klik hanya pada tombol dari rencana dasar. Dalam hal ini, hasilnya mirip dengan tujuan sebelumnya. Kami memiliki versi dengan warna yang berubah sebagai yang terbaik dari ketiganya dan versi dengan warna dan ukuran sebagai yang terburuk.

Demikian pula, statistik tidak dapat mengidentifikasi versi dengan warna baru sebagai pemenang yang jelas dengan cukup percaya diri.

Kasus sasaran ketiga, di mana kami mengukur klik dalam rencana profesional, sedikit berbeda. Seperti sebelumnya, versi dengan warna lebih baik dan versi yang menggabungkan warna dan ukuran lebih buruk. Namun, sekarang statistik memberi tahu kami bahwa jelas versi pemenang memiliki kepercayaan diri yang cukup.

Kita dapat mengatakan bahwa dengan menggunakan warna yang lebih menonjol, kita mendapatkan lebih banyak klik. Tombol oranye berfungsi lebih baik daripada tombol biru yang kami miliki sebelumnya.

Dalam kasus klik dalam rencana perusahaan, di sini kita kembali ke keadaan yang sama seperti dengan dua tujuan pertama. Tapi di sini perbedaan antara varian asli dan varian dengan warna yang diubah dapat diabaikan. Versi yang tampak jauh lebih buruk adalah versi yang menyertakan perubahan warna dan ukuran.

Semua hal mengklik ini baik-baik saja. Tetapi jika kita hanya melihat hasil sebelumnya, kita akan memiliki sebagian visi realitas.

Untuk alasan ini, saya menambahkan tujuan terakhir di mana kami mengukur jumlah pembelian yang dicapai oleh setiap varian. Anda bisa mendapatkan varian yang mendapat lebih banyak klik, tetapi jika tidak bisa mendapatkan lebih banyak penjualan juga, Anda akan memilih pemenang palsu.

Dalam hasil berikut kita melihat bahwa inilah yang terjadi. Versi dengan warna baru mencapai penjualan 24,5% lebih sedikit, sedangkan versi yang menggabungkan warna dan ukuran menjual 16,6% lebih sedikit daripada versi halaman kami saat ini (yang tanpa perubahan).

Dengan hasil ini, yang harus kita lihat adalah bahwa corong konversi itu kompleks dan, meskipun kita sering membaginya menjadi beberapa fase dan menghitung konversi mikro, kita tidak boleh melupakan gambaran keseluruhannya.

Keuntungan membuat pengujian A/B multi-sasaran adalah bahwa kita dapat memiliki semua perspektif yang kita inginkan untuk mendapatkan gambaran lengkap tentang seberapa baik (atau buruk) kinerja situs web kita. Hanya dengan melakukan ini kita akan dapat memiliki kepercayaan diri untuk memilih pemenang dengan ketenangan pikiran yang lengkap melihat data hasil tes A/B.

Gambar unggulan oleh Grooveland Designs di Unsplash.