[UI/UX TIPS]11 Pertanyaan Tentang Desain Tombol

Tombol adalah elemen penting dari hampir semua antarmuka pengguna. Mereka memungkinkan pengguna untuk mengambil tindakan. Halaman, dialog, formulir input, bilah alat – semua komponen itu memerlukan tombol.

Pada artikel ini, saya ingin mengulas pertanyaan paling umum yang dimiliki desainer visual tentang desain tombol.

1. Bisakah saya mendesain tombol tanpa batas?

Aturan dasar dari desain tombol yang baik adalah sederhana – tombol harus terlihat seperti tombol. Border memperkuat perasaan tombol tradisional dan menciptakan target yang menarik bagi pengguna. Tanpa pembatas, elemen UI lebih mirip tautan daripada tombol. Itu sebabnya jika Anda punya pilihan, lebih aman menggunakan perbatasan yang terlihat.

Image for post

Tombol tanpa batas vs. tombol dengan batas
2. Warna apa yang harus saya pilih untuk tombol?Warna adalah bagian penting dari bahasa visual yang kami gunakan untuk berkomunikasi dengan pengguna kami.

Berikut adalah beberapa hal yang perlu diingat ketika memilih warna:

Warna-warna kontras memudahkan untuk menempatkan tombol dalam tata letak.

Image for post
Tombol ‘Kirim’ di antarmuka Gmail segera menangkap perhatian pengguna.
Warna memperkuat sifat aksi. Anda dapat mengandalkan makna warna umum saat memilih warna tertentu. Misalnya, tetap menggunakan warna merah untuk operasi yang berpotensi berbahaya seperti menghapus informasi pengguna.

Image for post

‘Hapus akun’ adalah operasi yang berpotensi berbahaya dan itulah sebabnya tombol yang bertanggung jawab untuk operasi ini berwarna merahTetapi apa pun warna yang Anda pilih untuk digunakan, pastikan bahwa warna dapat diakses oleh semua orang yang akan menggunakan produk Anda.

3. Haruskah saya menggunakan tombol bulat atau tajam?

Image for post

Tombol bulat vs tombol tajamTombol berbentuk bulat memiliki dua manfaat bagi pengguna:

Bentuk bundar lebih menyenangkan bagi mata manusia. Manusia secara alami cenderung menghindari benda tajam, dan beberapa orang bahkan memiliki aichmophobia (takut akan benda tajam, seperti pensil, jarum, pisau).
Bentuk bundar mengarahkan fokus pengguna ke bagian tengah tombol, tempat label teks berada. Akibatnya, Anda memiliki peluang lebih baik bagi pengguna untuk membaca label.

Tetapi ketika sampai pada keputusan desain, bentuk tombol harus dipilih sesuai dengan desain visual produk Anda. Jika desain visual menggunakan banyak objek geometris yang ketat, Anda mungkin harus menggunakan tombol tajam.

Image for post

Tombol tajam. Gambar dengan cara dipindahtangankan
4. Berapa besar / kecil yang harus saya buat tombol?Tujuannya agar interaksi dengan UI nyaman bagi pengguna. Ini berarti bahwa Anda perlu mendesain semua elemen UI untuk meminimalkan risiko tindakan yang salah. Ukuran tombol harus:

Mempermudah pengguna untuk membaca label (label teks yang terbaca dan terbaca). Sangat penting untuk memilih jenis huruf yang bekerja dengan baik dalam berbagai ukuran dan bobot untuk menjaga keterbacaan di setiap ukuran (periksa apakah font yang Anda pilih dapat dibaca pada layar yang lebih kecil!)
Mempermudah pengguna untuk berinteraksi dengan elemen UI (mudah klik / ketuk). Poin ini sangat penting untuk antarmuka sentuh karena target sentuhan kecil meningkatkan risiko tindakan yang salah. Dianjurkan untuk membuat kontrol yang memiliki ukuran 9 mm sehingga dapat diketuk dengan jari secara akurat. Target semacam itu memungkinkan jari pengguna untuk masuk dengan pas di dalam target.

Image for post

Target sentuh berukuran tepat memudahkan pengguna untuk berinteraksi dengan suatu produk. Gambar oleh Apple
5. Kapan harus menggunakan tombol diisi vs hantu?

Image for post

Diisi vs tombol hantuTombol hantu (juga dikenal sebagai tombol berongga) menjadi trendi dalam beberapa tahun terakhir. Mereka sangat umum untuk halaman arahan. Tetapi ketika datang ke pengalaman pengguna, penting untuk diingat bahwa tombol hantu jauh kurang efektif untuk menangkap perhatian pengguna (karena mereka memiliki berat visual yang kurang).

Itulah mengapa pilihan ghost vs tombol yang diisi harus didasarkan pada tingkat penekanan yang Anda inginkan untuk tombol Anda. Umumnya, tombol yang diisi digunakan untuk penekanan tinggi karena lebih banyak kontras warna. Untuk alasan yang sama, tidak disarankan untuk menggunakan tombol hantu sebagai panggilan utama untuk bertindak.

Terkadang Anda perlu menunjukkan dua tombol ajakan bertindak berdampingan. Dalam hal ini, tombol yang diisi harus untuk CTA primer sedangkan tombol berongga untuk tindakan sekunder. Tombol penekanan tinggi ini paling menarik perhatian sementara hantu akan digunakan sebagai alternatif.

