Состояния экрана: загрузка, пусто, ошибка
Экран может быть в шести состояниях, а макет часто показывает одно. Здесь опишем каждое состояние и свяжем его с ответом сервера, чтобы интерфейс не замирал и не молчал.
Состояние экрана есть то, что человек видит в конкретный момент и при конкретных данных. У списка заказов это может быть сам список, пустота или сообщение об ошибке. Макет обычно нарисован для первого из них, потому что он выглядит лучше всего. Остальные состояния остаются на усмотрение разработчика, а он решает их по-разному.
Кейс: белый экран в «Моих заказах»
В «Узелке» покупатель открывает раздел «Мои заказы» и видит белый экран. Поддержка потом выясняет, что у одних покупателей заказов пока нет, у других не ответил сервер, а третьи не вошли в аккаунт. Выглядело всё это одинаково: пустой экран без единого слова.
Для покупателя это три разные ситуации, для системы тоже: пустой список, ошибка и отказ в доступе. Дальше разберём, как различать состояния и как их описать.
Шесть состояний
На практике для экрана со списком данных полезно различать шесть состояний:
- Загрузка. Запрос отправлен, ответа пока нет. Человеку нужно показать, что что-то происходит, например заглушку списка.
- Пусто. Запрос удался, но данных нет: у покупателя пока нет заказов.
- Ошибка. Запрос не удался: сервер сломался или не ответил.
- Нет доступа. Человек не вошёл в аккаунт или у него нет прав.
- Частичные данные. Пришла только часть данных, например без стоимости доставки.
- Длинный ответ. Данных так много, что все сразу не покажешь, нужна постраничная загрузка: список подгружают по частям.
Важно не путать пустоту и ошибку. В первом случае сервер ответил и сказал, что заказов нет. Во втором он не смог ответить, и мы не знаем, есть ли заказы. Если показать «Заказов нет» при ошибке, покупатель увидит неправду.
Таблица состояний списка заказов
Каждое состояние записывают строкой таблицы: что видит покупатель и что пришло с сервера. Код ответа сервера (число вроде 200 или 403) сообщает интерфейсу, что произошло. Коды ответов подробно разобраны в статье 05-09, а ошибки API в статье 05-11.
Что писать в сообщении для пустоты и ошибки
Пустое состояние - это место, которое заполняется, когда контента пока нет. В сообщении есть основной текст как заголовок, необязательный короткий поясняющий текст и одно главное действие. Для ошибки стоит кратко описать проблему и, если можно восстановиться, показать путь к этому.
Для «Узелка» пустой список может быть таким: заголовок «Заказов пока нет», пояснение «Первый заказ появится здесь» и кнопка «В каталог». Для ошибки подойдёт «Не удалось загрузить заказы» и кнопка «Повторить». Тексты условные: их взяли для иллюстрации.
Что проверять в макете и в требованиях
После таблицы удобно пройтись по трём вопросам:
- Есть ли для каждого состояния макет или хотя бы текст в требованиях.
- Различаются ли пустота и ошибка и в тексте, и в ответе сервера.
- Есть ли у ошибки следующий шаг для человека, например повторить запрос.
Строки таблицы заодно становятся основой для тестов: каждое состояние нужно проверить отдельно.
Где это встречается в работе
- Сверка макета с требованиями (статья 02-15).
- Описание ответов API для списков: пустой список не должен быть ошибкой.
- Разбор жалоб поддержки на «белый экран».
- Планирование тестов на отказы внешних систем и медленные ответы (статья 09-14).
- Требования к скорости загрузки из статьи 02-13.
Итог
У экрана со списком можно выделить шесть состояний: загрузка, пусто, ошибка, нет доступа, частичные данные и длинный ответ. Пустоту и ошибку не путают. Для каждого состояния записывают, что видит человек и что вернул сервер, а в сообщении пишут заголовок, пояснение и одно действие.
Что дальше
Дальше разберём коды ответов HTTP (статья 05-09) и ошибки API (статья 05-11), от которых зависит выбор состояния.
5 вопросов