Galakkan Panggil untuk Tindakan, Garis Panduan, Amalan dan Contoh Terbaik

Butang untuk bertindak di laman web sering diabaikan. Pereka kadang-kadang tidak memahami dengan tepat apa yang membuat butang panggilan untuk tindakan yang baik di luar menjadi menarik dan sesuai ke dalam reka bentuk keseluruhan. Tetapi panggilan untuk butang tindakan terlalu penting untuk direka tanpa semacam pemahaman tentang apa yang membuatnya berkesan. Lagipun, titik utama panggilan ke tindakan adalah untuk mendapatkan pengunjung buat sesuatu.

Adalah penting untuk mendapatkan sekurang-kurangnya pemahaman asas tentang bagaimana warna, skala, bahasa, dan faktor-faktor lain mempengaruhi kadar penukaran panggilan untuk tindakan. Konsep di sini tidak rumit, tetapi mereka mengambil sedikit pemikiran dan merancang untuk membuat panggilan yang paling berkesan untuk butang tindakan yang mungkin dalam reka bentuk yang diberikan. Baca terus untuk maklumat lanjut mengenai setiap perkara ini dan banyak lagi.

Tujuan "Butang Tindakan"

Butang panggilan untuk tindakan boleh berfungsi dengan pelbagai fungsi. Lagipun, “panggilan untuk bertindak” benar-benar agak kabur. Maksudnya ialah tujuan utama adalah untuk mendapatkan pengunjung ke laman web anda lakukan sesuatu. Ada sesuatu yang dapat menambahkan produk ke keranjang belanja mereka, memuat turun sesuatu, meminta maklumat, atau apa saja.

Oleh kerana butang panggilan kepada aksi mempunyai maksud yang beragam, banyak pertimbangan perlu pergi ke butang yang bertujuan untuk mencapai matlamat. Jenis tapak, pasaran sasaran, dan tindakan yang diinginkan semuanya boleh memainkan peranan dalam cara terbaik merancang butang panggilan ke tindakan.

Jenis "Panggilan untuk Tindakan" Butang

Terdapat beberapa jenis panggilan untuk butang tindakan. Walaupun setiap jenis bertujuan untuk mendapatkan pelawat untuk melakukan tindakan tertentu, tindakan itu boleh berbeza-beza. Berikut ialah jenis panggilan yang paling biasa kepada butang tindakan, berdasarkan tindakan yang mereka mahu anda ambil.

1. Tambah ke Butang Troli

Laman E-dagang umumnya menggunakan sebilangan panggilan untuk butang tindakan, tetapi yang paling banyak digunakan ialah “tambah ke troli” butang. Butang-butiran ini biasanya muncul pada halaman produk individu. Tujuannya adalah untuk menarik pelanggan membeli barang. Unsur-unsur reka bentuk yang biasa di tambah ke butang kereta termasuk kata-kata mudah (seperti “Tambah ke Keranjang” atau “Tambah ke Beg” atau “Beli sekarang“) dan penggunaan ikon (biasanya beg atau kereta).

2. Muat turun Butang

Butang muat turun adalah serupa dengan menambah butang kereta kerana mereka cuba menarik pengunjung untuk mengambil barang. Dalam hal butang muat turun, banyak pereka memilih untuk memasukkan lebih banyak maklumat daripada jenis butang lain (seperti maklumat versi atau saiz muat turun).

3. Butang Percubaan

Sesetengah laman web cuba menarik pengunjung mereka untuk mencuba persembahan mereka, secara amnya dalam bentuk percubaan percuma. Ini boleh menjadi muat turun percuma atau akaun percuma, bergantung pada laman web tertentu. Sesetengah laman web menggunakan “sedikit tetapi lebih dari cukup” falsafah dan menyimpan bahasa pada butang mereka sekurang-kurangnya, sementara yang lain ingin menawarkan lebih banyak maklumat mengenai apa yang dibicarakan oleh perbicaraan.

