Какой лучший пользовательский интерфейс для многократного выбора из списка?

У нас есть веб-форма, и одно из полей - список с несколькими выборами. Наши варианты:

  1. Список флажков
  2. Listview (выбрать поле, но разрешить многоэкранный выбор)

Оба кажутся немного уродливыми и громоздкими, когда список содержит более 100 элементов.

Есть ли еще какое-нибудь другое решение для интерфейса?

70 голосов | спросил leora 8 FebruaryEurope/MoscowbTue, 08 Feb 2011 22:33:43 +0300000000pmTue, 08 Feb 2011 22:33:43 +030011 2011, 22:33:43

10 ответов


52

Одна из альтернатив, которую я видел в нескольких местах, состоит в том, чтобы иметь два соседние списки, один с доступными элементами и один с выбранными элементами.

Вот пример из OpenFaces.org , который я нашел с быстрым поиском google:

введите описание изображения здесь>> </p></body></html>

ответил Bevan 8 FebruaryEurope/MoscowbTue, 08 Feb 2011 23:43:06 +0300000000pmTue, 08 Feb 2011 23:43:06 +030011 2011, 23:43:06
51

Другим решением является facebook, например, «multi select bar». (Я не знаю, для чего это точное имя.)

Здесь вы можете найти пример здесь . В основном это похоже на текстовое поле ввода, но выбранные элементы превращаются в «теги». Просто попробуйте на странице, с которой я связан.

ответил Raffael Luthiger 18 AM00000020000004231 2011, 02:04:42
7

Зависит от ui и макета пространства, которое у вас есть. Зависит также от количества элементов в вашем списке и среднего количества элементов, которые пользователь должен выбрать. Одним из интересных решений является раскрывающийся список + флажки dropdown checkbox

http: //dropdown-check-list.googlecode. ком /SVN /багажник /док /dropdownchecklist.html

Чем больше элементов присутствует, тем меньше выпадающее меню будет соответствовать (наличие прокрутки в выпадающем меню не так хорошо). И здесь вам нужно выяснить, как организовать /структурировать свой список.

ответил Marc D 9 FebruaryEurope/MoscowbWed, 09 Feb 2011 17:06:21 +0300000000pmWed, 09 Feb 2011 17:06:21 +030011 2011, 17:06:21
6

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

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

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

ответил skybondsor 18 AM00000010000001331 2011, 01:17:13
6

Похоже, я опоздал на это, но у меня была аналогичная проблема в моей компании.

Неизбежно вам нужно было разбить это на два отдельных требования (поиск, выбор), а затем вернуть их обратно в пользовательский интерфейс.

Если поиск прост, то что-то более простое с автозаполнением должно сделать трюк (например, http://quasipartikel.at/multiselect/ получает идею).

ответил seanevanking 18 AM00000020000005531 2011, 02:12:55
5

Флажок - это более простая идиома для понимания.

Вам понадобится кнопка «проверить все» и «не проверять», и если пользователю нужно проверить множество смежных элементов, кнопка «проверить выбранные элементы» (разрешена только при выборе более одного элемента)

ответил Eduardo Molteni 8 FebruaryEurope/MoscowbTue, 08 Feb 2011 23:53:52 +0300000000pmTue, 08 Feb 2011 23:53:52 +030011 2011, 23:53:52
5

В зависимости от количества опций вы можете воспользоваться графическим выпадающим списком, как показано ниже. Нажатие /щелчок переключает выбранный элемент.

Это не очень хорошо работает с очень длинными списками.

введите описание изображения здесь

ответил Phillip Quintero 5 J0000006Europe/Moscow 2015, 23:31:41
3

Я видел это как вариант. Это список флажков, в котором отмеченные элементы перемещаются /перезаписываются. Гибридное решение между ними.

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

После выбора:

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

Выбранные элементы могут быть перемещены вправо (возможно, с использованием фиксированного div, чтобы он оставался видимым, когда один прокручивал список параметров) или он мог мигрировать в начало списка.

ответил DA01 9 FebruaryEurope/MoscowbWed, 09 Feb 2011 06:13:21 +0300000000amWed, 09 Feb 2011 06:13:21 +030011 2011, 06:13:21
2

Если вы идете с вариантом 1 или 2 из своего списка, это действительно связано с тем, хотите ли вы, чтобы выбор был постоянным по любой причине, а также по другим причинам. Ниже я расскажу о некоторых вещах, которые вы, возможно, захотите принять во внимание при выборе того, какую методологию следует придерживаться.

Drag-н-падение

Если вы хотите разрешить переупорядочивание элементов drag-n-drop, использование флажков может упростить пользователю возможность не потерять состояние выбора в процессах. Если вы не разрешаете переупорядочивание drag-n-drop или не заботитесь о том, что во время процессов будет потеряно состояние выбора, если это разрешено, то использование опции multi-selection с помощью клавиши Ctrl может быть опцией.

Долгосрочная стойкость

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

Multi-Selection as Advanced Feature

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

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

ответил jpierson 9 FebruaryEurope/MoscowbWed, 09 Feb 2011 09:17:59 +0300000000amWed, 09 Feb 2011 09:17:59 +030011 2011, 09:17:59
2

Я очень опаздываю на вечеринку. Но я хотел бы предложить собственное решение.

То есть: используя всплывающее окно (aka overlay, modal), чтобы отображать флажки и позволять пользователю выбирать несколько значений.

Всплывающее окно открывается, когда пользователь нажимает ссылку на редактирование в основной форме.

Когда он выполнит выбор значений, он может нажать кнопку DONE, в которой есть событие click, javascript-метод, который собирает проверенные значения и обновляет скрытое поле в основной форме и /или в каком-либо поле отображения (например, текст для чтения область или элемент span или div) в основной форме. И когда пользователь нажимает на основную кнопку отправки, скрытое поле или поле отображения отправляются на сервер для сохранения.

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

Конечно, несколько шагов могут также иметь смысл. Но мое решение для одной формы отправки.

Что вы думаете об этом методе? Используется ли этот шаблон?

Спасибо

ответил Zack Xu 16 AM00000030000003631 2014, 03:13:36

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132