it-swarm-id.com

Pola UI terbaik untuk membiarkan pengguna menetapkan item ke grup

Masalah: pengguna memiliki daftar sekitar 5-20 item yang tidak dikategorikan dan perlu mengategorikannya menjadi 2-4 grup. Bagian yang sulit adalah bahwa item yang sama dapat ditempatkan ke lebih dari satu kelompok (ini adalah kasus Edge tetapi perlu didukung).

Dari apa yang saya lihat ada dua pola desain yang berlaku:

Seret-dan-jatuhkan:
Pada dasarnya, pengguna diberikan daftar item yang dapat diseret yang kemudian dapat di-ember-nya dengan grup lain

Masalah utama dengan pola ini adalah bahwa karena item yang sama dapat ditempatkan ke lebih dari satu grup itu berarti bahwa itu bukan interaksi 'bergerak', item tersebut harus tetap berada dalam daftar tidak terkategori agar pengguna dapat dapat juga letakkan dalam kategori lain. Konsekuensi lain dari hal ini adalah bahwa daftar yang tidak dikategorikan tidak pernah menyusut sehingga tidak segera jelas mana dari item di dalamnya yang telah dikelompokkan dan yang tetap tidak ditetapkan

Berikut ini adalah kemungkinan desain yang mencoba menangani masalah di atas. Item yang telah ditugaskan ke grup tampak lebih gelap. Saya juga menggunakan warna (titik berwarna yang sesuai dengan warna label grup) untuk membantu pengguna melihat grup yang itemnya diletakkan di bawah.

enter image description here

Tabel kotak centang:
UI gaya tabel tempat setiap item dapat ditetapkan ke grup dengan mencentang kotak centang untuk kolom grup itu. Kotak centang daripada tombol radio digunakan karena penugasan beberapa grup per persyaratan item. Berikut ini sebuah contoh:

enter image description here

Kerugian utama yang saya lihat dengan UI ini adalah bahwa tidak mudah untuk langsung melihat barang apa yang termasuk dalam kelompok tertentu. Juga sedikit lebih kikuk untuk memindahkan item antar grup setelah ditugaskan (tindakan 2 langkah: pengguna harus menghapus centang pada satu kotak centang dan memeriksa yang lain). Ini dapat diperbaiki dengan memberikan daftar item yang terpisah di setiap grup di sebelah UI tabel penugasan. Daftar ini dapat berupa non-interaktif atau mendukung drag-n-drop untuk memindahkan item antar grup. Contoh:

enter image description here

Sejujurnya saya tidak sepenuhnya puas dengan salah satu solusi. Saya bertanya-tanya apakah ada yang punya ide yang lebih baik atau perbaikan desain ini?

59
M.A.X

Ini lebih merupakan pertanyaan apakah Anda perlu melihat seluruh pemetaan atau tidak. Jika Anda tidak harus melihat seluruh pemetaan sekaligus, ada kemungkinan lain.

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

Jika seluruh pemetaan itu penting maka pendekatan terbaik Anda adalah menggunakan matriks yang akan memungkinkan orang untuk melihat seluruh pemetaan.

Perlu diingat bahwa menggunakan Drag and Drop UI itu Bagus tetapi bisa melelahkan jika ada tindakan berulang yang perlu dilakukan oleh pengguna - kotak centang dapat membuat tugas berulang jauh lebih mudah.

14
Mortalus

Banyak tergantung pada berapa banyak item dan grup yang Anda harapkan ada, serta berapa banyak Anda mengharapkan seseorang untuk secara aktif bekerja sama pada suatu waktu.

Jika bekerja dengan banyak grup dan item, opsi pertama akan menjadi tidak dapat digunakan. Meskipun, saya akan cenderung menjauh darinya meskipun jumlahnya kecil.

Opsi kedua mungkin tidak terlihat mewah, tetapi mudah digunakan dan dipahami, sementara juga bisa menyesuaikan diri dengan jumlah item dan grup yang lebih besar. Saya tidak melihat kelemahan utama selain fakta bahwa itu bukan cara baru untuk melakukannya. Tapi itulah kekuatannya.

Opsi ketiga adalah peningkatan yang bagus untuk yang kedua, tetapi hanya dengan jumlah grup dan item yang sedikit.

Saya akan menyarankan opsi 2 dengan beberapa perubahan. Tambahkan kemampuan untuk mengurutkan berdasarkan salah satu kolom (grup) dan memiliki panel ringkasan di sebelah kanan yang menunjukkan grup apa item dalam ketika item itu dipilih.

11
JohnGB

Mengapa tidak menggabungkan keduanya? Gunakan tampilan awal yang kedua, dan izinkan pengguna untuk memilih kotak centang. (Memilih kotak centang jauh lebih cepat dan lebih mudah daripada menyeret dan menjatuhkan, yang membuat ini lebih unggul dari Opsi 1.) Agar pengguna dapat dengan mudah memberi tahu item apa yang ada di grup tertentu dengan melihat ke bawah kolom, minta setiap kotak centang berubah menjadi tombol sebagai Begitu diperiksa. (Tombol ini dapat terlihat seperti yang Anda perlihatkan di sisi paling kanan Opsi 2b dengan tanda x di atasnya daripada yang dapat diklik untuk menghapus item dari grup dan mengubah tombol kembali menjadi kotak centang yang tidak dicentang.) Anda bahkan dapat membuatnya jadi bahwa pengguna dapat mengklik dan menyeret tombol untuk memindahkannya di antara kelompok-kelompok dalam satu gerakan cair, sementara mereka masih akan memiliki pilihan intuitif tetapi sedikit lebih lambat untuk memilihnya satu kolom dan memilih ulang di yang lain menggunakan kotak centang.


