Design for Offline

Nearly 1.6 billion people around the world live outside the range of mobile internet networks. Millions more bounce in and out of network connectivity when on-the-go. Wi-Fi access may also be scarce, or the cost of mobile data prohibitive. In Uganda, for example, internet access can cost nearly 11% of monthly expenses. People living in areas with high-priced networks regularly turn off mobile data to control costs. From our research, we see that people around the world regularly go offline, whether in Lagos or Los Angeles, intentionally or unintentionally. Offline states are essential components of today’s digital experiences.

Because the field of offline design is new, designers have room for innovation and creativity—providing notifications and options that best suit the needs of their audience. Google designers Rachel IIan Simpson and Pendar Yousefi developed these Material Design guidelines to help you build better offline capabilities into your global products.

Clearly indicate offline functionality

Offline design is not standardized across mobile products, but there are patterns you can use to help people understand your product’s offline capabilities. For example, designers should indicate when someone can use an app or website offline by displaying the offline pin icon paired with the word “offline.” Specifically, products should show the offline pin icon when the user has downloaded content for offline use but is still online. Products should also display the offline icon when the phone itself is offline. Therefore, a user may see this icon when they’re connected to the internet and when the app is offline.

Display no functionality

Pairing text with visuals—especially on buttons and other affordances—helps improve overall usability. When there is no online functionality, for instance, pair the “cloud off” icon with a clear text description like “no internet” so that users know what the icon signifies. Graphical cues and iconography can also aid UI comprehension for low-literate and non-native English speakers.

Allow downloading for future offline use

Data plans in some countries can cost upwards of 10% of a typical user's monthly income, so displaying the file size can help users determine whether they want to spend that amount of data on a single download. Additionally, low-cost phones often have little storage. Indicate content that can be download for future offline use by displaying the download icon paired with the text label, “download” and the size of the file. Designers should also make it easy to delete files, in case users want to conserve storage space on their phones. As Material Design guidance suggests, display a remove action with a delete icon for downloaded files and show how much space will be saved by removing a file.

Transition from downloading to offline-ready

Users may abandon files that take a long time to load, so it’s always best practice to set expectations around download time. Use an animation to show when a file is being downloaded and when it’s ready for offline use. While the file is downloading, display how many seconds it will take to download—enabling the user to cancel or pause the download. And don't forget to communicate that the download is complete.

Make offline file location discoverable

If offline is a major feature of your app, consider making a tab or button on the home screen to help users easily find all of their offline files. Apps often list offline features in different places (i.e., “more,” “settings” or “menu”).  Wherever you note them, it's important make offline files discoverable.

Notify users when connection is restored

People often switch their phone to airplane or data-off mode to save data, cost, and battery life. Design with these experiences in mind. One method is to provide a notification to alert users when the app or content is online again and able to complete their request. For example, videos, search queries, or messages can be queued up so that when the connection is restored, users are notified about the content waiting for them. Using this approach, the system serves the content without the user losing a sense of trust or responsiveness when offline.

Be sure to communicate these actions and updates within your UI. Use a snackbar—a single line of text directly related to the operation performed—to show that the app is waiting for a connection to download. For example, a snackbar with the text “Your search result is ready” informs the user that their query has been answered.

Offline states offer opportunities for delight

Offline design can take an already popular application to the next level by delighting users and improving accessibility for those with limited connectivity. Challenge your team to reimagine the offline state as an opportunity for innovation rather than an obstacle. Consider common use cases in which someone could lose internet connection and still make the most of your product. For example, your app could help a busy parent search for a recipe on their way to the market. Or help a new college student feel a little closer to home by allowing them to view photos of friends and family—even without a steady internet connection. Especially when building for global audiences, offline design is an essential part of understanding and responding to users’ needs.