Альтернативы одному элементу <select multiple = "multiple"> для больших наборов данных

Question

У меня часто возникают конфликты из-за того, как подойти к этой проблеме в моих приложениях. Я использовал любое количество опций, включая:

• Универсальный множественный выбор - это мой наименее любимый и наиболее редко используемый вариант. Я считаю, что юзабилити ужасна, простой неверный щелчок может испортить всю вашу тяжелую работу.
• Решение "автозаполнения" - недостаток: пользователь должен обладать способностями правописания, чтобы находить нужные ему чертовы значения, не должен подвергаться воздействию тех, о которых он может не думать, и потенциальной внутренней производительности поиска по подстроке.
• Два смежных мультиселектора с кнопкой добавления / удаления - Недостатки: все еще "некрасиво" imo
• Любое количество причудливых решений на JavaScript (http://livepipe.net/control/selectmultiple, http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/, и т. Д.)

Мне не удалось найти ни одного исследования юзабилити, сделанного для лучшего подхода к этой проблеме. Многие из этих альтернативных решений хороши, когда вы переходите от <10 элементов к ста, но могут полностью сломаться, когда вы переходите от ста к тысяче. </p>

Что вы, ребята, используете? Почему вы используете это? Можете ли вы указать мне на практические примеры использования? Есть ли «волшебное» решение, которое еще предстоит найти?

Answer 1

Мой совет: не используйте универсальные элементы управления множественным выбором. Я проводил User Experience Research всю свою карьеру, и каждый раз, когда я тестирую сайт с несколькими элементами управления, это всегда вызывает проблемы у конечных пользователей.

Некоторое время назад я написал сообщение об этом: Множественные элементы выбора должны эволюционировать или умереть

Звучит так, будто ты все равно знал это. Ваш реальный вопрос "что я использую вместо этого?" Что ж, чтобы ответить на этот вопрос, вам нужно выяснить, склоняется ли задача пользователя к отзыв или распознавание .

(i) Под отзывом я имею в виду, что пользователь знает, что он хочет выбрать, прежде чем он даже увидит список. В этом случае, вероятно, им будет проще, если вы предложите инструмент автозаполнения (например, очень эффективно используемый на Facebook). Это решение даже лучше, когда список параметров также невозможно разместить на странице (например, названия местоположений и т. Д.).

(ii) Переход к распознаванию - под этим я подразумеваю задачу, при которой пользователь не знает, что он хочет выбрать, пока не увидит список опций. В этом случае автозаполнение не дает им никаких подсказок. Массив флажков был бы гораздо более полезным. Если вы можете показать их все сразу, это полезно для пользователя. Прокручиваемые DIV более компактны, но они создают нагрузку на память для пользователя - то есть, когда они прокручиваются вниз, они должны помнить, какие элементы они выбрали. Это особенно очевидно, когда пользователи сохраняют форму и возвращаются к ней позже.

Итак, думая о своей проблеме, вам нужно решение для отзыва или признания?

Answer 2

К сожалению, я не могу указать вам на какие-либо примеры, но могу вам сказать, что лично я предпочитаю большие массивы флажков в макетах столбцов от двух до пяти. Конечно, они занимают много места, но они чрезвычайно точные и несложные.

Я думаю, что для любого элемента управления - будь то базовый множественный выбор, двойной список, массив флажков или любое другое решение - когда вы преодолеете определенный порог элементов, это будет непросто для пользователя, независимо от что.

Answer 3

В библиотеке ExtJS есть несколько действительно хороших решений для вашей проблемы. Там есть множество пользовательских расширений для аккуратных комбо и множественных блоков выбора.

Если вам нужен комбинированный список выбора, вы можете добавить поиск запросов и нумерацию страниц, а также оформить получившийся раскрывающийся список с помощью простых шаблонов, как в этом примере:

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

Вот хороший мультиселект в стиле, который вы, казалось, описали:

* (main_site) / учиться / Extension: Multiselect2

Вы можете найти все пользовательские расширения здесь:

* (main_site) / узнать / Ext_Extensions

Кроме того, вы можете легко включить его в существующую веб-страницу без дополнительных затрат. Полный стек ExtJS довольно большой, но чтобы получить только нужные вам JS-файлы, они предоставляют хороший инструмент для сборки, который захватывает только те части, которые вам нужны:

* (main_site) / Продукты / ExtJS / сборки /

Просто предупреждение: ExtJS только что выпустил 3.0, но я не уверен, что пользовательские расширения были обновлены. «Поиск по форуму» был взят из примера 3.0, поэтому он будет отлично работать с последними и лучшими.

(*) Видимо, новые пользователи могут оставлять только одну ссылку ...

Answer 4

Взгляните на элемент управления Dojo Toolkit DataGrid . Это, безусловно, самый гибкий и мощный, и поддерживает выбор нескольких строк. Он также имеет встроенные функции доступа.