4. Pelajari Lebih Lanjut Butang

Ketahui lebih banyak butang biasanya digunakan pada penghujung blok maklumat penggoda (selalunya di halaman rumah). Butang ini biasanya mudah, tetapi sering kali besar untuk menarik perhatian pengunjung.

5. Daftar Butang

Butang pendaftaran muncul paling biasa dalam dua versi berbeza. Jenis pertama biasanya dikaitkan secara langsung dengan borang pendaftaran. Jenis kedua biasanya digunakan dalam cara yang sama dengan “tambah ke troli” butang, sebagai cara untuk pengguna membeli atau mendaftar untuk perkhidmatan atau akaun, sebelum mereka sebenarnya mencapai borang pendaftaran.

Terdapat jenis panggilan untuk tindakan tindakan lain, tetapi ini adalah yang paling biasa. Garis panduan yang diguna pakai pada perkara-perkara di atas mungkin juga akan digunakan untuk apa-apa jenis panggilan ke butang tindakan yang anda mungkin merancang.

Menggunakan Ruang Negatif Berkesan

Anda mahu panggilan anda bertindak butang untuk menonjol dari kandungan sekitar dan benar-benar memberi perhatian dari pengunjung laman anda. Untuk tujuan itu, anda perlu menggunakan ruang negatif di sekitar butang tersebut. Menggabungkan ruang kosong antara kandungan anda dan butang panggilan anda kepada tindakan. Walaupun ini kurang penting (dan kurang umum) pada beberapa butang, seperti menambah butang gerobak, dengan orang lain, seperti orang untuk belajar lebih banyak, bekerja lebih baik dengan lebih banyak ruang.

Penting untuk mengimbangi jumlah ruang negatif yang anda ada di sekitar butang dengan saiz butang itu sendiri. Ini mengenai perkadaran. Anda mahu butang anda, ruang di sekelilingnya, dan kandungan sekitar untuk semua kelihatan seperti mereka bersama, walaupun dengan saiz yang berbeza. Anda mungkin perlu bermain-main dengan perkara-perkara yang sedikit untuk membolehkan mereka kelihatan tepat.

Beberapa garis panduan:

Pastikan terdapat ruang yang cukup di sekeliling butang anda supaya ia tidak berasa berantakan
Pertimbangkan prinsip seperti peraturan ketiga atau Nisbah Emas apabila menentukan berapa banyak ruang untuk dimasukkan
Ruang negatif memberikan panggilan kepada bilik butang aksi untuk menonjol dari kandungan anda yang lain dan membezakannya

Saiz dan Warna

Berapa besar butang panggilan anda kepada tindakan adalah sangat penting. Butang yang terlalu besar akan mengatasi segala-galanya di sekelilingnya. Butang yang terlalu kecil akan hilang dalam shuffle semua kandungan lain pada halaman. Anda mahu butang anda cukup besar untuk menonjol tanpa mengagumkan reka bentuk.

Warna boleh digunakan untuk memberi kesan yang besar untuk membantu mengimbangi saiz butang anda. Untuk butang yang lebih besar, pilih warna yang kurang menonjol dalam reka bentuk anda (tetapi masih menonjol sekali lagi latar belakang). Untuk butang yang lebih kecil, anda mungkin mahu memilih warna yang lebih terang, berbeza untuk benar-benar membuat butang pop. Dalam kedua-dua kes, pastikan warna yang anda gunakan menetapkan butang selain tanpa bertempur dengan reka bentuk keseluruhan tapak.

Beberapa garis panduan:

Butang panggilan anda ke tindakan sebaiknya menjadi butang terbesar pada halaman yang diberikan
Gunakan warna yang berbeza untuk membuat butang yang lebih kecil menonjol lebih banyak
Gunakan warna yang berbeza untuk membuat butang yang lebih besar sesuai dengan yang lebih baik
Anda memanggil butang tindakan perlu memberi arahan tanpa menggalakkan reka bentuk anda

