Home Mobile How to Design Better Buttons

How to Design Better Buttons

  1. Standard Size 

Ukuran standar tombol Mobile harus setinggi minimal 44 pt. Sejauh lebarnya, saya biasanya mencoba membuatnya lebar penuh dengan setidaknya 16 pt margin lebar yang memberi saya lebar 343 pt. Ukuran font antara 16-19 pt tapi saya biasanya menggunakan 17 pt

  1. Placement

Kapan pun memungkinkan, saya mencoba menempatkan CTA saya dalam jangkauan ibu jari, terutama ketika itu adalah tombol navigasi yang penting. Namun, saya meletakkan tombol destruktif atau pendukung saya di luar jangkauan.

  1. Border Radius

Persegi panjang bulat sedikit lebih mudah dikenali dengan mengurangi beban kognitif yang diperlukan untuk membedakan ujung-ujungnya. Mereka juga tampak lebih “ramah” dan mudah didekati, sedangkan sudut tajam mungkin tampak lebih “profesional” dan “serius”. Gunakan dengan tepat.

  1. States

Setiap status tombol harus mudah dibedakan dari yang lain. Untuk seluler, tidak masalah jika Anda mengarahkan kursor atau status fokus, tetapi default, aktif, dan nonaktif harus mudah dikenali.

  1. Hierarchy

Hirarki gaya sangat penting untuk mengomunikasikan pentingnya setiap tindakan. Primer harus menjadi CTA Anda yang paling menonjol, sekunder dengan penekanan sedang, dan tersier harus digunakan untuk tindakan yang paling tidak penting.

  1. “Invisible” Padding

Kapan pun Anda mendesain grup tombol, Anda harus selalu ingat tentang target ketuk. Jangan biarkan pengembang mengoreksi desain untuk Anda, ingat tentang persyaratan aksesibilitas minimum untuk menciptakan pengalaman pengguna yang baik

  1. Keep it to one line

saat mendesain tombol Anda, Anda harus ingat tentang daya tanggap dan bagaimana tampilan tombol Anda pada perangkat terkecil. Jangan membuat teks Anda terlalu panjang jika Anda tidak dapat memasukkannya ke dalam bingkai. Usahakan untuk menyimpannya dalam satu baris setiap saat.

  1. Accessibility first

Anda memerlukan rasio kontras setidaknya 3,5-4,0 untuk teks besar, dan 4:5 untuk teks kecil agar elemen digital Anda dapat dibaca oleh penyandang disabilitas. Anda mendesain untuk seluruh spektrum atau pengguna. Jika Anda bisa membacanya dengan baik, bukan berarti semua orang bisa membacanya juga.