Mobile App Error States Design
Errors in mobile apps are inevitable: network dropped, server returned 500, token expired, user entered invalid data. The question is not if errors will happen, but how clearly the app explains what went wrong and what to do next.
Error Hierarchy by Severity Level
Not all errors are equal, and UI must reflect that:
Inline errors—below form field, on validation. Red text 12pt below field, warning icon in the field itself. Appear without jumping animation—field should not change height and move other content.
Toast / Snackbar—non-intrusive errors not requiring action: "Failed to update data," "Sync error." On iOS this is UINotificationFeedbackGenerator + custom banner at top, on Android—Snackbar from Material Design 3. Appear over content, do not cover key actions, auto-hide after 4–5 seconds.
Full-screen error—when screen cannot show content at all: no network on first load, critical server error. Occupies screen center (like empty state, but different illustration and tone), mandatory "Try again" button.
Modal / Alert—for errors requiring explicit confirmation: session expired, need to log in again; critical action impossible to perform. Minimum—one button. Destructive button red only if action is irreversible.
What to Write in Error Text
Main design mistake—"Error 500" or "Something went wrong." User does not know what this means and does not know what to do.
Rule: each error message = reason + action. "Failed to load list—check internet connection" → "Retry" button. "Session expired" → "Log in again" button. Concrete and no technical codes.
Network errors vs server errors—different messages. No internet: "No connection." 503 from server: "Service temporarily unavailable." These are different states, user must understand the difference.
Offline Mode
Separate state: app works, but without network. Show "No internet" banner (not modal, not block), content from cache if available, locked actions requiring network—with icon and tooltip "Available when connected."
On iOS NWPathMonitor, on Android ConnectivityManager + NetworkCallback—developer side, but design must account for all transitions: online → offline, offline → online (banner removed with animation).
Timeline—1 day for complete error states set. Estimate is clarified after reviewing requirements.