Radio button dan checkbox menjadi komponen yang diperlukan dalam UI desain. Kedua komponen GUI (Graphical User Interface) tersebut memungkinkan user atau pengguna untuk membuat pilihan dari beberapa opsi yang disediakan dalam sebuah desain.
Meskipun radio button dan checkbox memiliki fungsi yang sama, namun untuk menghasilkan desain yang baik, seorang UI designer perlu mengetahui bahwa kedua komponen GUI tersebut digunakan dengan cara yang berbeda. Sampai saat ini, radio button dan checkbox masih digunakan dengan cara yang kurang tepat sehingga mengakibatkan kebingungan pada user. Hal tersebut tentu akan berdampak buruk untuk user experience aplikasi atau website Anda. Lalu bagaimana penggunaan radio button dan checkbox yang tepat ? Berikut informasinya untuk Anda.
Table of Contents
Radio Button vs Checkbox. Apa Perbedaannya ?
Radio Button
Radio button adalah elemen graphical user interface ( GUI ) yang memungkinkan pengguna untuk memilih single item dari daftar opsi yang ditampilkan. Elemen radio button akan ditampilkan dalam kelompok yang terdiri dari beberapa opsi atau setidaknya dua opsi.
Radio button ini berbentuk lingkaran kecil. Ketika lingkaran tersebut dipilih oleh user maka tampilan radio button akan terlihat seperti lingkaran dengan titik di dalamnya.
Radio button bersifat mutually exclusive. Jadi, ketika ketika pengguna memilih satu opsi, maka opsi lain yang terpilih dalam group yang sama akan dibatalkan. Dengan kata lain, radio button hanya memungkinkan pengguna untuk memilih satu item saja dari opsi yang disediakan dalam group radio button.
Contoh Penggunaan Radio Button
- Mengisi formulir
Ketika mengisi formulir, radio button disediakan agar pengguna dapat memilih satu opsi yang paling sesuai dengan pengguna. Sebagai contoh adalah jenis kelamin, agama, status, atau yang lain.
- Memesan makanan atau minuman
Radio button juga dapat digunakan dalam aplikasi untuk memesan makanan atau minuman. Sebagai contoh, ketika user ingin order sebuah minuman maka aplikasi dapat menawarkan size cup yang dapat dipilih, apakah berukuran besar, sedang, atau kecil.
- Proses pembayaran
Saat ini sudah banyak aplikasi yang memungkinkan penggunanya untuk melakukan pembayaran secara digital. Agar pembeli memiliki beberapa alternatif, biasanya aplikasi menyediakan beberapa metode pembayaran seperti melalui Visa, MasterCard, Paypal, atau yang lain. Daftar pilihan tersebut dapat Anda tampilkan menggunakan radio button agar pengguna bisa memilih satu metode yang akan digunakan.
Baca Juga: 7 Website Penyedia Ikon Vektor Gratis untuk Desain Web dan Aplikasi
Check Box
Check box merupakan komponen desain yang biasanya ditampilkan dalam bentuk box kecil. Pada umumnya, checkbox memiliki dua status, yaitu:
- Dicentang (check) : box akan terisi tanda centang
- Tidak dicentang (unchecked): box tidak terisi dengan tandang centang.
Sama dengan radio button, check box juga digunakan sebagai komponen GUI yang memungkinkan pengguna untuk membuat pilihan dari beberapa opsi yang disediakan. Namun perlu diperhatikan, ketika menggunakan checkbox maka pengguna dapat memilih lebih dari satu pilihan dari beberapa opsi yang ada. Berbeda dengan radio button dimana pengguna hanya diperbolehkan membuat satu pilihan saja dari beberapa opsi yang ditampilkan.
Masing-masing check box dalam check box group dapat beroperasi secara individual. Oleh karena itu, user dapat check dan uncheck untuk setiap opsi yang ditampilkan dengan bebas.
Dari penjelasan di atas dapat diketahui bahwa terdapat perbedaan mendasar antara radio button dengan checkbox. Dalam grup checkbox, pengguna dapat memilih lebih dari satu opsi. Setiap box beroperasi secara individual sehingga masing-masing box dapat dipilih oleh pengguna. Berbeda dengan radio button yang bersifat mutually exclusive yang hanya memungkinkan pengguna untuk memilih satu opsi saja dalam sebuah radio button group.
Contoh Penggunaan Check Box
- Membuat filter pencarian
Karena checkbox dapat digunakan untuk memilih lebih dari satu opsi, maka check box dapat digunakan dalam filter pencarian. Sebagai contoh, dalam aplikasi reservasi hotel, pengguna dapat mencari hotel yang mereka inginkan dengan menggunakan fitur filter. Dalam filter tersebut pengguna dapat memilih fasilitas apa saja yang mereka inginkan seperti Wi-Fi, kolam renang, parkir, restoran, dan lain-lain. Dengan checkbox, pengguna dapat lebih mudah menemukan penginapan dengan fasilitas yang mereka cari.
- Mengatur pesanan makanan & minuman
Menu check box juga dapat disediakan dalam aplikasi pengiriman makanan dan minuman. Dengan checkbox, user dapat mengatur pesanan mereka secara khusus. Sebagai contoh, ketika membeli minuman user dapat menggunakan menu checkbox untuk memilih jenis extra topping yang akan ditambahkan ke dalam minuman mereka, seperti cream cheese, boba pearl, jelly, atau yang lain.
- Mengatur profil
Ketika user membuat sebuah akun, biasanya menu check box akan disediakan untuk personalisasi profil agar cocok dengan pengguna. Sebagai contoh, ketika bergabung dengan Pinterest, Anda akan diminta untuk menyesuaikan profil dengan topik yang menjadi minat Anda seperti travelling, fotografi, desain grafis, humor atau yang lain. Dengan demikian, informasi yang akan disediakan oleh Pinterest dapat relevan dengan topik yang Anda sukai. Hal tersebut tentu juga akan berpengaruh baik untuk pengalaman pengguna.
Baca Juga: 4 Prototyping Tools yang Berguna untuk UI UX Desainer
Layanan Logique Digital Indonesia
Jika saat ini Anda membutuhkan jasa pengembangan website dan aplikasi dengan desain yang baik serta user friendly, Anda dapat menggunakan jasa Logique Digital Indonesia. Kami memiliki tim yang berpengalaman untuk mengembangkan sistem untuk desktop atau pun seluler. Silakan hubungi kami atau klik Layanan Logique untuk mendapat info lebih lanjut mengenai layanan kami.
