Хватит неправильно использовать выпадающие списки
Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).
Когда использовать
Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.
Если вариантов выбора больше 15, это тоже плохо. Если в выпадающем списке окажется так много вариантов, это затормозит пользователя, которому придётся прокрутить и просмотреть длинный список. Бывает, вариантов так много, что их список занимает весь экран. Если вариантов больше 15, следует либо сократить их количество, либо предоставить пользователю текстовое поле для ввода своих данных. Текстовое поле избавит пользователей от возни с огромным списком и сделает заполнение формы более быстрым и простым.
Как называть
Как у любого другого элемента формы, у выпадающего списка должно быть находящееся рядом название (label). Однако, надпись о том, что пользователь выбирает, должна быть и внутри элемента. Она должна чётко описывать набор вариантов. Пользователям с ограниченными возможностями, использующим при заполнении форм экранных дикторов (screen readers), будет недостаточно универсального «Выберите, пожалуйста». Добавление названия и снаружи, и внутри выпадающего списка позволит любому пользователю делать выбор быстрее и без какой-либо замешки.
Когда подставлять вариант по умолчанию
Постарайтесь не предлагать пользователям вариант по умолчанию. При заполнении формы пользователь может нечаянно пропустить выпадающий список с неподходящим вариантом по умолчанию. Надёжнее будет сообщать о невыбранном варианте, нежели принимать форму с некорректными данными. Подставить вариант по умолчанию можно только в том случае, если вы более чем на 90% уверены, что пользователи будут выбирать именно этот вариант. Тогда это защитит большинство ваших пользователей от возни с выпадающим списком.
Группировка вариантов выбора
Если у вариантов выбора есть иерархия, разделите их на группы, используя тег optgroup. Это позволит быстрее находить нужный вариант, просматривая названия групп, а не общий список вариантов. Названия групп должны быть недоступны для выбора. Они лишь предают списку иерархию и облегчают поиск. Пользователей с ограниченными возможностями группы не запутают, так как экранные дикторы их не зачитывают.
Использование для навигации
В основном выпадающие списки используются в формах, но иногда — и для навигации. На некоторых сайтах выпадающие списки используются для фильтрации или упорядочивания содержимого. Выбрав вариант, пользователь направляется на новую страницу. Для экранных дикторов это сработает, если можно табом перейти к выпадающему списку и с помощью кнопок со стрелками дойти до нужного варианта, не уходя на новую страницу сразу. Выпадающий список должен направлять на новую страницу по нажатию клавиши ввода. Джаваскрипт бывает выключен у отдельных экранных дикторов. Чтобы выпадающие списки служили навигации при выключенном джаваскрипте, рядом следует разместить кнопку подтверждения. Пользователи будут направляться на новую страницу после выбора варианта и нажатия на эту кнопку.
Больше подходят для форм, а не навигации
Хоть вы и встретите выпадающие списки, используемые в навигации, мы рекомендуем использовать их только в формах. Мобильные сайты часто используют их как основную навигацию, чтобы сэкономить место. Однако с этим решением связаны проблемы, касающиеся юзабилити, доступности и поисковой оптимизации.
На первый взгляд, навигация с помощью выпадающего списка выглядит неуместной, так как не сочетается с дизайном сайта. Также она неудобна, потому что нажатие на выпадающий список приводит к появлению вращающегося колеса (spinning wheel), использующегося для выбора из вариантов в мобильных формах. Пользователь должен нажать на выпадающий список, найти и выбрать вариант, нажать кнопку «Готово», а это немало действий. Не говоря уже о том, что кнопки «Предыдущий», «Следующий» и «Автозаполнение» в данной ситуации бесполезны, так как вы не заполняете форму.
Ваш выпадающий список нельзя будет использовать для навигации, если джаваскрипт выключен. Это касается пользователей некоторых экранных дикторов. Доступнее будет меню, которое откроется при перемещении на него табом и позволит тем же самым табом пройтись по другим вариантам. Это возможно только если пункты меню являются настоящими ссылками. По этой же причине выпадающие меню бесполезны с точки зрения поисковой оптимизации. Если вы хотите, чтобы ваша навигация была оптимизирована для поисковиков, не используйте выпадающие списки, а предлагайте пользователям раскрывающиеся меню (dropdown menu).
Хватит неправильно использовать выпадающие списки
В сети множество неправильно использующихся выпадающих списков. Это происходит из-за недопонимания основных принципов их использования. Вооружившись этими знаниями, помогите положить этому конец — убедитесь, что на вашем сайте выпадающие списки работают правильно.
Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В рамках изучения премудростей языка гипертекстовой разметки в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих тегов и их атрибутов.
Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки, в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend.
Напомню, что любая форма, присутствующая на странице, создается при помощи основного тега form (который часто содержит элемент input) и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — форма обратной связи для сайта WP).
К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.
Вступление
При практическом использовании полученной в этой публикации информации не забудьте о том, как должна выглядеть структура любого HTML документа, где коды всех видимых элементов страницы, включая формы, всегда находятся в пределах тега body.
Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в популярные браузеры инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был плагин Firebug для Мазилы), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.
И еще. Поскольку HTML5 позволяет реализовывать многие современные задачи и, более того, в недалеком будущем будет приоритетным, в процессе повествования (не только в этой, но и в иных публикациях на данную тему) я обязательно буду акцентировать ваше внимание на те теги и атрибуты, которые появились именно в пятой модификации.
Выпадающие списки с помощью select, option и optgroup
Рассмотрим создание раскрывающихся списков как одного из вариантов веб-формы на сайте. Все его отдельные элементы формируются при помощи тегов option, которые вложены в контейнер, определяемый тэгом select. Для вариативности есть еще и optgroup, который дает возможность упорядочить список. Все эти варианты мы и разберем ниже.
В целях удобства для каждого набора тегов и атрибутов сформирована табличка, где слева дан HTML код, а справа — внешний вид конкретного варианта выпадающего списка, который будет отображаться на веб-странице сайта в браузере пользователя.
Атрибуты тега select
1. Name — в качестве значения (параметра) этого атрибута нужно добавить название списка (в приведенном примере это «list1») для его идентификации при обработке на сервере:
Ну и весь выпадающий список является одним из вариантов формы, а потому описывается тегом form, к которому добавляются необходимые атрибуты (action, method, name), обеспечивающие его корректное функционирование. С целью визуального показа кнопки для отправки данных на сервер здесь использован тег input с атрибутами «type=»submit»» и «value=»Отправить»». К слову, кнопочку можно оформить и посредством тега button.
2. Multiple — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):
3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки, а, например, при size=»5″ будут видны уже пять:
4. Required [HTML5] (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:
5. Autofocus [HTML5] (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:
6. Disabled (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:
7. Form [HTML5] — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера <form></form>. При этом в роли значения атрибута form прописывается параметр глобального атрибута id, который добавлен к тегу form:
Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут , а к select — form=»data», что и позволило связать выпадающий список с конкретной формой.
Атрибуты тега option
1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:
2. Disabled — блокирует для выбора элемент выпадающего списка.
Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.
3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между <option> и </option> вовсе отсутствует.
Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label=»Тег Option», в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label=»Textarea».
4. Selected — выделяет текущий пункт выпадающего списка:
Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:
Атрибуты тега optgroup
Если выпадающий список необходимо как-то упорядочить, например, разделить по группам, то для каждой из этих групп используют контейнер, состоящий из открывающего и закрывающего тегов optgroup, внутри которого содержится часть пунктов выпадающего списка. При этом существуют два атрибута для настройки подобного раскрывающегося списка.
1. Label — устанавливает название каждой группы в качестве параметра:
То же самое, но с multiple и size=»7″ тега select:
2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:
Небольшой видеоролик будет здесь как нельзя кстати:
Текстовое поле в форме посредством textarea
Еще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:
Введите текст:
В поле можно осуществлять переносы строк, при этом текст будет передаваться обработчику на сервер с учетом сделанных переносов. Поле можно растягивать по ширине и длине, захватив мышкой нижний правый угол, который отмечен двумя диагональными полосками.
Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:
1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.
2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20.
3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.
4. Maxlength [HTML5] — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.
Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):
Введите текст:
5. Minlength [HTML5] — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.
6. Placeholder [HTML5] — с помощью этого атрибута можно поместить текст в поле, являющийся параметром данного атрибута, который исчезнет, когда пользователь начнет вводить символы:
7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:
Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:
8. Autoсomplete [HTML5] — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.
Имеет всего два параметра: on (включен) и off (выключен). Вот пример кода:
Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.
9. Wrap [HTML5] — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:
Soft — набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки. В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.
Введите текст:
Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols:
Введите текст:
Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:
Введите текст:
Далее вкратце упомяну еще несколько атрибутов, их действия абсолютно тождественны воздействию одноименных аналогов для других тегов, которые мы уже разбирали в этой статье.
10. Autofocus [HTML5] (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.
11. Disabled — в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:
12. Form [HTML5] — связывает текстовое поле с формой в тех случаях, когда по тем или иным причинам оно расположено вне <form></form>. Как и в случае с тегом select, связь осуществляется посредством глобального атрибута id для form. При этом параметры id и атрибута form тождественны:
Введите текст:
13. Required — определяет, что поле обязательно для заполнения. Если в текстовой области не будет содержимого, при попытке отправки формы на сервер веб-браузер выведет сообщение о необходимости ее заполнения, а форма отправлена не будет. Содержание сообщения зависит от браузера и не может быть изменено.
Еще один видеоролик по созданию текстового поля:
Особенности тега label
По умолчанию элемент формы при щелчке по его текстовой составляющей не активируется. Возьмем сначала в качестве примера список (реализуемый с помощью атрибута type=»checkbox» тега input), нужные строки которого пользователь должен отметить, заполнив соответствующие чекбокс(-ы) галочками. Чтобы поставить галочку, необходимо щелкнуть по флажку мышкой, но клик по расположенному рядом тексту будет безрезультатным. Можете попробовать ниже:
Именно тег label позволяет реализовать активацию какого-либо элемента при клике по его названию. Есть 2 способа, с помощью которых можно связать элемент формы HTML и текст.
1 способ. Необходимо применить идентификатор id внутри элемента формы и указать его имя в качестве значения атрибута for тега label:
2 способ. Элемент формы поместить внутрь контейнера, созданного тегом label:
Теперь можете кликнуть не только по самой форме, но и по тексту, расположенному рядом. Итог будет идентичным. Другим примером может служить форма для ввода текста (создаваемая с помощью атрибута type=»text» того же input), где активация (помещение курсора в текстовое поле) будет происходить и после щелчка по надписи «Введите текст»:
Итак, с помощью тега label можно успешно реализовать связывание элементов форм и текста.
Fieldset и legend — группировка элементов формы
Наверное, вы заметили, что на многих веб-сайтах HTML формы бывают разделены на группы. Это можно реализовать посредством fieldset, который является контейнером, где расположены все элементы данной части формы. При этом очень часто в состав содержимого этого тега входит один или несколько тэгов legend, с помощью которых прописываются названия групп.
Давайте в качестве начального примера сформируем одну подгруппу с привлечением атрибута type тега input для создания чекбоксов и в пределах <legend></legend> впишем ее название. Ниже в таблице слева находится HTML код для этой формы, а справа — результат его работы:
Обратите внимание, что при использовании fieldset все пространство области его действия по умолчанию для наглядности выделяется специальной рамкой. Выглядит неплохо. Естественно, за счет CSS свойств вид этой рамки можно изменить, а то и вовсе ее убрать. Для тега fieldset существуют три атрибута, влияние которых мы сейчас незамедлительно и разберем:
1. Name [HTML5] — служит для наименования совокупности элементов, объединенных в контейнере <fieldset></fieldset>. Название (как параметр этого атрибута) применяется в дальнейшем с целью идентификации конкретной группы при обработке формы, в том числе в скриптах, включая JavaScript.
Чтобы наглядно продемонстрировать действие name, заключим данную группу в тег form для корректной работы и добавим кнопку с помощью тега button, прописав к нему параметр HTML события onclick=»form.group1.style.backgroundColor=’#e1dccd'», в котором и присутствует значение этого атрибута. Данное событие позволяет пользователю с помощью созданной кнопочки изменить цвет фона в пределах области формы, заданной тегом fieldset:
2. Disabled [HTML5] — (нет значений) подобно одноименным атрибутам для уже рассмотренных тэгов деактивирует группу элементов (вас ждет неудача при попытке заполнить чекбоксы ниже):
3. Form [HTML5] — связывает вебформу, расположенную отдельно, с конкретной группой. Идентификация реализуется путем установки одинаковых значений form и универсального атрибута id (в нашем примере это и form=»data»):
Ну а дальше приведу пример кода многообразной формы, куда включены чекбоксы, текстовое поле и радиокнопки:
В веб-браузере такая веб-форма будет выглядеть следующим образом:
Какую CMS вы используете?
Владельцем какого ресурса вы являетесь?
Таким образом, мы рассмотрели те возможности, которые предоставляет использование наиболее распространенных тегов для форм, позволяющих также расширить их функциональность.
Надеюсь, содержание статьи окажется для вас полезным. Публикации на эту тему продолжатся, а потому оформляйте подписку незамедлительно для получения свежих материалов, которые дадут вам необходимые знания, позволяющие быстро и четко редактировать страницы ресурса. В заключение посмотрите еще одно видео по теме:
Элементы управления выбором в пользовательском интерфейсе
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в нашем Telegram-канале. Подпишитесь, мне будет очень приятно.
Элементы управления выбором уже давно присутствуют в пользовательских интерфейсах, поэтому у пользователей выработались определённые и весьма серьезные ожидания от них. Вот простая шпаргалка, которой вы можете руководствоваться при выборе элемента управления:
Тумблеры применяются при описании двух взаимоисключающих вариантов и всегда имеют значение по умолчанию. Тумблеры переключаются мгновенно.
Чекбоксы (они же флажки) применяются при обозначении независимых друг от друга вариантов. Пользователи могут выбрать любое количество — один, несколько или ни одного.
Радио-кнопки применяются в описании двух или более взаимоисключающих вариантов, то есть таких, из которых пользователи должны выбрать единственный.
Фишки (Choice chips) — это компактная альтернатива радио-кнопкам. Они предоставляют по меньшей мере два варианта, из которых пользователю нужно выбрать один.
Фишки множественного выбора (Multi-select chips) — компактная альтернатива чекбоксам. Они позволяют пользователям выбирать несколько вариантов одновременно и в основном применяются на мобильных устройствах для переключений фильтров.
Включите как сами кнопки, так и подписи к ним в одну большую область действия. Согласно закона Фиттса, размер мишени играет важную роль. Чекбоксы и радио-кнопки, как правило, мелкие, поэтому на них сложно кликнуть или нажать пальцем, особенно на мобильных устройствах.
Пусть выбранные варианты визуально отличаются от остальных в списке, особенно при выделении строк в таблицах с данными.
У пользователей не должно возникать сложностей ни с выбором нескольких вариантов за один раз, ни с очисткой выбранного одним нажатием:
Чекбоксы и радиокнопки можно выбрать или не выбрать, а тумблеры должны находиться в положении “выключено” или “включено”. Все эти элементы бывают в следующих состояниях: доступны, недоступны, с наведенным курсором, с наведённым фокусом или нажаты. Да, понимаю, звучит жутко, но для надежности лучше учесть все возможные комбинации.
Речь о таком состоянии чекбокса, когда он одновременно не установлен и не снят. В таком состоянии нет полной определенности — отсюда и название. Неопределенные состояния нужны в ситуациях, когда родительский чекбокс имеет несколько дочерних элементов, некоторые из которых выбраны, а другие — нет.
Тумблер — это цифровой выключатель. Любой эффект, вызванный тумблером, должен немедленно вступить в действие. Иначе лучше заменить тумблер одиночным чекбоксом.
Не нужно создавать иерархию тумблеров. Такие иерархии отвлекают внимание и могут создать ложное впечатление, что все дочерние опции включены или выключены:
Когда элементы управления и подписи расположены близко друг к другу, то лучше всего выравнивать их по левому краю — так пользователь быстрее нажмет на кнопку и не промахнется. На мобильных устройствах выравнивание по правому краю имеет некоторые преимущества, так как подписи и кнопки всегда находятся близко друг к другу. Когда пользователь держит устройство в одной руке, ему удобнее, чтобы кнопка находилась справа: легко дотянуться и палец не закрывает текст.
Когда количество вариантов больше 6–7, их стоит разместить в выпадающем списке, так как пользователь в любом случае не удержит в уме их все. То же самое относится к предсказуемым, построенным по аналогии или инкрементным опциям, таким как масштабирование — 10%, 20%, 30% и так далее.
Полное руководство по дизайну выпадающих списков
Кажется, всем нравятся простые и эффективные формы, опросы и настройки. Но они, в конце концов, лишь инструмент для достижения какой-то цели. Большинство людей пользуются ими не ради удовольствия (ну, может быть, кроме UX-специалистов), поэтому обычно задача состоит в том, чтобы сделать процесс использования этих элементов как можно менее болезненным.
Выпадающие списки выделяются на фоне всех UI-элементов, которые облегчают жизнь пользователя. Почему? Они автоматизируют процесс: пользователи выбирают ответ из раскрывающегося списка и вуаля — нужное поле заполнено!
При этом, как и со многим в жизни, выпадающие списки нужно использовать умеренно и согласно ситуации. Для создания веб-форм или опросов нужно знать, как обеспечить наилучшее юзабилити. Не беспокойтесь — мы сейчас всё обсудим.
- Элемент выпадающего списка — что это такое?
- Выпадающие списки в сравнении с другими UI-элементами
- Когда использовать многовариантные выпадающие списки
- Дизайн выпадающих списков для сайтов
- 5 вдохновляющих дизайнов выпадающих списков
- Выпадающие списки в мобильных приложениях
Элемент выпадающего списка — что это такое?
Что же из себя представляют выпадающие списки ? Чтобы ответить на этот вопрос, важно обозначить различие между выпадающим списком и выпадающим меню.
Выпадающее меню помогает в навигации по сайту или приложению. Оно предоставляет пользователю функции навигации при ховере на элемент меню. Замечательные примеры выпадающих меню можно найти в статье ‘Inspirational dropdown menu examples: web and mobile’.
Выпадающий список, в свою очередь, помогает пользователям установить настройки или заполнить данные, выбрав из нескольких вариантов в списке, который можно развернуть и свернуть. Обычно список выглядят как поле с плейсхолдером и стрелкой, указывающей вниз — но бывают и другие варианты.
Скорее всего вы уже пользовались выпадающими списками — например, при установке настроек или при оформлении заказа в интернет-магазине. Или даже для чего-нибудь более сложного — вроде выбора диапазона цены в форме заявки на чью-то консультацию.
Выпадающие списки в интерфейсах нацелены на упрощение жизни пользователей. Но если их использовать неправильно, эффект может быть совершенно противоположный.
Выпадающие списки облегчают жизнь (иногда)
Выпадающие списки, если использовать их правильно, имеют много преимуществ. Наиболее очевидное: они помогают сэкономить экранное пространство в интерфейсе, сгруппировав аналогичные параметры или текстовые варианты ответа в одно сворачивающееся поле. Ещё они отлично помогают фильтровать данные в таблицах и списках.
Дополнительное преимущество в том, что выпадающие списки упрощают работу пользователя: ему не нужно обдумывать или печатать ответ. Кроме того, на бекенде не нужно тратить время на проверку данных при заполнении форм, т.к. пользователи просто выбирают из списка заранее готовых ответов.
Или представим себе сайт стоматологии Sweet Tooth. У них есть доступные слоты записи на приём к врачу. На сайте пользователь выбирает из списка доступных слотов в выпадающем списке вместо того, чтобы вводить желаемое время для посещения (после чего он мог бы получить сообщение об ошибке, потому что выбранное время уже занято).
Тем не менее, выпадающие списки подходят не для любой ситуации Их часто используют сверх меры, вне зависимости от индустрии, даже в приложениях и на сайтах, где у создателей за плечами многолетний опыт. Поэтому главное в использовании выпадающих списков — знать, когда они к месту, а когда лучше выбрать другие UI-элементы.
Выпадающие списки в сравнении с другими UI-элементами
Покажем вам другие варианты, чтобы вы не перебарщивали с выпадающими списками. Не волнуйтесь — и самые известные бренды, бывает, применяют их не к месту.
Это ни в коем случае не ошибка новичка, поскольку во всех смыслах уместное использование выпадающих списков можно назвать искусством.
Переключатели (toggle switches)
Переключатели — отличная замена выпадающим спискам, ведь они могут отображать два параметра одновременно. Представьте, что пользователю нужно выбрать между светлой и тёмной темой. Выпадающий список здесь не сработает, лучше использовать переключатель.
Ещё можно учесть, что для светлой/ тёмной темы UI-элемент будет буквально похож на выключатель света и, следовательно, будет более интуитивно понятным.
Селекторы (radio buttons)
Теперь предположим, что пользователь указывает пол — «мужской», «женский» или выбирает «предпочитаю не указывать». Можно для этого использовать выпадающий список? Да. Это лучший вариант? Да, если мало свободного места.
Но если место позволяет, селекторы подойдут лучше, потому что при выборе одного остальные варианты становятся автоматически недоступными. Пользователь не может указать, что он женского пола и одновременно с этим выбрать вариант «предпочитаю не указывать» — это странно.
Чекбоксы
Если пользователю нужно указать несколько возможных вариантов: например, если он женат/ холост, с детьми, живёт с родителями/один, то чекбоксы подойдут лучше всего.
При наличии свободного места — идеально, когда пользователь сразу видит все доступные варианты.
Выбор даты и времени
Перейдём к распространённой проблеме, которая есть у многих компаний, — формат выбора времени и даты. Скажем сразу — в большинстве случаев календарь будет удобнее, чем список, чтобы не скроллить месяцы и дни.
Оптимальным решением может стать выпадающий список для выбора года и календарь для месяца и дня.
Тем не менее, когда дело доходит до чего-то вроде даты рождения, пользователям, как правило, привычнее набрать дату вручную. В этом случае лучше будет позволить пользователю самому ввести и день, и месяц и год.
У нас есть серия интересных статей про UX форм и HTML. В третьей части как раз говорится о том, как выбор своего года рождения в выпадающем списке вызывает ощущение, что ты старый.
Дайте пользователю возможность вводить текст всякий раз, когда спрашиваете у него что-то лёгкое для запоминания — например, дату рождения или номер телефона.
Поля поиска
В других случаях хорошим вариантом может быть поле поиска — если пользователь ищет нечто относительно простое. Вводить данные куда проще, чем кликать на выпадающий элемент и прокручивать длинный список, читая все варианты, чтобы найти нужный.
Тем не менее, если требуется проверка данных, лучше использовать выпадающий список. Так вы обеспечите целостность информации, которую вводит пользователь.
СОВЕТ: для получения бонусных UX-очков попробуйте создать поле с предиктивным поиском.
Степперы
Степпер — прекрасный вариант на тот случай, когда пользователю требуется просто установить процент масштабирования страницы, яркость экрана или ввести количество заказанных товаров. Поля выпадающего списка в этих сценариях могут быть излишне широкими и занимать больше места на экране.
В случаях, упомянутых выше, степперы также могут быть более интуитивно понятными — кнопки «плюс» и «минус» указывают на увеличение или уменьшение значения.
Когда использовать многовариантный выпадающий список
Например, если от пользователя требуется выбрать несколько ответов на вопрос, но UI ограничен в пространстве. С такой проблемой можно столкнуться при дизайне опроса или анкеты — для них оптимальным решением будет многовариантный выпадающий список.
Или, когда пользователю предоставляется выбор, какие элементы он хочет видеть на странице — например, в редакторе WordPress. Другой пример: ПО или веб-приложение ERP для управления бизнесом: там от пользователя требуется выбрать то, что всегда будет видно на его панели управления, но нет места, чтобы разместить несколько чекбоксов — поэтому используется многовариантный выпадающий список..
Выпадающие списки на сайтах
Выпадающие списки имеют свои плюсы и минусы, а также своё место в дизайне веб-интерфейса. Давайте посмотрим, как наилучшим образом использовать этот практичный элемент дизайна, чтобы обеспечить наилучший пользовательский опыт.
При разработке выпадающих списков для сайтов или веб-приложений есть несколько моментов, которые нужно тщательно обдумать заранее. Представьте, что вы не уверены: использовать выпадающий список или какой-то другой из вышеперечисленных элементов.
Ответ прост. Сколько места нужно сэкономить? Приведёт ли это к повышению стоимости взаимодействия? Ведь самое главное — это пользовательский опыт. Использовать больше пространства = улучшить юзабилити? Тогда один из вышеупомянутых альтернативных элементов подойдёт лучше.
Сколько вариантов включать в выпадающий список?
Если результаты пользовательского тестирования покажут, что юзабилити не поломается, выпадающий список может сэкономить место. Общее эмпирическое правило, которому нужно следовать: если вариантов выбора больше пяти, то выпадающий список подойдёт лучше всего. Благодаря тому, что список свёрнут в одно поле, он будет меньше пугать пользователей. Больше десяти — и список может получиться слишком длинным.
Длинные выпадающие списки лучше избегать любой ценой — пользователи не увидят все варианты сразу. Это может лишить вас очков в мире UX, заставив пользователя потратить больше усилий в поиске нужного варианта.
Длинные выпадающие списки также вынуждают пользователя усерднее контролировать движения мыши, чтобы случайно не свернуть список. Вы же не хотите, чтобы у вашего пользователя заболело запястье?
Недоступные параметры и сообщения об ошибках
Что мы делаем с недоступными вариантами? NNG в своём руководстве по выпадающим спискам предлагают не удалять недоступные пункты, а обозначать их серым цветом. Это лучше, чем удалять их. Если недоступные варианты останутся на виду, вы сохраните контекст для пользователя и поможете ему лучше разобраться в интерфейсе.
Ещё лучше, если после достаточно долгого ховера на сером пункте пользователь увидит короткое всплывающее сообщение, которое объяснит, почему этот пункт недоступен и что можно сделать (если можно, конечно), чтобы он стал активным
Когда лучше позволить пользователю вводить данные самому?
Когда дело доходит до поисковых запросов, NNG считает, что лучше разрешить пользователю вводить запрос самому, а не выбирать из выпадающего списка. Особенно если речь о потенциально длинных списках: например, штатах, областях или странах. Они могут потребовать дополнительной валидации от бэкенда, но, если это обеспечивает лучшее юзабилити, оно того стоит.
5 примеров дизайна выпадающих списков для вдохновения
- House of Fraser
Всемирно известный интернет-магазин House of Fraser — отличный пример того, как ecommerce может использовать выпадающие списки для максимального удобства пользователя.
Здесь они используются в нужном месте — при выборе размера обуви и одежды, а степперы помогают указать количество. Выпадающий список отлично подходит для выбора размера обуви: перечисление различных доступных размеров займёт много экранного места, будет выглядеть беспорядочно и мешать пользователю быстро считывать информацию.
Приложение Leadformly создаёт формы с высокими показателями успешного заполнения для веб-сайтов и приложений. Не удивительно, что мы обратили особое внимание на форму заказа на их сайте.
UX passion — ещё один пример сайта, который правильно использует выпадающие списки.
Чтобы автоматизировать ответы на вопросы и не вынуждать пользователей вводить данные без необходимости, UX Passion предлагают два выпадающих списка: предполагаемый бюджет пользователя и желаемая дата начала работ.
Пользователь не может ввести невозможную дату начала работы (например, «через пять минут»), а выбирает из списка доступных дат. Что касается бюджета, пользователям на выбор даются предопределённые показатели, что упрощает категоризацию и сортировку данных после того, как пользователь предоставит всю информацию.
BrokerNotes — сайт, который помогает трейдерам и инвесторам легко найти авторитетного брокера. Но что больше всего нас интересует, так это их контактная форма — в частности, как они сделали выпадающий список.
В данном случае он оптимизирован для брокеров, которые хотят получать заказы на сайте и задать вопросы создателям BrokerNotes.
Их форма подписки на новостную рассылку содержит два выпадающих списка: один для выбора вашей должности, другой — для места работы. Это позволяет адаптировать контент под получателя и может пригодиться для анализа аудитории.
Выпадающие списки в мобильных приложениях
При разработке мобильного приложения выпадающие списки — не самый лучший вариант. Несмотря на то, что пространство на мобильных телефонах и планшетах ещё более ограничено, выпадающие списки обычно занимают слишком много места на экране, особенно если в них много вариантов. К тому же, они могут затруднить навигацию в мобильном UI.
Если вы всё-таки решили сделать раскрывающийся список в мобильном интерфейсе, убедитесь, что его можно легко и интуитивно открыть и закрыть, и что его просто скроллить. iOS решает эту проблему с помощью нативных списков в нижней части интерфейса, которые можно скроллить.
Как и в веб-дизайне, используйте выпадающие списки только когда невозможно отобразить группу ответов или вариантов на одном экране. Убедитесь, что все параметры в вашем выпадающем списке легко читаются.
Есть ещё один способ сделать выпадающие списки более интуитивно понятными и естественными в мобильных интерфейсах — добавить ощущение объёмности, особенно если речь об Android. В Material Design указано, что любой элемент списка или меню должен отображаться поверх других фиксированных UI-элементов. Для достижения наилучших результатов используйте небольшое затенение для объёма.
Когда дело доходит до высоты выпадающего меню на андроиде, убедитесь, что любой выпадающий список меньше высоты экрана. Material Design предлагает оставить пустое место размером с одну строку над и под выпадающим списком.
Выводы
Выпадающие списки стоит использовать, когда нужно увеличить доступное экранное пространство и автоматизировать определённые процессы для пользователей: упростить и сделать более эффективным заполнение форм и опросов, а также изменение настроек.
Однако не спешите применять выпадающие списки в своих интерфейсах, даже если кажется, что можно. Всегда думайте о пользователе, когда что-либо упрощаете. Если пользователю проще ввести данные — дайте ему такую возможность.
В заключение, всегда проверяйте выпадающие списки на пользователях, чтобы убедиться, что им удобно. Если нет, рассмотрите другие варианты UI-элементов, упомянутые в этой статье.