Многие люди не знают, как выбрать несколько элементов в элементе управления HTML <select>, так что ...?
Я знаю многих людей, которые используют компьютеры каждый день и не знают, как выбрать несколько элементов в поле / списке выбора HTML. Я больше не хочу использовать этот элемент управления на своих страницах:
Please pick 3 options:
<select name = "categories" size = "10" multiple = "yes">
Итак, какие удобные альтернативы вы предлагаете? Возможно, у вас есть 10 флажков ... или, может быть, просто каждый параметр в цветном блоке, который меняет цвет, когда они щелкают, чтобы выбрать его? Это становится еще более запутанным, если я считаю, что мой текущий список из 20 вариантов может в конечном итоге вырасти до 50.
Независимо от того, какой способ я выберу, будет сложно проверить его (с помощью Javascript), чтобы убедиться, что человек выберет хотя бы 1 элемент, а не более 3. Речь идет не о том, чтобы определить, сколько вариантов они выбрали, проблема больше в том, как чтобы донести это до пользователя в удобной форме!
Редактировать: Я полагаю, что мог бы использовать теги, например, прямо здесь, в stackoverflow, но я считаю, что они менее подходят, если пользователи не являются техническими специалистами (а половина из них будет).
Ответы 5
Вы можете просто использовать ручной список элементов (скажем, как простые ссылки), которые имеют поведение Javascript onclick, которое отменяет выбор / выбирает вручную. В основном, изменяя класс css между двумя значениями и проверяя эти css (или какой-либо другой атрибут) во время отправки, чтобы определить выбор.
Это позволит пользователю просто выбрать элемент, щелкнув, и отменить выбор, щелкнув, вместо стандартного требования Ctrl + Click.
Альтернативы, которые я использовал в прошлом:
1) Для небольшого количества элементов используйте список флажков. Флажки гораздо более интуитивно понятны и просты в использовании, но для большого количества элементов это может стать проблемой. Тем не менее, когда количество элементов растет, вы можете добавить:
<div style = "overflow: scroll" />
с фиксированной высотой.
2) Для очень большого количества элементов становится трудно увидеть, что действительно выбрано, особенно когда фактически выбрано несколько элементов. В этом случае два списка рядом с возможностью перемещать элементы из одного в другой - гораздо лучший подход.
3) Когда количество элементов не очень велико, но больше нескольких, я использовал раскрывающийся список с флажками, созданными собственными силами, которые имеют то преимущество, что занимают лишь небольшое пространство. Что-то вроде это может помочь.
Для нечастых пользователей лучше всего подойдут три раскрывающихся списка>:
<select><option>Capa Verde</option></select>
<select><option>Holiday</option></select>
<select><option>Competition</option></select>
В качестве альтернативы у вас может быть ряд кнопок, которые залипают после нажатия. Однако тогда будет сложно передать ограничение до трех вариантов.
Если необходимо пометить каждую фотографию индивидуально, а количество категорий ограничено, вы можете отобразить список категорий (может быть в нескольких столбцах) прямо над фотографией (очевидно, вам нужно убедиться, что элементы читабельны. и указать, что они позволяют щелкать) и позволяют пользователям выбирать и отменять выбор тегов одним щелчком мыши. Он не очень дружелюбен к клавиатуре, однако практически невозможно использовать Интернет без какого-либо указывающего устройства. В этом случае вы должны использовать пространственное позиционирование для соединения категорий и фотографий.
Возможны различные варианты с двумя сваями (доступными и выбранными) и т. д.
Можете ли вы провести хотя бы «коридорное» юзабилити-тестирование?
Какова актуальная задача с точки зрения пользователей и кто такие пользователи?
Вы хотите дать им свободу в создании новых категорий? Как будет поддерживать категории?
В этой ситуации я рад, что новые категории будут создаваться довольно редко, и это будет задача администраторов сайта.
Когда, вероятно, есть 3 раскрывающихся списка, это проще всего реализовать и довольно эффективно, особенно если пользователям нужно отмечать один элемент за раз (например, альбом или одну фотографию).
Я предлагаю использовать два списка: одно с доступными, а другое с выбранными. Щелчок или двойной щелчок по элементу в одном из списков должен переместить элемент в другой список. Для удобства я бы также добавил две кнопки «Переместить», чтобы сделать то же самое. Этот подход на удивление хорошо работает со средними пользователями как в веб-приложениях, так и в настольных приложениях.
Я только что понял, что сам закодировал эту идею для другой страницы в другом месте того же веб-сайта! Я не понимал, что это уместно и в этом сценарии. Глупый с моей стороны!
Да, я сделал это в одном из наших приложений для некоторых иерархических категорий и подкатегорий, где они могли выбрать любую из них - работало очень хорошо.
Я ненавижу множественный выбор, особенно когда элемент можно потом редактировать (если щелкнуть, не удерживая CTRL, вы потеряете то, что уже выбрали). По моему опыту, два лучших варианта:
- Наличие трех отдельных вариантов выбора (если вы ограничиваетесь тремя). Преимущество здесь в том, что инструкции «выбрать до трех» очень хорошо подходят для пользовательского опыта, а с помощью небольшого количества JavaScript вы можете удалить первый выбор из второго раскрывающегося списка, тем самым устраняя путаницу.
- Использование флажков. Преимущество флажков состоит в том, что они, вероятно, лучше соответствуют вашей базе данных, плюс информация довольно интуитивно понятна для пользователя и с небольшим обдумыванием того, как вы представляете параметры, пользовательский опыт может быть довольно надежным. Бывший. сгруппируйте флажки в области, которые имеют смысл.
Пользователи - виндсерферы, которые посещают веб-сайты ежедневно, но, вероятно, не обладают техническими знаниями. Задача состоит в том, чтобы загрузить фотографию и выбрать 1, 2 или 3 категории, для которых она подходит (например, «Великобритания», «за границей», «соревнование», «просто для развлечения», «новое оборудование» ...)