Дизайн состояний ошибок экранов мобильного приложения
Ошибки в мобильном приложении неизбежны: сеть пропала, сервер вернул 500, токен протух, пользователь ввёл невалидные данные. Вопрос не в том, будут ли ошибки, а в том, насколько понятно приложение объясняет, что пошло не так и что делать дальше.
Иерархия ошибок по уровню критичности
Не все ошибки одинаковы, и UI должен это отражать:
Inline-ошибки — под полем формы, при валидации. Красный текст 12pt под полем, иконка предупреждения в самом поле. Появляются без анимации прыжков — поле не должно менять высоту и двигать остальной контент.
Toast / Snackbar — ненавязчивые ошибки, не требующие действия: «Не удалось обновить данные», «Ошибка синхронизации». На iOS это UINotificationFeedbackGenerator + кастомный баннер вверху, на Android — Snackbar из Material Design 3. Появляются поверх контента, не перекрывают ключевые действия, автоматически скрываются через 4–5 секунд.
Full-screen error — когда экран не может показать контент вообще: нет сети при первой загрузке, критическая ошибка сервера. Занимает центр экрана (аналог empty state, но с другой иллюстрацией и тоном), обязательна кнопка «Попробовать ещё раз».
Modal / Alert — для ошибок, требующих явного подтверждения: сессия истекла, нужно войти заново; критическое действие невозможно выполнить. Минимально — одна кнопка. Деструктивная кнопка красного цвета только если действие необратимо.
Что писать в тексте ошибки
Главная ошибка дизайна — «Ошибка 500» или «Something went wrong». Пользователь не знает, что это значит, и не знает, что делать.
Правило: каждое сообщение об ошибке = причина + действие. «Не удалось загрузить список — проверьте подключение к интернету» → кнопка «Повторить». «Сессия истекла» → кнопка «Войти снова». Конкретно и без технических кодов.
Ошибки сети vs ошибки сервера — разные сообщения. Нет интернета: «Нет соединения». 503 от сервера: «Сервис временно недоступен». Это разные состояния, и пользователь должен понимать разницу.
Оффлайн-режим
Отдельное состояние: приложение работает, но без сети. Показываем баннер «Нет интернета» (не modal, не block), контент из кэша если есть, заблокированные действия требующие сети — с иконкой и tooltip «Доступно при подключении».
На iOS NWPathMonitor, на Android ConnectivityManager + NetworkCallback — это на стороне разработки, но дизайн должен предусмотреть все переходы: online → offline, offline → online (баннер убирается с анимацией).
Срок — 1 день на полный набор error states. Оценка уточняется после анализа ТЗ.