it-swarm-id.com

Kotak centang dan tombol radio yang membingungkan

Saya punya masalah membangun UI tertentu untuk situs web. Saya akan menunjukkan masalah dengan situs web sederhana untuk rantai restoran:

Konteks

situs web ini memiliki banyak pengguna dan banyak restoran. Setiap restoran memiliki pengguna tertentu yang ditugaskan untuk itu, di mana pengguna bisa menjadi manajer, juru masak atau pelayan.

pelayan dapat melihat alamat pesanan yang masuk, juru masak dapat melihat bahwa dan isi pesanan (apa makanannya), dan manajer dapat melihat kedua hal ini dan dapat mengubah peran setiap pengguna.

Hanya ada satu manajer untuk setiap restoran, tetapi sebanyak koki dan pelayan yang diinginkan. Beginilah tampilan UI seperti saat ini:

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

Masalah

Pengguna hanya dapat memiliki masing-masing satu peran, karena setiap peran memiliki semua hak istimewa dari peran sebelumnya ditambah hak istimewa baru. Jadi tidak ada yang bisa menjadi pelayan dan juru masak, atau juru masak dan manajer dll. Itu tidak begitu jelas menggunakan UI di atas, karena orang dapat memeriksa dua kotak centang untuk pengguna yang sama, atau bahkan ketiga peran.

Pertanyaan

Bagaimana Anda membuat ide ini jelas melalui UI? 'ide' adalah hanya ada satu manajer untuk restoran, dan setiap pengguna hanya dapat memiliki satu peran.

Ngomong-ngomong, ini adalah posting pertama saya di sini, jadi saya harap saya berada di tempat yang tepat. Terima kasih atas tanggapan sebelumnya!

EDIT: Ada peran yang lebih tinggi yang dapat mengubah ketiga peran yang disebutkan secara bebas.

Kasus terakhir adalah apa yang saya coba hindari (Mary).

Image .

70
H. Saleh

Dalam skenario seperti ini saya akan membuat UI mencerminkan kemungkinan keadaan aplikasi. Anda hanya dapat memiliki satu manajer sehingga hanya ada satu tempat untuk memilih manajer, semua orang dapat menjadi koki atau server, jadi sediakan widget UI yang saling eksklusif untuk negara-negara tersebut. Ini sebuah contoh:

Mockup

Dalam praktiknya Anda mungkin ingin membuatnya sedikit lebih disengaja untuk mengubah peran orang, tetapi mudah-mudahan itu setidaknya menyampaikan gagasan itu.

Edit: Karena beberapa komentar telah menyebutkan bahwa ada masalah desain dengan mockup ini, dan saya tidak merekomendasikan implementasi langsung dari itu. Perlu diketahui bahwa maket itu hanya dimaksudkan untuk menjawab pertanyaan OP dan prinsip desain lainnya masih berlaku di sini.

Beberapa latihan untuk pembaca meliputi:

  1. Hilangkan ambiguitas di mana peran saat ini dipilih
  2. Tampilkan informasi manajer (telepon, email, ...)
  3. Jadikan operasi penggantian data lebih disengaja daripada sekadar mengubah dropdown atau beralih
122
Tristan Shelton

Karena perubahan Manajer saat ini adalah tindakan yang membatalkan opsi lain - saya akan menyajikannya dengan cara yang mengkomunikasikan dengan jelas apa yang akan terjadi.

Pelayan/Koki adalah Radio-Buttons, jadi hanya satu dari mereka yang dapat aktif pada suatu waktu - dan hanya satu orang yang bisa menjadi manajer dan tidak ada yang lain.

Example For Manager with Button

106
Falco

Ini sepertinya tugas pengelompokan pengguna.

Kedua contoh ini memiliki properti Nice yang dapat Anda cetak tampilan serupa untuk ditampilkan di dapur. Anda juga tidak memiliki teks duplikat/berlebihan dari Cook/Waiter di seluruh UI, jadi saya pikir lebih mudah untuk membaca dan memahami siapa yang bekerja dengan siapa.

Gaya tag

Mirip dengan cara Anda menambahkan tag ke pertanyaan Stack Exchange.

enter image description here

Gaya menu

Saya mengambil mengedit menu WordPress sebagai konsep dasar untuk mensimulasikan hierarki.

enter image description here

21
icc97

Gunakan ini - Ini adalah tampilan peran yang lebih tinggi.

Dalam pandangan manajer, manajer tidak akan memiliki kotak kombo untuk perannya.
Tampilan dua lainnya akan berupa teks biasa - tidak ada kotak kombo.

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

13
DPS

Dari apa yang saya lihat mereka semua harus tombol radio (gunakan spasi yang lebih baik untuk membagi masing-masing pengguna dan tombol radio terkait).
Pertanyaannya, di kepala Anda, seharusnya:
Siapa Alice? Apakah dia seorang (•) Manajer, a () Masak, atau () Pelayan?
Siapa itu Bob? Apakah dia seorang () Manajer, (•) Masak atau () Pelayan?
dll.

Kami membaca dari kiri ke kanan, jadi Anda pertama-tama memperhatikan pengguna dan baru perannya. Dan karena hanya ada satu peran per pengguna, maka mereka semua harus menjadi tombol radio

4
Armands

Saya datang dengan solusi dengan menggunakan konsep segmentasi iOS bersama dengan status menonaktifkan. Saya pikir ini dapat dimengerti secara visual namun memiliki tujuan.

enter image description here

0
Vadivel