Offline states

Offline states allow users to interact with an app without Internet access.


Principles

Adapt to connection

Adapt how your feature or app behaves when the user has a slow, intermittent, or no connection at all.

Illustrate functionality

Use the UI design to illustrate how an offline feature works and communicates its intended purpose.

Display available content

Load available content when the connection is limited, rather than not loading any content.


Offline functionality

If your app has features that are available when offline, and other features that aren’t, it should indicate whether it’s current state is offline or online.

For offline states, it should provide a place to manage offline files.

Functionality while offline

To communicate that an action in your app is working offline, display the offline pin icon with the text label “offline.”

Read More

To communicate that an action in your app is working offline, display the offline pin icon with the text label “offline.”

The app shows an offline badge when the user performs an action offline.

The app shows an offline icon next to the URL when a website is being accessed offline.

No functionality while offline

When features are not available offline, indicate them using the cloud off icon. Only show this icon when the product is offline. When possible, use...

Read More

When features are not available offline, indicate them using the cloud off icon. Only show this icon when the product is offline. When possible, use the text label “offline” along with the icon.

The app indicates when you’re offline and provides helpful tips of what the user can do while offline.

The app offers the user to download an offline dictionary when the user is connected again to the Internet for future offline use.


Offline settings

Provide a place for users to manage their offline settings. If you use icons in your app, mark this destination with the offline pin icon.

The navigation menu item “Offline areas” (5th in the list) indicates information saved for offline use.