Panduan Desain Tombol: Cara Mendesain Tombol yang Mengonversi

Mengapa menulis panduan desain tombol? Apakah tombol itu penting? Mengapa menghabiskan begitu banyak energi untuk sebagian kecil antarmuka pengguna?

Sementara tombol sangat umum dalam desain web dan tampak sederhana, pentingnya mereka tidak boleh diremehkan. Mereka adalah elemen situs vital yang melakukan tugas yang sangat penting.

Terutama sebagai ajakan bertindak utama dan di situs e-niaga, tombol benar-benar memengaruhi laba. Namun, juga sebagai tombol berbagi sosial, pendaftaran email, dan tombol pengiriman formulir merupakan hal yang penting bagi kesuksesan situs web.

Oleh karena itu, dalam artikel ini ingin membahas secara detail tentang elemen desain yang sering diabaikan ini dan cara membuat tombol konversi tinggi untuk situs web WordPress. Sementara fokusnya adalah pada CTA (panggilan untuk bertindak), kami juga akan berbicara tentang banyak saran umum dalam hal desain tombol.

Apakah topik itu menekan tombol Anda? Kemudian terus membaca.

Sebelum Kita Memulai, Sekilas Tentang Pengujian A/B

Lebih jauh di bawah, kita akan membahas beberapa panduan yang jelas untuk membuat dan menggunakan tombol. Prinsip-prinsip ini akan membantu Anda memikirkan desain, pemosisian, dan atribut penting lainnya dari tombol apa pun di situs Anda.

Namun, pada saat yang sama penting untuk diingat bahwa ini hanya menjadi dasar untuk meningkatkan tingkat konversi Anda. Prinsip-prinsip desain memungkinkan Anda menebak apa yang akan berhasil, namun untuk benar-benar mengetahui jenis tombol mana yang memegang kunci untuk mengubah pengunjung menjadi pelanggan, pembeli, atau lainnya terletak pada pengujian. Menjalankan pengujian A/B memungkinkan Anda mengetahui apa yang benar-benar berfungsi untuk situs Anda, warna tombol, salin, posisi, dan penanda mana yang paling ditanggapi oleh pengunjung.

Karena semuanya penting. Bahkan perubahan terkecil dapat memiliki efek yang sangat besar pada tingkat konversi — baik positif maupun negatif. Pergi ke contoh-contoh ini untuk memahami apa yang saya bicarakan.

Jadi, meskipun panduan desain tombol kami akan membantu Anda memahami praktik terbaik, sebaiknya dilengkapi dengan eksperimen yang sehat untuk menemukan kombinasi yang unggul untuk kesuksesan situs Anda.

Cara Mendesain Tombol yang Sebenarnya Diklik Pengguna

Setelah peringatan ini, sekarang kita beralih ke pembuatan tombol berkinerja baik untuk ajakan bertindak yang lebih baik dan peningkatan rasio konversi. Menikmati!

Rancang Mereka agar Sesuai dengan Merek atau Situs Anda

Sebelum masuk ke desain fungsional, penting untuk memikirkan konteks di mana tombol akan muncul. Tidak ada gunanya membuat tombol yang sempurna jika itu mengacaukan situs Anda.

Untuk alasan itu, meskipun panduan di bawah ini penting, juga penting bahwa hasilnya terintegrasi dengan baik dengan konteks yang muncul di dalamnya. Itu berarti tombol Anda sesuai dengan palet warna, gaya, dan panduan desain situs Anda secara keseluruhan.

Meskipun Anda ingin tombol menonjol untuk mendorong tindakan, tujuannya adalah membuatnya menonjol dengan cara yang positif. Itu berarti yang selaras dengan keseluruhan desain dan tidak merusaknya.

Pada saat yang sama, jangan takut untuk bereksperimen sedikit. Terkadang tombol dengan warna kontras hanya diperlukan untuk membumbui desain yang biasa-biasa saja.

Jadikan Tombol Terlihat Seperti Tombol

