Split Testing Dengan CSS Stylesheets

Cara tercepat untuk memisahkan pengujian situs web secara signifikan adalah dengan membuat perubahan berani pada cascading style sheet (CSS) dalam eksperimen di seluruh situs.

Mengapa CSS Stylesheet Penting

File CSS utama situs web adalah titik referensi utama yang mengontrol gaya, posisi, dan perilaku umum semua elemen di setiap halaman web.

Di dalam file CSS utama terdapat pengaturan untuk semua font, margin, warna, perataan, dan banyak lagi. Ini adalah file terpenting di sebagian besar situs web bertemplat dan dapat secara drastis mengubah tampilan situs web hanya dengan pengeditan kecil.

Tes Split Lebar Situs yang Harus Anda Lakukan Setiap Saat

Ada banyak elemen umum di seluruh situs web yang memainkan peran besar dalam seberapa mudah situs web untuk membaca, menggunakan, menavigasi, menyoroti ajakan bertindak, dan menampilkan semua informasi penting.

Saat pengguna memutuskan apakah akan melakukan kontak, atau mungkin melakukan pembelian di situs web, salah satu hal di atas dapat menjadi faktor penentu dalam menghentikan konversi tersebut. Berikut adalah beberapa pertimbangan utama untuk elemen seluruh situs:

Tombol Ajakan Bertindak

Semua konversi online dimulai dengan tombol, tautan, atau widget ajakan bertindak (CTA). Ukuran, warna, susunan kata, dan bahkan posisi CTA ini membuat perbedaan besar pada tingkat konversi. Warna-warna tertentu dari tombol CTA, misalnya, mungkin terlalu menyatu dengan latar belakang, atau mungkin secara tidak sadar membuat pengguna tidak mengkliknya, tergantung pada apa yang mereka anggap sebagai warna negatif. Teks yang digunakan pada tautan dan tombol juga membuat perbedaan. Misalnya, cukup mengubah tombol "KIRIM" formulir untuk mengatakan "KIRIM" menghasilkan hasil yang lebih baik karena "kirim" dianggap sebagai kata yang kuat. Anda dapat membaca lebih lanjut tentang ini di panduan utama untuk CTA di sini di VWO.com.

Ukuran huruf

Elemen yang jarang diuji ini memainkan peran besar dalam aksesibilitas bagi banyak pengguna. Font sering kali terlalu kecil untuk dibaca oleh sebagian pengguna, jadi mereka mungkin harus menggunakan fungsi zoom jika mereka sudah terbiasa, tetapi hal ini tidak selalu memungkinkan, atau mudah, pada perangkat seluler. Ukuran font yang terlalu besar juga dapat merugikan karena dapat memperlambat kecepatan membaca, terutama pada situs web versi mobile-friendly. Baca lebih lanjut tentang ilmu di balik ukuran font di sini di imarc.com.

Jenis huruf

Sekali lagi, gaya font jarang diuji di banyak situs web, tampaknya diputuskan pada tahap pengembangan desain awal dan kemudian dilupakan di banyak situs web. Gaya font yang berbeda memiliki tingkat keterbacaan yang berbeda. Juga, beberapa font hanya tersedia pada perangkat tertentu dan beberapa muncul sangat buruk pada perangkat tertentu pada ukuran tertentu tanpa Rasterisasi Font. Anda dapat menggunakan keluarga font untuk menggunakan serangkaian font, mulai dari favorit Anda dan turun ke font yang lebih sederhana, seperti Arial, yang selalu ada di setiap perangkat Font baru dapat disertakan di situs web melalui JavaScript, atau layanan seperti Google Font. Anda dapat mengetahui lebih lanjut di posting ini di TypeWolf.com tentang sepuluh font web teratas tahun 2016.

Gaya tulisan

