Хватит неправильно использовать выпадающие списки
Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).
Когда использовать
Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.
Если вариантов выбора больше 15, это тоже плохо. Если в выпадающем списке окажется так много вариантов, это затормозит пользователя, которому придётся прокрутить и просмотреть длинный список. Бывает, вариантов так много, что их список занимает весь экран. Если вариантов больше 15, следует либо сократить их количество, либо предоставить пользователю текстовое поле для ввода своих данных. Текстовое поле избавит пользователей от возни с огромным списком и сделает заполнение формы более быстрым и простым.
Как называть
Как у любого другого элемента формы, у выпадающего списка должно быть находящееся рядом название (label). Однако, надпись о том, что пользователь выбирает, должна быть и внутри элемента. Она должна чётко описывать набор вариантов. Пользователям с ограниченными возможностями, использующим при заполнении форм экранных дикторов (screen readers), будет недостаточно универсального «Выберите, пожалуйста». Добавление названия и снаружи, и внутри выпадающего списка позволит любому пользователю делать выбор быстрее и без какой-либо замешки.
Когда подставлять вариант по умолчанию
Постарайтесь не предлагать пользователям вариант по умолчанию. При заполнении формы пользователь может нечаянно пропустить выпадающий список с неподходящим вариантом по умолчанию. Надёжнее будет сообщать о невыбранном варианте, нежели принимать форму с некорректными данными. Подставить вариант по умолчанию можно только в том случае, если вы более чем на 90% уверены, что пользователи будут выбирать именно этот вариант. Тогда это защитит большинство ваших пользователей от возни с выпадающим списком.
Группировка вариантов выбора
Если у вариантов выбора есть иерархия, разделите их на группы, используя тег optgroup. Это позволит быстрее находить нужный вариант, просматривая названия групп, а не общий список вариантов. Названия групп должны быть недоступны для выбора. Они лишь предают списку иерархию и облегчают поиск. Пользователей с ограниченными возможностями группы не запутают, так как экранные дикторы их не зачитывают.
Использование для навигации
В основном выпадающие списки используются в формах, но иногда — и для навигации. На некоторых сайтах выпадающие списки используются для фильтрации или упорядочивания содержимого. Выбрав вариант, пользователь направляется на новую страницу. Для экранных дикторов это сработает, если можно табом перейти к выпадающему списку и с помощью кнопок со стрелками дойти до нужного варианта, не уходя на новую страницу сразу. Выпадающий список должен направлять на новую страницу по нажатию клавиши ввода. Джаваскрипт бывает выключен у отдельных экранных дикторов. Чтобы выпадающие списки служили навигации при выключенном джаваскрипте, рядом следует разместить кнопку подтверждения. Пользователи будут направляться на новую страницу после выбора варианта и нажатия на эту кнопку.
Больше подходят для форм, а не навигации
Хоть вы и встретите выпадающие списки, используемые в навигации, мы рекомендуем использовать их только в формах. Мобильные сайты часто используют их как основную навигацию, чтобы сэкономить место. Однако с этим решением связаны проблемы, касающиеся юзабилити, доступности и поисковой оптимизации.
На первый взгляд, навигация с помощью выпадающего списка выглядит неуместной, так как не сочетается с дизайном сайта. Также она неудобна, потому что нажатие на выпадающий список приводит к появлению вращающегося колеса (spinning wheel), использующегося для выбора из вариантов в мобильных формах. Пользователь должен нажать на выпадающий список, найти и выбрать вариант, нажать кнопку «Готово», а это немало действий. Не говоря уже о том, что кнопки «Предыдущий», «Следующий» и «Автозаполнение» в данной ситуации бесполезны, так как вы не заполняете форму.
Ваш выпадающий список нельзя будет использовать для навигации, если джаваскрипт выключен. Это касается пользователей некоторых экранных дикторов. Доступнее будет меню, которое откроется при перемещении на него табом и позволит тем же самым табом пройтись по другим вариантам. Это возможно только если пункты меню являются настоящими ссылками. По этой же причине выпадающие меню бесполезны с точки зрения поисковой оптимизации. Если вы хотите, чтобы ваша навигация была оптимизирована для поисковиков, не используйте выпадающие списки, а предлагайте пользователям раскрывающиеся меню (dropdown menu).
Хватит неправильно использовать выпадающие списки
В сети множество неправильно использующихся выпадающих списков. Это происходит из-за недопонимания основных принципов их использования. Вооружившись этими знаниями, помогите положить этому конец — убедитесь, что на вашем сайте выпадающие списки работают правильно.
Выпадающий список как называется элемент
Перевод статьи Anna Kaley, NNGroup
Резюме: Списки-листбоксы и выпадающие списки — это компактные элементы интерфейса, которые позволяют выбирать опции из множества вариантов. В списках типа “листбокс” все опции на виду и можно выбрать несколько элементов. В выпадающем списке опции скрыты: нужно кликнуть, чтобы раскрыть список, а выбрать получится только один элемент.
Есть много элементов интерфейса, связанных с выбором: чекбоксы, радио-кнопки, переключатели, шаговые счетчики (степперы), листбоксы и выпадающие списки. В этой статье мы дадим определение листбоксам и выпадающим списками и обсудим, в каких сценариях лучше использовать каждый из этих типов.
В самой упрощенной форме, листбокс состоит из трех частей: контейнер, список элементов и лейбл-название. Пользователь кликает по элементам списка, чтобы выбрать один или несколько из них. В зависимости от количества элементов и размера контейнера, в листбоксе может быть скролл. Иногда в листбоксах используют чекбоксы, чтобы пользователю было понятнее, что можно выбирать несколько элементов. В более сложных листбоксах размер контейнера можно менять, элементы менять местами и перетаскивать из одного контейнера в другой.
Есть 4 типа листбоксов по типу выбора элементов. В каждом типе может быть скролл — если все элементы не помещаются в контейнер.
- Листбокс с единичным выбором: пользователь может выбрать только одну из опций в списке.
- Листбокс с множественным выбором: пользователь может выбрать несколько элементов путем нажатия клавиши Shift, Command или Control. Снять выбор можно аналогично.
- Листбокс с множественным выбором через чекбоксы: выбрать можно несколько элементов, но не путем нажатия какой-либо клавиши, а при помощи встроенных в список чекбоксов. Это делает возможность множественного выбора более очевидной.
- Листбокс с множественным выбором и двумя контейнерами: фактически здесь два листбокса: в левом содержатся все доступные опции, а в правом отображаются выбранные опции. Есть кнопки Добавить и Удалить, при помощи которых элемент можно перенести в правый контейнер или убрать из него. Пользователи также могут менять порядок элементов в списке.
Листбоксы бывают статичными, а бывают со скроллом — если высота контейнера не позволяет отобразить все элементы. Иногда в таких листбоксах можно выбрать один элемент, иногда — несколько.
Двойные листбоксы с множественным выбором позволяют выбирать по нескольку элементов и запросто перемещать их из одного списка в другой. Пользователь может менять порядок элементов внутри списка.
Выпадающие списки
Простейший выпадающий список состоит из четырех ключевых частей: контейнер, кнопка в виде стрелки вниз, список элементов и лейбл-название. Когда пользователь кликает по кнопке-стрелке, появляется список взаимоисключающих элементов. Выбрать можно только один элемент. В выпадающих списках — как и в листбоксах — может быть скролл: это зависит от количества элементов в развернутом виде. В свернутом виде выпадающий список представляет собой одну строку, в которой отображается выбранный элемент (или, если выбор еще не сделан, элемент по умолчанию). Остальные элементы списка видны только в развернутом виде. Если выбрать какой-то элемент или кликнуть где-то за пределами выпавшего списка, он свернется.
В свернутом состоянии выпадающий список — это одна строка, в которой отображается установленный по умолчанию или выбранный пользователем элемент. По клику на стрелку, список раскрывается и появляются элементы, из которых можно выбрать только один. Выпадающие списки бывают статичными, а бывают — скроллируемыми, если элементов больше, чем вмещает в себя контейнер.
Выпадающие списки не поддерживают множественный выбор; пользователь может выбрать только один элемент из статичного списка или из списка со скроллом.
Как использовать листбоксы и выпадающие списки
Благодаря спискам — и листбоксам, и выпадающим — форму можно сделать компактной, особенно когда у вас много элементов и представлять их в формате чекбоксов и радиокнопок нет никакого смысла. Кроме того, списки помогают избежать ошибок: ведь пользователю нужно выбрать из готовых элементов, а не вводить свой вариант ответа на тот или иной вопрос.
Список элементов можно оформить радиокнопками, если этих элементов немного. Для большого количества элементов рекомендуется использовать либо листбокс, либо выпадающий список: все зависит от того, сколько у вас в дизайне места и насколько простым вы хотите сделать выбор того или иного элемента списка. В примере на картинке, и листбокс и выпадающий список занимают меньше экранного пространства, чем список с радиокнопками.
Для множественного выбора также можно использовать и листбоксы, и отдельные чекбоксы. Если элементов немного — чекбоксы будут смотреться хорошо. Но для большего количества элементов лучше выбрать листбокс со скроллом: так вы отобразите все элементы списка, но форма не растянется по вертикали слишком сильно.
Листбоксы и выпадающие списки можно встретить и в приложениях, и на сайтах. Они не предназначены для выполнения команд или запуска диалоговых окон или динамических элементов управления. В интернет-торговле листбоксы часто используют в качестве фильтров, которые размещаются в левой части страницы. А вот выпадающие списки обычно располагаются в верхней части (над выдачей) и помогают отсортировать результаты по тому или иному параметру.
На сайте Sephora.com можно встретить листбоксы с множественным выбором и скроллом (слева). Элементы внутри листбокса оформлены чекбоксами, чтобы пользователям было удобнее настраивать параметры фильтрации. По мере того, как пользователь отмечает те или иные чекбоксы, выдача меняется. На сайте также есть выпадающий список (вверху над выдачей). Элементы этого списка взаимоисключающие и помогают отсортировать выдачу по конкретному параметру.
При оформлении листбоксов и выпадающих списков важно помнить о законе рулевого управления. Этот закон помогает предсказать, сколько времени потребуется пользователю, чтобы пролистать курсором или пальцем список элементов — так называемый “тоннель”. Время пролистывания будет зависеть от длины и ширины тоннеля: преодолеть короткий и широкий тоннель проще, чем узкий и длинный.
Если выпадающий список слишком длинный и узкий, при прокручивании пользователь может случайно сдвинуть курсор в сторону и закрыть список. Тогда выбор придется делать заново.
Преимущества и недостатки листбоксов
Хотя листбоксы не часто встречаются в интерфейсах, у них есть ряд преимуществ — не считая возможности множественного выбора или компактности в отображении. Итак, какие еще есть преимущества у листбоксов:
- Низкаястоимость взаимодействия: Пользователю не нужно никуда кликать, чтобы увидеть все элементы списка (максимум, что потребуется — это проскроллить вниз по листбоксу, если элементов много).
- Хорошая видимость всех элементов: Когда пользователь видит все опции сразу, ему проще сделать выбор, и он с меньшей вероятностью передумает.
- Отображение в несколько колонок: В контейнере листбокса может быть больше одной колонки. Таким образом, листбокс может вмещать больше элементов. Единственное, чего стоит избегать — это горизонтальный скроллинг. Если вы используете несколько колонок, ширины контейнера должно быть достаточно для их отображения.
- Хороший обзор и произвольный порядок: Двойные листбоксы с множественным выбором (как на рис.2) дают пользователю больше контроля над содержимым списка. Он четко видит, какие элементы выбраны, и может менять порядок их отображения.
Есть у листбоксов и свои недостатки:
- Экранное пространство: Каким бы компактным ни был листбокс, он все равно занимает больше места на странице, чем тот же выпадающий список.
- Непривычность: Пользователю может потребоваться некоторое время, чтобы научиться взаимодействовать с листбоксом: особенно если листбокс поддерживает множественный выбор, но без чекбоксов. Не каждый пользователь догадается зажать Control, Command или Shift, чтобы проверить, нет ли возможности множественного выбора? Поэтому лучше все же использовать чекбоксы — если, конечно, они не слишком перегружают интерфейс.
- Не все выбранные элементы могут быть видны пользователю: Если листбокс длинный, то по мере прокрутки списка некоторые выбранные элементы могут скрыться из поля зрения пользователя. Поэтому лучше показывать выбранные элементы над контейнером листбокса, в виде токенов. А если листбокс без скролла — достаточно просто подсветить все выбранные элементы.
- Возможность предложить пользователю оптимальную опцию, установив ее по умолчанию.
- Завуалировать возможность выбора другой опции: Поскольку элементы выпадающего списка по умолчанию скрыты, пользователь может и не заметить возможности что-то изменить. Иногда это нам на руку: например, когда опция по умолчанию подходит большинству пользователей или если возможность выбора может смутить неопытного пользователя.
- Привычность: Большинство пользователей сталкивались с выпадающими списками и знают, как ими пользоваться: этот элемент часто встречается в приложениях и на страницах сайтов.
Ключевой недостаток выпадающих списков — тот самый лишний клик, который пользователь должен сделать, чтобы развернуть список. А вот еще несколько несколько минусов выпадающих списков:
- Их часто перегружают элементами — ведь лишние опции не маячат перед глазами. В результате, список становится гигантским, и чтобы найти нужный вариант приходится долго скроллить.
- Они замедляют пользователя когда речь идет о вводе хорошо знакомых значений. Например, если нужно ввести день рождения или дату истечения карты, проще набить привычные цифры на клавиатуре, чем выбирать из списка.
- Они незаметны: При заполнении формы пользователь может просто пропустить компактный и лаконичный выпадающий список.
- Они легко сворачиваются: Стот только случайно переместить курсор и щелкнуть мимо списка — и он сворачивается. Приходится снова кликать по стрелке и искать нужный элемент заново.
Что касается выбора между типами списка, сориентироваться поможет таблица:
Выбирайте выпадающий список
Любой тип подойдет
Когда стоит выбрать другой элемент управления
Список элементов состоит из объектов (существительных) или атрибутов (прилагательных)
Для выбора команд (глаголов) лучше подойдут кнопки.
Вариантов выбора немного (5 или меньше)
Лучше используйте радиокнопки (для единичного выбора) или чекбоксы (для множественного).
Вариантов выбора от 5 до 15
Если экранное пространство ограничено, выбирайте выпадающий список, если нет — листбокс.
Вариантов выбора больше 15
Постарайтесь, чтобы все опции помещались в поле зрения. Не используйте листбокс, если понимаете, что пользователю усиленно придется скроллить.
Если экранное пространство ограничено, а пользователи скорее всего хорошо знают значения, которые нужно ввести — используйте текстовое поле.
Пользователи могут выбрать только один вариант из списка взаимоисключающих элементов.
Лучше выбрать выпадающий список, если:
— экранное пространство ограничено;
— есть оптимальное значение по умолчанию;
— не нужно обращать внимание пользователя на возможность выбора;
Если экранное пространство не ограничено, а выбор пользователя важен — используйте листбокс.
Если опций немного, используйте радиокнопки.
Пользователи могут выбрать один или несколько вариантов из списка элементов.
Используйте листбокс множественным выбором и чекбоксами (чтобы подчеркнуть возможность выбрать несколько опций).
Если опций немного, используйте отдельные чекбоксы.
Нужно обратить внимание на выбранный элемент: это важнее, чем показать все доступные элементы списка.
Возможность легко просмотреть все опции (выбранные или нет) помогает быстрее решить задачу.
Не существует четкого или наилучшего варианта по умолчанию.
Порядок отображения элементов в списке — важный фактор при принятии решения.
Используйте двойной листбокс с множественным выбором, чтобы дать возможность как выбирать, так и переставлять элементы списка.
Если вы используете листбоксы или выпадающие списки в дизайне, продумайте логику отображения элементов списка. Возможно, целесообразно сгруппировать похожие элементы, или расположить самые популярные элементы в начале, или расставить элементы по алфавиту. Цифры и даты всегда следует располагать по порядку. А с выбором конкретного типа списка поможет определиться эта статья.
Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS
Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как создать выпадающий список:
- Выпадающий список создается с помощью тега <select>;
- Внутри тега <select> определяются варианты для выбора с помощью тега <option>;
- В теге <option> можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.
Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.
В следующем разделе я покажу примеры как использовать выпадающий список HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили <select> с помощью CSS / CSS3 и фреймворка Bootstrap .
Как создать раскрывающийся список HTML — пример
В этом примере HTML select option используется для того чтобы создать выпадающий список HTML с тремя вариантами на выбор:
Посмотреть онлайн демо-версию и код
В приведенном выше примере для создания выпадающего списка используется следующая разметка:
Использование атрибута value
Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value :
Посмотреть онлайн демо-версию и код
Для тега <select> используется следующий код:
Пример получения доступа к выбранному варианту в JavaScript
Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Посмотреть онлайн демо-версию и код
Для option value HTML используется следующий код:
Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта <select>:
При нажатии кнопки вызывается функция JS , которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.
Получение доступа к видимому тексту в JQuery
На этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге <select> значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега <select> следующий:
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :
Также можно получить доступ к значению с помощью JQuery-метода $.val() :
Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.
Пример получения значения в скрипте PHP
В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега <select> в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “ Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:
Посмотреть онлайн демо-версию и код
Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:
А вот как PHP-скрипт используется, чтобы получить значение HTML select option :
Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .
Определение стилей выпадающего списка с помощью CSS
Теперь рассмотрим, как определить стили выпадающего списка <select>, используя возможности CSS . В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3 :
Посмотреть онлайн демо-версию и код
Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:
Закругленные углы с помощью свойства border-radius
Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:
Посмотреть онлайн демо-версию и код
Использование нескольких атрибутов и стилей CSS
Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :
Посмотреть онлайн демо-версию и код
Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков
Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .
Один из таких плагинов — Bootstrap-Select . Он добавляет для выпадающего списка полезные функции. Например, можно выполнить поиск значения, вводя текст в поле. Это особенно полезно, если в выпадающем списке много вариантов.
Кроме этого все выбранные варианты помечаются галочками, и можно установить лимит на количество выбранных вариантов, используя атрибут multiple .
В приведенной демо-версии пользователь может выбрать два варианта из списка:
Посмотреть онлайн демо-версию и код
Демо-версия выпадающего списка с опцией поиска
Используя тот же плагин, можно предоставить пользователям возможность искать нужные варианты в списке HTML select option :
Посмотреть онлайн демо-версию и код
Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!
Вадим Дворников автор-переводчик статьи « HTML select dropdown: Learn to Create and style with CSS »