Langkah pertama untuk mendesain tombol yang diklik adalah membuatnya benar-benar terlihat seperti tombol. Ajakan bertindak dan opsi berbagi tidak ada gunanya jika pengguna tidak mengerti bahwa mereka seharusnya memanfaatkannya.

Pengguna memiliki harapan tertentu dalam hal desain tombol. Jika Anda tidak memenuhinya sama sekali, mereka akan kesulitan mengambil tindakan yang diinginkan. Oleh karena itu, penting untuk menyertakan isyarat visual yang membantu mereka memahami.

Petunjuk pertama adalah bentuk. Bentuk kancing yang paling umum adalah persegi panjang atau persegi panjang dengan sudut membulat. Pengguna komputer telah mengenal desain ini untuk waktu yang lama dan karenanya sangat akrab dengannya.

Sumber: Wikipedia Digunakan dengan izin dari Microsoft

Tentu saja, bentuk lain juga dimungkinkan, termasuk kotak, lingkaran, segitiga, atau bahkan bentuk khusus. Sebenarnya banyak sekali contoh tombol-tombol yang unik dan tidak biasa, misalnya pada dribbble

Pergi dengan bentuk yang kurang tradisional dapat masuk akal untuk menjaga desain situs Anda tetap kongruen. Namun, karena iOS Apple telah membuktikan dengan kotak bulatnya, itu tidak berarti itu tidak berfungsi.

Gambar oleh Ienjoyeverytime / shutterstock.com.

Apa pun yang Anda pilih, pastikan untuk tetap konsisten. Hindari menggunakan desain yang berbeda untuk tombol yang berbeda. Itu tidak hanya membuat UI jauh lebih baik tetapi juga memastikan bahwa pengguna akan dapat mengidentifikasi tombol di seluruh situs Anda.

Isyarat desain penting lainnya adalah bayangan dan sorotan. Drop-shadow telah menjadi isyarat universal untuk menunjukkan bahwa elemen dapat diklik atau dapat diketuk. Bahkan desain datar menggunakannya sebagai sinyal untuk fungsionalitas.

Sumber: Material.io

Berikan Label yang Jelas

Selain desain dasar, label yang jelas juga penting untuk penggunaan tombol. Tanpa label, tidak ada cara bagi pengguna untuk menentukan apa yang mereka lakukan.

Label tidak harus ditulis, ikon juga berfungsi (lihat tombol berbagi sosial). Menggunakan keduanya secara bersamaan adalah kemungkinan lain, terutama pada tombol yang terkait dengan e-commerce.

Gambar oleh Prixel Creative / shutterstock.com.

Yang penting adalah pengguna dapat memahami apa efek tindakan mereka mengklik tombol. Jika tidak, mereka mungkin menghindari melakukannya sejak awal.

Berikut adalah beberapa panduan untuk label yang jelas:

• Jadilah deskriptif dan spesifik
• Gunakan kata kerja tindakan, misalnya Daftar Saya , Kirim Formulir , Buat Akun
• Alamat pengguna secara langsung
• Ciptakan rasa urgensi dengan kata-kata seperti Sekarang atau Hari Ini
• Tetap sederhana dan jelas

Label sangat penting dalam hal CTA. Mengubah beberapa kata saja dapat berdampak besar pada kinerja tombol. Misalnya, Unbounce melihat peningkatan 90 persen dalam rasio klik-tayang hanya dengan mengubah salinan tombol mereka dari "Mulai uji coba 30 hari gratis Anda" menjadi "Mulai uji coba 30 hari gratis saya".

Ya, seperti itulah kekuatan satu kata.

Letakkan Tombol Di Mana Pengguna Dapat Menemukannya

Ini benar-benar tidak masuk akal. Jika pengguna Anda tidak dapat menemukan tombol Anda, akan sulit ditekan untuk mengkliknya. Untuk alasan itu, faktor lain untuk efektivitas mereka adalah lokasi.

