Состояния и обратная связь — Примеры

Пример 1 — Перечислите состояния, затем замерьте нажатие

На экране профиля есть один элемент сохранения, и нарисован у него пока только вид idle. Перечислите его состояния и покажите empty, loading, error и success как артефакт — вместе с тем, что пользователь видит, пока идёт медленный вызов сохранения.

Элемент: "Сохранить изменения" на экране профиля
Нарисовано пока: только idle — синяя заливка, белая подпись
Не нарисовано: empty, loading, error, success, disabled
Самое медленное действие: сохранение иногда занимает четыре секунды

Решение

idle     подпись "Сохранить изменения", заливка colour.action.default
loading  0-100ms: ничего не меняется
         100ms-4s: индикатор заменяет подпись, элемент заблокирован,
         поэтому второе нажатие не отправит дубликат сохранения
success  подпись "Сохранено", заливка colour.success.subtle, возврат в idle
error    подпись "Сохранить изменения", сообщение под полем:
         "Такой адрес электронной почты уже используется."
         Все значения сохранены.
empty    данных профиля нет: показаны заполнители, элемент сохранения
         заблокирован с причиной "Добавьте имя, чтобы сохранить"

Пропущено намеренно: ничего из этого списка.

Если нарисовать loading, error и success до релиза, четырёхсекундный вызов ни разу не отрисуется как зависание, а повторное нажатие не отправит дубликат сохранения; случай empty при этом получает причину вместо молчаливой серой кнопки. Однако стоит выпустить только состояние idle — и первый медленный ответ выглядит как сломанный элемент.

Пример 2 — Ошибка, которая не стоит задачи

Шаг оплаты падает из-за отклонённой карты после того, как пользователь заполнил всю форму, а второй элемент ждёт значения, которое так и не ввели. Напишите ответ на ошибку и случай disabled так, чтобы ни один из них не стал тупиком.

Ситуация
  все поля заполнены, процессор отклонил карту
  второй элемент, "Отправить квитанцию почтой", требует почтовый адрес
  этот адрес пока не введён

Решение

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

Элемент квитанции почтой
  Заблокирован, строкой ниже: "Добавьте почтовый адрес, чтобы использовать это."
  Разблокируется, как только адрес введён.

Формулировка сообщения: говорит, что сломалось и что делать дальше,
а не "Ошибка 402".

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