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