Skip to content

Patterns-Offline States

Offline states allow users without internet access to use apps.

  • Adapt to the connection :
    • Consider how your feature or app behaves when the user has a slow, intermittent, or lack of internet connection.
  • Illustrate functionality :
    • Use an element’s design to illustrate how an offline feature works.
  • Display available content :
    • It’s better to load something than nothing, while explaining that the internet connection is limited.

States and settings

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

For other guidelines of Offline settings Click Here.

Functionality while offline :

To communicate that an action works offline, display the offline pin icon with the text label “Offline.”

No functionality while offline :

  • Features should be indicated with "Cloud Off Icon" when offline.
  • use the text label “No internet” with the icon, if possible.

Offline places

  • Provide a place for users to manage their offline settings.
  • Mark this destination with the offline pin icon, if applicable.

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

Iconography:

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

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 and activity for guidelines.

Removing downloaded content

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