Error States

 

Similar to empty states, we use illustrations and text to indicate when an area has not been properly loaded and what a member can do to retry or fix the problem. 


Partial Error

When part of the page doesn’t load because of a partial api, full api, or server error, but other parts of the page can be loaded, use a snackbar to inform the user that they can retry. This notification appears at the bottom of the screen and stays for a short period of time (“short” is defined programmatically).

 

And-Error-Snackbar-partial.png

No Connection

If the user isn’t connected to the internet or has lost connection, inform them using a snackbar with copy saying “No internet connection” and the option to retry.  The snackbar should automatically dismiss after a short period of time. The user should still be able to interact with as much of the app as possible.


Permissions Error

Always include the permission request in the app flow before showing an error. If the user denies permission, provide feedback as to why the app requires permissions with a link to the Settings app and deep link to Weight Watchers settings. Indicate which permission that page requires. Use a transient snackbar that dismisses it after a long period of time.

 

And-Error-Snackbar-permissions.png

All Systems Down

When all of our systems are down because of a server problem, we display a page that prevents members from accessing a non-functional app. This page allows the member to manually retry loading the app, while also showing a counter for when we will automatically retry next.