Image

QUICK CONTACT













Image

UI Design Tips on CTA Buttons

04 Jul 2019 by Billy Gani

Sebuah interaksi yang efektif dari produk digital berisikan elemen - elemen kecil yang masing - masing memiliki fungsi. Dalam membuat sistem yang memadai, penting bagi anda untuk memperhatikan segala detail yang ada. 

Tombol merupakan komponen interaktif utama dari tampilan antarmuka (UI) yang memainkan peran penting dalam mengembangkan kualitas pengalaman pengguna (UX). Tombol pada UI bervariatif jenisnya tergantung pada fitur dan tipe yang dimiliki. Berikut ini kami berikan beberapa tips dalam menggunakan tombol CTA (Call-To-Action) yang dilengkapi dengan esensi dan perannya dalam membangun navigasi yang intuitif dan memenuhi tujuan dari bisnis atau perusahaan anda:

Apa Definisi dari CTA & Peran Pentingnya?

Tombol CTA (Call-To-Action) merupakan sebuah elemen interaktif dalam sebuah website maupun aplikasi - biasanya digunakan untuk membujuk pengguna agar mengambil suatu tindakan yang dapat menghasilkan konversi bagi halaman tertentu seperti halaman pembelian, kontak,berlangganan,dan sebagainya.

Biasanya, tombol CTA mudah untuk disadari keberadaannya oleh pengguna, dan umumnya para designer juga membuatnya terlihat langsung sehingga pengguna tidak ragu untuk menekannya. 

Peningkatan penjualan merupakan salah satu dasar dan tujuan utama bisnis yang memerlukan CTA dalam mencapainya. Saat sebuah tombol dirancang dengan baik dan menarik perhatian pengguna secara langsung, hal ini dapat meyakinkan mereka untuk menekannya dan melanjutkan ke tahap berikutnya seperti mengisi form kontak singkat atau membuat preorder akan produk yang mereka inginkan. 

Dengan cara ini, para pengunjung website dan aplikasi anda dapat diarahkan langsung dari satu langkah ke langkah berikutnya sekaligus membantu mereka untuk mempelajari detail dari produk atau jasa yang anda berikan.  Tanpa menggunakan tombol CTA, pengguna cenderung memindai sebuah konten secara tepat dan meninggalkannya tanpa dilihat kembali. Anda mungkin berpikir bahwa desain tombol CTA yang memadai hanya berlaku dengan ukuran yang relatif besar dan warna yang cerah untuk mencapai tujuan anda. Namun, ada lebih banyak aspek yang dapat memastikan efektivitas dari CTA. 

Apa Saja Hal Yang Perlu Diperhatikan Dalam Merancang Tombol CTA?

Ukuran CTA 

Ukuran merupakan salah satu hal yang paling sering digunakan dalam memisahkan komponen UI menurut kepentingannya masing - masing. Semakin besar suatu elemen, semakin elemen tersebut mudah untuk dilihat. Karena CTA memiliki tujuan utama untuk menarik perhatian pengguna, designer biasanya merancang CTA untuk lebih terlihat dibandingkan tombol lainnya dalam layar, khususnya dengan ukuran yang mudah terlihat. 

Tombol yang berukuran besar memiliki kesempatan yang lebih tinggi untuk dilihat dan ditekan oleh pengguna, tetapi anda tetap harus memperhatikan batasan. Sebuah CTA yang tepat biasanya dirancang cukup besar untuk dapat langsung dilihat tetapi tidak terlalu besar sehingga komposisi visual dan tampilan layar tidak terganggu. 

Warna & Bentuk

Ukuran yang atraktif secara visual hanya merupakan salah satu aspek dari CTA yang baik. Untuk membuat tombol CTA lebih mudah disadari keberadaannya, penting bagi anda untuk memilih warna dan bentuk yang memadai. Hal ini berkaitan dengan perasaan dan kebiasaan dari pengguna yang juga mempengaruhi pandangan visualnya. Pikiran pengguna bereaksi secara tidak langsung pada warna dan bentuk saat mereka tidak menyadari keberadaannya. Momen saat mata mempersepsikan warna, pada saat itu pula warna tersebut terkoneksi dengan otak yang memberikan sinyal langsung terhadap kelenjar endokrin yang berhubungan dengan emosi seseorang. Ilmu psikologi secara tidak langsung memiliki korelasi dalam mempengaruhi seseorang untuk menjabarkan keterkaitannya dengan warna dan bentuk yang terproses dalam otak kita. 

Pemilihan warna bergantung pada berbagai aspek yang membuat prosesnya menjadi lebih rumit. Para designer perlu memikirkan beberapa faktor seperti warna dasar dari komposisi dan hubungannya dengan preferensi dan keunikan dari target audiens potensial. Salah satu hal yang harus diingat saat memilih warna untuk CTA adalah warna dari latar belakang dan tombol haruslah kontras sehingga CTA tersebut dapat menonjol dibandingkan elemen lainnya. 

