Дима (bizarre1112) wrote in ru_ucdesign,
Дима
bizarre1112
ru_ucdesign

Categories:

Проблема выбора значений из очень длинных списков и элемент Select

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

Прокрутка

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

Посмотрели в одном месте. Запомнили или записали на листочек. Прокрутили страницу. Что-то сопоставили. Вернулись назад. Уточнили. И так далее. Проблема в отсутствии целостной картины.

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

Скрытые области

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

Если я хочу скачать драйвер с сайта производителя оборудования и не вижу ссылки «Скачать драйверы», а вижу выпадающее меню с элементами верхнего уровня «Поддержка», «Оборудование» и «Файлы», я засомневаюсь. Придется навести мышку на все три ссылки и посмотреть, что будет на нижних уровнях.

В худшем случае посетитель так и не узнает о том, что вы оказываете необходимую ему услугу.

SelectBox или просто Select

Так уж вышло, что выпадающие списки Select органично сочетают в себе оба описанных выше недостатка. Во-первых, не видно, что внутри. Во-вторых, чтобы выбрать нужную позицию, нередко приходится список прокручивать. Говорят даже, что Select — самый неэффективный GUI control.

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

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

Главная проблема выпадающих списков Select

Не раз видел выпадающие списки колоссальной длины. Посмотрите хотя бы на PHPMyAdmin с прописанными внешними ключами.

Главной проблемой выпадающих списков я считаю сложность работы с длинными списками. Например, в 200 позиций. Конечно, для таких случаев сделан поиск по первой букве. Но вот поиск уже по двум буквам в Internet Explorer 6 не работает. Приходится искать элемент по первому символу, а потом прокручивать с помощью стрелок, поскольку полоса прокрутки дает слишком неточные результаты.

Уже написанные комментарии к первой части

Улучшение множества значений

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

Вот так выглядят списки, формирующиеся стихийно и без правил:
«Кочубей»
ЗАО «Карат»
Калининградские авиалинии
карбонат-д
ОАО «Карборунд»
фонд «КРУЧИНА»

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

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

3. Первый символ должен быть значащим. Это не должны быть кавычки.

4. Малозначащие слова можно отбросить.

Список из «улучшенных» значений:
Калининградские авиалинии
Карат
Карбонат-Д
Карборунд
Кочубей
Кручина

Стало лучше, но если в списке 200 позиций, и названия всех начинаются на букву «к», выбирать всё равно неудобно.

Длинный список можно превратить в несколько коротких

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

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

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

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

Уже написанные комментарии ко второму фрагменту

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

Список групп значений
Зоопарки
Питомники (Клик! Подгружаются элементы второго уровня)
Заповедники
Зверофермы

Список конечных значений
Зоопарки
Питомники
 [ ] Моржовники
 [ ] Мышатники
 [ ] Тигрятники
Заповедники
Зверофермы

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

Список значений с синонимами-дубликатами
Зоопарки
Питомники
 [ ] Моржовники
 [ ] Мышатники
 [ ] Тигрятники
Заповедники
Зверофермы
 Коровьи фермы
 Фермы с дикими животными (Ссылка на группу «Питомники»)

Варианты с укладкой значений списка в структуру подходят для поиска заранее неизвестных значений.

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

Иногда имеет смысл комбинирование поиска по подстроке и «жесткую» реализацию структуры. Опытным пользователям предлагается поиск, возможно с ограничением области, неопытным — хождение по категориям. Вопрос в том, какие средства целесообразно вложить в разработку механизма.

Резюме

1. Выпадающие списки Select плохо подходят для работы с большими множествами. Плюсами являются компактность и возможность поиска значения по первым буквам.

2. Определив взаимоотношения между элементами списка, можно сделать поиск значений по структуре. Проблемы выпадающих списков стоят не так остро, минус — сложность качественной реализации.

3. Можно развивать динамическое формирование списка по наличию подстроки в названиях элементов. Минус — не все пользователи смогут пользоваться таким механизмом.

4. Выбор конкретного решения сильно зависит от специфики задачи.

Уже написанные комментарии к финальной части

Subscribe
  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 3 comments