Gaya font seperti tinggi garis, garis bawah, ketebalan, warna, dan margin juga memengaruhi aksesibilitas dan keterbacaan. Tautan lebih cenderung diklik ketika berwarna biru dan digarisbawahi, sesuatu yang telah diuji dengan cermat oleh Google dan eBay selama bertahun-tahun dengan Google bahkan menguji tautan hitam pada 2016. Jika tautan tidak terlihat jelas sebagai tautan di situs web Anda , maka mereka harus diuji dan Anda akan menemukan mereka sering menunjukkan keterlibatan yang lebih besar setelah diubah.

Warna Latar Belakang

Seringkali situs web dibuat dengan latar belakang putih tetapi jika Anda melihat situs web berita atau platform media sosial favorit Anda, seringkali warnanya sedikit biru atau abu-abu. Warna latar belakang dapat membantu menonjolkan area tertentu dari halaman web, seperti kotak informasi atau spanduk penawaran khusus. Selain itu, warna latar belakang dapat memperkuat merek atau jenis produk yang ditampilkan dan korelasi ini meningkatkan tingkat konversi, karena konten tampak lebih relevan. Cari tahu lebih lanjut tentang psikologi warna untuk situs web di artikel ini di Jimdo.com dan lihat bagaimana warna seperti Oranye menandakan banyak hal (pikirkan Amazon) dan biru menandakan netralitas dan teknologi (pikirkan Facebook atau Twitter).

Memposisikan Ulang atau Menyembunyikan Elemen

File CSS mengontrol margin dan padding untuk semua elemen umum di halaman web dan juga memungkinkan Anda untuk menghapus item tertentu sepenuhnya menggunakan perintah “display:none”. Beberapa cara Anda dapat memanfaatkan ini adalah dengan mencoba mengurangi ruang yang terbuang secara vertikal, menghapus informasi yang tidak perlu, mengubah jarak antara CTA penting, atau bereksperimen dengan menghapus blok konten tertentu. Terkadang lebih sedikit lebih baik di halaman web (prinsip tetap sederhana-bodoh) dan merupakan praktik yang baik untuk melihat seberapa banyak yang dapat dihapus dari halaman web sambil meningkatkan rasio konversi.

Platform untuk Pengujian Terpisah File CSS di Seluruh Situs

Sangat penting untuk menjaga template di situs web konsisten untuk setiap pengguna individu saat mereka berpindah dari halaman ke halaman. Ini bisa merugikan (dan tentu saja eksperimen yang buruk) jika hanya satu halaman yang diuji pemisahan A/B sementara yang lain tetap sama.

Perangkat lunak pengujian terpisah khusus diperlukan untuk menjaga agar perubahan file CSS konsisten dari halaman ke halaman untuk setiap pengguna individu, sayangnya “Eksperimen Konten” gratis Google Analytics tidak melayani jenis pengujian terpisah ini. Berikut adalah beberapa alat yang mungkin ingin Anda gunakan:

• Visual Website Optimizer (VWO) – vwo.com – Kami menemukan ini sebagai perangkat lunak pengujian terpisah yang paling mudah untuk diterapkan. Ini menangani semua jenis tes terpisah pada HTML, CSS atau JavaScript dan juga menghasilkan peta panas pengguna jika diperlukan. Struktur harga dapat ditemukan di sini
• Optimizely – optimizely.com – Ini juga menangani semua jenis tes split pada HTML, CSS atau JavaScript dan dapat melakukan beberapa tes split yang sangat canggih jika diperlukan. Informasi harga dapat ditemukan di sini

Kesimpulan

Menyiapkan tes pemisahan CSS di seluruh situs mudah dan efektif untuk dilakukan, tetapi Anda mungkin memerlukan bantuan 15 menit dari pengembang jika Anda tidak terbiasa dengan CSS.

Setelah situs web memiliki font, gaya, dan CTA yang tepat, Anda kemudian dapat berkonsentrasi pada halaman arahan utama situs web dan elemen niche lainnya. Ini meningkatkan tingkat konversi dan membuat situs web jauh lebih efektif tanpa memerlukan lalu lintas tambahan.

Jika Anda membutuhkan bantuan dengan Anda jangan ragu untuk menghubungi kami.