Cara mendesain tombol yang lebih baik

Cara mendesain tombol yang lebih baik

Cara mendesain tombol yang lebih baik

 

Cara mendesain tombol yang lebih baik
Cara mendesain tombol yang lebih baik

Tombol adalah elemen interaktif yang menghasilkan tindakan yang dijelaskan di atasnya. Jika dikatakan “simpan” pada sebuah tombol, mengkliknya kemungkinan besar akan “menyimpan” sesuatu. Ini juga salah satu elemen interaktif terpenting dari setiap produk digital.

Ini dapat menyebabkan pembelian, unduh, kirim, di antara tindakan penting lainnya. Tombol digital juga merupakan turunan dari tombol dunia nyata, seperti pada remote TV, pemutar rekaman, atau pengontrol game.

Acara online TNW
Konferensi Couch kami mempertemukan para pakar industri untuk membahas apa yang akan terjadi selanjutnya

DAFTAR SEKARANG
Yang paling penting untuk diketahui adalah sebuah tombol harus terlihat seperti tombol, dan aturan terpenting untuk mendesain tombol adalah membuatnya cukup menonjol sehingga tidak akan bingung dengan hal lain.

Dengan menghapus elemen dari tombol, fungsinya mulai larut dan menghilang. Itu menjadi hiasan atau teks, kehilangan kualitas yang bisa ditindaklanjuti.
Akrab = bagus
Kami terbiasa dengan bentuk dan bentuk tertentu yang biasanya dikaitkan dengan suatu tindakan. Semakin banyak tombol kita terlihat mirip dengan apa yang kita kaitkan dengan tombol, semakin baik. Inilah sebabnya mengapa persegi panjang (atau persegi panjang bulat) selalu merupakan pilihan teraman untuk sebuah tombol.

Elemen ini akan segera diidentifikasi sebagai tombol.
Bentuk dan bentuk lainnya (segitiga, lingkaran, organik) tidak dapat dikenali oleh pengguna. Lanjutkan dengan hati-hati, dan gunakan hanya ketika gaya umum produk Anda mengharuskan penyimpangan dari norma-norma.

Unsur-unsur yang dapat membutuhkan waktu lebih lama untuk diidentifikasi dapat ditindaklanjuti.
Diseksi tombol
Saat merancang tombol, pikirkan setiap elemen dan pilih dengan bijak. Menggunakan perusahaan dalam panduan merek atau gaya yang dimaksud sebagai garis dasar, pikirkan tombol seperti apa yang cocok dengan merek dan cocok dengan antarmuka.

Anda harus mengatur ruang padding dan aman menggunakan nomor pangkalan kisi. Pada contoh di atas, spasi bagian dalam kiri dua kali lebih besar, daripada jarak vertikal, yang merupakan pilihan rasio aman untuk peningkatan keterbacaan.

Spasi dan penjajaran
Tombol dengan spasi yang tidak rata adalah salah satu masalah antarmuka yang paling umum. Periksa ulang apakah label tombol Anda berada di tengah secara horizontal dan vertikal. Buat panduan jika Anda harus yakin.

Selain dari metode berbasis grid , cara yang aman untuk memilih spasi tombol juga dapat dilakukan dengan huruf besar “W.” Jika setidaknya satu “W” cocok di setiap sisi label tombol, Anda aman. Di sisi, lebih baik menggunakan dua kali lipat aturan “W” untuk meningkatkan keterbacaan.

Jangan lupa tentang ruang aman atau ruang di antaranya, tombol Anda. Jika Anda memiliki kelompok mereka, ruang aman haruslah individu untuk masing-masing – jangan tumpang tindih!

Ukuran yang tepat
Baik tombol web dan seluler juga harus memiliki ukuran minimum yang tepat. Jika tombol Anda terlalu kecil, akan sulit untuk mengetuk atau mengkliknya. Itu menghasilkan frustrasi dan dapat menyebabkan pengguna mencopot pemasangan aplikasi Anda. Cara terbaik adalah memulai dengan 44 x 44 piksel untuk semua elemen interaktif di perangkat seluler.

