Offline Principles

Cowritten with Megs Fulton

Many of us design and build apps in air-conditioned offices in major cities, using the latest devices with perfect internet connections. We don’t often think about how apps should work without a strong internet connection.  

It’s no wonder so many apps feel clunky or broken with a flaky internet connection, or none at all.

We decided to question ourselves, and to start treating the offline state as a core part of the experience rather than an edge case. While not everything can happen offline, plenty of tasks like writing a blog post should still work regardless of your connection.

Guiding principles

Our principles describe how our apps should behave with a poor connection. They outline what we aspire to achieve, and serve as guidelines for building future features with offline in mind.

1. Nondisruptive, contextual communication

If we detect that a data connection is unavailable, we alert the user when it’s pertinent to their recent actions. We communicate the message so as not to disrupt their workflow.

Example 1: When there is a connection loss we avoid showing a blocking alert. We allow the user to continue writing. But we give them information in context and let them know what to expect.

Example 2: We were showing blocking alerts when we tried to load unavailable data. We’re trying to cache where possible. But when we can’t do so, we fall back to an inline error rather than a blocking alert.

2. Continuous and consistent

The app experience should not differ significantly on a bad network connection. The offline experience is managed and messaged consistently. The behaviours are also similar across devices and platforms so users learn what to expect.

Example 1: Rather than requiring an internet connection to load the user’s posts, we cache them on the device so that the user can still be productive while offline.

Example 2: We don’t want users to have to learn two ways to use our app. Rather than providing different actions while offline, we show users what is possible and allow them to try commit actions.

3. Inspire confidence with reliable outcomes

The user feels confident using the app for important tasks with an unstable connection. When an action can’t be completed due to the connection state, we communicate it clearly.

Example: The user is trying to upload an image. We ensure the data isn’t lost and communicate the outcome of the action.

We believe the offline experience is important. These principles will guide us improving our apps, and hope you find them useful too.

Featured image: Photo by Eran Menashri on Unsplash

By Chris O'Sullivan

Designer at Automattic