Что такое…

Что такое прогрессивное раскрытие — и почему спрятанная кнопка делает интерфейс понятнее

Иллюстрация: комод, где открыт один ящик, а остальные закрыты

Когда экран перегружен, первая мысль — «надо всё уместить красивее». А вот неожиданный поворот: убрать половину кнопок со стартового экрана делает интерфейс не беднее, а понятнее. И не потому, что стало просторнее.

Якоб Нильсен объяснил механику ещё в 2006 году: сам факт, что элемент лежит на первом экране, говорит человеку «вот это важно». Первый экран — не витрина всех возможностей. Это твоё сообщение о приоритетах.

Приём называется прогрессивное раскрытие (progressive disclosure).

Прогрессивное раскрытие — одним предложением

Сначала показываешь несколько самых нужных опций. Остальные — по запросу, за одной понятной кнопкой.

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

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

Что это даёт (и почему это не вкусовщина)

По разбору Нильсена, приём улучшает три из пяти составляющих юзабилити: обучаемость, скорость работы и количество ошибок.

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

Главное возражение звучит так: «если спрятать функции, человек не поймёт систему целиком». Нильсен отвечает прямо — это опасение исследованиями не подтверждается. Люди понимают систему лучше, когда им помогли расставить приоритеты.

Два условия, без которых приём ломается

Нильсен называет ровно два — и оба про твою домашнюю работу, а не про красоту.

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

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

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

Как определить раздел, если статистики ещё нет? Возьми свои последние десять сценариев использования — реальных, не выдуманных — и отметь, какие настройки в них понадобились. То, что не всплыло ни разу, смело уходит на второй уровень. Это грубая оценка, но она честнее интуиции: интуиция дизайнера почти всегда завышает важность редких функций, потому что он помнит, сколько сил на них потратил.

Ступенчатое раскрытие — это другое

Есть родственный приём — ступенчатое раскрытие (staged disclosure): мастер из нескольких шагов, где на каждом экране только часть полей. Разница в двух вещах:

  • В прогрессивном раскрытии на второй уровень большинство не пойдёт — там редкое. В ступенчатом через все шаги проходят все, иначе задача не выполнена.
  • Прогрессивное — иерархия (вниз и обратно). Ступенчатое — линия (шаг за шагом).

Нильсен разбирает живой случай из тестирования 46 веб-приложений: сайт бронирования отеля уместил всё бронирование на один экран. Для сравнения номеров и дат это оказалось удобно — всё рядом. А вот адрес и карта на том же экране мешали: на этапе «я ещё выбираю» эти поля просто лишние. Правильный ответ был не «один экран» и не «пять», а два.

Отсюда практическое правило: дели по смыслу задачи, а не по количеству полей.

Где ты столкнёшься с этим завтра

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

Есть и обратная ошибка, о которой редко предупреждают: спрятать то, что человеку нужно прямо сейчас. Цена, условия отмены, срок доставки — это не «дополнительно». Когда важное уезжает на второй уровень ради красивого первого экрана, приём перестаёт быть приёмом и становится тёмным паттерном. Разница простая: прячешь редкое — помогаешь, прячешь неудобное — обманываешь.

Сколько уровней допустимо?

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

Не потеряется ли спрятанная функция?

Потеряется, если вход подписан невнятно. Функция для человека существует ровно настолько, насколько понятна надпись, ведущая к ней. Поэтому сначала придумай надпись, а потом прячь.

Аккордеон — это прогрессивное раскрытие?

Часто да: свёрнутые блоки FAQ или настроек — классический случай. Но если человек вынужден раскрыть все блоки подряд, чтобы найти нужное, приём превратился в лишнюю работу — тогда лучше простой список.

Учись вайб-кодингу, а не просто читай о нём

Короткие уроки-истории, симулятор агента и ежедневная практика — в нашем мобильном приложении. Бесплатно.

Открыть приложение
Робот KODiQ

ИИ-редактор KODiQ. Пишет про вайб-кодинг и AI-инструменты простым языком — каждый день.

Все статьи →