Call-to-Action (CTA) Button
Tombol adalah salah satu komponen interaktif dalam sebuah user interface yang memiliki peranan penting dan dapat dikelompokkan menjadi beberapa jenis, salah satunya call-to-action (CTA) button. CTA button adalah sebuah tombol yang dapat digunakan di website ataupun mobile application dengan tujuan mengarahkan pengguna kepada tujuan konversi. Konversi disini berbicara mengenai aksi-aksi yang dilakukan oleh pengguna seperti pembelian, berhubungan, berlangganan, dll.
Ada beberapa komponen penting yang dapat diperhatikan karena dapat mempengaruhi efektivitas desain dari CTA button:
- Ukuran
Pada dasarnya semakin besar suatu elemen, maka elemen tersebut akan semakin terlihat. Hal ini sangat penting mengingat bahwa tujuan dari sebuah CTA adalah mendapatkan perhatian pengguna. Namun perlu diingat agar tidak membuat CTA button yang terlalu besar dan dapat mengganggu komposisi visual dan hirarki dari tampilan. Menurut Apple, CTA pada mobile berukuran paling tidak 44×44 pixels. Sedangkan menurut Microsoft merekomendasikan 34×26 pixels.
- Warna dan Bentuk
Ada beberapa arti dari warna yang dapat digunakan:
- Merah : confidence, youth, dan power
- Oranye : friendly, warm, dan energetic
- Kuning : happiness, optimism, dan warmth
- Hijau : peace, growth, dan health
- Biru : trust, security, dan stability
- Ungu : luxurious, creative, dan wise
- Hitam : reliable, sophisticated, dan experienced
- Putih : simple, calm, dan clean
Ada beberapa arti dari bentuk yang dapat digunakan:
- Persegi : discipline, strength, courage, security, dan reliability
- Segitiga : excitement, risk, danger, balance, dan stability
- Lingkaran : meanings: eternity, female, universe, magic, dan mystery
- Abstrak : the duality of meaning, uniqueness, dan elaborate
- Penempatan
Berdasarkan hasil-hasil studi yang ada, terdapat beberapa jenis scanning pattern yang terkenal untuk sebuah web page:
- F-Pattern
Menggambarkan bagaimana pengguna pertama kali melihat garis horizontal yang ada di atas layar, lalu turun ke bawah halaman sedikit, lalu membaca garis horizontal yang biasanya menutupi shorter area. Yang terakhir adalah garis vertikal bawah pada sisi kiri.
- Z-Pattern
Menggambarkan bagaimana pengguna pertama kali melihat bagian atas dimulai dari pojok kiri atas untuk mencari hal-hal yang penting, lalu turun ke bagian pojok berlawanan diagonal, dan membaca garis horizontal yang ada di bawah halaman.
- Microcopy
Merupakan komponen kecil dari sebuah teks yang berperan sebagai hint bagi pengguna, termasuk tombol dan menu copy, error message, security note, terms and conditions, dll. Walaupun bentuknya pendek dan konsisten, CTA microcopy mampu menarik perhatian pengguna dan memberikan informasi.
Referensi
- https://design4users.com/how-to-design-call-to-action/
- https://uxplanet.org/ux-practices-8-handy-tips-on-cta-button-design-682fdb9c65bc
