Dropdown atau masukan lain di dalam grup tombol radio
Saya telah mengambil alih pengembangan aplikasi yang pada dasarnya seperti kuesioner besar. Beberapa pilihan desain menyebabkan beberapa HTML tidak valid, yang saya coba perbaiki. Yang utama adalah tempat dropdown dikaitkan dengan tombol radio. Dropdown ini (pilih masukan) telah bersarang di dalam yang sama <label>dengan masukan radio. Saat mencoba memperbaikinya, saya bertanya-tanya apakah mungkin ada cara yang lebih baik untuk menampilkan ini? Berikut adalah contoh dari ui saat ini:
Pilih salah satu opsi berikut:
- Radio 1 - dropdown dengan banyak nilai
- Radio 2
- Radio 3
- Radio 4
Berikut ini contoh dengan slider:
Berapa lama Anda mengalami masalah kesehatan:
- Tidak ada masalah kesehatan
- Antara 0 & 200 bulan - Input slider
- Lebih dari 200 bulan
- Tidak diketahui
- Tidak berhubungan
Radio-1 bisa memiliki 20 nilai atau lebih. Hanya satu dari opsi yang dapat dipilih, jadi ini adalah pertanyaan gaya tombol radio. Saya tidak bisa begitu saja meletakkan opsi 2-4 di dalam dropdown karena tidak relevan dan akan tersesat di sana. Mereka harus terlihat oleh pengguna sebagai opsi alternatif, daripada pilihan alternatif untuk Radio-1. Semoga ini masuk akal!
Adakah pola desain atau sumber daya yang dapat Anda tunjukkan kepada saya untuk situasi seperti ini?
Bantuan apa pun akan sangat dihargai!
Jawaban
Saya akan mengungkapkan kontrol bentuk lain saat pengguna memilih tombol radio:
Catatan samping: hindari bilah geser dan kotak pilih - sulit digunakan.
Kedengarannya seperti kesempatan untuk interaksi pengungkapan progresif klasik.
Sejak awal, bayangkan pengguna Anda melihat 4 frasa sederhana, satu untuk setiap tombol radio.
Jangan tampilkan dulu daftar drop-down.
Ketika pengguna memilih tombol radio paling atas (yang memiliki banyak pilihan yang mendasarinya), hanya pada saat itu antarmuka Anda akan menampilkan bidang bersyarat baru (dengan syarat: tombol radio dipilih).