Panduan Call to Action Tombol, Praktik Terbaik dan Contoh

Tombol ajakan bertindak di situs web sering diabaikan. Desainer terkadang tidak memahami dengan tepat apa yang membuat tombol ajakan bertindak yang bagus selain menarik dan pas dengan keseluruhan desain. Tetapi tombol ajakan bertindak terlalu penting untuk dirancang tanpa semacam pemahaman tentang apa yang membuatnya efektif. Setelah semua, titik utama dari tombol ajakan untuk bertindak adalah untuk mendapatkan pengunjung melakukan sesuatu.

Sangat penting untuk mendapatkan setidaknya pemahaman dasar tentang bagaimana warna, skala, bahasa, dan faktor-faktor lain memengaruhi tingkat konversi tombol ajakan untuk bertindak. Konsep-konsep di sini tidak rumit, tetapi mereka mengambil sedikit pemikiran dan perencanaan untuk membuat tombol ajakan bertindak paling efektif yang mungkin dalam desain yang diberikan. Baca terus untuk informasi lebih lanjut tentang masing-masing poin ini dan banyak lagi.

Tujuan dari Tombol "Panggilan untuk Bertindak"

Tombol ajakan bertindak dapat melayani berbagai fungsi. Lagipula, “panggilan untuk bertindak” benar-benar agak kabur. Maksudnya adalah tujuan utamanya adalah untuk mendapatkan pengunjung ke situs Anda lakukan sesuatu. Sesuatu itu dapat menambahkan produk ke keranjang belanja mereka, mengunduh sesuatu, meminta informasi, atau apa saja.

Karena tombol ajakan untuk bertindak memiliki tujuan yang beragam, banyak pertimbangan harus mengarah pada apa yang ingin dicapai tombol tersebut. Jenis situs, target pasar, dan tindakan yang diinginkan semuanya dapat memainkan peran dalam cara terbaik merancang tombol ajakan bertindak.

Jenis Tombol "Ajakan Bertindak"

Ada beberapa jenis tombol ajakan bertindak. Sementara setiap jenis bertujuan untuk membuat pengunjung melakukan tindakan tertentu, tindakan itu dapat sangat bervariasi. Di bawah ini adalah jenis tombol ajakan untuk bertindak yang paling umum, berdasarkan pada tindakan yang mereka ingin Anda lakukan.

1. Tambahkan ke Tombol Troli

Situs e-commerce umumnya menggunakan sejumlah tombol ajakan untuk bertindak, tetapi yang paling banyak digunakan adalah “Masukkan ke keranjang” tombol. Tombol-tombol ini umumnya muncul pada halaman produk individual. Tujuan mereka adalah untuk menarik pelanggan untuk membeli barang. Elemen desain umum dalam tombol tambahkan ke keranjang mencakup kata-kata sederhana (seperti “Masukkan ke keranjang” atau “Tambahkan ke tas” atau “Beli sekarang“) dan penggunaan ikon (biasanya tas atau kereta).

2. Unduh Tombol

Tombol unduhan mirip dengan menambahkan ke tombol gerobak di mana mereka mencoba untuk menarik pengunjung untuk memiliki barang. Dalam hal tombol unduh, banyak desainer memilih untuk memasukkan lebih banyak informasi daripada jenis tombol lainnya (seperti informasi versi atau ukuran unduhan).

3. Tombol Percobaan

Beberapa situs mencoba menarik pengunjung untuk mencoba penawaran mereka, umumnya dalam bentuk uji coba gratis. Ini bisa berupa unduhan gratis atau akun gratis, tergantung pada situs tertentu. Beberapa situs menggunakan “kurang itu lebih” filsafat dan menjaga bahasa pada tombol mereka ke minimum, sementara yang lain suka menawarkan informasi lebih lanjut tentang apa yang terkandung dalam persidangan.

4. Pelajari Lebih Lanjut Tombol

Pelajari lebih lanjut tombol umumnya digunakan di akhir blok informasi penggoda (sering di halaman beranda). Tombol-tombol ini biasanya sederhana, tetapi sering kali terlalu besar untuk menarik perhatian pengunjung.

5. Tombol Daftar

Tombol pendaftaran muncul paling umum dalam dua versi berbeda. Jenis pertama biasanya langsung dikaitkan dengan formulir pendaftaran. Tipe kedua biasanya digunakan dengan cara yang mirip “Masukkan ke keranjang” tombol, sebagai cara bagi pengguna untuk membeli atau mendaftar untuk layanan atau akun, sebelum mereka benar-benar mencapai formulir pendaftaran.

Ada beberapa jenis tombol ajakan untuk bertindak, tetapi ini adalah yang paling umum. Pedoman yang berlaku untuk yang di atas kemungkinan juga akan berlaku untuk semua jenis tombol ajakan bertindak yang mungkin Anda rancang.

Menggunakan Ruang Negatif Secara Efektif

