Прогрессивное раскрытие: как показывать сложные настройки

Как это работает

В описании Nielsen Norman Group приём связан с разделением базовых и дополнительных возможностей. Для первого действия человеку не обязательно изучать весь набор функций продукта. При этом путь к деталям должен быть понятным и доступным, когда эти детали понадобятся.

В вымышленной форме создания проекта сначала можно показать название и выбор команды. Рядом находится действие «Дополнительные настройки», которое открывает срок хранения и параметры уведомлений. Перед таким решением команда проверяет, действительно ли большинство пользователей может создать проект без изменения скрытых значений.

Когда применять

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

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

Как оформить раскрытие

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

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

Типичные ошибки

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

Продумайте поведение ошибки в скрытом поле. Можно раскрыть нужную область и привести человека к объяснению, сохранив остальные введённые значения. Систему состояний удобно проверять вместе с состояниями UI-компонентов, а управление с клавиатуры — через клавиатурный фокус.

Как проверить решение

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

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