Bahasa

Kata-kata yang tepat yang anda pilih untuk digunakan pada panggilan anda kepada butang aksi boleh mempunyai kesan besar pada penukaran. Bandingkan “Beli sekarang” dengan “Tambah ke Keranjang“. Satu adalah lebih penting daripada yang lain. Atau bagaimana pula “Cuba untuk Percuma” dengan “Cubaan percuma“? Salah satu punchier daripada yang lain dan menonjol lebih banyak.

Bahasa yang anda gunakan pada panggilan anda untuk butang tindakan hendaklah seperti lurus ke depan dan mudah mungkin. Anda mahu pelawat tahu dengan tepat apa yang mereka akan dapat apabila mengklik pada butang. Jika mereka mempersoalkannya, itu bermakna mereka telah berhenti sebentar, yang boleh membawa kepada kadar penukaran yang lebih rendah.

Jangan lupa saiz font anda juga. Teks pada butang panggilan anda kepada tindakan perlu besar dan berani, sesuai dengan saiz dan warna butang itu sendiri. Pastikan ada kontras yang mencukupi dan teks mudah dibaca.

Beberapa garis panduan:

Gunakan bahasa mudah dan mudah
Gunakan huruf besar, tebal pada butang untuk teks utama
Pastikan bahasa itu jelas memerlukan tindakan tertentu

Buat Urgency

Anda mahu pelawat di laman web anda untuk menjalankan tindakan yang dikehendaki dengan sedikit sebanyak mungkin. Walaupun anda tidak mahu menipu pelawat anda, lebih banyak peluang yang anda berikan kepada mereka untuk berhenti dan mempertimbangkan apa yang mereka lakukan, semakin banyak peluang yang anda berikan kepada mereka untuk mengatakan “tidak”.

Anda mahu butang anda memberi mereka gambaran bahawa mereka perlu bertindak segera. Anda ingin menggalakkan mereka untuk membuat keputusan dengan serta-merta, pada masa ini. Walaupun ini tidak akan berfungsi untuk setiap panggilan untuk tindakan butang (terutama mereka untuk membeli item tiket tinggi), untuk kos rendah atau tindakan percuma, yang mempunyai pelawat klik dengan sedikit pemikiran yang dikehendaki adalah wajar.

Beberapa garis panduan:

Galakkan pelawat anda untuk bertindak segera
Jangan berikan sebarang sebab untuk pelawat anda
Walaupun keperluan mendesak adalah penting, jangan mengelirukan pelawat anda dalam apa cara sekalipun

Menyediakan Maklumat Tambahan

Jika sesuai, gunakan butang panggilan anda untuk tindakan untuk memberikan pengunjung maklumat tambahan tentang apa yang akan mereka dapati jika mereka mengklik butang. Ini paling sering dilihat dengan butang percubaan atau butang muat turun. Contoh-contoh umum maklumat tambahan termasuk panjang masa percobaan percuma akan berlangsung atau ukuran unduhan file. Maklumat versi juga sering dilihat.

Apabila memasukkan maklumat tambahan, ingatlah bahawa anda perlu memfokuskan fokus pada panggilan sebenar untuk bertindak. Pastikan teks untuk bahasa yang menarik pengunjung untuk bertindak adalah yang paling menonjol, dengan maklumat lain yang kurang jelas.

Beberapa garis panduan:

Hanya masukkan maklumat tambahan apabila menambah kepada pengalaman pengguna
Maklumat tambahan hanya sesuai untuk beberapa jenis panggilan ke butang tindakan, terutamanya memuat turun atau butang percubaan
Pastikan panggilan utama untuk tindakan masih teks yang paling menonjol pada butang anda

Mengutamakan

