Макет почти всегда рисуют в удачном состоянии: список заполнен, форма пустая и красивая, кнопка готова к нажатию. Живой интерфейс чаще бывает другим. Каталог без товаров, поле с ошибкой, заявка которая «думает» три секунды. Состояния интерфейса — это как раз эти моменты, и их забывают чаще, чем цвет кнопки.

Четыре состояния, без которых экран врёт

  • Пусто. В корзине ничего нет, в поиске нет результатов, в кабинете ещё нет заказов. Нужен следующий шаг, а не белая область.
  • Загрузка. Человек нажал и не понимает, сработало ли. Кнопку лучше блокировать и показывать, что запрос идёт.
  • Ошибка. Что сломалось и что сделать: поправить поле, повторить отправку, написать нам. «Error 500» этим не является.
  • Успех. Заявка ушла, заказ создан, файл загружен. Человек должен увидеть это на экране, а не гадать по почте.

Где это теряет заявки

Форма на корпоративном сайте — короткий сценарий, и ломается он на последнем шаге. Два клика по кнопке, потому что не было состояния загрузки. Письмо не пришло, потому что ошибку валидации написали серым под полем и её не видно. Это не характер бренда, это дыра в сценарии. Такие вещи хорошо видны, если смотреть сайт как путь до действия, а не как набор экранов — об этом же UX-аудит.

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

Как это закладывать в дизайн

На каждый интерактивный блок закладывайте не один макет, а короткую матрицу: покой, наведение там, где есть курсор, фокус с клавиатуры, занято, ошибка, готово. Для текстовых полей отдельно: пустое, заполненное, неверное. Тексты ошибок пишите сразу, не «потом на вёрстке».

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

Что не стоит раздувать

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

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