How to design for slow networks and offline
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.
- 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.
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.
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.
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.
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.
Follow me on Twitter
This article was originally published at whitelight.co
Want To Learn UX?
Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.
This post contains affiliate link(s)