Penting untuk mengutamakan panggilan ke butang tindakan pada halaman anda jika terdapat lebih daripada satu. Ini boleh dilakukan dalam beberapa cara, tetapi yang paling biasa adalah melalui penggunaan warna dan saiz.

Gunakan warna untuk menyerlahkan butang yang paling penting pada halaman, atau untuk menjadikan yang kurang penting kelihatan kurang menonjol. Atau gunakan saiz untuk membuat butang yang paling penting menonjol (dengan menjadikannya lebih besar) dan de-menekankan yang kurang penting.

Ikon dan Imej

Termasuk isyarat visual dalam panggilan anda untuk butang tindakan juga boleh membantu untuk meningkatkan kadar penukaran. Ikon pada keranjang belanja “tambah ke troli” Butang, misalnya, atau anak panah pada butang muat turun adalah contoh yang baik. Fikirkan ikon yang unik untuk digunakan juga, tetapi pastikan ikon itu menambah pengalaman pengguna dengan menjelaskan apa butang itu untuk, dan tidak menambah kekeliruan.

Beberapa garis panduan:

Pastikan ikon yang anda gunakan membantu menjelaskan makna butang anda, dan bukannya mengelirukannya
Ikon yang mudah diiktiraf dengan segera boleh memberi makna kepada pelawat anda
Jangan takut menggunakan ikon kurang biasa, selagi makna mereka masih jelas

Contoh

Berikut adalah beberapa contoh panggilan kepada butang aksi yang hebat. Walaupun mereka tidak sepenuhnya mematuhi garis panduan di atas, mereka memenuhi kriteria yang cukup untuk dianggap hebat.

Siaran langsung - Membezakan "beli sekarang" (untuk pilihan berbayar) dan "mendaftar" (untuk pilihan percuma) butang adalah strategi yang baik.

Windows 7 - Butang "Dapatkan Windows7" hijau yang besar adalah mudah untuk pelawat dapat melihatnya.

Ibu pejabat Fileshare - Butang hijau terang di sini benar-benar menonjol terhadap latar belakang putih.

Buku log - Menggunakan warna yang berbeza untuk butang "Muat turun" dan "Beli" membezakannya dan memberi keutamaan kepada butang "Beli".

TasteBook - Butang ini menggunakan ikon yang hebat dan menggunakan teks yang lebih besar dan berani untuk menonjol.

GoodBarry - Satu lagi panggilan hijau untuk tindakan aksi hijau.

Lifetree Creative - Melanjutkan taip huruf yang sama dari salinan badan ke butang panggilan untuk tindakan mewujudkan rasa perpaduan.

Resumator - Butang merah kepada butang tindakan terang dengan jenis tebal menonjol terhadap latar belakang biru.

Notepod - Satu contoh yang baik termasuk maklumat tambahan dalam panggilan untuk tindakan butang.

Inkd - Satu contoh yang baik untuk mengutamakan butang dengan saiz.

Tema Elegant - Satu lagi contoh yang baik untuk menggunakan warna untuk menonjol tanpa bertempur dengan unsur reka bentuk sekitar.

ZenDesk - Satu lagi contoh hebat untuk membuat butang menonjol menggunakan warna.

Storenvy - Butang bulat tidak dijangka dan menonjol, terutama apabila dikelilingi oleh sempadan putih.

Bara'Mail - Kadang-kadang satu butang yang menggabungkan dalam kerja lebih baik dalam reka bentuk laman web keseluruhan anda, terutama apabila tindakan kurang penting.

Lebih banyak Sumber

Panggil ke Butang Tindakan: Contoh dan Amalan Terbaik - Dari Majalah Smashing
Butang Call-to-Action yang Baik - Dari Booth UX
Panggilan ke Butang Tindakan: Adakah Saiz Matter? - Dari Dapatkan Elastik
10 Teknik untuk Berkesan “Panggil untuk Tindakan” - Dari Boagworld
5 Tips Membuat Panggilan Berkesan untuk Butang Tindakan - Dari SitePoint