it-swarm-vi.tech

Giao diện người dùng tốt nhất cho đa lựa chọn từ danh sách là gì?

Chúng tôi có một mẫu web và một trong các lĩnh vực là một danh sách đa lựa chọn. Các lựa chọn của chúng tôi là:

  1. Danh sách các hộp kiểm
  2. Listview (chọn hộp nhưng cho phép đa lựa chọn)

Cả hai dường như là một chút xấu xí và khó sử dụng khi danh sách chứa hơn 100 mặt hàng.

Có giải pháp UI nào khác tốt hơn cho trường hợp như vậy không?

80
leora

Một lựa chọn khác mà tôi đã thấy ở một số nơi là có hai danh sách liền kề , một danh sách có sẵn các mặt hàng và một với các mặt hàng được chọn.

Đây là một ví dụ từ OpenFaces.org mà tôi đã tìm thấy với một tìm kiếm nhanh trên google:

enter image description here

55
Bevan

Một giải pháp khác là "thanh đa lựa chọn" giống như facebook. (Tôi không biết tên chính xác)

Bạn có thể tìm thấy một ví dụ tại đây . Về cơ bản nó giống như một trường nhập văn bản nhưng các mục được chọn sẽ biến thành "thẻ". Chỉ cần thử nó trên trang tôi đã liên kết đến.

55
Raffael Luthiger

Phụ thuộc vào ui và bố trí không gian bạn có. Cũng phụ thuộc vào số lượng mặt hàng trong danh sách của bạn và số lượng mặt hàng trung bình mà người dùng phải chọn. Một giải pháp thú vị là danh sách thả xuống + hộp kiểm dropdown checkbox

http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

Càng có nhiều mặt hàng thì càng ít thả xuống sẽ phù hợp (để người dùng cuộn bên trong thả xuống không tốt lắm.) Và ở đây bạn cần tìm ra cách tổ chức/cấu trúc danh sách của mình.

9
Marc D

Tùy thuộc vào số lượng tùy chọn, bạn có thể đi với tùy chọn danh sách thả xuống đồ họa như sau. Khai thác/nhấp vào bật tắt cho dù mục đó được chọn.

Điều này không hoạt động rất tốt với danh sách rất dài, mặc dù.

enter image description here

6
Phillip Quintero

Tôi đến hơi muộn với bữa tiệc này, nhưng tôi nghĩ rằng tôi đã thêm một giải pháp tôi đã sử dụng gần đây: một kiểu nhập văn bản với chức năng dự đoán văn bản động (nghĩ mẫu tìm kiếm chính của Google).

Khi người dùng chọn "kết quả" trong trình đơn thả xuống, một danh sách có thể được điền bên dưới đầu vào, tốt nhất là có một tùy chọn rõ ràng về cách loại bỏ từng lựa chọn. Ví dụ về chức năng này, hãy nghĩ đến các trang web yêu cầu nội dung được gắn thẻ như WordPress hoặc Delicious.

Giải pháp này yêu cầu bạn và người dùng hơi giống simpatico về nội dung của danh sách lớn hơn, nhưng tôi thấy nó giúp tiết kiệm rất nhiều bất động sản và trang bất động sản.

6
skybondsor

Có vẻ như tôi đến muộn với vấn đề này, nhưng tôi đã gặp vấn đề tương tự ở công ty của mình.

Chắc chắn bạn cần phải chia điều này thành hai yêu cầu riêng biệt (tìm kiếm, chọn) sau đó đưa nó trở lại với nhau thành một giao diện người dùng.

