Các giải pháp thay thế cho một phần tử <select multiple = "multiple"> đơn lẻ cho các tập dữ liệu lớn

Question

Tôi thường mâu thuẫn với cách tiếp cận vấn đề này trong các ứng dụng của mình. Tôi đã sử dụng bất kỳ số tùy chọn nào bao gồm:

• Lựa chọn ít được yêu thích nhất và ít được sử dụng nhất. Tôi thấy khả năng sử dụng để trở nên tồi tệ, một cú nhấp chuột đơn giản có thể làm hỏng tất cả công việc khó khăn của bạn.
• Giải pháp "tự động hoàn thành" - Nhược điểm: người dùng phải có khả năng đánh vần để tìm các giá trị chết tiệt mà họ cần, không bị phơi bày với giá trị mà họ có thể không nhớ và hiệu suất phụ trợ tiềm năng của tìm kiếm chuỗi con.
• Hai multiselects liền kề, với một add/nút loại bỏ - Nhược điểm: vẫn còn "xấu xí" imo
• Bất kỳ số giải pháp javascript ưa thích (http://livepipe.net/control/selectmultiple, http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/ vv)

Tôi đã không thể để tìm thấy bất kỳ nghiên cứu khả năng sử dụng nào được thực hiện theo cách tiếp cận tốt nhất cho vấn đề này. Nhiều trong số các giải pháp thay thế này là tuyệt vời khi bạn đang đi từ < 10 yếu tố đến một trăm, nhưng có thể phá vỡ hoàn toàn khi bạn đang đi từ một trăm đến một ngàn.

Các bạn sử dụng những gì? Tại sao bạn sử dụng nó? Bạn có thể chỉ cho tôi các nghiên cứu điển hình về khả năng sử dụng không? Có một giải pháp "ma thuật" chưa được khám phá?

Answer 1

Lời khuyên của tôi không sử dụng các điều khiển chọn chung chung. Tôi đã chạy Nghiên cứu trải nghiệm người dùng cho toàn bộ sự nghiệp của mình và mỗi lần tôi thử nghiệm một trang web có nhiều điều khiển chọn, nó luôn luôn gây ra sự cố cho người dùng cuối.

tôi đã làm một bài đăng trên này khi trở lại: Multiple Select Controls Must Evolve or Die

Âm thanh như bạn đã biết điều này dù sao, mặc dù. Câu hỏi thực sự của bạn là "tôi nên sử dụng cái gì?" Vâng, để trả lời câu hỏi này, bạn phải tìm hiểu xem tác vụ của người dùng có nghiêng về phía gọi lại hoặc công nhận hay không.

(i) Bằng cách gọi lại, tôi muốn người dùng biết những gì họ muốn chọn trước khi họ thậm chí còn nhìn thấy danh sách. Trong trường hợp này, nó có thể dễ dàng nhất cho họ nếu bạn cung cấp một công cụ tự động hoàn thành (ví dụ như được sử dụng rất hiệu quả trên facebook). Giải pháp này thậm chí còn tốt hơn khi danh sách các tùy chọn cũng không thể xuất hiện lâu trên một trang (ví dụ: tên vị trí, v.v.).

(ii) Chuyển sang công nhận - bằng cách này, tôi có nghĩa là một công việc liên quan đến người dùng không biết họ muốn chọn gì cho đến khi họ thấy danh sách tùy chọn. Trong trường hợp này, tính năng tự động hoàn tất không cung cấp cho họ bất kỳ gợi ý nào. Một loạt các hộp kiểm sẽ hữu ích hơn nhiều. Nếu bạn có thể hiển thị tất cả cùng một lúc, điều này sẽ hữu ích cho người dùng. Di chuyển DIV nhỏ gọn hơn nhưng chúng tạo tải bộ nhớ cho người dùng - tức là khi chúng đã cuộn xuống, họ phải nhớ những mục họ đã chọn. Điều này đặc biệt rõ ràng khi người dùng lưu biểu mẫu và quay lại sau.

Vì vậy - suy nghĩ về vấn đề của bạn, bạn có cần giải pháp để thu hồi hoặc nhận dạng không?

Answer 2

Hãy xem kiểm soát Dojo Toolkit's DataGrid. Tính năng này linh hoạt và mạnh mẽ nhất và hỗ trợ nhiều lựa chọn hàng. Nó cũng có các tính năng trợ năng được tích hợp sẵn.

Answer 3

Tôi không thể chỉ cho bạn bất kỳ nghiên cứu điển hình nào, nhưng điều tôi có thể nói với bạn là cá nhân tôi thích mảng hộp kiểm lớn trong bố cục cột từ hai đến năm. Chắc chắn, chúng chiếm rất nhiều không gian, nhưng chúng cực kỳ chính xác và không biến chứng.

Tôi cho rằng bất kỳ điều khiển nào - là danh sách đa lựa chọn cơ bản, danh sách kép, mảng hộp kiểm hoặc bất kỳ giải pháp nào khác - một khi bạn đi qua một ngưỡng nhất định, nó sẽ là thử thách cho người dùng.

Answer 4

Thư viện ExtJS có một số giải pháp thực sự tốt cho sự cố của bạn. Có một loạt các phần mở rộng của người sử dụng cho combo-o combo và đa chọn hộp.

Nếu bạn muốn có một kết hợp chọn danh sách, bạn có thể thêm tìm kiếm truy vấn và pagination, cộng với thiết kế các kết quả thả xuống sử dụng dễ dàng khuôn mẫu, như trong ví dụ này:

http://extjs.com/deploy/dev/examples/form/forum-search.html

Đây là một đẹp multiselect, theo phong cách bạn dường như để mô tả:

* (main_site)/học/Extension: Multiselect2

Bạn có thể tìm thấy tất cả các phần mở rộng sử dụng ở đây:

* (main_site)/học/Ext_Extensions

Thêm vào đó, bạn có thể dễ dàng đưa nó vào một trang web hiện mà không cần rất nhiều chi phí phụ thêm.ngăn xếp đầy đủ ExtJS là khá lớn, nhưng để có được chỉ các tập tin JS bạn cần, họ cung cấp một công cụ xây dựng tốt đẹp để lấy chỉ những phần bạn cần:

* (main_site)/products/ExtJS/xây dựng/

Chỉ là một cảnh báo: ExtJS vừa phát hành 3.0, nhưng tôi không chắc chắn rằng tiện ích mở rộng người dùng đã được nâng cấp. Các "diễn đàn-tìm kiếm" đã được lấy từ một ví dụ 3,0 mặc dù, do đó, nó sẽ làm việc tốt với mới nhất và lớn nhất.

(*) Rõ ràng người dùng mới chỉ có thể đăng một liên kết ...