Sweet spot adalah sekitar 50 piksel untuk tombol ponsel. Dalam hal perangkat berbasis kursor , 32x 32 piksel juga harus berfungsi. Ingatlah bahwa bahkan pada desktop, semakin besar tombol semakin mudah digunakan

Latihan yang baik
Tombol-tombol penting juga berfungsi baik dengan ikon. Checkout cepat diidentifikasi oleh ikon keranjang atau keranjang, tetapi hanya selama kata “checkout” juga muncul.

Panah atau chevron kanan ditempatkan setelah label tombol membuat pesan yang dihasilkan lebih kuat. Pengguna lebih terdorong untuk mengklik dan “melanjutkan.” Ini berfungsi baik jika Anda ingin memperkuat CTA Anda.

Tombol dengan bayangan juga lebih “dapat diklik” dan diperhatikan jauh lebih cepat daripada yang rata. Tambahkan drop shadow halus di tombol untuk membuatnya lebih menonjol dari latar belakang.

 

Sudut membulat

Tombol bundar dianggap lebih ramah dan positif daripada tepi yang tajam. Pada saat yang sama, mereka membuat desain konten di sekitar mereka menjadi jauh lebih sulit. Jika Anda memiliki teks rata kiri tepat di atas tombol, semakin membulat sudut semakin sedikit teks yang cocok secara visual – itu akan membuat Anda merasa seolah-olah margin kiri berada di dua tempat pada waktu yang bersamaan.

Menyelaraskan ikon
Penyelarasan ikon yang baik pada tombol adalah salah satu hal tersulit untuk dilakukan. Dalam banyak kasus hubungan antara font-weight dan icon-weight spesifik untuk mereka. Namun ada aturan sederhana dan berguna yang berfungsi dalam banyak kasus.

Bergantung pada jari-jari sudut kami, kami membuat lingkaran atau kotak dengan ukuran tinggi tombol kami. Di dalamnya, kami membuat bentuk lain untuk menaungi ikon. Seharusnya memiliki padding di dalam bentuk yang lebih besar yang ukurannya sama dengan tinggi teks kita. Lalu kita menempatkan ikon kita di dalam bentuk yang lebih kecil.

Dalam kasus chevron, yang terbaik adalah ketinggian teks. Anda juga dapat memeriksa lebar garis terhadap lebar font – semakin cocok dengan semakin baik hasil akhirnya.

Penyeimbangan tepi

Jika Anda menggunakan tombol bulat, ingatlah untuk memiliki rasio sudut bulat sama dengan elemen layar lainnya, jika tidak, akan ada ketidakseimbangan di margin.

Jarak diagonal sama di sini dengan yang di sisi kiri dan bawah. Ini menghasilkan jauh lebih bagus, lebih cepat untuk memproses tepi luar.

Jarak diagonal lebih besar (kiri) dan lebih kecil (kanan) daripada jarak samping. Itu membuat ujung terlalu menonjol dan mengalihkan perhatian dari tombol itu sendiri.
Ringkasan
Ketika Anda mulai membangun tombol primer, sekunder, dan tersier Anda, cobalah untuk mengingat untuk memeriksanya terhadap beberapa faktor setiap kali. Bahkan ketidakkonsistenan kecil atau keberpihakan yang buruk dapat menyebabkan konversi yang lebih rendah. Ketika datang ke tombol, konversi dan klik adalah yang terpenting.

Singkatnya, ingat untuk:

Jadikan tombol Anda terlihat seperti tombol
Biarkan label terpusat secara vertikal dan horizontal
Memiliki ruang yang cukup (padding) di dalam tombol
Jika Anda menggunakan ikon, pilih ukuran dan perataan yang tepat
Atur radius perbatasan Anda tergantung di mana tombol akan digunakan
Dan kemudian periksa apakah jari-jari itu cocok dengan elemen di layar Anda yang lain
Jadikan ukurannya tepat! Semakin besar tombol semakin mudah digunakan. Itu termasuk desktop!
Semoga berhasil!

Artikel ini awalnya diterbitkan di UX Collective oleh Michal Malewicz, seorang desainer dengan lebih dari 20 tahun pengalaman dalam membangun produk digital. CEO agensi HYPE4 dan penulis buku “Designing Interfaces”.

Sumber:

https://obatpenyakitherpes.id/seva-mobil-bekas/