Типографика пустых состояний: как объяснить следующий шаг

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

Актуально на 22 июля 2026 года. Материал предназначен для дизайнеров, редакторов, продуктовых команд и разработчиков интерфейсов.

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

Причины пустоты бывают разными. Пользователь может открывать раздел впервые, удалить все элементы, применить слишком узкий фильтр, потерять соединение или столкнуться с ошибкой загрузки. Визуально эти сценарии похожи, но типографический текст должен различать их. Иначе сообщение «Здесь пока пусто» одинаково описывает как нормальное начало работы, так и проблему.

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

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

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

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

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

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

Иерархия пустого состояния зависит не только от размера шрифта. На восприятие влияют насыщенность, контраст, ширина текстового блока, расстояние между строками и отступы между смысловыми уровнями. Заголовок должен первым попадать в поле зрения, пояснение — читаться без напряжения, а CTA — визуально отделяться от описания.

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

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

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

Сценарий онбординга требует не просто сообщить об отсутствии данных, а показать стартовую ценность функции. Вместо «У вас нет шаблонов» используйте связку «Создайте шаблон для следующего проекта» и «Сохраните настройки, чтобы быстро применять их снова». CTA «Создать шаблон» логично завершает сообщение и объясняет, что произойдёт после нажатия.

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

В корзине полезно связать пустоту с продолжением выбора: «В корзине пока ничего нет» и «Добавляйте понравившиеся варианты, чтобы вернуться к ним позже». Кнопка «Перейти к каталогу» должна вести именно туда, где пользователь может найти новые объекты. Текст не должен создавать ощущение сбоя, если состояние является нормальным.

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

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

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

Отдельный риск — чрезмерная метафоричность. Фраза «Похоже, ветер унёс ваши данные» может выглядеть выразительно, но не объясняет причину и действие. Юмор уместен только там, где ошибка обратима, последствия понятны, а стиль продукта действительно допускает такую интонацию. В остальных случаях точность полезнее оригинальности.

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

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

Заголовок должен коротко и нейтрально называть текущее состояние. Формулировка «Ничего не найдено» подходит для поиска, а «Создайте первый проект» — для первого входа. Избегайте обвинений, неясных метафор и фраз, которые не связаны с задачей пользователя.

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

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

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

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

Сильная типографика пустых состояний не скрывает отсутствие данных, а объясняет его и показывает понятный маршрут. Разделяйте сценарии, выстраивайте иерархию, выбирайте читаемый шрифт и формулируйте CTA конкретным глаголом. Если вы создаёте собственный интерфейсный шрифт, протестируйте его на реальных empty state, кнопках и сообщениях об ошибках. Создать шрифт для проекта можно на fontgenerator.ru.