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 communicate 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 example, offline files can be managed from an offline state.

Functionality while offline

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

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...

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.

Offline interactions

Downloading a file

Offline functionality gives users access to files they’ve previously downloaded, such as videos and websites. To access them offline, users must download files onto their...

Offline functionality gives users access to files they’ve previously downloaded, such as videos and websites. To access them offline, users must download files onto their devices when they have an internet connection.

Download text

To indicate a file can be downloaded, display both the download icon and the word “download.” Include the file size to help users decide if it’s too large.

When offline, allow users to select files to be downloaded when connected to the internet.

DoPair the download icon with the word “Download.”
Don'tDon’t use a toggle control for downloading a single file. Toggles indicate whether a state is “on” or “off,” rather than a one-time download.

Iconography

After a file has been downloaded, indicate that it’s available offline by displaying the offline pin icon.

After a file has been downloaded, indicate that it’s available offline by displaying the offline pin icon.

The download and offline pin icons are available in the Material icon library.

Animation

To indicate that downloaded items can be accessed offline, show an animation of the download icon transforming into an offline pin icon. See Progress indicators...

To indicate that downloaded items can be accessed offline, show an animation of the download icon transforming into an offline pin icon. See progress indicators for guidelines.

A progress indicator transitions between the two icons.

Removing downloaded content

To make space, users may delete files on their devices. Your app should allow users to delete any downloaded files.

To make space, users may delete files on their devices. Your app should allow users to delete any downloaded files.

Display a remove action with a delete icon for downloaded files.
Show how much space will be saved by removing a file.

Up next