Nếu tìm kiếm đơn giản, thì một cái gì đó đơn giản hơn với tự động hoàn thành sẽ thực hiện thủ thuật (ví dụ: http://quasipartikel.at/multiselect/ lấy ý tưởng).

6
seanevanking

Các hộp kiểm là thành ngữ dễ hiểu hơn.

Bạn sẽ cần nút "kiểm tra tất cả" và "kiểm tra không" và, nếu người dùng phải kiểm tra nhiều mục liền kề, nút "kiểm tra mục đã chọn" (chỉ được bật khi có nhiều hơn 1 mục được chọn)

5
Eduardo Molteni

Tôi đã xem đây là một lựa chọn là tốt. Đó là danh sách hộp kiểm nơi các mục đã kiểm tra được di chuyển/tương tác lại. Một giải pháp lai giữa hai.

[ ] item 1
[ ] item 2
[ ] item 3
[ ] item 4
[ ] item n

Sau khi chọn một:

[ ] item 1                X item 2
[ ] item 3
[ ] item 4
[ ] item n

Các mục đã chọn có thể được di chuyển sang phải (có thể sử dụng div cố định để nó hiển thị khi một cuộn xuống danh sách các tùy chọn) hoặc nó có thể di chuyển lên đầu danh sách.

3
DA01

Cho dù bạn đi với tùy chọn 1 hoặc 2 từ danh sách của bạn thực sự có liên quan đến việc bạn có muốn lựa chọn đó bền bỉ vì bất kỳ lý do cũng như các yếu tố khác hay không. Dưới đây tôi sẽ liệt kê một vài điều bạn có thể muốn xem xét khi chọn phương pháp nào sẽ tuân theo.

Kéo-n-Thả

Nếu bạn muốn cho phép sắp xếp lại các mục kéo thả, sử dụng các hộp kiểm có thể giúp người dùng không bị mất trạng thái lựa chọn trong các quy trình. Nếu bạn không cho phép sắp xếp lại kéo thả hoặc không quan tâm nếu trạng thái lựa chọn bị mất trong quá trình nếu được phép thì sử dụng đa lựa chọn thông qua phím Ctrl có thể là một tùy chọn.

Kiên trì lâu dài

Nếu lựa chọn được thực hiện sẽ được lưu lại sau đó và được gọi lại trong phiên tiếp theo hoặc chạy ứng dụng thì hãy xem xét sử dụng hộp kiểm hoặc mô hình hộp danh sách kép vì hiển thị các mục được tô sáng thường dành riêng cho trạng thái lựa chọn tạm thời.

Đa lựa chọn là tính năng nâng cao

Nếu đa lựa chọn được dự kiến ​​là một nhu cầu hiếm hoi đối với người dùng của bạn thì có lẽ gánh nặng người dùng với các hộp kiểm không phải là lựa chọn tốt nhất vì họ không có khả năng sử dụng chúng trong phần lớn thời gian. Trong những trường hợp này, có thể tốt hơn để hiển thị các hộp kiểm bằng cách nhập vào chế độ đa lựa chọn đặc biệt hoặc chỉ sử dụng phương pháp phím Ctrl của đa lựa chọn nâng cao. Trong trường hợp Edge mà người dùng cần kiểm soát hạt rất tốt đối với lựa chọn và đặt hàng và sàng lọc bất động sản không phải là vấn đề đáng lo ngại thì sử dụng phương pháp mà Bevan đề xuất trong câu trả lời của anh ta với hai danh sách riêng cũng là một lựa chọn hợp lý.

Lưu ý rằng Windows Explorer thường tuân theo phương pháp phím Ctrl để chọn nhiều tệp/thư mục nâng cao nhưng nó có thể được cấu hình để sử dụng các hộp kiểm để thể hiện lựa chọn. Tôi đã thử nó một lần và quay lại và nhận thấy hầu hết mọi người thậm chí không biết đến tính năng đó.

2
jpierson

Tôi đến bữa tiệc rất muộn. Nhưng tôi muốn đưa ra giải pháp của riêng mình.

Đó là: sử dụng cửa sổ bật lên (còn gọi là lớp phủ, phương thức) để hiển thị các hộp kiểm và cho phép người dùng chọn nhiều giá trị.

Cửa sổ bật lên được mở khi người dùng nhấp vào liên kết chỉnh sửa trên biểu mẫu chính.

Khi chọn xong các giá trị, anh ta có thể nhấp vào nút DONE, có sự kiện nhấp, phương thức javascript để tập hợp các giá trị đã kiểm tra và cập nhật một số trường ẩn trên biểu mẫu chính và/hoặc một số trường hiển thị (ví dụ: vùng văn bản chỉ đọc hoặc một khoảng hoặc một phần tử div) trên mẫu chính. Và khi người dùng nhấp vào nút gửi chính, trường ẩn hoặc trường hiển thị sẽ được gửi đến máy chủ để duy trì.

Nếu có một số lượng lớn các hộp kiểm để chọn, thì việc hiển thị chúng có thể chiếm một bất động sản màn hình rất lớn, do đó, một cửa sổ bật lên có thể được tạo kiểu mà không lộn xộn để giúp tập trung sự chú ý của người dùng. Khi xong việc, anh ta có thể đóng cửa sổ.

Tất nhiên nhiều bước cũng có thể có ý nghĩa. Nhưng giải pháp của tôi là cho một hình thức gửi duy nhất.

Bạn nghĩ gì về phương pháp này? Đây có phải là một mô hình đã được sử dụng?

Cảm ơn bạn

2
Zack Xu