Designing Mobile Buttons

Button atau tombol adalah element UI yang crucial di pembuatan design aplikasi, button adalah komponen interaktif yang membantu user untuk navigasi antara page dan juga sebagai trigger dari suatu aksi.

Berdasarkan data riset pasar dan konsumen tahun 2022, lebih dari setengah lalu, web di seluruh dunia berasal dari perangkat seluler. Bayangkan berapa banyak pengguna yang akan hilang jika mereka kesulitan mengetuk tombol di aplikasi kamu.

Untuk itu berikut adalah tips untuk membuat button mobile yang perfect yang di temukan dan dapat membimbing user ke destinasi yang di inginkan

Optimalkan button size dan touch area

Jika kamu pernah mendesin button pastinya kamu tau kalau size adalah karakteristik button yang essential, button size dapat memberikan impact yang besar kepada user experience, jika button tidak pas akan memberikan dampak negatif kepada user sebaliknya jika kita dapat membuat button yang sempurna sizenya.

Button design untuk mobile adalah konsep yang tricky, button harus cukup besar agar pengguna dapat berinteraksi dengannya. Namun pada saat yang sama, mereka tidak boleh merusak hirarki visual dan harmoni komposisi.

Berdasarkan rekomendasi Web Content Accessibility Guidelines (WCAG), zona sentuh untuk tombol di perangkat mobile harus minimal 9x9 mm, tanpa mempedulikan ukuran layar, perangkat, atau resolusi. Ini adalah rata-rata ukuran area ujung jari manusia. Panduan Material Design (google) menyarankan area sentuh minimum 48x48 piksel yang setara dengan sekitar 9 mm.

Gunakan traditional button shapes

Saat membahas bentuk button, button rectangular dengan sudut yang sedikit rounded adalah pilihan teraman - mereka memastikan keseimbangan, simetri, dan kepercayaan. Sudut yang rounded terasa lebih aman dan lebih alami bagi mata pengguna, sementara tepi tajam mungkin dapat menyiratkan ancaman.

Pengguna juga cukup akrab dengan tombol berbentuk lingkaran, misalnya, floating action buttons (FAB) yang menentukan tindakan utama di halaman.

Kita tidak mau untuk membatasi kereatifitas kamu sebagai designer, akan tetapi shape yang sesuai guidelines sudah terjamin memberikan user rasa control dan nyaman.

Jika kamu masih ingin untuk membuat button dengan shape yang tidak biasa, make sure untuk mencari cara agar user dapat mengidentify dan mengenali button yang kalian buat.

Prioritaskan warna pada penting

Warna bukan sekedar dekorasi, dalam mendesign button warna menjadi hal utama yang membawa clarity dan recognition, warna dapat memberikan indikasi level hierarki kepada element. User mengangap button yang memiliki warna yang cerah lebih interaktif dan menarik perhatian, mereka mengharapkan button tersebut dapat menyelesaikan task/goal yang mereka inginkan.

Saat membahas tombol Call-to-Action, tombol tersebut harus memiliki bobot visual yang kuat, menonjol di antara elemen-elemen sekitarnya, dan mendorong pengguna untuk berinteraksi dengannya.

Tombol sekunder seperti “Cancel” atau “Back” harus lebih kurang menonjol - ini akan mengurangi risiko membingungkannya dengan tombol utama. Hindari membuat tombol sekunder terlalu pucat, karena pengguna mungkin berpikir bahwa tombol tersebut tidak berfungsi.

Selain itu, warna membantu pengguna memahami status tombol. Status saat Hover/tap dan aktif harus cukup berbeda dari status default atau disabled.

Jaga aksesibilitas color contrast ratio

Kontras berjalan beriringan dengan warna. Selain membuat tombol menonjol bagi pengguna dengan penglihatan yang baik, menetapkan kontras yang tepat membuatnya dapat diakses oleh pengguna dengan gangguan penglihatan. Sekitar 4,5% dari populasi global hidup dengan buta warna (1 dari 12 pria dan 1 dari 200 wanita). Setidaknya 2,2 miliar orang memiliki gangguan penglihatan dekat atau jarak jauh, dan sekitar 39 juta orang dipercaya buta total. Sebagai desainer, kita harus ingat untuk bersikap empatik dan menjadikan inklusivitas sebagai prioritas utama.

Berdasarkan rekomendasi WCAG, rasio kontras warna antara latar belakang dan teks pada teks normal harus 4,5:1. Untuk menghitung rasio kontras antara label tombol dan warna latar belakang serta memastikannya memenuhi WCAG, kamu dapat menggunakan pemeriksa Coolors atau WebAIM.

Seimbangkan bayangan

