Apakah Dan Bagaimana Penerapan Radio Button Yang Tepat Dalam Website Anda

Posted by in Get Pedia, Tutorial .
Apakah Dan Bagaimana Penerapan Radio Button Yang Tepat Dalam Website Anda

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.

radio mobil lawas

 

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.

radio button di setting last.fm

 

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.

penggunaan radio button dibanding check box

 

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.

preselected

 

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.

masalah yang terdapat dalam rado button horizontal

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.

radio button vs drop down

 

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.

animasi untuk memperjelas radio button

 

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.

Tags: info, tutorial

Related Posts:

Pengertian Propagasi

Masa propagasi nama domain adalah jeda waktu yang diperlukan sebuah nama domain untuk mengenali atau tersambung dengan server hosting

Berkenalan Lebih Jauh Dengan CSS Framework

framework dapat diartikan sebagai sebuah paket yang terdiri dari struktur file dan folder berisi kode kode yang memiliki standar tersendiri (HTML, CSS, JS dsb), yang dapat digunakan sebagai basis pengembangan dari sebuah website.

Memilih Font Yang Tepat Untuk Website Anda : Sebuah Panduan Typography

beberapa pertimbangan untuk memilih font yang tepat untuk website anda, karena anda harus memastikan bahwa pemilihan font anda akan disukai oleh anda dan juga pengunjung anda.

Apakah Google No CAPTCHA reCAPTCHA, Are You Sure You’re Not a Robot?

Semua kriteria noCapctha reCaptcha tersebut di simpan ke dalam cookie dari browser, untuk kemudian digunakan oleh server google untuk membedakan bot

1 Comments

Leave a Comment

Leave a Reply

Name: *
E-mail: * (Not Published)
Website: (Site url with http://)
Comment: *
Verification code: Submit