Anda ingin tombol ajakan bertindak menonjol dari konten di sekitarnya dan sangat menarik perhatian pengunjung situs Anda. Untuk itu, Anda perlu memanfaatkan ruang negatif di sekitar tombol-tombol itu. Masukkan ruang kosong antara konten Anda dan tombol ajakan bertindak Anda. Meskipun ini kurang penting (dan kurang umum) pada beberapa tombol, seperti menambah tombol keranjang, dengan yang lain, seperti yang ingin dipelajari lebih lanjut, bekerja lebih baik dengan lebih banyak ruang.

Sangat penting untuk menyeimbangkan jumlah ruang negatif yang Anda miliki di sekitar tombol dengan ukuran tombol itu sendiri. Ini tentang proporsi. Anda ingin tombol Anda, ruang di sekelilingnya, dan konten di sekelilingnya terlihat seperti mereka menyatu, bahkan dengan perbedaan ukuran. Anda mungkin harus bermain-main dengan hal-hal sedikit agar mereka terlihat benar.

Beberapa pedoman:

Pastikan ada cukup ruang di sekitar tombol Anda sehingga tidak terasa berantakan
Pertimbangkan prinsip-prinsip seperti aturan pertiga atau Rasio Emas ketika menentukan berapa banyak ruang untuk dimasukkan
Ruang negatif memberikan ruang tombol ajakan bertindak untuk menonjol dari konten Anda yang lain dan membedakannya

Ukuran dan Warna

Seberapa besar tombol ajakan bertindak Anda sangat penting. Tombol yang terlalu besar akan mengalahkan semua yang ada di sekitarnya. Tombol yang terlalu kecil akan tersesat dalam pengocokan semua konten lain pada halaman. Anda ingin tombol Anda menjadi cukup besar untuk menonjol tanpa membebani desain.

Warna dapat digunakan untuk efek luar biasa untuk membantu menyeimbangkan ukuran tombol Anda. Untuk tombol yang lebih besar, pilih warna yang kurang menonjol dalam desain Anda (tapi masih menonjol latar belakangnya). Untuk tombol yang lebih kecil, Anda mungkin ingin memilih warna yang lebih terang, kontras untuk benar-benar membuat tombol pop. Dalam kedua kasus tersebut, pastikan warna yang Anda gunakan membedakan tombol tanpa bertentangan dengan desain keseluruhan situs.

Beberapa pedoman:

Tombol ajakan bertindak Anda idealnya adalah tombol terbesar pada halaman tertentu
Gunakan warna yang kontras untuk membuat tombol yang lebih kecil lebih menonjol
Gunakan warna yang tidak terlalu berbeda untuk membuat tombol yang lebih besar pas dengan yang lebih baik
Tombol ajakan bertindak perlu memerintahkan perhatian tanpa membanjiri desain Anda

Bahasa

Kata-kata persis yang Anda pilih untuk digunakan pada tombol ajakan bertindak dapat memiliki efek besar pada konversi. Membandingkan “Beli sekarang” dengan “Masukkan ke keranjang“. Yang satu jauh lebih mendesak daripada yang lain. Atau bagaimana “Cobalah secara Gratis” dengan “Percobaan gratis“? Yang satu jauh lebih keras daripada yang lain dan lebih menonjol.

Bahasa yang Anda gunakan pada tombol ajakan bertindak harus sesederhana dan sesederhana mungkin. Anda ingin pengunjung tahu hanya dengan sekilas apa yang akan mereka dapatkan ketika mengklik tombol. Jika mereka mempertanyakannya, itu berarti mereka telah berhenti, yang dapat menyebabkan tingkat konversi yang lebih rendah.

Jangan lupa ukuran font Anda juga. Teks pada tombol ajakan Anda untuk bertindak harus besar dan tebal, cocok dengan ukuran dan warna tombol itu sendiri. Pastikan ada kontras yang cukup dan teksnya mudah dibaca.

Beberapa pedoman:

Gunakan bahasa langsung yang sederhana
Gunakan font yang besar dan tebal pada tombol untuk teks utama
Pastikan bahasanya jelas memanggil tindakan tertentu

Buat Urgensi

Anda ingin pengunjung di situs Anda melakukan tindakan yang diinginkan dengan sesedikit mungkin pemikiran. Meskipun Anda tidak ingin menipu pengunjung Anda, semakin banyak peluang yang Anda berikan kepada mereka untuk berhenti dan mempertimbangkan apa yang mereka lakukan, semakin banyak peluang yang Anda berikan kepada mereka untuk dikatakan. “tidak”.

Anda ingin tombol Anda memberi mereka kesan bahwa mereka harus bertindak segera. Anda ingin mendorong mereka untuk segera mengambil keputusan, secara mendadak. Meskipun ini tidak akan berfungsi untuk setiap tombol ajakan untuk bertindak (terutama yang membeli barang-barang dengan harga tinggi), untuk tindakan berbiaya rendah atau gratis, diinginkan pengunjung untuk mengklik dengan sedikit pemikiran..

Beberapa pedoman:

Dorong pengunjung Anda untuk segera bertindak
Jangan memberi pengunjung Anda alasan untuk berhenti
Meskipun urgensi itu penting, jangan menyesatkan pengunjung Anda dengan cara apa pun