Sunting: Ini mockup cepat tentang apa yang saya maksud.

enter image description here

6
Graham Herrli

Saya pikir kedua paradigma itu masuk akal tetapi tidak ketika disajikan sekaligus.

Sebagai pertanyaan tindak lanjut: Apakah Anda perlu menyelesaikan kegiatan ini pada satu halaman? (mis., apakah itu bagian dari formulir?)

Jika tugas ini merupakan bagian dari pengalaman manajemen item yang merupakan inti dari produk, saya akan merekomendasikan pendekatan dua halaman seperti yang digunakan di iTunes untuk daftar putar dan Google+ untuk lingkaran.

Pada halaman "daftar item", pengguna dapat melihat daftar semua grup yang ada dan dapat menarik dan melepas item ke dalam grup ini. Setiap grup dapat memaparkan jumlah item yang telah ditambahkan. Anda kemudian dapat memberi label pada setiap item dengan jumlah grup yang telah ditambahkan, ketika suatu item dipilih grup yang termasuk di dalamnya dapat disorot.

Ketika suatu kelompok dipilih, struktur halaman akan berubah untuk secara jelas membedakan item yang masuk dan keluar dari kelompok yang dipilih. Item yang keluar dari grup kemudian dapat diseret atau multi-dipilih untuk memindahkannya ke grup yang dipilih.

5
Nathan Brothers

Bagaimana dengan menampilkan grup dengan daftar pilihan yang mampu "saran otomatis". Kelompok ini selanjutnya dapat dimasukkan ke dalam kisi responsif (atur sesuai aturan tata letak Anda).

Anda juga dapat menampilkan item yang dipilih di tag cloud seperti komponen seperti Grup # 3

enter image description here

4
Aftab

Apa tugas utama?

  1. Menetapkan item ke grup
  2. Membandingkan grup
  3. Memindahkan item antar grup
  4. Sesuatu yang lain

Saya pikir # 1 didukung dengan drag and drop. Contoh yang baik dalam praktik ini adalah google + circle . # 2 dan # 3 mungkin paling baik didukung dengan kotak centang yang ditunjukkan di atas atau beberapa variasi pada konsep itu meskipun saya pikir mungkin ada masalah dengan informasi yang berlebihan dengan sejumlah besar item atau grup. Itu bisa menjadi masalah kurang lebih tergantung pada frekuensi penggunaan untuk kelompok pengguna target. Seperti yang telah dinyatakan orang lain, saya akan menghindari menggabungkan pola dan hanya tetap dengan yang paling mendukung tugas utama.

1
Max E

Saya akan menyarankan variasi opsi kedua Anda, tetapi hanya menampilkan satu grup pada satu waktu untuk meminimalkan kebingungan pengguna. Dalam banyak kasus, drag-and-drop hanya menambah lebih banyak pekerjaan bagi pengguna ketika ada metode yang lebih sederhana.

mockup

nduh sumber bmml - Wireframes dibuat dengan Balsamiq Mockups

Pada mockup di atas, grup dipilih dari daftar kotak dropdown dan kotak centang berubah secara dinamis tergantung pada grup yang dipilih. Perhatikan bahwa tombol simpan di atas grup pilih untuk menunjukkan bahwa itu akan menyimpan semua grup, bukan hanya satu. Memiliki pilihan grup dalam dropdown juga membuat pola ini jauh lebih terukur, terlepas dari jumlah grup.

Jika Anda melakukan ini untuk antarmuka web, Anda bisa menggunakan ini sebagai solusi yang semakin ditingkatkan, dengan mundurnya semua kelompok ditampilkan pada waktu yang sama, satu di atas yang lain.

1
Virtuosi Media

Beberapa pertimbangan perlu diberikan pada ukuran fisik pekerjaan yang akan Anda gunakan. Jika tugas ini tersebar di seluruh layar maka seret dan lepas menjadi masalah. Beberapa sistem saya telah bekerja pada umpan balik telah menahan tombol mouse sambil menyeret panjang, (umpan balik memang mengatakan panjang), jarak menyebabkan banyak kesalahan sebagai jari muncul sebelum seharusnya. Jika drag dan drop adalah klik, sedikit putaran pergelangan tangan, drop maka kebanyakan orang akan menanganinya dengan mudah, bahkan orang tua dengan beberapa masalah gerakan.

Kotak centang adalah ide bagus untuk hampir semua kisi ukuran dan lebih cocok untuk pengguna yang ingin menggunakan keyboard daripada mouse.

Seperti biasa saran kombinasi kedua metode akan memenangkan suara saya karena memberikan solusi untuk sebagian besar pengguna. Pengembangan menjadi agak lama tetapi itu bukan urusan Pengguna Anda.

Jawabannya semua tampaknya didasarkan pada pengambilan item dan menugaskannya ke grup. Saya tidak mengerti kepentingan relatif dari item dan grup tetapi apakah masuk akal untuk menggunakan grup sebagai sumber utama dan "menarik" item dari daftar ke dalam grup dan kemudian pindah ke grup berikutnya.

0
Adelaide Robin