Ada beberapa konvensi. Misalnya, CTA utama biasanya dapat disukai di paro atas. Ini masuk akal dan sekarang diantisipasi oleh pengguna.

Sumber: Netflix

Hal yang sama berlaku untuk jenis tombol lain di mana pengguna telah dilatih untuk mengharapkan lokasi tertentu. Misalnya, tombol untuk sebelumnya dan berikutnya biasanya diurutkan kiri dan kanan satu sama lain.

Karena ini sudah mendarah daging dalam kesadaran publik, membalikkan urutan mungkin membuat pengunjung frustrasi dan membuat mereka pergi. Dan itulah hal terakhir yang Anda inginkan.

Namun, juga untuk tombol yang memiliki lokasi lebih fleksibel, misalnya tombol berbagi sosial, memikirkan di mana harus meletakkannya adalah yang terpenting. Misalnya, Anda mungkin berpikir bahwa menempatkan tombol sosial di akhir artikel Anda adalah ide yang bagus. Dengan begitu, pengguna bisa membagikan postingan setelah selesai, bukan?

Namun, sebagian besar pembaca bahkan tidak sampai ke akhir posting Anda. Akibatnya, ide yang lebih baik adalah menempatkan tombol di mana mereka dapat diakses di setiap titik pengalaman membaca. Salah satu contohnya adalah bilah sisi mengambang Monarch:

Jika ragu, aturan praktis yang baik untuk penempatan tombol adalah bertanya pada diri sendiri di mana pengguna akan melihat selanjutnya. Desain seharusnya memandu pengguna dalam perjalanan mereka, sehingga tombol dapat menjadi kesimpulan logis untuk jalur mereka di seluruh situs.

Perhatikan Ukuran dan Spasi

Sekarang kita sampai pada topik yang sangat penting dalam desain seluler. Orang-orang yang berinteraksi dengan situs Anda melalui sentuhan kurang tepat dalam tindakan mereka dibandingkan mereka yang menggunakan mouse. Oleh karena itu, Anda perlu memungkinkan mereka untuk menggunakan dan menjangkau tombol tanpa masalah atau bahaya mengetuk tombol yang salah.

Sumber: Apple

Langkah pertama adalah memastikan tombol Anda cukup besar. Rata-rata ujung jari manusia berukuran 8-10mm. Akibatnya, Apple menyarankan untuk membuat elemen yang akan digunakan dengan sentuhan setidaknya 44px kali 44px (gunakan titik sebagai ganti piksel untuk tampilan retina). Rekomendasi dari pabrikan lain juga berkisar pada tanda 10mm. Tentu saja, ukurannya dapat sedikit dikurangi untuk desain web yang ditujukan untuk penggunaan desktop.

Pada saat yang sama, Anda perlu mempertimbangkan jarak antar tombol. Anda tidak ingin membuat pengguna frustrasi karena mereka secara tidak sengaja mendorong hal-hal yang tidak mereka maksudkan. Ruang yang cukup juga membuat elemen lebih mudah dikenali, yang penting untuk ajakan bertindak utama.

Berikan umpan balik

Setelah tombol atau situs Anda dapat diidentifikasi dan dapat digunakan, inilah saatnya untuk memikirkan saat mereka benar-benar dipanggil untuk bertindak. Tombol dapat memiliki beberapa status keberadaan:

• Normal — Dapat diidentifikasi sebagai tombol, menandakan kemampuan untuk diklik
• Berfokus — Mengubah saat mengarahkan mouse ke atasnya, konfirmasi untuk pengguna bahwa tindakan itu mungkin
• Ditekan — Perubahan lebih lanjut untuk memberi penghargaan kepada pengguna karena mengambil tindakan dan mengonfirmasi bahwa sesuatu sedang terjadi
• Sibuk — Saat aksi sedang berlangsung di latar belakang, tombol dapat mencerminkan hal itu
• Dinonaktifkan — Menunjukkan bahwa tindakan lain dimungkinkan, hanya saja tidak saat ini

Sumber: Material.io

