Пустое состояние поиска: как превратить тупик в точку роста

Пустое состояние поиска (empty state) — это не просто отсутствие данных, а критическая точка взаимодействия, где пользователь чувствует себя потерянным. Грамотный дизайн этого экрана превращает тупик в новую возможность. Согласно современным гайдлайнам (Material Design, Контур.Гайды, лучшие практики UX), пустой экран должен объяснять, что произошло, почему и что делать дальше.

Классификация пустых состояний в поиске

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

Первичное пустое состояние (First-time use): Пользователь открыл поиск впервые, история запросов пуста.
Нулевой результат (Zero results): Запрос введен, но совпадений не найдено.
Очищенное состояние (Cleared state): Пользователь сам удалил историю или фильтры оставили пустой выдачей.

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

Ключевые компоненты экрана «Ничего не найдено»

Согласно определению из блога HireHi и гайдам Контур, пустое состояние — это «экран или блок интерфейса, который показывается, когда в текущем контексте нет данных, результатов, объектов или доступного содержимого». Эффективный экран состоит из:

Иллюстрации / Визуального якоря: Иконка или иллюстрация, снижающая тревожность и объясняющая суть (лупа с крестиком, пустая коробка, персонаж).
Заголовка (Heading): Четкое, человечное сообщение. Не «Ошибка 404» или «Null result», а «Ничего не найдено по запросу «квартиры на Марсе»».
Объяснения (Body text): Почему так вышло? (Слишком узкий запрос, опечатка, контента действительно нет).
Призыва к действию (CTA / Next Steps): Конкретные шаги для выхода из тупика.

Стратегии контента: Что именно показывать

А. Для сценария «Нулевой результат» (Zero Results)

Это самый частый и сложный кейс. Пользователь вложил усилия в ввод запроса и получил «ноль». Ваша задача — вернуть ему контроль.

Предложите коррекцию (Did you mean?). Если есть подозрение на опечатку — покажите исправленный вариант как кликабельную ссылку.
Сбросьте/покажите фильтры. Часто виной пустоте являются наложенные фильтры. Покажите активные фильтры и предложите кнопку «Сбросить все фильтры» прямо на экране пустоты.
Покажите «Лучшее соответствие» (Best match). Как упоминается в материале по Material Design: «Если ничто точно не соответствует запросу, контент, содержащий наилучшее соответствие, может быть каким-то образом выражен». Покажите 3-5 самых близких результатов, даже если они не идеальны.
Предложите альтернативы. Ссылки на популярные категории, теги или недавние успешные запросы других пользователей.

Б. Для сценария «Первое посещение / Нет истории»

Здесь цель, онбординг и демонстрация ценности (Value Proposition).

Объясните, как работает поиск. «Введите название фильма, актора или жанр».
Покажите примеры запросов (Search suggestions / Trending). Кликабельные чипсы/теги с популярными запросами мгновенно учат пользователя синтаксису.
Используйте «Обучающие карточки» (Onboarding cards). Как в примере из Material Design (перевод Руслана Шарипова): «Хотя у пользователя еще нет фильмов, карточка объясняет особенности и преимущества сервиса (карточку при этом можно закрыть смахнув)».
Не показывайте заглушку «История пуста». Это мертвый контент. Лучше показать тренды или категории.

Чек-лист проектирования (Вопросы к себе)

Основываясь на статье «Спроектировать разные состояния интерфейса и не запутать пользователя», перед релизом задайте себе вопросы:

Как выглядит экран, когда пользователь просматривает его впервые?
Как выглядит экран, когда поиск не дает результатов, и как экран сообщает об этом пользователю?
Понятно ли пользователю, почему пусто?
Есть ли у пользователя хотя бы один понятный следующий шаг (кнопка, ссылка, подсказка)?
Убраны ли лишние элементы? (По гайдам Контур: «Убирайте со страницы такие элементы как фильтр, поиск, заголовки таблицы и т.д., если данных нет» — но строку поиска лучше оставить активной для нового запроса).

Паттерны взаимодействия (Interaction Patterns)

Инлайн-уведомление vs Полноэкранное состояние

Полноэкранное (Full screen): Используется при первичном заходе в раздел или если поиск, основная функция экрана (например, поиск в Яндекс.Картах или App Store). Максимальное внимание к иллюстрации и CTA.
Инлайн / Частичное (Inline / Partial): Если поиск — виджет в сайдбаре или хедере. Результаты просто не рендерятся, а под строкой ввода появляется компактный блок «Ничего не найдено. Попробуйте изменить запрос».

Микро-взаимодействия

Анимация появления: Плавное fade-in или slide-up снижает когнитивный шок от пустоты.
Автофокус: При показе нулевого результата оставляйте фокус в строке поиска (или возвращайте его), чтобы пользователь мог сразу продолжать ввод.
Кликабельные чипсы-подсказки: Теги «Популярное», «Категории», «Сбросить фильтры» должны быть интерактивными элементами (Badges/Chips), а не просто текстом.

Типичные ошибки (Anti-patterns)

«Белая страница» / «Серый экран». Отсутствие любого фидбека. Пользователь думает: «Сломалось?» или «Интернет пропал?».
Технический жаргон. «0 results found», «Query returned null», «Error: Empty dataset».
Мертвый конец (Dead end). Текст «Ничего не найдено» без единой кнопки или ссылки для действия.
Скрытие строки поиска. Удаление инпута на экране результатов заставляет пользователя искать, как вернуть поиск (нажать Esc, свайпнуть, найти иконку лупы в хедере).
Игнорирование контекста. Показ подсказок «Как пользоваться поиском» опытному пользователю, который просто опечатался в сложном запросе.

Пример идеальной копирайтинга (Copywriting)

Сценарий	Плохо	Хорошо
Опечатка / Нет результатов	Ничего не найдено	По запросу «айфон 15 про» ничего не найдено. Возможно, вы имели в виду «айфон 15 про»?
Слишком узкие фильтры	0 товаров	С выбранными фильтрами товаров нет. или
Первый заход (нет истории)	История поиска пуста	Найдите фильмы, сериалы и актеров. Популярное сейчас: Оппенгеймер Барби Новые серии

Доступность (Accessibility / a11y)

Сообщение о пустоте должно быть объявлено скринридером (используйте aria-live="polite" или role="status").
Цветовой контраст иллюстрации и текста, не ниже WCAG AA.
Все интерактивные элементы (кнопки сброса, ссылки-подсказки) доступны с клавиатуры (Tab / Enter).

Пустой поиск — это не ошибка системы, а диалог. Дизайн взаимодействия (Interaction Design) в этот момент определяет, уйдет ли пользователь разочарованный или скорректирует запрос и найдет то, что нужно. Главное правило: никогда не оставляйте пользователя один на один с пустым экраном без объяснения и пути выхода. Превратите «Ноль результатов» в «Попробуйте так» — и метрики конверсии скажут вам спасибо.

Статья подготовлена на основе материалов: Material Design (Empty States), Контур.Гайды, блог HireHi, статьи на vc.ru и Medium (Ринат Шайхутдинов, Руслан Шарипов, Оди. О дизайне) за 2019–2026 гг.