Фильтр ничего не нашёл, корзина пуста, форма не отправилась, страница не открылась. Эти экраны проектируют в последнюю очередь или не проектируют вовсе, а именно на них человек чаще всего решает уйти. Разбираемся, что показывать и как формулировать.
Коротко
- Пустое состояние — не отсутствие интерфейса, а его часть.
- Сообщение об ошибке говорит, что делать, а не что случилось.
- Технические тексты пишет не разработчик.
- Эти экраны видят редко, поэтому их редко проверяют.
О чём речь
| Ситуация | Что обычно показывают |
|---|---|
| Фильтр ничего не нашёл | Пустой список |
| Поиск без результатов | «Ничего не найдено» |
| Пустая корзина | «Корзина пуста» |
| Нет заказов в личном кабинете | Пустая таблица |
| Форма не отправилась | «Ошибка. Попробуйте позже» |
| Страница не найдена | Стандартная страница ошибки |
| Раздел ещё не наполнен | Пустота |
Общее у всех этих экранов. Человек оказался в тупике, и у него нет следующего шага. Хорошо оформленное пустое состояние отличается от плохого именно этим: оно объясняет, почему тут пусто, и предлагает, что делать дальше.
Пустые состояния
Пустой экран — такая же часть интерфейса, как заполненный. Он должен содержать три вещи.
Что произошло
«По выбранным фильтрам товаров нет» вместо пустого места.
Почему так
Слишком узкие условия, товар закончился, раздел пополняется.
Что можно сделать
Сбросить один фильтр, посмотреть похожее, оставить заявку.
| Экран | Что предложить |
|---|---|
| Фильтр ничего не нашёл | Какой фильтр снять, чтобы результаты появились |
| Пустая корзина | Популярные товары, недавно просмотренные |
| Нет заказов | Приглашение в каталог, а не пустая таблица |
| Раздел не наполнен | Когда появится и куда обратиться сейчас |
Про фильтры особенно. «Ничего не найдено» после выбора пяти условий — частая ситуация в каталогах. Подсказка «если снять фильтр по цене, найдётся 12 товаров» возвращает человека в процесс выбора вместо ухода. Это заметно сложнее в разработке, чем пустой список, и заметно полезнее.
Сообщения об ошибках
Плохо
- «Ошибка. Попробуйте позже»
- «Некорректные данные»
- Код ошибки без пояснения
- «Заполните все обязательные поля»
- Текст от разработчика как есть
- Сообщение исчезает через секунду
Хорошо
- «Не удалось отправить. Позвоните: номер»
- «Телефон в формате +7 900 000-00-00»
- Понятное описание вместо кода
- Подсветка конкретного поля
- Текст, написанный человеком
- Сообщение остаётся до исправления
Правило формулировки. Сообщение об ошибке отвечает на вопрос «что мне теперь делать», а не «что произошло внутри системы». Человеку не нужно знать, что сервер вернул неожиданный ответ, — ему нужно знать, потеряны ли его данные и как всё-таки отправить заявку.
Ошибки в формах
Отдельный случай: здесь ошибка возникает часто и стоит дороже всего — человек уже собрался обратиться.
Проверяйте по ходу, а не после отправки
Ошибку в телефоне показывают сразу после ввода, а не после нажатия кнопки.
Показывайте у конкретного поля
А не общим сообщением сверху.
Не стирайте введённое
Потеря заполненной формы — верный способ потерять обращение.
Принимайте разные форматы
Телефон со скобками, пробелами и без — приводите к нужному виду сами.
Давайте запасной путь
Если отправка не работает, покажите телефон и почту.
Четвёртый пункт — частая и обидная потеря. Форма требует номер строго в одном формате и отвергает тот же номер, записанный иначе. Человек пробует дважды и уходит. Приведение формата на стороне сайта — задача на полчаса, а отсекает она реальные обращения.
Как это проверить
Пройдите путь с ошибками намеренно
Введите телефон неправильно, примените несовместимые фильтры, откройте несуществующий адрес.
Посмотрите на каждый экран
Понятно ли, что произошло и что делать.
Проверьте пустую корзину и кабинет
У нового пользователя всё пусто, и это первое, что он видит.
Найдите тексты в коде
Часто там обнаруживаются сообщения, написанные для отладки.
Посмотрите записи визитов с ошибками
Видно, уходит человек или исправляется.
Почему это редко проверяют. Эти экраны видят единицы процентов посетителей, и при обычном тестировании на них не попадают. Но именно на них теряются люди, которые уже проявили намерение: заполнили форму, отфильтровали каталог, зарегистрировались. Полчаса намеренной проверки обычно находят три-четыре места, где человек оказывается в тупике.
Частые вопросы
Что показывать, если фильтр ничего не нашёл?
Объяснение, почему пусто, и подсказку, какой фильтр снять, чтобы результаты появились: «если снять фильтр по цене, найдётся 12 товаров». Это возвращает человека в процесс выбора вместо ухода.
Как формулировать сообщения об ошибках?
Так, чтобы они отвечали на вопрос «что мне теперь делать», а не «что произошло внутри системы». Вместо «Ошибка, попробуйте позже» — «Не удалось отправить, позвоните по номеру такому-то».
Когда проверять правильность заполнения формы?
По ходу ввода, а не после нажатия кнопки, и показывать ошибку у конкретного поля. Введённые данные при этом стирать нельзя — потеря заполненной формы почти всегда означает потерю обращения.
Почему такие экраны редко проверяют?
Их видят единицы процентов посетителей, и при обычном тестировании на них не попадают. Но теряются там люди, которые уже проявили намерение — заполнили форму или отфильтровали каталог.
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
