Многие люди не знают, как выбрать несколько элементов в элементе управления HTML <select>, так что ...?

Question

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

Please pick 3 options:
<select name="categories" size="10" multiple="yes">

Итак, какие удобные для пользователя альтернативы вы предлагаете? Может быть, есть 10 флажков ... или, может быть, просто каждый параметр в цветном блоке, который меняет цвет, когда они нажимают, чтобы выбрать его? Это усложняется, если учесть, что мой текущий список из 20 вариантов со временем может вырасти до 50.

Какой бы способ я ни выбрал, будет сложно проверить его (используя Javascript), чтобы убедиться, что человек выбирает как минимум 1 элемент, а не более 3. Дело не в том, чтобы определить, сколько вариантов он выбрал, проблема в том, подробнее о том, как донести это до пользователя дружественным образом!

Edit: Я полагаю, что мог бы использовать теги, как здесь, на stackoverflow, но я чувствую, что они менее уместны, если пользователи не являются техническими (и половина из них будет).

Answer 1

Альтернативы, которые я использовал в прошлом:

1) Для небольшого количества товаров используйте список флажков. Флажки намного более интуитивно понятны и просты в использовании, но для большого количества элементов это может стать проблемой. Тем не менее, когда количество предметов растет, вы можете добавить:

<div style="overflow: scroll" />

с фиксированной высотой.

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

3) Когда количество предметов не очень велико, но больше, чем несколько, я использовал выпадающий список с чекбоксами, встроенными в дом, который имеет преимущество в том, что занимал только небольшое пространство. Нечто подобное может помочь .

Answer 2

Я предлагаю использовать два списка, один с доступными и один с выбранными. Щелчок или двойной щелчок по элементу в одном из списков должен переместить элемент в другой список. Для удобства я бы добавил две кнопки «Переместить», чтобы сделать то же самое. Этот подход удивительно хорошо работает со средними пользователями, как в веб-приложениях, так и в настольных приложениях.

Answer 3

Вы можете просто использовать ручной список элементов (скажем, простых ссылок), которые имеют поведение Javascript onclick, которое отменяет выбор / выбор вручную. В основном, путем изменения класса css между двумя значениями и проверки этих css (или какого-либо другого атрибута) во время отправки, чтобы определить выбор.

Это позволит пользователю просто выбрать элемент, нажав, и отменить выбор, нажав, вместо стандартного требования Ctrl + Click.

Answer 4

Я ненавижу многократный выбор, особенно когда элемент позже можно редактировать (если вы нажмете, не удерживая клавишу CTRL, вы потеряете то, что уже выбрали). Два лучших варианта в моем опыте:

1. Наличие трех отдельных опций выбора (если вы ограничиваетесь тремя). Преимущество здесь в том, что вы получаете инструкции «выбрать до трех», которые очень хорошо справляются с пользовательским интерфейсом, и с помощью небольшого JavaScript вы можете удалить первый выбор из второго выпадающего списка, что устранит путаницу.
2. Использование флажков. Преимущество флажков состоит в том, что они, вероятно, лучше соответствуют вашей базе данных, плюс информация довольно интуитивно понятна для пользователя и, если немного подумать о том, как вы представляете параметры, пользовательский интерфейс может быть довольно надежным. Ex. сгруппировать ваши флажки в области, которые имеют смысл.

Answer 5

Для нечастых пользователей три раскрывающихся списка могут работать лучше>:

<select><option>Capa Verde</option></select>
<select><option>Holiday</option></select>
<select><option>Competition</option></select>

В качестве альтернативы, у вас может быть набор кнопок, которые можно нажимать при нажатии. Однако тогда будет трудно передать ограничение до трех вариантов.

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

Существуют различные варианты с двумя кучами (доступны и выбраны) и т. Д.

Можете ли вы сделать хотя бы "юзабилити" тестирование юзабилити?

Какова реальная задача с точки зрения пользователей и кто такие пользователи?