Offline

The Offline pattern allows the Mobile user to have access to their data in non-connected environments. The importance of offline capability is growing and starting to be called 'Offline First'. This provides a better user experience when there is no connectivity, limited/slow bandwidth or the app is in offline mode.

Offline Message appear in response to a loss of internet connectivity. This pattern is an adaptation of the Page Level Message pattern.

An Offline Message appear in-line at the page level, beneath the Branding Area.

There are multiple considerations when making data available offline, a few that will be described in this pattern:

Mode: Some apps support the ability to be set an offline mode, even though they may still be connected to a network.
Message: Most apps providea message when there is limited or no connectivity. Briefly explain if data can be accessed or submitted. Used alone, it will be an anti-pattern.
Indicator: Some apps provide an indicator that the app is currently offline. This does not necessarily replace the message.
Settings: Some apps provide an ability to turn on/off the local saving of the data via a setting.
Saving: Some apps provide either manual (user selected) or automatic saving of data to the app or another app.
Synchronization: Some app provide either manual (user selected) or automatic syncing of data between the app and server.
Security: Consider how to handle security for data stored locally, while not authenticated.

Appearance

Appearance characteristics for this pattern.

Mode: This refers to putting the app into an offline mode, even though the device may still be connected to a network.
- Entry: Displays an option to enter the app in offline mode.
- Setting: Displays an option to set the app to an offline mode.
Message: This refers to a message informing the user that the app is not connected (or has limited connection) to a network.
- Alert: Display an alert popup with connection issue.
- Banner: Display a banner at the top (similar to inline message). The Facebook banner animates two messages.
- Empty Section Help: Display an empty section help text and image on the center of the page, with additional available options.
Indicator: This refers to how you indicate that you are offline and what you are displaying (or not).
- Color/Grayscale: Displays visited items in color and offline content in grayscale (see Flipkart).
- Flag/Badge: Display a custom indicator (i.e. tab on side of display, corner on image, etc...)
- Empty Section Help: Display empty section help for missing content.
- Status Bar: Network icon is not shown.
Empty State Message: This is a setting the user selects to collect data for offline use.
- Option: Display a switch, button, etc... to turn caching on or off to store data locally.
Saving: This refers to either manual or automatic saving of data to be available offline.
- Manual: Display a process to the save all or selected items to be available offline.
- Automatic: This automatically makes data available in downloads, favorites, playlists, etc...
- Other App: Displays the ability to Open With (or Save To) another app on the device.
Synchronization: This refers to the process of sync-ing the data between the server and the device.
- List: Displays a list of item being synchronized.

Behavior

Common behaviors for this pattern.

Connected: The app usually needs to be connected initially to download data and share settings.
Offline Mode: The device can still be connected to the network, but he app is not 'connected'.
Synchronization: The app or user may need to sync data to get updates from the server or send updates from the user.
- Conflicts: On sync conflicts may arise that need to handled.
Saving
- Manual: Displays options to determine which data to store locally. For example:
  - Map App: User can select a portion of a map to save.
  - Music App: User can select specific songs from playlist to save.
  - Email App: Previously downloaded email can be specifically selected by the user to be available locally.
- Automatic: The app automatically caches a select amount of data.
  - Map App: App automatically saves the last X map views.
  - Music App: App automatically saves the last X songs played.
  - Email App: App automatically saves the last X emails downloaded.
- Other App: Other apps on the device maybe use to open file with or save file to.
Security:
- EULA: Sometimes an End User License Agreement is required to accept before storing corporate data locally.
- Passcode: Sometimes a Passcode is required on devices with corporate data.
- Remote Wipe: Sometimes MDM capability support remote wiping of remote devices.

Usage

Usage guidelines for this pattern.

Provide a choice of other apps that are installed on the device that the user can download the file/data to.
Clearly communicate where files are saved to.
Clearly communicate what can be done when offline
Display the not connected message when not connected, not all the time.