Penempatan

Penempatan dari tombol CTA merupakan hal krusial yang penting untuk diperhatikan. Jika tombol CTA ditempatkan pada area dimana mata pengguna tidak dapat melihatnya, aspek visual lainnya seperti warna dan ukuran tidak dapat berfungsi secara baik. Banyak penelitian menunjukkan bahwa sebelum membaca semuah halaman website, pengguna memindainya terlebih dahulu untuk menentukan apakah halaman itu menarik atau tidak. Mempertimbangkan hal ini,para designer dapat belajar untuk memahami area mana saja yang biasanya dilihat oleh mata pengguna dan membuat CTA di area tersebut. 

Menurut beberapa penelitian yang berbeda, ada 2 pola pemindaian yang banyak dilakukan pengguna dalam melihat halaman website yaitu:

  • F-pattern -  Merupakan pola yang paling sering digunakan oleh pengguna dalam memindai sebuah halaman website yang memiliki banyak konten seperti blog dan platform berita. Pengguna memindai halaman secara horizontal dari bagian atas halaman, lalu berlanjut ke bawah dan membacanya secara horizontal kembali. Pemindaian yang terakhir dilakukan secara vertikal ke bawah pada sisi kiri.

  • Z-pattern - Merupakan pola pemindaian bagi halaman atau website yang tidak memerlukan scroll yang berlebih, yang berarti setiap data penting sudah berada sebelum anda menelusuri halaman hingga ke area bawah. Pengguna memindai halaman dengan memulainya dari area atas, mencari informasi yang penting, berlanjut ke bagian bawah secara diagonal dan diakhiri secara horizontal ke bagian kiri lalu kanan. 

Pola ini dapat memberikan designer ide untuk menempatkan CTA di tempat yang dapat menarik perhatian dari pengguna, seperti di bagian paling atas dan menaruh poin lainnya yang membutuhkan perhatian pengguna sepanjang bagian atas dan bawah. 

Dan juga, anda dapat menempatkan tombol CTA di tengah tampilan layar, khususnya saat elemen UI lainnya sudah memenuhi layar. 

Microcopy

Microcopy memainkan peran yang signifikan dalam efisiensi sebuah CTA. Hal ini didefinisikan dengan komponen kecil dari teks yang memberikan pengguna peetunjuk. Spesifiknya, microcopy termasuk dalam tombol dan menu copy, pesan eror, notes keamanan, syarat dan ketentuan, yang merupakan instruksi dari cara penggunaan produk. 

Microcopy dari sebuah CTA merupakan sebuah tindakan yang memberi tahu pengguna tindakan apa yang seharusnya mereka ambil jika mereka menekan tombol. Microcopy CTA yang baik haruslah ringkas tetapi konsisten sehingga dapat menarik perhatian pengguna secara langsung. 

CTA merupakan salah satu alat penjualan yang kuat dalam bidang e-commerce dan faktor yang dapat mempengaruhi tingkat konversi dari halaman web ataupun aplikasi anda. Para designer harus memahami pentingnya penggunaan CTA dan memperhatikan secara dalam seluruh detailnya dalam mempengaruhi performa.

 

Sebuah website atau aplikasi yang dapat menarik perhatian dari pengguna haruslah menerapkan beberapa tips di atas untuk mendapatkan tujuan yang diinginkan. Apakah website atau aplikasi anda sudah menerapkan tips - tips diatas? 

Atau anda baru saja ingin mulai menggunakan website atau aplikasi sebagai salah satu alat memajukan bisnis anda?

Untuk membantu mendapatkan visualisasi UI UX di Jakarta yang sesuai dengan keinginan anda, Eannovate kini hadir sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik  dalam bidang UI UX Design di Jakarta.

Anda hanya memerlukan website yang sederhana tetapi tetap berkualitas dengan harga yang terjangkau? Kami hadir dengan ExpressWeb sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan website dan UI UX Design di Jakarta dengan harga terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.

Jika ada memiliki pertanyaan mengenai UI UX Design Jakarta dan tentang web development di Jakarta, jangan sungkan untuk langsung menghubungi kami di

Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,

Email : hello@eannovate.com atau menggunakan contact form.

 

 

 

Article Reference: Medium





AYO BUAT IDEMU JADI KENYATAAN!

Hubungi kami untuk membicarakan ide anda. Ayo bersama membuatnya menjadi kenyataan!

AYO MULAI!

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.


Image
TELEPON
INDONESIA
+6221 5437 5601
+62813 8251 8448


Whatsapp no of Eannovate
WHATSAPP
+62813 8251 8448
Click number above

Whatsapp of Web, UI UX Design, Mobile App Development, SEO in Jakarta,Indonesia
E-MAIL
hello [at] eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta,Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm