Radio button adalah salah satu elemen form dasar dalam dunia html. Mereka biasa digunakan pada saat ada 2 atau lebih pilihan yang eksklusif, dan user diharuskan dan hanya diperbolehkan untuk memilih hanya salah satu dari pilihan tersebut.
Dengan kata lain, Jika memilih salah satu pilihan dalam form radio button tersebut, maka secara otomatis akan mengeliminasi pilihan lain yang mungkin dipilih sebelumnya.
Fungsi dari button ini sangatlah membantu dalam tujuan menghindarkan user memasukan data yang rentan salah, karena dalam form tersebut hanya ditampilkan pilihan yang valid.
Sejarah Penamaan Radio Button
Radio button form dinamai demikian karena memiliki kemiripan fungsi dengan tombol (button) di radio mobil pada jaman dahulu.
Jika sebuah tombol ditekan maka tombol yang lain akan keluar dan fungsinya akan digantikan oleh tombol yang di tekan tersebut, dengan hanya memperbolehkan satu tombol yang aktif. Dari sinilah penamaan Radio button didapat, karena memiliki fungsi yang serupa dengan tombol radio fisik di era lampau.
Sudah jelas bukan? Karena mungkin ada beberapa diantara anda yang kesulitan mengira ngira bagaimanakan tombol tersebut, maka lihatlah gambar di bawah.
Penerapan Radio Button Yang Tepat
Gunakan Radio Button Untuk Pilihan Pengaturan
Gunakan radio button untuk menentukan pilihan yang diinginkan dalam pengaturan, dan tidak diaplikasikan sebelum adanya konfirmasi dari user. Bentuk konfirmasi dari user ini biasanya berupa klik pada tombol perintah yang pada umumnya berlabel “save” atau “proceed”.
Jika user kemudian tidak melakukan klik pada tombol konfirmasi, atau malah menekan tombol cancel, maka semua setting akan tidak diindahkan, dan kembli pada pengaturan awal.
Pilihan Yang Disediakan Harus memiliki perbedaan yang jelas dari yang lainnya
Jangan sampai anda memberikan pilihan yang justru akan membuat user bingung. Gunakanlah untuk pilihan dari dua hal yang benar benar bertolak belakang, seperti misal pemilihan antara tampilan landscape atau portrait.
Selalu Tawarkan Pilihan Default
Karena karakter dari radio button adalah hanya diperbolehkan memilih satu pilihan, maka sebaiknya buatlah satu pilihan yang telah aktif. Dan user bisa dengan mudah menggantinya ke pilihan yang lainnya.
Dan bisa juga dalam suatu kasus, si user tidak mau memilih salah satu pilihan yang di sediakan, maka anda juga bisa menambahkan pilihan “none” sebagai alternatif.
Hal ini dikarenakan radio button harus memiliki variabel yang dipilih, dan pemberian pilihan “none” akan lebih baik dibanding memaksakan pilihan lain yang anda tawarkan untuk dipilih user ketika ia tidak menginginkannya.
Buat Layout Button Secara Vertikal Jika Memungkinkan
Mengapa vertikal? Karena baris form horizontal biasanya memiliki masalah dengan framing dalam otak manusia. Selain itu jika terdapat pilihan dengan jumlah yang cukup banyak akan bisa mengakibatkan user kebingungan menentukan tombol tersebut berkorespondensi dengan pilihan yang mana.
Jadi cobalah untuk merancang form anda secara vertikal, dengan satu pilihan per baris.
Jika memang anda terpaksa harus membuat form radio button horizontal, maka pastikan spasi dan pelabelan yang harus benar benar jelas. Hal ini bertujuan untuk meminimalisir kesalahan pilihan tombol tersebut.
Perbantukan Label dalam ruang target klik
Karena bentuk dari radio button yang kecil, maka terkadang akan membuat kesulitan untuk user melakukan klik dengan tepat. Maka dari itu, untuk memperbesar area klik maka buat agar user tidak hanya bisa memilih tombol semata, melainkan memilih label juga dapat merepresentasikan pemilihan tombol.
Gunakan Radio Button Daripada Drop-Down Menu.
Jika pilihan yang anda tawarkan tidak terlalu banyak, atau berada dibawah 7 item, maka radio button adalah pilihan terbaik anda.
User akan dengan segera melihat ada berapa banyak pilihan dan membandingkan apa masing masing pilihan tersebut tanpa harus melakukan satupun klik untuk melihat isi form tersebut.
Gunakan animasi atau feedback visual
Dengan design dan, atau animasi yang tepat akan menambah kejelasan dari fungsi radio button. Selain itu, user juga akan terbantu karena efek yang ada akan membuat mereka secara jelas mengetahu variabel mana yang sedang aktif atau mereka pilih dari feedback visual yang disediakan.
Jika anda berniat untuk menggunakan radio button, maka pastikan anda telah mengikuti standar design yang telah ditentukan. Hal ini adalah dikarenakan bagi user, hal ini akan meningkatkan kemampuan prediksi seperti apakah tipe kontrol dan bagaimana cara penggunaan dari sebuah form tersebut.
Jadi jika anda memutuskan untuk keluar dari jalur, maka resiko interface yang anda buat akan menjadi terlihat membingungkan dan terlihat kurang dipikirkan dengan baik.
Jadi design with care, karena semua hal bisa terjadi tanpa adanya peringatan terlebih dahulu dalam usaha untuk terlihat out-of-the-box.
