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. Use this illustration and copy pattern when the area not loaded is the majority of the page.

Use our notification pattern to inform members when part of a screen doesn’t load because of a partial api, full api, or server error. Include how the member can retry loading the screen, if there’s a way to do so. This notification should appear at the top of the screen and dismiss automatically after a few seconds.

 

 

If the user isn’t connected to the internet or has lost connection, inform them using our notification pattern. Do not use a system alert. Unlike most of our notifications, the “No internet connection” notification should not automatically dismiss after a few seconds.

 

If a permission error occurs, use our error state pattern to guide members to Settings. If the user navigates to a screen where we do not have permission to perform the primary action on that screen, use an error state that links to the Settings app and deep link to Weight Watchers settings. Indicate which permission that screen requires in the error text. See the example on the right.

 

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.