Kebenaran Tentang Warna Tombol Ajakan Bertindak Terbaik untuk Situs Web Anda

Banyak yang telah dikatakan di Internet tentang warna yang paling cocok untuk halaman web. Anda akan menemukan ribuan artikel tentangnya. Dari yang pengguna menanyakan warna apa yang lebih baik dan menerima jawaban yang kontradiktif (mengejutkan, ya?), hingga artikel terkenal yang menjelaskan pengujian yang dilakukan Google dengan banyak nuansa biru untuk tautannya.

Kenyataan di balik semua ini adalah bahwa tidak ada yang dapat memastikan bahwa warna tertentu akan bekerja lebih baik atau lebih buruk di situs web tanpa mencobanya. Jika mereka memberi tahu Anda sebaliknya, mereka berbohong kepada Anda. Dan saya yakin Anda tidak suka dibohongi.

Saya juga tidak, jadi ketika saya membaca artikel ini dari Yahoo! Usaha Kecil di mana mereka mengatakan bahwa warna terbaik untuk digunakan pada tombol adalah merah, hijau, dan oranye atau kuning, hal pertama yang saya pikirkan adalah saya harus mencobanya di situs web kami sendiri.

Jika Anda telah mengikuti serangkaian artikel yang saya tulis setiap bulan tentang pengujian A/B, pasti Anda sudah tahu bahwa salah satu halaman terpenting di situs web kami adalah halaman arahan Konten Nelio, beserta halaman harganya. Di kedua halaman, tombol ajakan bertindak yang kami miliki berwarna oranye.

Akankah merah atau hijau bekerja lebih baik dibandingkan dengan warna oranye yang sudah kita gunakan di situs web kita untuk tombol ajakan bertindak? Ini adalah pertanyaan yang saya tanyakan pada diri saya sendiri dan akan saya jawab di sini dengan data nyata dari pengunjung kami. Bukan opini subjektif. Data nyata.

Ayo pergi!

Membuat Tes A/B CSS

Cara termudah untuk mengubah warna tombol pada halaman adalah dengan menambahkan beberapa aturan CSS tambahan untuk menerapkan warna baru. Anda menempatkan aturan background-color baru ke tombol dengan warna yang Anda inginkan dan hanya itu. Mudah.

Dengan Pengujian A/B Nelio, Anda memiliki kemungkinan untuk membuat pengujian A/B gaya CSS untuk menguji berbagai varian aturan CSS tambahan. Anda hanya perlu membuat tes baru dan memilih opsi CSS di pemilih jenis tes:

Ini akan membawa Anda ke editor pengujian, di mana hal pertama yang harus Anda lakukan adalah membuat varian. Perlu diingat bahwa dalam jenis pengujian ini, varian pertama adalah yang menampilkan halaman dengan tampilannya saat ini, tanpa CSS tambahan.

Kemudian Anda membuat varian untuk, dalam kasus kami, setiap warna tambahan yang akan kami uji: satu untuk hijau dan satu untuk merah. Varian pertama sudah oranye, jadi dengan ini kami sudah menyiapkan semuanya.

Untuk setiap varian tambahan, Anda dapat mengeditnya untuk menambahkan aturan CSS tambahan yang mengubah warna tombol. Aturan CSS yang Anda perlukan akan bergantung pada tema yang Anda gunakan di WordPress. Di editor CSS yang disediakan oleh Nelio A/B Testing, Anda dapat melihat secara real time bagaimana aturan CSS baru Anda mengubah tampilan dan nuansa situs Anda. Ini akan membantu Anda memeriksa apakah Anda melakukannya dengan benar.

Berikut adalah tampilan tombol tindakan dari editor gaya CSS dari setiap varian pengujian A/B yang kami siapkan. Seperti yang disebutkan di atas, pertama Anda memiliki versi asli, dengan tombol oranye. Dua varian lainnya termasuk CSS untuk mengubah tombol menjadi hijau dan merah, masing-masing:

Setelah varian siap, sekarang saatnya untuk menentukan tujuan konversi yang ingin kita ukur. Dalam hal ini, seperti yang Anda lihat di tangkapan layar editor pengujian, kami memiliki dua tujuan.

Sasaran pertama akan mengukur klik pada tombol tindakan, sedangkan yang kedua kami juga mengukur klik tersebut, tetapi hanya klik yang terjadi di halaman harga Konten Nelio.