Flat button terlihat out of style karena mereka tidak telihat interactive dan memikat user untuk klik button tersebut, penambahan bayangan kepada button dapat membuat button seperti psysical button, shadow menambah ilusi depth dan membuat butotn sebagai prioritas yang jelas, membedakan butotn dari element lain.

Namun, penting untuk tidak berlebihan dengan shadow, shadow yang terlalu besar dan gelap akan membuat tata letak terlihat kotor dan visual yang semrawut.

Jadi, apa resep ajaib untuk bayangan tombol?

• Alih-alih hitam atau abu-abu bawaan, gunakan warna yang mirip dengan warna tombol

• Pertahankan opasitas di bawah 40%

• Buat bayangannya lebih kecil dari tombolnya

Jangan menggunakan bayangan hanya demi estetika, tujuan dari shadow adalah untuk melengkapi tombol dan menekankan ketebalannya.

Buat button hierarchy menggunakan visual cues

salah satu tips untuk merancang tombol mobile yang baik adalah dengan menetapkan hierarki tombol melalui sinyal visual. Untuk menetapkan hierarki visual pada tombol, Anda dapat menggunakan beberapa pendekatan, seperti:

• Ukuran: Buat tombol utama lebih besar dari tombol sekunder untuk membuatnya menonjol.
• Warna: Gunakan warna yang berbeda untuk tombol utama dan sekunder, misal tombol utama dengan warna cerah dan tombol sekunder dengan warna lebih redup.
• Jarak: Tempatkan tombol utama lebih terisolasi dari tombol lainnya untuk membuatnya mudah dikenali.
• Gaya: Beri penekanan pada tombol utama dengan gaya yang berbeda, misal menggunakan bayangan atau efek hover yang lebih menonjol. Tujuannya adalah untuk membuat pengguna dengan cepat dapat membedakan tombol utama dari tombol sekunder hanya dengan melihat sinyal visual yang Anda berikan.

ketika ada lebih dari satu tombol, penting untuk mengindikasikan prioritas dan tujuan tombol-tombol tersebut melalui sinyal visual seperti warna, ukuran, kontras, garis tepi, dan bayangan.

Tombol utama harus selalu menjadi tombol yang paling menonjol di halaman. Sebagai contoh, tombol tindakan mengambang selalu mewakili tindakan utama atau yang paling umum dilakukan. Biasanya, ini adalah satu-satunya tombol dari jenisnya, tidak ada pesaing.

Tombol sekunder mewakili tindakan yang satu tingkat kurang penting daripada tindakan utama. Untuk menunjukkan tingkat prioritasnya, gunakan tombol ghost atau bertuliskan.

Tombol teks adalah label teks tanpa kontainer. Mereka adalah kandidat sempurna untuk tindakan yang kurang ditekankan, seperti tombol sekunder atau bahkan tersier.

Maksimalkan akurasi tap dengan button spacing

White space menciptakan tampilan yang minimalis dan elegan. Yang lebih penting, white space meningkatkan keterbacaan dan menarik perhatian pengguna ke elemen-elemen. Dalam desain mobile, space bahkan menjadi lebih penting.

Karena manusia memiliki daya pemrosesan otak yang terbatas, aplikasi yang membombardir pengguna dengan terlalu banyak informasi akan membuat mereka merasa kewalahan. Setiap tombol, gambar, atau ikon tambahan bisa menjadi tetes terakhir yang membuat pengguna meninggalkan tugas.

Jika halaman berisi lebih dari satu tombol yang berdampingan dan terlalu dekat satu sama lain, jari pengguna bisa tergelincir dan tidak mengenai target. Berikan ruang bernafas pada tombol-tombol Anda dan pastikan cukup untuk akurasi ketuk yang tinggi.

> [!TIP] > Tip! Pastikan buttons in a row mempunyai at least 12px between them.

Berikan feedback visual yang optimal

Ketika Anda menekan tombol, ia merespons interaksi Anda. Secara alam bawah sadar, kita mengharapkan pengalaman yang sama ketika berinteraksi dengan kontrol digital. Dengan kata lain, jika pengguna kesulitan memahami apakah itu tombol atau label, atau apakah bisa diklik atau disabled, berarti aplikasi Anda tidak memberikan cukup umpan balik.

Feedback macam apa yang kamu bisa buat untuk buttons?

• Visual: Tombol yang terangkat dengan bayangan alami dan warna yang berubah saat di-tekan sangat menarik. Animasi halus yang subtil juga dapat mendorong pengguna untuk melangkah maju.
• Taktil: Getaran perangkat yang lembut saat di-tekan membantu pengguna memahami bahwa sistem telah mencatat tindakan mereka.

> [!TIP] > Tip! Perhatikan untuk tetap membuat butotn functional

Letakan buttons secara intuitif

