Published in


Error States, Your New Bestie

A guide for designers on how to identify, classify, design and document error states for your mobile app (so they’re less intimidating)

Illustration of a broken robot sitting down with crossed out eyes, 404 error on body and steam coming out the side

What is an error state?

What are the general causes of errors?

Step 1: Design your happy paths

Four mobile screens showing a successful sign up flow

Step 2: Coordinate with Product Manager and Developers

Step 3: List out all error states

Table listing out all error state with screens affected checked off

Step 4: Create a classification system

1 in red circle to indicate critical errors. 2 in orange circle to indicate Moderate, Nondismissible errors. 3 in dark yellow circle to indicate Moderate, Dismissible errors. 4 in yellow circle to indicate Low errors. 5 in green circle to indicate Minor, Retry errors.

Step 5: Brainstorm general design patterns for each level

Table explaining each error state. 1, Critical. App is not able to function. Red banner. 2, Moderate, Nondismissible. Experience is compromised and users need to stay aware. White banner. 3, Moderate, Dismissible. Experience is compromised and users need to acknowledge. System alert. 4, Minor. Experience is not compromised but information is missing. In-line messaging or hidden/replaced. 5, Minor, Retry. Unknown errors where retrying usually fixes. Empty state with retry button.
Showing four examples of error states. First, input entry with red border around field and subtext explaining error. Second, system or device alert with “OK” button. Third, dark red banner with error icon and explanation of error. Forth, full screen design with illustration, explanation of error and “Try Again” button.

Step 6: Assign a level to each error state and apply design patterns

Error state table previously shown now with level filled out with number 1 to 5 from classification system.
Happy path designs now include red arrows to show designs for error states within the flow

Step 7: Review with Product Manager and Developers

Step 8: Define rules of hierarchy

Step 9: Organize into a deliverable and share!

Error states table, classification system explanation and error state design on iPhone



Thoughts from the Livefront team

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Phylicia Flynn

Interior Designer transformed into UX/Product Designer. NJ transplant living in the Midwest. Has an affinity for dogs, spicy food and coffee shops.