Terakhir, perhatikan bahwa pengujian A/B CSS akan memengaruhi semua halaman situs web Anda. Untuk membatasi perilaku ini dalam Pengujian A/B Nelio, di bilah sisi kanan editor pengujian A/B Anda memiliki opsi untuk membatasi cakupan pengujian. Saya telah melakukannya sehingga hanya mempengaruhi halaman utama Konten Nelio dan halaman harga.

Kami memiliki segalanya untuk memulai tes. Setelah kami melakukannya, Pengujian A/B Nelio bertugas membagi lalu lintas yang mengunjungi dua halaman ini untuk Anda dan menampilkan varian warna yang berbeda, serta melacak konversi (klik pada tombol).

Ingat, Anda hanya perlu menunggu pengunjung menelusuri halaman tersebut untuk mulai melihat hasilnya.

Menganalisis Hasil

Kami telah menjalankan pengujian A/B dari warna tombol di situs web kami selama satu setengah bulan di situs web Spanyol dan hampir sebulan di situs web bahasa Inggris. Dalam versi bahasa Inggris kami menghentikannya lebih awal karena kami mencapai hasil yang signifikan secara statistik lebih cepat dengan nilai kepercayaan yang tinggi.

Tapi mari kita mulai dengan hasil tes di web kami dalam bahasa Spanyol:

Seperti yang Anda lihat pada tangkapan layar di atas, untuk tujuan mengukur klik di kedua laman, tampaknya varian tombol hijau dan merah berkinerja lebih baik daripada versi oranye asli. Namun, statistik memberi tahu kami bahwa peningkatannya tidak substansial dan, oleh karena itu, kami tidak dapat mengatakan bahwa warna-warna ini lebih baik daripada oranye.

Untuk tujuan kedua, yang hanya mengukur klik pada halaman harga Konten Nelio, kami juga melihat bahwa tidak ada warna kemenangan yang jelas. Kita bahkan dapat mengamati bagaimana hijau di sini berkinerja lebih buruk daripada oranye. Meskipun kami tidak dapat menarik kesimpulan kuat dengan data yang dikumpulkan oleh Nelio A/B Testing dari pengunjung kami:

Sekarang mari kita lihat hasil tes di halaman versi bahasa Inggris. Di sini, pada sasaran pertama, yang mengukur klik pada salah satu dari dua halaman Konten Nelio, kami melihat bahwa hijau dan merah adalah warna yang menghasilkan rasio klik-tayang yang lebih baik.

Selain itu, di sini kita dapat menegaskan bahwa warna hijau adalah warna pemenang ujian. Hasilnya signifikan secara statistik dengan tingkat kepercayaan lebih besar dari 99%. Hijau adalah warna terbaik yang dapat kami gunakan di situs web kami dalam bahasa Inggris untuk tombol di halaman Konten Nelio.

Jika kami hanya melihat klik pada halaman harga Konten Nelio (tujuan kedua pengujian), kami melihat bahwa hasilnya konsisten dengan tujuan pertama pengujian:

Setelah melihat ini, kami dapat mengatakan bahwa hijau adalah warna yang paling cocok untuk audiens kami dalam bahasa Inggris di halaman Konten Nelio. Namun, untuk audiens Spanyol kami, kami belum dapat menemukan warna yang berfungsi lebih baik daripada yang sudah kami miliki.

Kesimpulan

Di sini saya menunjukkan hasil pengujian A/B dengan data nyata dari pengunjung yang menjelajahi dua halaman paling relevan di situs web kami. Dan Anda telah dapat memeriksa bahwa apa yang paling cocok untuk audiens tertentu tidak perlu berfungsi paling baik untuk audiens yang berbeda.

Tombol hijau berfungsi paling baik untuk pengunjung berbahasa Inggris kami. Namun bukan berarti hal yang sama bagi pengunjung lainnya. Untuk alasan ini, kami hanya mengubah warna tombol tindakan halaman Konten Nelio menjadi hijau dalam versi bahasa Inggris dari halaman ini. Yang dalam bahasa Spanyol tetap oranye.

Saya akan bodoh jika saya memberi tahu Anda bahwa Anda perlu menggunakan warna hijau di halaman Anda. Tidak ada yang harus memberitahu Anda bahwa. Bukan aku, bukan siapa-siapa. Saya tidak tahu apakah hijau akan bekerja untuk Anda.

Untuk alasan ini, sebelum memperhatikan banyak guru yang akan Anda temukan di Internet, lakukan tes sendiri. Membuat pengujian A/B sangat mudah. Dan ini adalah satu-satunya cara untuk menemukan apa yang berhasil (atau tidak) lebih baik di situs web Anda. Dengan audiens Anda yang sebenarnya.

Gambar unggulan oleh Robert Katzki di Unsplash.