“You’re not connected to Internet.” How to design for slow networks and offline.

“You’re not connected to Internet.” How to design for slow networks and offline.
Image by Franck

When designing a new app, we rarely think about what happens when the connection is slow or lost. A connection issue seems like a temporary problem that requires nothing more than an error message. However, there are still situations when users can't connect to the internet, and issues with an internet connection can affect the user experience of your product. It is especially true for mobile apps since mobile networks are notoriously inconsistent.

In this article, we will discuss five recommendations on designing for slow networks and offline.

1. Offer key content and functionally for offline usage

Ideally, your app should work equally well when users are offline and online. If your app doesn't require a lot of data, then you should cache all data by default. Yet, many products require a permanent connection to the internet (i.e., online shopping, social networks, maps).

In this case, it's recommended to adapt to connection—load available content and cache it while users are online (auto-download and auto-save it locally on the device). It will help you create engagement even when the user is offline.

Pro-tips:

  • Learn how your users use your app. Use analytic tools to understand how users interact with your app while being offline. It will help you understand what content and functionality they need.
  • Allow users to download content to work offline. This approach is beneficial for music players and maps. The user should be able to download music/maps so that they can travel in areas where they don't have access to the internet. Try to make 'Save for offline' an obvious part of your interface.
Google Maps shows the “Offline maps” option along with other navigation options.
  • If you design products with time-sensitive information such as stock exchange or currency converter apps, you need to show the last time the app was updated. It will prevent users from making incorrect decisions.

2. Inform users of their current state and change of state

If your app has features that are available only when users are online, it should indicate whether its current state is offline. The offline state shouldn't be fancy—you can display the offline pin icon with the text label "You're offline" in the form of a material design toast element.

Instagram shows an offline badge at the bottom of the screen when the user is offline.

Pro-tip: Educate the user so they understand what they can do in the offline mode. Add this information to user onboarding.

3. Save user’s in-app progress

Losing the internet connection and your progress in the app is one of the most frustrating things in a user journey. For activities like filling out forms, the app should cache user progress and allow users to re-engage right from the place they've stopped.

Pro-tip: Reassure users that their progress will be saved and no data that they've entered be deleted. For example, when a first-time user writes a new message and taps "Send" in messenger, they should have a reassuring message "Message will be sent when the connection is restored." For regular users, it will be enough to have a visual indication of progress.

Telegram uses a loading spinner next to the message to reassure the user that their data is safe.

4. Use a skeleton screen to create an impression of fast loading

If it takes more than just a couple of seconds to load content, you can use a skeleton screen instead of showing a blank screen with an infinite loading spinner. A skeleton screen is a wireframe version of your screen that displays while content is gracefully being loaded. It acts in an in-between state and gives you a couple of seconds so you can load content.

LinkedIn uses simple shapes along with blinking animation to create a sense of fast loading. Image by LinkedIn.

Pro-tip: Try to use your app on a slow internet connection. For example, Meta ran 2G Tuesday, where their mobile development team uses 2G connections to understand how the product they've created behaves.

5. Design empty state for offline usage

Provide full-screen empty states for apps that must have internet access. When no functionality is available for users while they are offline, it's recommended to design an empty state. Along with the short description of offline mode, it's recommended to provide a “Retry” button so that the user can tap on it once they restore the connection.

Empty state should feature the text label “offline” along with the icon and Retry button.

Since the app can check connections automatically, the button doesn’t provide much value from a functional perspective, yet, it gives users a sense of control over the system. This ‘fake button’ approach is similar to the New York “Walk” button at a pedestrian crossing.