Ingin Membuat Desain Tombol yang Bagus? Perhatikan 6 Peraturan Ini
Isi Artikel
Salah satu aspek penting dalam menciptakan desain user interface dan user experience (UI/UX) yang baik adalah dengan membuat desain tombol yang tepat guna.
Bagaimana sih, cara membuatnya? Peraturan apa saja yang harus diikuti?
Yuk, temukan jawaban pertanyaan-pertanyaan itu dalam penjelasan berikut ini!
Peraturan Dasar Membuat Desain Tombol
© Freepik.com
1. Gunakan bentuk yang familier
Peraturan pertama adalah menggunakan bentuk tombol yang familier.
Pastikan ukuran, bentuk, dan detail lainnya sudah dikenali oleh orang secara umum.
Dilansir dari UX Planet, tombol berwarna dengan bayangan di sekitarnya adalah desain yang paling familier untuk user website, aplikasi, atau platform lainnya.
Hal ini dikarenakan ketika melihat sesuatu berdimensi, mereka akan tahu bahwa gambar atau tombol tersebut dapat diklik.
Pemilihan warna juga termasuk ke dalam poin ini.
Gunakan warna hijau atau biru untuk tindakan yang berkaitan dengan persetujuan. Lalu, gunakan merah untuk tindakan yang diasosiasikan dengan negasi.
Dengan begitu, orang tahu bahwa tombol tersebut akan membatalkan atau meneruskan kegiatan yang sedang ia lakukan.
2. Beri ruang di sekitar tombol
Ketika membuat desain tombol, perhatikan juga ruang di sekitar tombol tersebut.
Pastikan bahwa tombol tersebut tidak menyaru dengan teks di sekitarnya dan terlihat seperti boks biasa saja.
Hal ini juga berkaitan dengan penempatan tombol.
Usahakan untuk meletakkannya di tempat yang strategis dan paling memungkinkan untuk dilihat dan diklik oleh user.
Beri jarak antara teks atau gambar dengan tombol yang disediakan, agar user dapat melihatnya dengan jelas.
3. Pastikan ukuran pas
Desain ukuran juga berpengaruh terhadap efektivitas tombol tersebut, lho.
Acap kali, tombol yang berukuran terlalu kecil akan sulit untuk diklik jika sedang menggunakan handphone.
Akan tetapi, jangan membuat tombol yang terlalu besar dan memakan tempat juga.
Menurut peraturan yang dikeluarkan oleh Material Design Accessibility, elemen yang ditujukan untuk diklik harus cukup besar agar efektif. Ukuran yang disarankan (panjang dan lebar) setidaknya adalah 48dp.
Intinya, jangan sampai user kesulitan mencari tombol yang ingin diakses.
Pastikan juga bahwa kamu sudah membuat ukuran tombol untuk website dan mobile view, ya.
4. Perhatikan urutan tombol
Maksud dari peraturan ini adalah urutan dan penempatan tombol.
Katakanlah website-mu menyediakan sebuah artikel, tetapi untuk mengaksesnya, user harus mengklik sebuah tombol terlebih dahulu.
Jika memikirkan pengguna, tombol untuk melanjutkan artikel seharusnya ada di kanan, lalu untuk kembali adalah di kiri.
Sama halnya dengan penempatan dua tombol untuk melakukan tindakan yang berlawanan.
Biasanya, “Ya” atau “Lanjutkan” ada di sebelah kiri, lalu “Tidak” dan “Cancel” berada di kanannya.
5. Tuliskan kegunaan tombol
Nah, peraturan ini juga sangat penting.
Ketika membuat desain tombol, pastikan bahwa microcopy yang diletakkan di tombol dan sekitarnya menjelaskan kegunaan tombol tersebut.
Dilansir dari Justinmind, penting sekali untuk memberi heads-up kepada user mengenai apa yang tombol tersebut bisa lakukan.
Sebagai contoh, ada dua tombol dengan pilihan action untuk menghapus sebuah file selamanya, lalu satu lagi untuk membatalkan penghapusan tersebut.
Tombol yang ditujukan untuk menghapus file bisa diberi tulisan “Hapus file selamanya” atau “Delete permanently”.
Hindari penggunaan pilihan “OK” dan “Cancel” saja, karena user perlu mengetahui konsekuensi yang bisa didapatkan jika mengklik tombol tersebut.
Jangan sampai tindakan yang diambil fatal seperti menghapus data, tapi mereka tidak sadar karena tulisan di tombol kurang menjelaskan.
6. Berikan efek feedback
Efek feedback? Apa maksudnya?
Kamu pernah perhatikan tidak, kalau sedang mengklik sebuah tombol, terdapat efek seakan kamu sedang benar-benar menekannya?
Seperti warna tombol berubah menjadi lebih gelap, atau bayangan di belakangnya terlihat seperti bergerak?
Nah, ini dia yang dimaksud dengan efek feedback dari tombol.
Tombol yang baik dan efektif harus memiliki efek ini, karena user perlu tahu bahwa tombol tersebut berhasil diklik.
Jika warna tombol dan bayangan di belakangnya tidak berubah, user bisa saja menganggap terdapat kesalahan atau bahkan tombol tidak berfungsi.
Efek suara juga bisa digunakan, terutama untuk menandakan bahwa tombol yang diklik berfungsi dan kamu akan diarahkan ke halaman yang diinginkan.
Itu dia penjelasan mengenai peraturan dasar membuat tombol yang ramah bagi user.
Meskipun terlihat sepele, tetapi desain tombol sangat berpengaruh bagi kepuasan pengunjung website atau aplikasi, lho.
Nah, kamu bisa mengasah skill UI/UX dan memahami dunia desain lebih lanjut dengan mengikuti kelas yang diadakan di Glints Expert Class.
Glints Expert Class akan dibawakan oleh pakar yang sudah berpengalaman di bidang desain, sehingga kamu bisa memperluas pengetahuan dan meningkatkan kemampuan di bidang ini.
Kalau merasa kemampuanmu sudah cukup mumpuni, tunggu apa lagi? Cari peluang kerja bidang UI/UX di Glints sekarang juga!
