Berikan Lebih Banyak Gaya pada Formulir Komentar Anda di WordPress

Salah satu hal paling menarik yang mungkin terjadi ketika Anda memiliki blog dan menulisnya secara teratur adalah menerima komentar dari pembaca. Tetapi agar hal ini terjadi, konten yang Anda tulis harus menarik dan formulir untuk mengirimkan komentar harus terlihat dan cukup menarik bagi pengunjung untuk mengisi dan mengirimkannya.

Dalam posting ini yang termasuk dalam rangkaian tes bulan ini, kami akan mencoba menyoroti bentuk komentar blog kami dengan memberikan sedikit desain ulang untuk melihat apakah itu berfungsi lebih baik daripada versi saat ini.

Seperti biasa, kami akan menguji perubahan menggunakan teknik pengujian A/B. Ini adalah cara terbaik untuk melihat dengan data nyata dari pengunjung situs web Anda apakah perubahan yang Anda buat berhasil atau tidak.

Meningkatkan desain formulir komentar WordPress

Formulir komentar kami cukup sederhana. Secara default WordPress menambahkan bidang untuk memasukkan situs web pengunjung yang berkomentar, tetapi kami percaya bahwa bidang ini tidak menambah nilai apa pun. Sebaliknya, satu-satunya hal yang menarik adalah komentar spam dari bot yang ingin mendapatkan tautan dengan cara apa pun. Untuk alasan ini kami telah menghapusnya dari bentuk asli kami.

Pada perbandingan berikut ini Anda dapat melihat versi asli dari form komentar blog kami dan variannya dengan perubahan yang telah kami lakukan. Ingatlah untuk menggeser pegangan yang muncul di tengah dari satu sisi ke sisi lain untuk melihat dua versi:

Kami pada dasarnya telah membuat tiga perubahan pada formulir komentar:

1. Kami telah menambahkan beberapa emoji ke judul untuk menyorot area komentar dan mendorong pengunjung untuk menulis. Sekarang sepertinya kita melambaikan tangan dan mendorong mereka untuk menulis dengan emoji sapaan dan tulisan tangan. Orang-orang menyukai emoji. Kami akan melihat apakah ini membantu untuk memiliki lebih banyak komentar.
2. Teks hukum di mana kami menjelaskan di mana komentar disimpan saat mengisi informasi menggunakan font yang lebih kecil . Itu harus ada karena alasan hukum, tetapi kami tidak ingin memberikan terlalu banyak relevansi.
3. Kami mengubah tombol kirim formulir menjadi warna oranye yang menonjol. Seperti yang kita lihat sebelumnya, warna itu penting.

Sekarang kita memiliki desain baru yang siap, yang harus kita lakukan adalah mengujinya.

Membuat pengujian A/B dari gaya CSS

Untuk menguji perubahan desain ini dalam bentuk komentar blog kita di WordPress, hal yang paling sederhana adalah menggunakan pengujian A/B dari aturan CSS. Versi A dari website kami adalah yang memiliki bentuk asli, sedangkan versi B akan berisi aturan CSS tambahan untuk mencapai tiga perubahan dalam desain formulir yang telah kami antisipasi sebelumnya.

Dengan Pengujian A/B Nelio, kami membuat pengujian A/B CSS baru. Gambar berikutnya menunjukkan layar edit dari tes tersebut:

Kami menamai tes tersebut ("Sorot formulir komentar", dalam kasus kami) dan variannya ("Formulir komentar yang didesain ulang"). Kami juga dapat menambahkan deskripsi ke pengujian di bidang yang sesuai di bilah sisi kanan. Pada tangkapan layar sebelumnya Anda dapat melihat deskripsi yang kami tambahkan, yang berfungsi sebagai referensi bagi setiap pengguna yang akan melihat pengujian di masa mendatang.

Kami juga telah mengurangi cakupan pengujian ke URL yang berisi https://neliosoftware.com/blog/ , sehingga pengujian hanya berlaku untuk postingan di blog kami.

Sebagai tindakan konversi, kami telah menetapkan klik pada tombol kirim formulir. Setiap kali pengunjung mengklik tombol itu, kami akan menghitung konversi dalam pengujian untuk varian yang dilihat pengunjung.

Sebelum selesai, kita harus mengedit varian B dari tes. Kami mengarahkan mouse ke varian ini dan opsi untuk mengeditnya akan muncul. Setelah kami mengkliknya, editor CSS dengan pratinjau terbuka, seperti yang Anda lihat di tangkapan layar berikut:

Seperti yang Anda lihat, di bilah sisi kiri kami memiliki editor CSS di mana Anda dapat menulis aturan khusus yang membuat perubahan dalam desain yang kita lihat sebelumnya. Selain itu, di sisi kanan Anda dapat menelusuri situs web Anda untuk melihat pratinjau hasil dari perubahan ini. Dengan hanya membutuhkan enam aturan CSS sederhana untuk mendesain ulang formulir komentar kita.

Setelah selesai, kami menyimpan dan kembali ke editor pengujian A/B untuk memulainya. Sekarang kita tinggal menunggu pengunjung mengunjungi postingan kita. Setiap pengunjung akan melihat versi asli formulir atau versi dengan desain ulang. Ini dilakukan oleh Nelio A/B Testing dengan sendirinya, tanpa Anda harus melakukan apa pun.

Menganalisis hasil pengujian A/B

Kami telah menjalankan tes selama sekitar enam minggu, menganalisis hampir 20.000 pengunjung ke blog kami (contoh populasi yang bagus). Anda dapat melihat hasil lengkap dari pengujian A/B pada tangkapan layar berikut:

Jumlah total konversi yang diterima tes tidak spektakuler. Saat itu blog kami telah menerima 27 komentar (itulah sebabnya ada 27 konversi dalam hasil pengujian).

Namun yang perlu diperhatikan adalah varian dengan desain ulang form komentar ini berhasil menggandakan jumlah konversi dari versi aslinya. Oleh karena itu, ini adalah opsi pemenang uji A/B, dengan nilai kepercayaan statistik yang tinggi.

Seperti yang Anda lihat, perubahan kecil dalam desain, yang dapat dicapai dengan sedikit aturan CSS, dapat berdampak langsung pada hasil situs web Anda. Kami telah menerapkan varian ini di situs web kami dengan menambahkan aturan CSS tambahan di tema kami.

Desain yang lebih rumit mendorong interaksi

Desain adalah kunci untuk mengubah perilaku pengunjung website kita. Mendapatkan desain yang berfungsi lebih baik daripada yang sekarang tidak harus membutuhkan banyak sumber daya. Di sini kita telah melihat bahwa dengan beberapa aturan CSS sederhana kita dapat membuat perubahan yang memberi kita hasil dengan cepat.

Menerapkan perubahan dalam desain situs web kami adalah sesuatu yang harus kami lakukan dengan hati-hati. Itulah sebabnya kami menggunakan pengujian A/B. Berkat teknik ini, kami dapat memeriksa dengan data nyata dari pengunjung kami apakah perubahan itu berhasil atau tidak. Jika tidak, kita tidak akan tahu apakah kita telah memilih jalan perbaikan yang benar atau kita akan mundur.

Gambar unggulan oleh Jason Leung di Unsplash.