Выпадающий список
Выпадающий список (dropdown list) - элемент интерфейса, который позволяет пользователю выбрать одно значение из предопределённого списка. В обычном состоянии отображается только выбранное значение или заглушка, а при клике раскрывается полный перечень доступных вариантов.
В веб-дизайне выпадающие списки широко используются в формах, фильтрах каталогов, меню навигации и других элементах, где нужно экономить пространство экрана.
Где используются выпадающие списки
[править]Навигационные меню
[править]Классические выпадающие меню (dropdown menus) показывают подразделы при наведении или клике на пункт основного меню. Это основной способ организации иерархической навигации на сайтах.
Формы
[править]В полях для ввода данных (страна, город, должность, дата) выпадающие списки заменяют ручной ввод, ускоряя заполнение и исключая ошибки.
Фильтры каталога
[править]В интернет-магазинах выпадающие списки используются для выбора параметров: бренд, размер, цвет, цена. Это экономит место на странице, особенно на мобильных устройствах.
Сортировка
[править]Переключатели порядка отображения товаров или статей (по цене, по популярности, по новизне) часто реализуются как выпадающие списки.
Поисковые подсказки
[править]При вводе запроса в строку поиска появляется выпадающий список с вариантами автодополнения.
Типы выпадающих списков
[править]По способу вызова
[править]- Hover (при наведении) - список появляется при наведении курсора. Используется в навигационных меню на десктопах.
- Click (при клике) - список появляется после клика. Предпочтительно для мобильных устройств и элементов управления.
По количеству выбора
[править]- Одиночный выбор - можно выбрать только одно значение (самый частый случай)
- Множественный выбор - можно отметить несколько значений (часто с чекбоксами)
По источнику данных
[править]- Статические - значения жёстко заданы в коде
- Динамические - значения подгружаются с сервера (например, список городов при выборе страны)
По оформлению
[править]- Классические - стандартный HTML select
- Кастомизированные - стилизованные под дизайн сайта, часто с дополнительными функциями (поиск по списку, иконки)
Принципы хорошего выпадающего списка
[править]Заметность
[править]Пользователь должен понимать, что элемент является выпадающим списком. Обычно это обозначается стрелкой вниз справа.
Доступность
[править]- Список должен легко открываться
- Элементы должны быть достаточно крупными для выбора (особенно на мобильных)
- Должна быть возможность выбора с клавиатуры
Поиск
[править]Для длинных списков (например, страны) нужна строка поиска внутри выпадающего списка.
Группировка
[править]Большие списки логично группировать по категориям, разделяя визуально.
Обратная связь
[править]Выбранное значение должно отображаться в поле, а при необходимости - возможность быстро снять выбор.
Производительность
[править]Список должен открываться быстро, без задержек, особенно на мобильных устройствах.
Выпадающие списки в навигации
[править]Одноуровневые
[править]При наведении на пункт меню появляется простой список подразделов. Используется для несложной иерархии.
Многоуровневые (каскадные)
[править]При наведении на пункт во вложенном списке появляется следующий уровень. Требует аккуратной реализации, чтобы не раздражать пользователя.
С мегаменю
[править]Особый тип, где выпадающий список превращается в большую панель с колонками и изображениями (см. Мегаменю).
Мобильная адаптация
[править]На телефонах выпадающие меню часто заменяются раскрывающимися аккордеонами или отдельными страницами.
Выпадающие списки в формах
[править]Преимущества
[править]- Экономят место
- Исключают ошибки ввода (пользователь выбирает из готового)
- Ускоряют заполнение
- Легко валидируются
Недостатки
[править]- В длинных списках трудно найти нужное
- Пользователь не видит все варианты сразу
- На мобильных могут быть неудобны (маленькие элементы)
Лучшие практики
[править]- Для коротких списков (до 5 вариантов) лучше использовать радиокнопки
- Для средних (5-15) выпадающий список подходит
- Для длинных (более 15) нужен поиск внутри списка
- Значение по умолчанию должно быть осмысленным (или пустым)
Выпадающие списки и SEO
[править]Навигационные меню
[править]Правильно реализованные выпадающие списки в меню помогают поисковым роботам находить все страницы сайта и понимать иерархию.
Фильтры
[править]Выпадающие списки в фильтрах могут создавать множество URL с параметрами, которые нужно либо закрывать от индексации, либо использовать канонические ссылки.
Производительность
[править]Сложные кастомные выпадающие списки с тяжёлым JavaScript могут замедлять загрузку страницы, что влияет на Core Web Vitals.
Типичные ошибки
[править]- Слишком длинные списки без поиска - пользователь устаёт листать
- Мелкие элементы на мобильных - трудно попасть пальцем
- Неинтуитивное поведение - список закрывается слишком быстро или не закрывается вовсе
- Отсутствие выбранного значения - непонятно, что выбрано
- Медленная работа - задержки при открытии
- Плохая доступность - не работает с клавиатуры
- Слишком много уровней - пользователь теряется
