9 Tips Desain CTA Penting untuk Tombol yang Membuat Orang Mengklik
Diterbitkan: 2022-08-27Ajakan bertindak (CTA) Anda adalah klimaks dari strategi pemasaran Anda. Baik Anda meminta pembelian, mendaftar, atau mengunduh. Semuanya hingga saat ini adalah untuk mendapatkan pelanggan potensial ke halaman arahan Anda. Dan terkadang, Anda hanya punya beberapa kata untuk menutup kesepakatan.
Itulah mengapa tombol CTA Anda adalah elemen desain terpenting situs Anda. Karena dapat mengubah pengunjung pasif menjadi pengguna aktif.
Tombol ajakan bertindak tampak sederhana. Tapi mereka mudah dikacaukan. Atau benar-benar ketinggalan. 9 tips desain CTA ini akan memastikan Anda mendapatkan konversi itu. Plus, banyak contoh bermanfaat:
- Jadikan tombol Anda terlihat dapat diklik
- Jadilah deskriptif dengan salinan Anda
- Ukuran dan ruang dengan benar
- Terhubung menggunakan orang pertama
- Buat urgensi dan gunakan kata kerja yang kuat
- Coba subjudul
- Variasi pengujian A/B
- Perhatikan versi seluler
Jadikan tombol CTA Anda terlihat dapat diklik
Membuat tombol terlihat 'dapat diklik' terdengar konyol. Tapi Anda tidak akan percaya seberapa sering situs melakukan kesalahan. Dan itu sebagian besar berkaitan dengan garis besar dan warna tombol.
Tren tingkat konversi datang dan pergi. Seperti "tombol hantu" transparan dengan batas tipis dan teks yang memudar menjadi warna latar belakang. Meskipun mereka mungkin terlihat keren, mereka cenderung kurang menarik perhatian. Kebalikan dari apa yang harus dilakukan CTA yang efektif.
Satu-satunya saat desain ini biasanya berfungsi adalah sebagai tombol sekunder:
Sumber: Gerakan UX
Berikut adalah contoh lain dari tombol CTA yang tidak dapat diklik dengan jelas. Tentu, halaman arahan agensi desain ini terlihat keren. Tetapi Anda akan dimaafkan karena menggulir melewati studi kasus ini:
Jadi, bagaimana Anda membuat orang mengklik? Untuk tingkat konversi yang lebih tinggi, tombol Anda harus besar, tebal, dan sesuai dengan skema warna pilihan Anda.
Netflix menggunakan warna merah khasnya untuk menarik perhatian Anda. Hampir seperti tanda berhenti:
Ini juga dapat berfungsi untuk memiliki warna yang kontras, sehingga menonjol. Seperti yang dilakukan oleh platform eCommerce BigCommerce di sini:
Ini berlaku untuk teks di dalam kotak juga. Pastikan kontras sehingga Anda dapat membacanya dengan benar.
Gradien juga dapat bekerja dalam skema warna merek yang sama. Mereka memberi nuansa modern dan lebih muda:
Sumber: Senin
Saran saya di sini adalah mencoba dan menjaga agar desain CTA Anda tetap jelas. Melakukan sesuatu di luar kebiasaan mungkin terdengar seperti ide yang bagus, tetapi manusia adalah makhluk kebiasaan. Dan Anda akan kagum dengan berapa banyak yang akan kehilangan intinya.
Jadilah deskriptif dengan salinan Anda
Salah satu taktik pengoptimalan tingkat konversi (CRO) yang paling sederhana adalah copywriting yang hebat. Tapi tidak hanya dengan potongan besar teks. Mikrokopi sama pentingnya dan mencakup detail yang lebih kecil.
Anda biasanya melihatnya di formulir kontak dan bilah pembaruan status media sosial. Seperti Facebook yang terkenal "Apa yang ada di pikiran Anda?" atau "Mulai posting" LinkedIn.
Mikrokopi dapat membantu:
- Beri tahu pengguna apa yang harus dilakukan
- Membuat saran
- Mengatasi masalah
- Berikan konteks
Salinan tombol CTA Anda adalah contoh lain. Dan itu harus memberi tahu orang-orang apa yang akan mereka dapatkan/apa yang akan terjadi ketika mereka mengkliknya.
Ini dulunya adalah tombol CTA IMPACT. "Download Gratis". Tidak terlalu imajinatif, ya?
Sumber: DAMPAK
Namun dengan membuatnya lebih deskriptif, mereka meningkatkan konversi sebesar 78,5%. “Tunjukkan cara menarik lebih banyak pelanggan” jelas lebih menarik:
Sangat menggoda untuk hanya menulis "Klik di sini". Tetapi ada begitu banyak alternatif yang akan melibatkan pengguna dan semoga menginspirasi tindakan yang diinginkan.
Jadi, apa yang harus Anda tulis? Pertama, Anda perlu mengidentifikasi maksud konversi. Anda ingin menyelaraskan dengan tempat pengguna berada di corong dan dari mana mereka berasal (sumber lalu lintas).
Sumber: KlientBoost
Maka Anda perlu menekankan nilai dari apa yang Anda berikan. Dan menangani keberatan apa pun.
Sumber: Contoh Pemasaran
Ini adalah proses yang unik. Dan itu akan tergantung pada niche dan suara merek Anda. Tapi kata-kata apa pun yang Anda pilih, jangan lupa untuk membuat teks tombol tetap pendek dan langsung ke intinya.
Ukuran dengan benar dan gunakan ruang putih
Desain tombol CTA lebih dari sekadar warna. Ukuran tombol adalah detail kecil lainnya yang benar-benar dapat memengaruhi rasio klik-tayang. Dan ruang putih sama pentingnya dengan teks itu sendiri.
Banyak dari ini akan tergantung pada desain web Anda. Ruang negatif (putih) menarik perhatian ke elemen tertentu pada halaman. Anda tidak ingin beranda yang berantakan. Harus ada jalur yang jelas untuk diikuti pengunjung.
Airbnb adalah salah satu contoh terbaik dari ruang negatif yang dilakukan dengan benar. Dan warna yang kontras untuk membuatnya lebih jelas:
Buffer memiliki sedikit lebih banyak di beranda mereka tetapi mereka masih menyimpan tombol CTA dekat dengan salinan utama. Plus, contoh penggunaan tombol hantu secara efektif. Ini membuatnya sangat jelas apa yang harus dilakukan selanjutnya:
Semakin besar tombol Anda, semakin terlihat. Dan itu perlu menonjol untuk menarik perhatian. Tetapi tidak terlalu banyak sehingga mengambil alih halaman dan merusak UX.
Jika Anda rentan terhadap migrain, berpalinglah sekarang. Berikut ini contoh cara untuk tidak melakukannya:
Sumber: Justinmind
Begitu banyak elemen di sini terlihat seperti tombol. Saya bahkan tidak yakin situs ini tahu apa yang diinginkan pengunjung untuk diklik.
Sebaliknya, apa hal pertama yang Anda lihat di halaman arahan Spotify?
Tombol "Go Premium" yang besar, bukan? Begitulah cara mendesain jalur pengguna yang jelas.
Terakhir, apakah ada hal lain yang Anda perhatikan tentang desain CTA untuk contoh yang bagus? Jika Anda melihat lagi, Anda akan melihat sesuatu yang hampir sama dari mereka semua.
Para ilmuwan menemukan bahwa manusia menyukai "bentuk-bentuk dengan lekukan lembut sebagai lawan dari titik-titik tajam". Mereka lebih enak dipandang dan membuat kita merasa lebih damai. Karena itu, tombol ajakan bertindak yang paling efektif adalah persegi panjang dengan sudut membulat.
Sumber: CleverTap
Ini adalah format paling populer karena suatu alasan. Tapi coba opsi yang berbeda. Audiens Anda mungkin lebih suka sesuatu yang lain.
Terhubung menggunakan orang pertama
Desain CTA yang lebih baik dapat dilakukan dengan satu tweak. Terkadang, satu kata.
Dalam copywriting, kita diajarkan untuk menggunakan kata “kamu”. Karena itu membuat pembaca merasa seperti sedang diajak bicara secara langsung. Jadi menurut Anda itu juga berlaku untuk salinan tombol Anda, bukan? Anehnya, tidak begitu banyak.
Unbounce menemukan bahwa mengubah salinan di halaman arahan mereka dari "Mulai uji coba 30 hari gratis Anda" menjadi "Mulai uji coba 30 hari gratis saya " meningkatkan rasio klik-tayang sebesar 90%.
Jadi, mengapa ini? Nah, ketika seseorang merasa terhubung dengan suatu produk, kemungkinan besar mereka akan berkonversi. Ini memberikan sentuhan pribadi tanpa harus tahu apa-apa tentang mereka.
Psikologi pemasaran menunjukkan keputusan pembelian sebagian besar didasarkan pada emosi. Jadi, Anda ingin pengunjung situs Anda merasa bahwa itu adalah pilihan mereka.
Menulis "saya" membantu pengguna memvisualisasikan tindakan yang akan mereka ambil. Ini memberi mereka kendali dan (semoga) mendorong mereka untuk mengambil keputusan.
Plus, itu dapat menunjukkan bahwa mereka akan mendapatkan nilai langsung. Seperti di beranda Crazy Egg:
Sumber: Telur Gila
1-800 Contacts adalah toko lensa kontak terbesar di dunia. Tapi mereka melakukan hal yang sama. Mereka memastikan tombol CTA mereka ditujukan hanya untuk satu orang:
Sumber: 1-800 Kontak
Tidak banyak perusahaan yang menggunakan teknik ini. Yang berarti itu menonjol ketika Anda melihatnya. Jadi, mengapa tidak mencobanya?
Ciptakan rasa urgensi dan gunakan kata kerja yang kuat
Salinan Anda perlu menciptakan rasa urgensi dan menarik perhatian pengguna. Ini bekerja sangat baik untuk bisnis eCommerce. Menggunakan kata-kata seperti "sekarang" dan "hari ini" dapat membantu memacu tindakan. Karena mereka menyarankan tawaran itu tidak akan ada selamanya.
"Beli sekarang" adalah klasik. Tapi kami bisa melakukan lebih baik dari itu dengan desain CTA kami.
Sumber: GoSquared
Anda dapat mencoba kata-kata seperti:
- “Perlakukan diri Anda hari ini”
- “Buka diskon sekarang”
- “Unduhan gratis satu kali”
Anda juga ingin membuat penawaran Anda menarik dan memicu rasa ingin tahu. Jadi, mulailah dengan kata kerja yang kuat. Bukan sesuatu yang sepertinya akan menjadi usaha. Itu cara mudah untuk membuat orang menjauh.
Berikut adalah beberapa contoh dari apa yang saya maksud:
Coba ini: | Daripada ini: |
Menemukan | Daftar |
Menghubung | Kirim |
Mengeklaim | Membayar |
Bergabung | Menyelesaikan |
Awal | Kirim |
Menyimpan | Menginvestasikan |
Mengeksplorasi | Kontak |
Temukan | Mendukung |
Sisi kiri terdengar seperti pengguna Anda akan mendapatkan sesuatu dari mengklik. Sisi kanan terdengar seperti mereka harus mengorbankan waktu atau uang.
Anda juga bisa menjadi sangat kreatif. Seperti versi beranda Huemor ini:
Sumber: FastCapital360
Atau halaman arahan lama Humboldt County yang memberikan sentuhan mistis:
Sumber: ConEmprendimiento
Brainstorm ide dengan tim Anda. Tidak peduli seberapa konyol. Anda akan terkejut dengan apa yang akan Anda temukan dan akhirnya gunakan. Tapi apa pun kata-kata yang Anda pilih, jangan lupa untuk memenuhi janji Anda di ujung yang lain.
Coba subjudul di sebelah tombol ajakan bertindak Anda
Terkadang, orang membutuhkan sedikit dorongan. Dan sedikit teks di bawah tombol CTA Anda dapat membantu. Ini bukan "subpos" biasa. Tapi itu cara termudah untuk menggambarkannya.
Jika kita menganggap teks tombol sebagai judul, subjudul paling populer yang akan Anda lihat adalah "Tidak diperlukan detail kartu kredit". Tapi milikmu bisa mengatakan apa saja. Dan menyenangkan untuk sedikit berkreasi dengannya.
Sering kali, mereka digunakan untuk memberikan kepercayaan pelanggan potensial. Dan mereka dapat mengatasi poin rasa sakit utama yang mungkin dimiliki orang:
Sumber: CoSchedule
CoSchedule memahami bahwa pengguna mungkin berpikir ini hanya uji coba gratis. Jadi, “Kenapa tidak? Gratis selamanya” jelas.
Anda juga dapat menggunakannya untuk menambahkan beberapa bukti sosial:
Sumber: Basecamp
Ini memberi Anda kredibilitas instan karena pengguna dapat dengan jelas melihat orang lain sudah mempercayai Anda. Itu juga dapat menginspirasi FOMO karena orang berpikir pasti ada alasan untuk begitu banyak pelanggan.
Jika Anda memiliki penawaran khusus atau nilai ekstra yang menyertai layanan Anda, gunakan subjudul Anda untuk menyorotnya:
Sumber: Mozo
Mikrokopi adalah kesempatan bagi suara merek Anda untuk bersinar. Meski hanya satu kalimat. Jadi, jangan takut sedikit nakal jika cocok:
Sumber: KlientBoost
Anda juga bisa spesifik dengan apa yang akan terjadi setelah orang mengklik. Memberitahu mereka:
- Apa yang akan mereka dapatkan (ide pemasaran baru)
- Berapa (17+)
- Dan mengapa mereka harus peduli (mereka lebih baik dari yang Anda miliki)
Gunakan contoh-contoh ini sebagai templat untuk inspirasi. Atau lakukan sesuatu yang sama sekali berbeda. Pastikan itu cocok dengan identitas merek Anda dan bersenang-senanglah dengannya.
Jangan lupa pengujian A/B
Sebagian besar alat CRO bertujuan untuk meningkatkan pengalaman pengguna (UX). Dan Anda mungkin sudah melakukan ini dengan bagian utama halaman web Anda. Tetapi Anda juga harus melakukannya dengan elemen-elemen kecil.
Amazon terkenal pilih-pilih tentang desain tombol CTA-nya. Apalagi dengan penggunaan pihak ke-3. Jadi, pastikan Anda tidak melanggar aturan apa pun dengan aturan Anda.
Setelah itu, sedikit perubahan pada desain tombol Anda dapat berdampak besar. Jadi, bandingkan berbagai jenis tombol CTA. Kemudian variasi uji A/B dari:
- Warna tombol
- salinan CTA
- jenis huruf
- Penempatan dalam desain halaman
- Muncul tiba-tiba
- Formulir kontak
Sumber: Snov
Seperti yang saya bahas sebelumnya, terkadang mengubah satu kata saja dapat meningkatkan konversi atau rasio klik-tayang. Tetapi sebelum Anda masuk, Anda perlu memahami bagaimana pengunjung menavigasi situs Anda.
Anda ingin mengetahui hal-hal seperti:
- Elemen apa yang mereka coba interaksikan
- Dari mana mereka berasal?
- Perjalanan pengguna/corong pembelian situs Anda
- Motivasi orang untuk berada di sana
Sumber: GIPHY
Setelah Anda mendapatkan informasi ini, Anda dapat bereksperimen dengan hal-hal berdasarkan fakta, bukan tebakan.
Biasanya lebih mudah untuk membandingkan versi A dan B dengan desain CTA. Tetapi Anda dapat meningkatkan ini dan mencoba pengujian multivarian. Sederhana biasanya lebih baik pada awalnya. Dengan begitu, Anda akan memiliki pemenang yang jelas.
Tapi tidak ada yang menghentikan Anda mencoba pemenang itu melawan versi lain setelah itu. Anda harus selalu menguji dan membandingkan. Bahkan ketika Anda telah menemukan sesuatu yang berhasil. Itulah yang dilakukan oleh merek-merek sukses.
Perhatikan versi seluler
Tip cepat untuk menyelesaikan. Elemen desain Anda akan terlihat sangat berbeda di layar ponsel. Anda bekerja dengan tampilan yang jauh lebih kecil dan piksel yang lebih sedikit. Jadi kekacauan menjadi jauh lebih mudah.
Semua yang telah kami bahas menjadi lebih umum di versi seluler Anda. Warna kontras harus lebih menonjol:
Ruang negatif harus menjadi prioritas:
Dan bahkan subpos Anda mungkin berada di tempat yang berbeda. Karena pengguna seluler mungkin tidak menggulir ke bawah cukup jauh untuk melihatnya di bawah:
Berteriak ke CleverTap untuk grafik itu
Lebih banyak pemikiran perlu masuk ke UX Anda secara umum di seluler. Karena seluler menyumbang lebih dari setengah dari semua lalu lintas pencarian global. Anda tidak dapat mengharapkan versi desktop Anda untuk menerjemahkan. Dan sedikit usaha dapat menghasilkan rasio klik-tayang yang jauh lebih tinggi.
Kesimpulan
Desain CTA yang efektif terdiri dari banyak detail kecil ini. Saya sudah mengatakannya berkali-kali, tetapi tweak terkecil bisa menjadi semua yang diperlukan. Bahkan sesuatu yang tidak penting seperti warna atau bentuk garis luarnya.
Pengujian A/B adalah satu-satunya cara yang akan Anda ketahui. Dan Anda bahkan tidak memerlukan alat CRO yang mahal untuk melakukannya. Lacak saja konversi Anda. Membuat perubahan. Dan lihat apakah ada peningkatan atau penurunan dari angka biasanya.
Berikan saja tombol ajakan bertindak Anda perhatian yang layak. Bisa jadi perbedaan antara pelanggan baru atau peluang yang hilang.
Pernahkah Anda melihat desain CTA asli baru-baru ini? Sudahkah Anda membuat perubahan kecil yang meningkatkan konversi? Beri tahu kami di komentar di bawah.