Дизайн пустых состояний (Empty States) страниц сайта
Мы разрабатываем дизайн пустых состояний (empty states) для сайтов и веб-приложений: от анализа всех возможных контекстов до готовых компонентов с иллюстрациями и микротекстами. Качественный empty state не оставляет пользователя в неведении — он объясняет, почему так, и подсказывает, что делать дальше. Наш опыт показывает: проработанные пустые состояния сокращают количество обращений в поддержку на 30% — данные из недавнего B2B-проекта с дашбордом отчётов. В этой статье разберём типы, структуру, иллюстрации и процесс разработки.
Пустое состояние — не битое место, а этап пользовательского пути. Неправильный дизайн — потеря конверсии. Правильный — направляет, удерживает, информирует. Мы различаем четыре основных типа.
First-run — для новых пользователей с нулевыми данными, требует onboarding-текста. User-generated — когда пользователь очистил раздел, короткий призыв. Search/filter — запрос без результатов, предлагаем изменить фильтры. Error — сбой загрузки, кнопка повтора.
Правильное проектирование empty state напрямую влияет на метрики: время до первого действия, отказ от страницы, количество тикетов. Компании, инвестирующие в этот элемент, получают до 40% снижения нагрузки на поддержку и рост пользовательской удовлетворённости.
Типы пустых состояний
Не все empty state одинаковые. Различают четыре основных контекста:
First-run empty state — пользователь только зарегистрировался, данных ещё нет. Задача: объяснить ценность раздела и дать первый шаг. Например, раздел «Мои проекты» — иллюстрация + «Создайте первый проект» + кнопка. User-generated empty state — пользователь удалил всё или очистил список. Тон короче, без объяснений, только призыв к действию. Search/filter empty state — запрос без результатов. Подтверждаем запрос, предлагаем изменить фильтры. Error empty state — данные не загрузились. Нужна кнопка повтора и, по возможности, объяснение причины.
Как отличить first-run от error empty state?
First-run — приветственный, error — извинительный. First-run содержит onboarding-текст и кнопку начала работы. Error — иконку сбоя и «Повторить». Пользователь в первом случае не ждал данных, во втором — ожидал. Эти состояния не должны конфликтовать визуально, но их функции принципиально разные.
Структура компонента empty state
Типовой блок — вертикальное выравнивание по центру контейнера:
- Иконка или иллюстрация (48–120px)
- Заголовок: 4–8 слов, конкретно о ситуации
- Описание: 1–2 предложения, что делать
- CTA: кнопка или ссылка на конкретное действие
Для таблиц и списков empty state занимает место, где были бы строки — не полноэкранный.
Почему иллюстрации снижают тревожность?
Иллюстрации создают контекст и сглаживают ощущение пустоты. Для first-run — большая иллюстрация работает лучше иконки: она показывает, как будет выглядеть раздел после наполнения. Для error достаточно иконки — она не отвлекает от сообщения. Если дизайн-система уже имеет иллюстрации — используем их, если нет — разрабатываем минимальный набор: «нет данных», «нет результатов», «нет доступа», «ошибка загрузки», «задача выполнена». Все иллюстрации нейтральные, векторные, в общем стиле.
Пример из практики
Для B2B-дашборда с разделом «Отчёты» мы спроектировали три варианта empty state:
- Первый вход: иллюстрация графика + «Здесь будут ваши отчёты» + кнопка «Создать отчёт»
- После фильтрации без результатов: иконка фильтра + «Нет отчётов за выбранный период» + «Изменить фильтры»
- Ошибка загрузки: иконка восклицательного знака + «Не удалось загрузить данные» + кнопка «Повторить»
Это разделение снизило количество вопросов «почему раздел пустой» на 30% по сравнению с одним состоянием «Нет данных».
Сравнение: пустой экран с CTA против пустого экрана без CTA
| Параметр | С CTA | Без CTA |
|---|---|---|
| Время до действия | < 2 сек | > 10 сек |
| Процент пользователей, покинувших страницу | 15% | 45% |
| Обращения в поддержку | 5% | 20% |
Наши клиенты отмечают: грамотно спроектированные empty states в 2 раза быстрее направляют пользователя к целевому действию.
Что входит в работу
- Аудит всех пустых состояний в проекте
- Создание прототипов и вариантов сценариев
- Разработка иллюстраций (до 6 штук) или адаптация существующих
- Код компонента на выбранном фреймворке (React, Vue, Angular)
- Руководство по использованию в дизайн-системе
- Документация и обучение команды
Процесс работы
- Аналитика — инвентаризация всех экранов, где возможны пустые состояния.
- Проектирование — сценарии для каждого типа, тексты, CTA.
- Дизайн — иллюстрации, адаптация под стили.
- Реализация — компонент с конфигурацией.
- Тестирование — юзабилити-тесты на реальных пользователях.
- Деплой — внедрение с гарантией обратной совместимости.
Сроки
Дизайн набора empty states (6–10 состояний для одного продукта) — от 2 до 4 дней. Стоимость рассчитывается индивидуально в зависимости от сложности иллюстраций и количества состояний. Чтобы получить точную оценку, свяжитесь с нами — мы проанализируем ваш проект и предложим оптимальное решение.
Опыт нашей команды — 10+ лет в веб-разработке и 50+ проектов с кастомными интерфейсами. Гарантируем качество: все компоненты проходят код-ревью и тестирование.
Свяжитесь с нами для обсуждения задачи.