it-swarm.asia

Pendekatan modern untuk tombol radio

Saya sedang berupaya memperbarui UI/UX dari aplikasi yang berumur 20 tahun dan saya sepertinya terjebak pada use case khusus ini.

Saat mengklik tombol Baru , sistem meminta pengguna untuk memilih satu dari dua opsi

  1. Buat Perintah Kerja Baru
  2. Buat Tugas/Subtask baru untuk Perintah Kerja yang sudah ada sebelumnya

Perlu diingat bahwa sistem memang meminta informasi lebih lanjut. Ini bukan hanya ini dan berdasarkan arsitektur aplikasi, perlu mengetahui informasi ini (dan beberapa lainnya) sebelum melanjutkan.

Pertanyaan saya adalah, apa yang akan menjadi cara modern untuk menunjukkan dua pilihan kepada pengguna? Mungkinkah itu salah satu opsi yang disebutkan dalam tangkapan layar di bawah ini?

Layar aplikasi lama

enter image description here

Opsi yang saya sarankan:

enter image description here

22
Shreyas Tripathy

Jawaban singkat: Opsi 1

Saya tidak melihat alasan untuk membuat ini lebih kompleks daripada dua tombol radio normal. Kami telah memiliki elemen UI ini begitu lama karena suatu alasan.

Opsi lain yang disajikan oleh Anda dimaksudkan/lebih cocok untuk kasus lain.


Aturan dasar praktis adalah:

Gunakan tombol radio untuk beberapa pilihan (maksimal 5-7) yang saling eksklusif dan ketika Anda ingin semua pilihan terlihat.
Gunakan dropdowns untuk daftar lebih dari 5-7 pilihan, di mana menghadirkan semuanya akan menjadi kelebihan visual.

Opsi 4 dengan sakelar tidak cocok sama sekali, seperti yang digunakan untuk metafora on/off, bukan pilihan antara dua opsi yang sama.

Saya kira opsi 3 juga dimungkinkan, tetapi itu tidak benar-benar menambah nilai lebih dari tombol radio normal, bahkan mungkin membingungkan beberapa pengguna.


Lihat jawaban ini di sini menjelaskan perbedaan:
(https://ux.stackexchange.com/a/88135/67657

Atau artikel NN Group ini:
Kotak centang vs. Tombol Radio

Atau ini:
7 Aturan Menggunakan Tombol Radio vs Menu Drop-Down

79
Big_Chair

Saya akan membuat layar dan tombol yang sepenuhnya baru untuk dua tugas. Beri label "Edit Perintah Kerja" dan "Buat Perintah Kerja". Edit adalah untuk mengedit perintah kerja yang ada atau menambah sub-tugas. Buat adalah untuk membuat perintah kerja baru. Tombol Edit akan berada di sebelah perintah kerja dalam daftar perintah kerja terbuka. Tombol Buat akan berada di bagian atas halaman.

work order UI

https://www.bootply.com/Ur1q177i95

Ini berlaku untuk situasi spesifik Anda. Untuk tombol radio biasa yang melakukan hal-hal tombol radio (memilih dari daftar pilihan singkat), saya tidak akan mengubahnya.

15
Chloe

Itu tergantung pada konteksnya.

  • Tombol radio sangat bagus untuk menunjukkan kepada pengguna semua opsi yang mungkin dan dengan jelas menyoroti apa yang dipilih
  • Dropdown berguna jika Anda tidak memiliki/ingin menggunakan terlalu banyak ruang
  • opsi 3 (tab?) adalah pendekatan yang sangat menarik jika kontennya dinamis, sehingga pengguna langsung melihat perubahan apa pada setiap pilihan. Meskipun seperti yang disebutkan dalam komentar mungkin terlihat membingungkan bagi pengguna. Tab memisahkan kategori konten; apa yang terjadi dengan konten tab yang tidak dipilih?
  • Tombol jenis sakelar lebih akrab untuk pilihan hidup/mati, dan merupakan satu-satunya opsi yang tidak akan menskala dengan baik jika Anda memutuskan untuk menambahkan lebih banyak opsi ke formulir Anda di masa mendatang.
6
Luciano

Satu hal yang saya lihat belum dinaikkan adalah bahwa tombol radio harus selalu memiliki opsi default yang dipilih, yang menunjukkan bahwa alur kerja di sini terutama untuk menambahkan perintah kerja baru dan kedua untuk menambahkan tugas - yaitu, jika pengguna tidak t sentuh kontrol ini, dan mengisi sisa formulir, mereka mendapat WO, bukan tugas.

Jika asumsi itu benar, Anda bisa meminta mereka untuk memilih induk WO jika diperlukan dengan pilihan. Ini mungkin rumit, tergantung pada apakah Anda dapat mencari daftar tugas kandidat pada tahap ini, dan berapa banyak yang mungkin ada.

optional select

Jika Anda tidak dapat memperoleh informasi itu, atau jika tidak praktis untuk memilih dari para kandidat di sini, Anda dapat menggunakan kotak centang sederhana "Lampirkan sebagai sub-tugas?".

3
Beejamin

Anda dapat menggunakan tombol sakelar.

Konsepnya adalah tombol Push yang menawarkan pilihan yang saling eksklusif: ketika satu tombol ditekan ke bawah, yang lain naik.

Jika menggunakan desain "tombol Push" yang lama, pastikan sudah jelas tombol mana yang turun dan mana yang naik. Gambar di bawah ini tidak begitu baik dalam hal ini tetapi hanya untuk menggambarkan konsepnya.

toggle buttons example

Anda juga dapat menggunakan desain yang lebih kontemporer di mana pilihan yang dipilih "disorot" dengan warna yang berbeda.

Jika tujuan utama Anda adalah membuat antarmuka lama kompatibel dengan perangkat sentuh seperti smartphone, alternatif sederhana adalah memperluas area sensitif tombol radio Anda untuk memasukkan label. Namun, tidak akan jelas bahwa label dapat diklik, kecuali jika Anda menggambar bingkai yang mengelilingi tombol radio dan labelnya.

Untuk antarmuka desktop, tombol radio masih merupakan pilihan yang baik jika jumlah opsi terbatas.

3
OuzoPower

Anda dapat mengganti tombol "Baru" asli dengan dua tombol, satu untuk "Perintah Kerja Baru" satu untuk "Tugas Baru".

Pertimbangkan tangkapan layar dari aplikasi Microsoft di bawah ini. File -> Item menu baru sebenarnya adalah menu yang mencantumkan jenis "hal" baru yang mungkin ingin dibuat pengguna.

Visual Studio Example

Dalam kasus Anda, tidak perlu menempatkan tombol di menu terpisah, cukup ganti tombol "Baru" asli dengan dua opsi.

1
Harrison Paine