Berikan Informasi Tambahan

Bila perlu, gunakan tombol ajakan bertindak untuk memberi pengunjung informasi tambahan tentang apa yang akan mereka dapatkan jika mereka mengklik tombol itu. Ini paling sering dilihat dengan tombol percobaan atau tombol unduh. Contoh umum informasi tambahan mencakup lamanya waktu uji coba gratis berlangsung atau ukuran unduhan file. Informasi versi juga umum dilihat.

Saat memasukkan informasi tambahan, ingatlah bahwa Anda harus tetap fokus pada ajakan bertindak yang sebenarnya. Pastikan teks untuk bahasa yang menarik pengunjung untuk bertindak paling menonjol, dengan informasi lain yang kurang terlihat.

Beberapa pedoman:

Hanya sertakan informasi tambahan ketika itu menambah pengalaman pengguna
Informasi tambahan hanya sesuai pada beberapa jenis tombol ajakan bertindak, terutama tombol unduh atau uji coba
Pastikan ajakan untuk bertindak masih merupakan teks yang paling menonjol di tombol Anda

Memprioritaskan

Penting untuk memprioritaskan tombol ajakan bertindak di halaman Anda jika ada lebih dari satu. Ini dapat dilakukan dalam beberapa cara, tetapi yang paling umum adalah melalui penggunaan warna dan ukuran.

Gunakan warna untuk menyorot tombol yang paling penting pada halaman, atau untuk membuat yang kurang penting tampak kurang menonjol. Atau gunakan ukuran untuk membuat tombol yang paling penting menonjol (dengan membuatnya lebih besar) dan tidak menekankan yang kurang penting.

Ikon dan Gambar

Memasukkan isyarat visual dalam tombol ajakan bertindak juga dapat membantu meningkatkan tingkat konversi. Ikon keranjang belanja di sebuah “Masukkan ke keranjang” tombol, misalnya, atau panah pada tombol unduhan adalah contoh yang baik. Pikirkan juga ikon unik untuk digunakan, tetapi pastikan ikon itu menambah pengalaman pengguna dengan menjelaskan untuk apa tombolnya, dan tidak menambah kebingungan..

Beberapa pedoman:

Pastikan ikon yang Anda gunakan membantu memperjelas makna tombol Anda, daripada membingungkannya
Ikon yang mudah dikenali dapat langsung menunjukkan makna bagi pengunjung Anda
Jangan takut untuk menggunakan ikon yang jarang digunakan, asalkan maknanya masih jelas

Contohnya

Berikut ini beberapa contoh tombol ajakan bertindak yang hebat. Meskipun mereka tidak semua benar-benar sesuai dengan pedoman di atas, mereka cukup memenuhi kriteria untuk dianggap hebat.

Siaran langsung - Membedakan tombol "beli sekarang" (untuk opsi berbayar) dan "daftar" (untuk opsi gratis) adalah strategi yang baik.

Windows 7 - Tombol "Get Windows7" yang besar dan hijau mudah dilihat oleh pengunjung.

Kantor Pusat Fileshare - Tombol hijau cerah di sini sangat menonjol dengan latar belakang putih.

Buku harian kapal - Menggunakan warna berbeda untuk tombol "Unduh" dan "Beli" membedakannya dan memberikan prioritas pada tombol "Beli".

TasteBook - Tombol ini memanfaatkan ikon dan menggunakan teks yang lebih besar dan tebal untuk menonjol.

GoodBarry - Tombol ajakan bertindak hijau terang lainnya.

Kreatif Seumur Hidup - Melanjutkan jenis huruf yang sama dari salinan tubuh ke tombol ajakan untuk bertindak menciptakan perasaan kohesi.

Resumator - Tombol ajakan bertindak merah terang dengan tipe berani menonjol di latar belakang biru.

Notepod - Contoh yang baik untuk memasukkan informasi tambahan dalam tombol ajakan bertindak.

Inkd - Contoh yang bagus untuk memprioritaskan tombol dengan ukuran.

Tema Elegan - Contoh lain yang sangat baik menggunakan warna untuk menonjol tanpa berbenturan dengan elemen desain sekitarnya.

ZenDesk - Contoh bagus lainnya dari membuat tombol menonjol menggunakan warna.

Storenvy - Tombol bundar tidak terduga dan menonjol, terutama ketika dikelilingi oleh perbatasan putih.

Bara'Mail - Kadang-kadang tombol yang memadukan berfungsi lebih baik dalam desain situs Anda secara keseluruhan, terutama ketika tindakan kurang mendesak.

Sumber Daya Lebih Banyak

Tombol Panggilan ke Tindakan: Contoh dan Praktik Terbaik - Dari Majalah Smashing
Tombol Ajakan Bertindak Bagus - Dari UX Booth
Panggilan ke Tombol Aksi: Apakah Ukuran Penting? - Dari Get Elastic
10 Teknik untuk yang Efektif “Panggilan untuk bertindak” - Dari Boagworld
5 Tips untuk Membuat Tombol Ajakan Bertindak yang Efektif - Dari SitePoint