Dengan memberikan umpan balik visual kepada pengguna untuk menggunakan tombol, Anda dapat membuat interaksi lebih jelas dan menyenangkan. Untuk ide serupa lainnya, lihat artikel tentang interaksi mikro.

Manfaatkan Kontras dengan Baik

Tidak semua tombol dibuat sama. Meskipun halaman arahan mungkin memiliki beberapa tautan untuk diklik, seharusnya hanya ada satu yang benar-benar penting.

Alat untuk memperjelas hal ini kepada pengunjung adalah warna, kontras, dan lokasi. Gunakan secara efektif untuk menarik perhatian dan membuat pengguna mengklik.

Dengan mengontraskan tombol dari antarmuka lainnya, Anda membuatnya lebih terlihat. Selain itu, menghindari bahwa mereka tersesat di antara elemen lainnya.

Ketika datang ke warna, tidak ada satu pilihan terbaik. Sekali lagi, banyak di sini tergantung pada desain Anda sendiri. Aturan praktis yang baik adalah menggunakan warna yang kontras dan mengambilnya dari sana. Untuk informasi lebih lanjut tentang topik itu, lihat artikel kami tentang teknik pencocokan warna.

Selain warna, Anda dapat menggunakan berbagai cara untuk memperkenalkan kontras termasuk ukuran, tipografi, dan spasi. Kontras antara warna tombol dan teks dapat lebih meningkatkan efek dan membuat salinan lebih mudah dibaca. Dikombinasikan dengan posisi menonjol, ini membuat tombol benar-benar menonjol.

Sumber: Prezi

Untuk mengetahui apakah ajakan bertindak Anda terlihat, gunakan "tes juling" lama yang bagus. Terapkan desainnya, ambil beberapa langkah dari layar, julingkan mata Anda dan lihat apakah tombol Anda menonjol. Saya tahu, kedengarannya tidak terlalu profesional tetapi berhasil!

Apakah Anda juling menguji #CTA Anda? Ini adalah cara terbaik untuk mengetahui apakah ajakan bertindak Anda menonjol. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTERD2

— Design Pickle (@designpickle) 25 Juli 2015

Tombol kontras juga penting untuk membuat urutan di antara mereka. Saat diberi dua pilihan atau lebih, warna yang lebih kuat dapat menandakan mana yang Anda lebih suka atau sarankan untuk diambil pengunjung.

Sumber: Quicksprout

Menyimpulkan

Tombol adalah elemen utama tetapi sering diabaikan dari desain web. Tidak pantas begitu. Terutama dalam bentuk ajakan bertindak, mereka dapat memiliki pengaruh yang luar biasa pada konversi, rasio klik-tayang, dan penanda kesuksesan penting lainnya.

Karena itu, topik desain dan penempatan tombol tidak boleh dianggap enteng. Untuk rekap, untuk membuat tombol yang efektif:

• pastikan mereka sesuai dengan desain keseluruhan Anda
• memastikan pengguna dapat mengidentifikasinya sebagai tombol
• berikan label yang jelas
• tempatkan di tempat pengguna dapat menemukannya
• perhatikan ukuran dan jarak
• memberikan umpan balik saat digunakan
• buat mereka menonjol dari situs lainnya

Panduan ini akan membantu Anda mengatur tombol yang tidak bisa tidak diklik oleh pengguna Anda. Namun, seperti yang disebutkan di awal, praktik terbaik ini dimaksudkan untuk diperlakukan sebagai titik awal. Untuk benar-benar mengetahui tombol apa yang berfungsi untuk situs Anda dan cara meningkatkan konversi, desain tombol harus selalu berjalan seiring dengan pengujian A/B menyeluruh. Untungnya, kami juga memiliki artikel tentang topik itu.

Apa pengalaman Anda dengan desain tombol? Adakah yang penting untuk ditambahkan di atas? Beri tahu kami di bagian komentar di bawah!

Gambar thumbnail artikel oleh BerryCat / shutterstock.com