Memaksa pengguna berburu tombol adalah ide yang buruk, tombol harus selalu berada di tempat di mana pengguna bisa melihatnya. Terlepas dari seberapa menarik secara visual desain Anda, tombol yang sulit ditemukan akan membuat pengguna kesal dan bisa saja membuat mereka meninggalkan situs web atau aplikasi Anda sepenuhnya.

Anda harus menempatkan tombol di tempat di mana pengguna mengharapkan melihatnya. Salah satu tata letak paling tradisional adalah tata letak zig-zag yang dikenal sebagai Prinsip Gutenberg. Prinsip ini menyatakan bahwa mata pengguna memindai halaman dalam bentuk huruf Z dari kiri atas ke kanan bawah. Jalur pemindaian ini juga disebut sebagai gravitasi membaca.

Menempatkan tombol utama di bagian bawah halaman memungkinkan pengguna membaca informasi terlebih dahulu dan mengambil tindakan saat siap - alih-alih mencarinya di seluruh halaman. Keuntungan lain dari penempatan di bawah adalah tombol menjadi lebih menonjol dan mudah ditap.

Jadi, jangan buat pengguna melakukan perburuan tombol yang menyebalkan! Tempatkan tombol-tombol penting di lokasi yang jelas dan intuitif. Pengguna akan berterima kasih karena tidak harus mengejar-ngejar tombol yang misterius! > [!TIP] > Tip! Gunakan sticky button yang fixed di bottom screen saat ada page yang panjang dengan scroll yang tak terbatas

Sediakan botton label yang berarti

Oke, mari bandingkan pengguna dengan wisatawan yang sedang menempuh perjalanan. Dalam hal ini, label-label berfungsi seperti petunjuk arah, membimbing mereka melalui aplikasi atau situs web. Label tombol harus sesederhana mungkin, memberitahu pengguna apa yang terjadi setelah mereka mengetuk tombol. Dengan kata lain, label harus dengan jelas menyatakan apa yang akan pengguna dapatkan setelah menyelesaikan tindakan tersebut.

Hindari menggunakan salinan generik dan tidak jelas seperti “ya” atau “tidak” - ini tidak mengatakan banyak tentang hasil dari tindakan tersebut. Sebagai gantinya, gunakan label seperti “Simpan perubahan” atau “Hapus item” - sesuatu yang lebih deskriptif untuk memperjelas apa yang terjadi selanjutnya.

Label pesan kesalahan yang jelas juga sangat penting bagi pengguna dengan buta warna, karena mereka tidak bergantung pada warna dan mungkin tidak dapat mempersepsi warna merah.

Jadi, jangan buat pengguna menebak-nebak maksud dari tombol! Beri mereka label yang jelas dan deskriptif, bak petunjuk arah untuk memandu perjalanan mereka dengan lancar. Pengguna akan berterima kasih karena tahu persis apa yang akan terjadi saat mereka mengetuk tombol!

Pastikan konsistensi visual

Berdasarkan Principle of Least Astonishment, user tidak menyukasi sistem yang mempunyai surprise atau sifat yang tidak terduga, keculai surprise tersebut memiliki semacam hadiah.

Ketika berurusan dengan UI, semuanya tidak boleh membuat keributan. Prinsip desain konsistensi bertujuan untuk menghilangkan kebingungan dan mendatangkan rasa dapat diprediksi serta kenyamanan.

Bayangkan pengguna sebagai turis yang berjalan-jalan di kota yang asing. Mereka ingin merasa aman dan nyaman saat menjelajahi aplikasi atau situs web. Nah, konsistensi UI bagaikan petunjuk arah yang jelas, memandu mereka melalui pengalaman digital dengan lancar.

Jika tombol, ikon, dan tata letak berubah-ubah dari halaman ke halaman, pengguna akan merasa frustrasi dan kehilangan. Mereka tidak ingin terus-menerus belajar ulang cara menggunakan aplikasi Anda. Sebaliknya, mereka ingin cepat beradaptasi dan fokus pada tugas mereka.

Konsistensi yang perlu ada di buttons adalah:

• Konsistensi Visual: Tombol yang sama harus terlihat sama di seluruh produk. Jika Anda menggunakan tombol biru solid dengan label “Simpan” untuk menyimpan perubahan, Anda harus tetap menggunakan gaya ini di semua tempat di mana tombol tersebut muncul. Aturan yang sama juga berlaku untuk penempatan tombol.

• Konsistensi Fungsional: Tombol yang sama harus berfungsi dengan cara yang serupa di seluruh aplikasi atau situs web.

• Konsistensi Eksternal: Jika produk Anda memiliki situs web dan aplikasi, tombol dengan fungsi yang sama harus terlihat sama pada kedua platform.

Author

Author : Ifarra