Designing Reliable Experiences
Providing an offline experience in a Progressive Web App means a user experience that is consistent with what they expect from native applications, which often have some offline functionality: at least the UI is available and reasonable error messages are displayed if there are network connectivity issues.
When defining the offline experience consider applying design thinking methods and brainstorm what offline functionality can benefit the user. Here are some “How-Might-We” examples for brainstorm inspiration:
User First Principles for Offline
“Connectivity is not On or Off. It is On and Off. ”
When designing reliable experiences, think about connectivity as something that is constantly changing its state. Especially when on mobile devices, users can be traveling underground, entering elevators or just simply experiencing bad connectivity issues. Providing an offline experience opens new ways to engage with users and keep them using your PWA in all connection states.
When defining an offline experience, consider the following questions:
Informing about the change of state
On a very basic level, at least inform users about the change of state. Three elements that can be used to describe this change are:
- Copy - words to inform users about the change of state
- Icons - visuals that help illustrate the current status
- Colors - to highlight the content available offline
The best practice is to use at least two of the above, to avoid user confusion. When using colors, greying out certain areas of the website can be interpreted not only as an offline state, but also as if some of the items are out of stock. So, to make things clear, also use copy to inform the user.
With copy there are a few things to consider:
- Keep things simple. Remember, users are often not technically minded
- Avoid blaming the user or systems for a bad connection. Instead, simply confirm the state and inform users of the next actions
- If the brand strategy includes informal language, use it with care, as it can undermine the credibility of the PWA in such a sensitive and vulnerable moment
❌ Don’t | ✔ Do |
“You are not connected to the Internet. Please reconnect and retry.” “Looks like our server is down.” “Sorry, something went wrong on our end.” “Looks like something was unplugged. Thanks for your patience while we are getting this fixed.” | “You are currently offline.” “We will try to reconnect you in 30 seconds.” “The page will be loaded once you are back online.” “Press here to refresh the page.” |
❌ Don’t blame the user. ❌ Don’t ask the user to fix things. ❌ Don’t blame your own systems as it affects service credibility. ❌ Use informal language with care. | ✔ Confirm the state as-is with no blame. ✔ Reassure the user that they don’t need to “fix” anything ✔ Explain what is going to happen when the connection is back (whether the user needs to refresh or the page will reload automatically). |
A popular UI component to inform the user about the change of state is a pop up toast (or a snackbar). It can appear in any place in the UI, but check on every page that it doesn’t block navigation elements. Besides the copy, the toast can also carry an icon and a call-to-action button for example: refresh the page or dismiss the notification.
Providing an offline experience
In addition to simply notifying the user they are offline, many types of experiences can be provided offline.
Fallback experiences
These experiences provide an alternative experience to the user when the connection is interrupted. Examples are:
- Show a static offline page. This could contain alternative ways to reach the business, such as a store locator, contact info to get in touch with the call center, a contact form that is submitted when the user is back online
- Be useful and show relevant information from the user’s account. A travel company could make tickets or boarding passes available. A retailer could show saved items or items in the basket
- Entertain users with a game or puzzle or fun facts, and occupy their time while they wait for the connection to return
Continue browsing offline
Caching can be used to allow users to continue browsing when they are offline.
- Use pre-caching to let the user continue browsing important areas of the site such as top categories or items on sale
- Use run-time caching to make any previously viewed page available
Be mindful to make users aware of what content is available to browse, provide appropriate navigation and information on what actions are possible.
Complete tasks offline
More advanced offline experiences can allow users to complete their current task, such as adding items to the cart, saving to a wishlist, completing a form or even complete all the details in checkout, right up to payment. It is important to reassure the user they can continue their task and their actions won’t be wasted, despite being offline.
When the connection is back, inform the user about the change of state and update the content if there are any changes required. If the user can be kept within their current context, reload the page automatically. If the context cannot be kept, give control to the user to refresh the page with a button.