Image for post

Menggunakan tombol diisi dan hantu bersamaan. Gambar oleh Tesla
6. Bagaimana cara menulis label teks yang bagus?Label teks menggambarkan tindakan yang akan terjadi jika pengguna mengetuk tombol. Sebagian besar desainer tahu bahwa tindakan tombol harus jelas bagi pengguna.

Label yang baik dapat ditindaklanjuti. Mereka meminta pengguna untuk menyelesaikan tindakan tertentu dengan mengatakan apa yang akan terjadi ketika pengguna mengklik / mengetuknya. Itu sebabnya disarankan untuk menggunakan kata kerja (mis., Kirim, Dapatkan, Terapkan) untuk yang menggambarkan operasi dengan jelas. Misalnya, ketika pengguna Anda akan mengirim email, tombol desain dengan label “Kirim” bukan “Kirim.”

Image for post
‘Kirim’ tidak menggambarkan tindakan.
7. Berapa banyak teks yang dapat saya gunakan untuk label di tombol?Terkadang desainer berlebihan dengan jumlah kata dalam label teks. Sementara lebih banyak kata mungkin berarti lebih jelas, lebih banyak kata juga berarti lebih banyak kekacauan visual.

Berikut adalah dua hal yang perlu diingat:

Hindari membungkus teks. Agar teks tetap terbaca, label teks harus tetap dalam satu baris.

Image for post

Jangan membungkus teks
Lebar wadah tombol tidak boleh lebih sempit dari teksnya.

Image for post

Pilih ukuran yang tepat untuk wadah tombolCoba gunakan satu atau dua kata per tombol.

8. Bisakah saya menggunakan SEMUA CAPS untuk label teks?

Desainer cenderung menghindari penggunaan ALL CAPS untuk teks karena dua alasan yang jelas:

SEMUA CAPS membuat teks sulit dibaca dan dipahami. Judul dan teks biasa kurang terbaca saat mengetik semua huruf besar. Headline dalam semua huruf kapital membutuhkan waktu antara 13% dan 20% lebih lama untuk dibaca (dipelajari oleh Breland, K., & Breland)
SEMUA CAPS menciptakan kesan berteriak pada pengguna Anda. Orang tidak suka membaca instruksi dalam semua huruf kapital karena mereka merasa seperti orang lain sedang mengajar mereka bagaimana melakukan sesuatu dengan benar.

Tapi bagaimana dengan label tombol? SEMUA CAPS secara alami menuntut lebih banyak perhatian dari pengguna, dan dimungkinkan untuk menggunakan SEMUA CAPS untuk label tombol ketika Anda ingin pengguna menghindari membuat kesalahan saat melakukan tindakan tertentu (mis., Menghapus file penting).

Image for post

Label reguler vs. SEMUA CAPS
9. Dapatkah saya mengganti label teks dengan ikon?Ya, Anda bisa, tetapi hanya jika ikon tersebut memiliki makna universal (seperti rumah, cetak, bagikan, atau keranjang belanja). Untuk ikon lainnya, Anda perlu memastikan bahwa pengguna Anda dapat mendekodekan makna ikon Anda. Jika artinya tidak jelas bagi pengguna, Anda dapat menggunakan ikon bersama dengan teks untuk mengomunikasikan artinya. Ikon secara alami akan menarik perhatian ke objek tombol sementara label teks akan menjelaskan arti dari tombol ini.

Image for post

Keranjang belanja adalah ikon yang umum bagi pengguna mayoritas.Tapi jangan gunakan dua ikon di tombol yang sama.

Image for post
Dua ikon yang digunakan pada tombol yang sama dapat membingungkan pengguna
10. Haruskah saya menggunakan bayangan untuk tombol?Secara umum, bayangan akan membantu Anda meningkatkan keunggulan visual tombol dan lebih menekankannya. Tetapi pada akhirnya, keputusan apakah Anda ingin menggunakan bayangan untuk tombol harus didasarkan pada gaya antarmuka pengguna Anda. Jika sebagian besar elemen UI datar, mungkin Anda tidak boleh menggunakan bayangan untuk tombol Anda.

Image for post

Tombol datar vs. pseudo-3D (dengan bayangan)
11. Bagaimana saya bisa berkomunikasi keadaan tombol?Tidak hanya tindakan tombol yang harus jelas bagi pengguna, Anda juga perlu memastikan bahwa statusnya jelas. Biasanya, dimungkinkan untuk menentukan status tombol berikut:

Normal (Aktif). Keadaan aktif adalah ketika tombol diklik / disadap.
Arahkan kursor (khusus desktop). Status tambahan ini dapat meyakinkan pengguna bahwa elemen tertentu bersifat interaktif.
Ditekan Desain visual Button mengakui bahwa pengguna mengklik / mengetuk tombol.
Dengan disabilitas. Tombol ini dapat dinonaktifkan ketika pengguna belum menyelesaikan operasi yang diperlukan.

Warna dan opacity dapat digunakan untuk mengkomunikasikan keadaan.

Image for post
keadaan normal vs cacat dikomunikasikan dengan opacitysumber:uxplanet.org

Latest articles

12.6k Followers
Follow

Related articles