Аккордеон (Accordion) — элемент интерфейса сайта или приложения

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

Что это и для чего нужен

По сути, аккордеон — это список заголовков, под каждым из которых скрыт блок с контентом. Пользователь самостоятельно выбирает, какой раздел раскрыть. Это особенно полезно, когда объём информации значителен, а пространство экрана ограничено (например, на мобильных устройствах), либо когда важно избежать информационной перегрузки.

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

Где и когда используют

Чаще всего аккордеон встречается в следующих сценариях:

FAQ (часто задаваемые вопросы). Cписок вопросов с ответами, которые появляются по клику. Так страница сохраняет компактность, а пользователь может быстро найти нужный вопрос, не просматривая весь контент.
Фильтры и настройки. В интернет‑магазинах или сервисах фильтры нередко оформляют в виде аккордеона: категории вроде «Страна изготовитель», «Бренд», «Размер» раскрываются отдельно, чтобы не занимать всё доступное пространство экрана.
Онбординг и пошаговые инструкции. Если требуется представить несколько шагов или пояснений, аккордеон позволяет подавать информацию последовательно, не нарушая основной пользовательский поток.
Списки характеристик, условий, правил. Например, разделы «Условия доставки», «Способы оплаты», «Политика возврата» удобно оформлять таким образом, если важно предоставить полную информацию, но не выводить её на первый экран.
Мобильные интерфейсы. На узких экранах аккордеон помогает экономить место и делает навигацию более интуитивной.

Из каких элементов состоит

У типичного аккордеона есть несколько обязательных частей:

Заголовок (триггер) — элемент, который виден всегда. Это может быть текст («Как оформить заказ?»), иконка либо их комбинация. По заголовку пользователь определяет, о чём пойдёт речь в раскрытом блоке.
Индикатор раскрытия — стрелка, плюс/минус или иной значок, сигнализирующий о возможности раскрытия блока. Без такого индикатора часть пользователей может не распознать интерактивность элемента.
Область контента — скрытый блок, который отображается после взаимодействия. Внутри может находиться текст, списки, изображения, таблицы, а также другие интерактивные элементы (кнопки, формы).
Состояния — аккордеон должен чётко визуализировать разные этапы взаимодействия: неактивное (свёрнутое), состояние наведения (hover), активное (раскрытое), а при необходимости — состояния ошибки или недоступности.
Анимация раскрытия — плавное появление контента. Анимация помогает пользователю отследить, откуда появляется новый блок и куда он исчезает при сворачивании.

Варианты поведения

Существует несколько распространённых сценариев работы аккордеона:

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

Выбор модели определяется задачей: если цель — обеспечить быстрый доступ к одному ответу, лучше подойдёт классический вариант. Если же пользователю требуется собрать данные из разных блоков, целесообразно разрешить множественное раскрытие.

Практические советы для дизайнеров

Формулируйте заголовки максимально ясно. Они должны быть информативными и самодостаточными: даже если пользователь не раскроет блок, он должен понимать, о чём в нём пойдёт речь. Избегайте общих формулировок вроде «Подробнее» — лучше сразу указывать суть: «Как вернуть товар», «Способы доставки» и т. п.
Не скрывайте критически важную информацию. Если данные обязательно должны быть видны пользователю, не стоит помещать их в скрытый блок. Аккордеон оптимален для дополнительной и справочной информации, но не для ключевых шагов пользовательского сценария.
Обеспечьте понятную визуальную обратную связь. Пользователь должен чётко видеть, какой элемент сейчас активен: при навигации с клавиатуры заголовок должен выделяться (например, обводкой или контрастным цветом), а действие по раскрытию блока — быть очевидным. Это важно для удобства всех пользователей, в том числе тех, кто взаимодействует с интерфейсом не только с помощью мыши.
Учитывайте размер активной зоны. На мобильных устройствах область нажатия должна быть достаточно крупной, чтобы пользователь мог легко попасть по ней пальцем. Рекомендуемый минимальный размер — 44×44 px.
Прорабатывайте визуальную иерархию. Заголовок должен явно отличаться от остального контента — за счёт размера шрифта, жирности, цвета или отступов. Это помогает пользователю быстро распознать интерактивные элементы.
Избегайте вложенных аккордеонов. Если внутри раскрытого блока появляется ещё один аккордеон, интерфейс становится менее понятным и более сложным для восприятия. В таких случаях лучше вынести вложенную структуру на отдельный экран либо использовать другой паттерн — например, дерево или табы.

Примеры из реальных интерфейсов

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

В интернет‑магазинах аккордеон в фильтрах позволяет поэтапно уточнять параметры, не перегружая экран лишними деталями.

В админ‑панелях и конфигураторах сервисов аккордеон помогает структурировать настройки по логическим блокам: «Общие», «Безопасность», «Интеграции».

Еще больше референсов блока FAQ смотрите на странице

Частые ошибки

Слишком большое количество пунктов. Если в аккордеоне более 7–10 элементов, пользователю становится сложнее ориентироваться. В таком случае лучше разбить контент на отдельные страницы либо добавить поиск по содержимому.
Сокрытие важных действий. Не стоит прятать ключевые кнопки или призывы к действию (CTA) внутри аккордеона, если они должны быть доступны на первом экране.
Отсутствие визуальных подсказок. Без стрелки или другого индикатора пользователь может не понять, что блок можно раскрыть.
Резкое появление контента без анимации. Внезапное отображение информации дезориентирует пользователя: он не успевает отследить, откуда взялся новый блок.

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