Знаете это чувство? Вы только что установили приложение, заходите внутрь, а там... ничего. Белый лист, серая надпись «Нет данных» и кнопка «Обновить», которая ничего не меняет. Это не просто отсутствие контента - это упущенная возможность. В мире Empty States (или пустых состояний) скрывается один из самых мощных инструментов для удержания пользователя и обучения интерфейсу. Если вы думаете, что пустой экран - это ошибка или временное неудобство, пора пересмотреть подход.
Пустое состояние возникает, когда система работает исправно, но пользователю нечего показать. Это может быть новый почтовый ящик, пустой список задач или страница профиля без аватарки. Главная задача дизайнера здесь - не заполнить пространство ради красоты, а дать контекст. Хороший empty state отвечает на три вопроса: почему здесь пусто? Что можно сделать? Как это сделать?
Три типа пустых состояний, которые нельзя игнорировать
Не все пустоты одинаковы. Ошибка в классификации приведет к тому, что пользователь почувствует себя потерянным. Эксперты по UX выделяют три основных сценария, и каждый требует своего решения.
- Первое посещение (First-time use). Пользователь впервые видит раздел. Здесь нужна дружелюбность и четкий призыв к действию (CTA). Пример: Trello показывает иллюстрацию доски и кнопку «Создать первую карточку».
- Ничего не найдено (No results). Пользователь искал что-то конкретное, но поиск вернул ноль результатов. Здесь важно предложить альтернативы: изменить запрос, расширить фильтры или посмотреть популярные категории.
- Ошибка системы или отсутствие прав (Error/Permission). Данные есть, но они скрыты от текущего пользователя. Сообщение должно объяснять причину («У вас нет доступа») и указывать путь к решению («Запросите доступ у администратора»).
| Тип состояния | Цель сообщения | Пример CTA |
|---|---|---|
| Первый запуск | Обучение и вовлечение | «Создать проект» |
| Пустой поиск | Подсказка и навигация | «Попробовать другой запрос» |
| Ограничение прав | Ясность и разрешение | «Запросить доступ» |
Анатомия идеального пустого экрана
Что делает пустое состояние полезным, а не раздражающим? Структура. Не нужно изобретать велосипед, достаточно следовать проверенной формуле. Каждый элемент должен работать на одну цель - снизить когнитивную нагрузку.
Начните с иллюстрации или иконки. Визуал привлекает внимание быстрее текста. Но избегайте клише вроде плачущих персонажей или грустных роботов, если ваш продукт серьезный B2B-сервис. Для финансового приложения лучше подойдет минималистичная графика, чем мультяшный медведь. Иллюстрация должна отражать суть раздела: корзина для покупок, папка для документов, карта для геолокации.
Далее идет заголовок. Он должен быть коротким и понятным. Вместо «Нет элементов» напишите «Ваша корзина пуста». Это звучит более лично и естественно. Заголовок устанавливает тон общения с пользователем.
Затем следует описание. Здесь мы объясняем контекст. Почему пусто? Это нормально? Например: «Вы еще не добавили ни одного товара. Начните с наших новинок этой недели». Текст должен быть лаконичным, максимум 1-2 предложения. Избегайте канцелярита и технических терминов, если они не нужны.
И, наконец, призыв к действию (CTA). Это самая важная часть. Кнопка или ссылка должны вести прямо к решению проблемы. Если корзина пуста, кнопка «Перейти в каталог» будет логичнее, чем «Главная страница». Убедитесь, что CTA визуально выделяется цветом или формой.
Как текст влияет на конверсию
Микрокопия в пустых состояниях часто недооценена. Разработчики могут написать «Data not found», а маркетологи хотят добавить юмора. Где золотая середина? Тестирование A/B показывает, что человеческий язык повышает вовлеченность на 15-20% по сравнению с сухими техническими сообщениями.
Рассмотрите пример сервиса доставки еды. Когда у пользователя нет сохраненных адресов, сообщение «Адреса отсутствуют» заставляет думать. А фраза «Куда привезем вкусный ужин?» сразу создает ассоциацию с результатом. Второй вариант мягче подталкивает к действию. Используйте глаголы действия: «Добавьте», «Найдите», «Сохраните». Они побуждают к движению.
Также важна последовательность тона. Если ваше приложение общается на «вы» и официально, шутки в пустых экранах будут выглядеть чужеродно. Напротив, для молодежного соцмедиа формальность убьет доверие. Определите голос бренда (brand voice) и придерживайтесь его во всех текстовых элементах, включая ошибки и пустоты.
Инструменты и ресурсы для дизайнеров
Где искать вдохновение и готовые компоненты? Не нужно рисовать каждую иконку с нуля. Сообщество дизайнеров накопило огромную базу решений. Платформы вроде Dribbble и Behance позволяют увидеть, как другие решают проблему пустых экранов в разных индустриях.
Для прототипирования отлично подходят библиотеки компонентов в Figma. Многие UI-киты (например, Material Design или Apple Human Interface Guidelines) содержат стандартизированные паттерны пустых состояний. Использование готовых гайдлайнов экономит время и обеспечивает привычность интерфейса для пользователей, знакомых с платформой.
Если вы работаете с кодом, обратите внимание на библиотеки анимаций. Лёгкое появление элемента или пульсирующая иконка могут сделать ожидание загрузки менее тягостным. Однако не переусердствуйте: сложная анимация, которая длится дольше секунды, начинает раздражать.
Частые ошибки, которые убивают UX
Даже опытные команды допускают промахи. Самая распространенная - игнорирование состояния «ничего не найдено» в поиске. Пользователь вводит опечатку, видит пустой белый экран и думает, что сломался интернет. Всегда предлагайте подсказки: «Возможно, вы имели в виду...» или «Проверьте раскладку клавиатуры».
Вторая ошибка - отсутствие обратной связи после действия. Если пользователь удалил последний элемент из списка, экран должен обновиться мгновенно и показать корректное пустое состояние. Иногда разработчики забывают обновить виджет, и пользователь видит старую структуру с нулями внутри.
Третья проблема - слишком агрессивные продажи. В момент, когда пользователь пытается разобраться с интерфейсом, всплывающее окно «Купи Премиум!» выглядит навязчиво. Лучше ненавязчиво упомянуть преимущества платного тарифа в тексте описания, а не блокировать интерфейс модальным окном.
Практический чек-лист перед релизом
Перед тем как отправить макеты в разработку, пройдитесь по этому списку. Это сэкономит часы ревью и правок.
- Есть ли визуальный якорь (иконка/иллюстрация)?
- Понятно ли из заголовка, что произошло?
- Предлагает ли описание следующий шаг?
- Работает ли кнопка CTA и ведет ли она в нужное место?
- Соответствует ли тон текста стилю всего продукта?
- Проверено ли состояние на мобильных устройствах (текст не обрезается)?
- Учтены ли права доступа (что видит новичок, а что админ)?
Помните, что пустые состояния - это не «остаточный мусор» дизайна. Это точки контакта, где вы можете проявить заботу о пользователе. Хорошо продуманный empty state превращает потенциальное разочарование в комфортное взаимодействие. Инвестируйте время в эти детали, и ваши пользователи заметят разницу в удобстве использования продукта.
Нужно ли всегда добавлять иллюстрации в пустые состояния?
Не всегда. Для простых внутренних инструментов или таблиц с малым количеством данных достаточно текстового сообщения и кнопки. Иллюстрации уместны там, где нужен эмоциональный контакт или обучение нового пользователя, например, в потребительских приложениях.
Как проверить эффективность пустого состояния?
Отслеживайте конверсию из пустого состояния в целевое действие (например, создание проекта или покупку). Также полезно проводить юзабилити-тесты, наблюдая, понимает ли пользователь, что делать дальше, без посторонней помощи.
Что делать, если данных много, но они скрыты фильтрами?
Это состояние «нет результатов поиска». Важно четко указать, какие фильтры активны, и предложить кнопку «Сбросить фильтры». Это поможет пользователю быстро вернуться к полному списку данных.
Можно ли использовать видео вместо статичной картинки?
Да, особенно для сложных функций или онбординга. Короткая GIF-анимация или мини-видео могут наглядно показать, как пользоваться функцией. Однако следите за размером файла, чтобы не замедлять загрузку страницы.
Как локализовать пустые состояния?
При переводе учитывайте длину строк. В некоторых языках слова значительно длиннее, поэтому убедитесь, что текст не ломает верстку. Также адаптируйте культурные отсылки в иллюстрациях и юморе.