Consider how your feature or app behaves when the user has a slow, intermittent, or lack of internet connection.
Use an element’s design to illustrate how an offline feature works.
It’s better to load something than nothing, while explaining that the internet connection is limited.
Your app should indicate whether it’s offline or online, particularly if it has some features that are available offline, and some that aren’t.
It should also provide a place to manage offline files, if applicable.
To communicate that an action works offline, display the offline pin icon with the text label “Offline.”
An offline icon is displayed when the user performs an action offline.
An offline icon is displayed next to the URL when a website is accessed offline.
When offline, features that aren’t available should be indicated with the “cloud off” icon. Only show this icon when the product is offline. When possible, use the text label “No internet” with the icon.
Offline status is indicated along with helpful tips of what the user can do while offline.
While connected to the internet, a download action is offered for future offline use.
Provide a place for users to manage their offline settings. Mark this destination with the offline pin icon, if applicable.
Offline areas are available in this navigation menu.
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.
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.
Do.
Pair the download icon with the word “Download.”
Don’t.
Don’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.
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.
To indicate that downloaded items can be accessed offline, show an animation of the download icon transforming into an offline pin icon. See Progress and activity for guidelines.
A progress indicator transitions between the two icons.
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.
