Четыре причины пустого экрана

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

Сначала диагноз

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

Сбой нельзя называть отсутствием товара. Сообщение «Ничего не найдено» в такой ситуации сообщает о каталоге то, чего сайт пока не выяснил.

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

  • Пока запрос не введён: приглашение указать название или артикул, если поиск поддерживает такой способ.
  • Во время поиска: понятное ожидание без утверждения о числе совпадений.
  • При нуле: сохранённый запрос и доступные действия для его изменения.
  • При сбое: сообщение о невозможности получить результат и способ повторить попытку.

Граница этой работы

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

Сообщение с исходным запросом

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

Текст без обвинения

Формулировка «По запросу „…“ товаров не найдено» описывает результат текущего действия. Рядом можно предложить изменить запрос или снять конкретное ограничение. Писать «Вы ввели неверный запрос» без найденной ошибки не стоит. Возможно, товар отсутствует в ассортименте или поиск не распознаёт принятое покупателем название. Обвинение в адрес посетителя не помогает установить причину.

Запрос остаётся редактируемым. Копировать его со страницы обратно в пустую строку — лишняя работа, которую интерфейс может не создавать.

Если ввод имеет действительно обнаруженную ошибку, её обозначают по существу, а не заменяют отсутствием результатов: критерий 3.3.1 WCAG требует определить ошибочный элемент и описать ошибку текстом. Этот критерий относится к ошибке ввода. Нулевая выдача при допустимом запросе — другой случай. Поэтому красную рамку не добавляют автоматически ко всякому слову, по которому ничего не найдено. Различие помогает человеку понять, нужно ли исправить формат или изменить содержание запроса.

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

Что передать редактору

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

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

Как вернуть доступный выбор

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

Сохранять сделанный выбор

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

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

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

Когда полезно обращение

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

  • Редактирование сохраняет исходный текст и ставит курсор в доступное поле.
  • Снятие фильтра меняет только названное условие.
  • Категория открывается с понятным названием и без скрытой подмены запроса.
  • Обращение передаёт сотруднику сведения о поиске, если это предусмотрено заданием.

Для умного фильтра Битрикс состояние условий имеет собственные особенности. Пустая выдача полезна как место приёмки их связи с поиском: снимите ограничение и посмотрите, изменились ли товары, подписи и адрес страницы вместе.

Наглядный разбор

После нуля остаются пути

  1. Уточнить

    Отредактировать введённое без потери текста.

  2. Расширить

    Убрать мешающее ограничение.

  3. Перейти

    Открыть связанную категорию.

  4. Спросить

    Передать запрос для подбора.

Выходы расположены от небольшой правки запроса к помощи сотрудника.

Обновление, которое можно заметить

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

Сообщить о результате

В критерии 4.1.3 WCAG предусмотрена передача сообщений состояния вспомогательным программам без переноса фокуса на сообщение. К таким сообщениям относятся число найденных результатов и уведомление об их отсутствии: если после нажатия кнопки сайт лишь нарисовал надпись ниже поля, человек с программой чтения экрана может продолжать ждать ответа, хотя зрячий посетитель уже видит завершение поиска. На демонстрации полезно спросить: как человек, использующий программу чтения экрана, узнает, что поиск завершился? Исполнитель показывает озвучивание результата, пока курсор остаётся в поле запроса.

Перехватывать ввод тоже неудобно. Автоматический перенос курсора после каждого обновления мешает человеку дописать запрос и превращает подсказку в прерывание работы.

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

Телефон и крупный текст

Кнопки пустого состояния иногда делают мелкими, чтобы они выглядели второстепенными рядом с иллюстрацией. Однако после нуля это основные способы продолжить. Критерий 2.5.8 WCAG 2.2 задаёт минимум 24 на 24 CSS-пикселя для цели указателя с исключениями, включая достаточное расстояние. Проверяют область нажатия и соседние действия. Огромная декоративная картинка не заслуживает места за счёт этих кнопок.

Для вертикального содержимого критерий 1.4.10 использует ширину 320 CSS-пикселей. При такой ширине сообщение, запрос и действия остаются доступными даже при длинном названии товара: текст может переноситься, но кнопка изменения запроса не уходит за край области просмотра, заставляя посетителя искать продолжение интерфейса в горизонтальном направлении. Эти ориентиры относятся к доступности интерфейса. Они не задают обязательный размер иллюстрации или количество рекомендаций.

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

Путь после неудачного запроса

Пустое состояние можно испытать самостоятельно: ввести запрос без совпадений, применить ограничивающие фильтры и пройти все предложенные действия. Полезен не только вид сообщения, но и то, какой результат появляется после каждой кнопки.

Последовательность самопроверки

  1. Начать с пустого поля и убедиться, что приглашение к поиску не выглядит сообщением об ошибке.
  2. Ввести запрос, который не даёт совпадений, и найти этот текст рядом с нулевым результатом.
  3. Изменить часть запроса, сохранив остальное, и сравнить ответ.
  4. Получить ноль сочетанием фильтров, затем снять только одно условие.
  5. Открыть предложенную категорию и вернуться к исходному поиску.
  6. Повторить путь с клавиатурой и на телефоне, отмечая доступность поля и кнопок.

Сбой демонстрирует специалист. Искусственно ломать рабочий поиск ради приёмки не нужно: нужное состояние безопасно воспроизводят на тестовой версии с подготовленным ответом сервера.

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

Как выглядит завершение

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

Источники и полезные ссылки

  1. W3C: сообщения состояния ↗
  2. W3C: описание ошибок ↗
  3. W3C: Target Size ↗
  4. W3C: Reflow ↗

Интерфейсы и возможности сервисов могут меняться. Перед настройкой сверяйтесь с актуальной документацией.

Игорь Крещенко

Руководитель ШТАБ ИТ. Занимается управлением проектами, веб-разработкой, рекламой и PR. Подробнее об авторе →