Состояние, когда в интерфейсе нет данных для отображения, требует специального подхода. Если просто оставить пустой экран, пользователь потеряется. Если показать техническое сообщение об ошибке, он не поймет, что делать дальше. Текст пустого состояния решает эту задачу: он объясняет, почему экран пуст, и подсказывает следующий шаг.
| Что разберем | Что это даст |
| Определение и функции текста пустого состояния | Поймете, зачем он нужен и как отличить его от обычного сообщения об ошибке |
| Виды пустых состояний и когда они возникают | Сможете правильно определить, какой текст нужен именно в вашем случае |
| Как писать эффективный текст пустого состояния | Создадите сообщения, которые не оставляют пользователя в замешательстве |
| Типичные ошибки при написании таких текстов | Не будете отталкивать пользователей скучными или непонятными формулировками |
Что такое текст пустого состояния
Текст пустого состояния – это сообщение, которое появляется в интерфейсе, когда нет данных для отображения основного контента. Это не ошибка и не багу приложения. Это нормальное состояние, которое требует объяснения и подсказки для пользователя.
Главная функция такого текста – снять неопределенность. Пользователь должен понять три вещи:
- Почему здесь ничего нет
- Это нормально или что-то сломалось
- Что ему нужно сделать дальше
Текст пустого состояния отличается от сообщения об ошибке тем, что он не указывает на проблему в системе, а объясняет естественный результат действий пользователя или отсутствие данных.
Виды пустых состояний
Первый запуск (onboarding)
Пользователь только что открыл приложение или раздел впервые, и там нет никаких данных, потому что он ничего еще не создал. Пример: новый проект в Figma, пустой список задач в Todoist, пустая лента сообщений в Telegram.
Текст должен показать, что это нормально, и пригласить действие. Формулировка: «У вас еще нет задач. Создайте первую».
Активный поиск без результатов
Пользователь применил фильтр, ввел поисковый запрос или выбрал параметры, но результатов не найдено. Пример: поиск в интернет-магазине вернул ноль товаров, фильтр по дате в аналитике показал пустой результат, поиск контакта в адресной книге не нашел совпадений.
Текст должен подтвердить, что поиск выполнен корректно, и предложить альтернативу. Формулировка: «По запросу «красные кроссовки размер 50″ товаров не найдено. Попробуйте изменить параметры поиска».
Отсутствие данных, когда они должны были загрузиться
Пользователь ожидал увидеть какие-то данные (список друзей, историю покупок, уведомления), но они не загрузились, хотя приложение работает. Пример: в соцсети не отображаются подписчики, в банковском приложении не видна история транзакций, в почтовом клиенте не загрузились письма.
Текст должен объяснить, что данные должны быть, но их еще нет или произошла задержка. Формулировка: «История операций пока не загружена. Попробуйте обновить страницу».
Отсутствие данных из-за действия пользователя
Пользователь удалил все элементы, очистил корзину, отменил подписку на все уведомления. Пример: список избранного стал пуст после удаления всех товаров, папка с файлами опустела после переноса, список подписок исчез после отписки от всех каналов.
Текст может быть более легким, потому что пользователь сам это вызвал. Формулировка: «Вы еще ничего не добавили в избранное».
Ограничение доступа или отсутствие прав
Пользователь не может видеть данные, потому что у него нет прав доступа, он не авторизован, или функция недоступна в его тарифе. Пример: список приватных документов недоступен для гостя, рекомендации недоступны без подписки, чат с поддержкой скрыт для пользователей бесплатного плана.
Текст должен объяснить причину и показать, как получить доступ. Формулировка: «Рекомендации доступны только подписчикам. Оформите подписку за 199 рублей в месяц».
Техническая неудача или задержка
Данные не загрузились из-за ошибки на сервере, плохого интернета или перегрузки системы. Пример: список заказов не загрузился, синхронизация застыла, сервер недоступен.
Текст должен объяснить техническую причину и предложить действие. Формулировка: «Данные не загрузились. Проверьте интернет и попробуйте еще раз».
Как писать эффективный текст пустого состояния
Основная структура
Хороший текст пустого состояния содержит три слоя информации:
- Объяснение – почему здесь ничего нет (не обязательно всегда, но в большинстве случаев помогает)
- Действие – что пользователь может сделать дальше (обязательно)
- Визуальный элемент – иконка или иллюстрация, которая не дает экрану выглядеть угрожающе (желательно)
Правило понятности
Текст должен быть написан языком пользователя, а не языком разработчика. Не используйте технические термины, если их можно заменить на простые слова.
Неправильно: «Результаты запроса не обнаружены в базе данных».
Правильно: «По вашему запросу ничего не найдено».
Правило действия
Всегда дайте четкий следующий шаг. Пустой экран с объяснением, но без предложения действия, оставляет пользователя в замешательстве.
Неправильно: «У вас еще нет проектов».
Правильно: «У вас еще нет проектов. Создайте первый проект, чтобы начать работу».
Если действие требует клика, сделайте кнопку с понятным текстом: «Создать проект», «Попробовать еще раз», «Оформить подписку».
Правило тона
Тон должен соответствовать контексту. Если пустое состояние возникло из-за действия пользователя (он удалил все), тон может быть дружелюбнее. Если это техническая ошибка, тон должен быть спокойнее и увереннее.
Дружелюбный тон подходит для первого запуска: «Пока здесь пусто. Добавьте первую задачу».
Спокойный тон подходит для технической задержки: «Данные загружаются. Это займет несколько секунд».
Правило краткости
Текст пустого состояния не должен быть длинным. Одно-два предложения обычно достаточно. Если нужно дать длинное объяснение, это признак того, что интерфейс спроектирован неправильно.
Когда нужна иконка или иллюстрация
Визуальный элемент помогает, если:
- Экран выглядит слишком пусто и пугает пользователя
- Нужно передать эмоцию (дружелюбие, спокойствие, уверенность)
- Интерфейс уже использует иконки для других состояний, и пустое состояние выбивается
Иконка не нужна, если экран уже имеет достаточно визуального содержимого (кнопки, заголовки, другие элементы).
Примеры текстов пустого состояния в разных сценариях
Первый запуск приложения
Текст: «Добро пожаловать! Здесь будут ваши проекты. Начните с создания нового проекта».
Кнопка: «Создать проект».
Этот текст дружелюбный, объясняет назначение пустого экрана и предлагает четкое действие.
Поиск без результатов
Текст: «Товаров не найдено. Попробуйте изменить фильтры или поисковый запрос».
Кнопка: «Очистить фильтры» или «Вернуться к каталогу».
Этот текст подтверждает, что поиск выполнен, и показывает пути выхода из ситуации.
Техническая задержка
Текст: «Данные загружаются…».
Элемент: анимация загрузки (спиннер).
Это минимальный текст, который показывает, что происходит процесс, а не ошибка.
Отсутствие доступа
Текст: «Эта функция доступна только в платном плане. Обновитесь, чтобы получить доступ».
Кнопка: «Выбрать план».
Этот текст объясняет причину и предлагает решение.
Результат действия пользователя
Текст: «Вы удалили все задачи. Добавьте новую, чтобы начать».
Кнопка: «Добавить задачу».
Этот текст признает действие пользователя и предлагает следующий шаг.
Типичные ошибки при написании текстов пустого состояния
Слишком техничный или корпоративный язык
Ошибка: «Результаты отсутствуют в базе данных. Пожалуйста, повторите попытку».
Проблема: пользователь не знает, что такое «база данных», и не понимает, почему ему нужно повторять попытку, если он ничего не делал.
Правильно: «По вашему запросу ничего не найдено. Попробуйте другие ключевые слова».
Отсутствие действия
Ошибка: «У вас еще нет друзей».
Проблема: пользователь не знает, как добавить друзей. Текст объясняет ситуацию, но не подсказывает решение.
Правильно: «У вас еще нет друзей. Найдите и добавьте их в поиске».
Слишком длинное объяснение
Ошибка: «Корзина пуста, потому что вы еще не добавили в нее товары. Когда вы выбираете товар на странице каталога и нажимаете кнопку «Добавить в корзину», товар появляется здесь. Это удобно для отслеживания выбранных товаров перед оплатой».
Проблема: пользователь не захочет читать эту стену текста. Достаточно одного предложения.
Правильно: «Корзина пуста. Добавьте товары из каталога».
Неправильный тон
Ошибка: «Ошибка! Данные не найдены. Система не может обработать ваш запрос».
Проблема: тон пугающий и обвиняющий. Пользователь думает, что что-то сломалось, хотя на самом деле он просто ничего не нашел.
Правильно: «По вашему запросу ничего не найдено. Попробуйте другие параметры».
Непонятное действие
Ошибка: «Нет данных. Синхронизируйте».
Проблема: неясно, как синхронизировать и где найти эту кнопку.
Правильно: «Данные не загрузились. Нажмите кнопку ниже, чтобы обновить».
Кнопка: «Обновить».
Игнорирование контекста
Ошибка: использовать один и тот же текст для всех типов пустых состояний – для первого запуска, для поиска без результатов и для технической ошибки.
Проблема: текст не будет подходить ко всем ситуациям, и пользователь не поймет, в чем разница.
Правильно: писать разные тексты для разных сценариев.
Ограничения и исключения
Когда текст пустого состояния может быть минимальным
Если пустое состояние совершенно очевидно (например, пустая корзина в интернет-магазине), текст может быть очень коротким или даже отсутствовать, если интерфейс сам по себе ясен. Но в большинстве случаев даже в очевидных ситуациях короткое сообщение и кнопка действия повышают конверсию.
Когда нужен более сложный текст
Если пустое состояние возникает из-за сложной системы правил (например, пользователь не может видеть данные по причине своего статуса, географии, времени года или подписки), текст должен объяснить эту логику. Но объяснение должно быть простым и четким, не более двух предложений.
Когда пустое состояние не нужно показывать
Если данные загружаются, не показывайте текст пустого состояния вместе с индикатором загрузки. Выберите одно: либо спиннер с минимальным текстом («Загружается…»), либо только спиннер без текста.
Когда нельзя использовать юмор
Если пустое состояние вызвано технической ошибкой или ограничением доступа, избегайте шуток и легкомысленного тона. Пользователь может быть расстроен, и юмор будет выглядеть неуместно.
Неправильно: «Упс, кажется, мы потеряли ваши данные. Посмотрите, может быть, они под диваном?»
Правильно: «Данные временно недоступны. Мы работаем над исправлением. Попробуйте еще раз через несколько минут».
Коротко о главном
Текст пустого состояния – это не декоративный элемент, а функциональная часть интерфейса. Он объясняет, почему экран пуст, и подсказывает, что делать дальше. Хороший текст содержит объяснение (если нужно), четкое действие и соответствующий контексту тон. Избегайте технического языка, длинных объяснений и отсутствия действия. Разные сценарии требуют разных текстов – не пытайтесь использовать один текст для всех случаев.
