Connect, No Matter the Speed
--
Design for slow, intermittent, and offline connectivity, to reduce user frustration
I wrote this story with Susanna Zaraysky, a Content Strategist on the Material Design team.
With many working from home around the world, more people are consuming high bandwidth content through streaming videos, conference calls, and sending/receiving files. The high demand for internet and shared bandwidth in residences combined with technological infrastructure problems and extreme weather events means that connectivity is often intermittent. The connectivity challenges that used to be common in rural areas and emerging markets are now experienced globally—in both urban and rural areas. Overloaded networks drop connections, leaving users without access for times ranging from seconds to hours. Many users give up on tasks, or try to complete them when the internet is less slow, such as at night. Others are offline due to limited internet coverage or to save money on mobile data or battery.
Access to Wi-Fi ranges widely, with some people rarely or never having access to functional Wi-Fi networks, while others maximize on Wi-Fi to download as many files as possible for offline use. The Wi-Fi signal icon may show that there is a strong connection, but, unfortunately, the user has Lie-fi: a slow or intermittent connection or no connection (offline).
All these scenarios can create frustration and confusion.
We’re sharing some examples of how to design apps to minimize user frustration due to connectivity with these strategies:
- Keep users engaged by serving a delightful experience regardless of internet connection.
- While in connectivity limbo, show the user what’s happening to reduce confusion and frustration — rather than freezing or showing a blank screen.
Progressively load content and increase fidelity
The way images are loaded can influence perceived latency (how long the user feels they have to wait) and real latency (the technical time it takes to load an image).
Aim to reduce perceived latency without increasing real latency by loading a blurry image or skeleton content before the full-resolution image. This method is preferred to showing a partially loaded image because it can take additional time to load a partial image.
Give users a sense of what is to come by showing placeholder content, such as grey “skeleton” content.
Progressively load content in order of priority
Loading in order of priority can reduce the perceived latency on slow or intermittent connections. Loading multiple units of content (text, videos, and images) is likely to take more time than loading one item. Load text first before images. Decrease the time users wait to load content by loading individual elements in their order of importance rather than all at once.
Load content in order of priority rather than all at once.
Load mock content
While the user is waiting for the app to load, show mock content to reduce perceived latency and onboard the user about how the app works.
Generate mock content about the app.
Intermittent connectivity experiences
Make the experience seamless when internet strength may fluctuate between 2G to 3G to 4G speeds. Don’t block the user from using your app. Create the impression that the app is still working by queuing tasks or pre-caching and downloading when the internet connection is available.
Loading progress indicators
Connectivity can vary in speed and reliability. Show users their connectivity status, especially while they wait for content to load or download.
Indeterminate loading indicators show that loading is happening. Determinate loading indicators show how much of the content is loaded. If possible, show both.
Show users that content is loading by using progress bars or placeholder content. Offer both determinate and indeterminate status, if possible. Showing how long the download takes increases transparency.
Account for all types of connectivity cases
Design for all types of possible connectivity cases: success, partial loading, indefinite wait time, and complete failure. See these examples from the YouTube app.
Other slow or intermittent connectivity options
Not all users will know to look at the status bar for the airplane mode, Wi-Fi signal, and mobile data off icons to see if they are online. For some users, the icons are too small. To make it clear to users, consider being explicit about connectivity status within the app UI.
Connectivity Status Messaging
Users may get frustrated or not understand if the app functionality changes unexpectedly due to connectivity. For internet-dependent apps, show a message that informs the user of the current connectivity state or an important change in connectivity state.
Communicate important connectivity states that affect app functionality, such as when flight mode is enabled or mobile data is off.
When the connection status is fluctuating, show the most up-to-date status information within the UI.
If your app is waiting for connectivity to complete a task, indicate this status within the UI.
Delayed action
In a task flow, if user input isn’t needed, consider adding an option for the app to complete the task, such as a web search, in the background when connectivity is reestablished. Notify the user once the task is completed.
Give options
Offer the user options that can work under slow connectivity environments.
Connectivity issues existed before massive amounts of people began working from home and will continue to persist. Designing alternatives for various connectivity scenarios will make your users’ lives just a little bit easier.
Screenshots courtesy of the Duo, Google Lens, GPay India, Google App, Google Go, Google Docs, GSuite Chat, and YouTube teams.
Additional Reading
- Offline states (Material Design)
- Connectivity for Billions (Android Developers, 2020)
- Network Analysis (Google Developers, 2020)
- Multi-Device Content (Google Developers, 2020)
- UI and content for billions (Android Developers, 2020)
- To Make Apps Accessible, Make Them Compatible with Different Devices (Medium, Google Design, 2019)
- Understanding Low Bandwidth and High Latency (Google Developers, 2019)
- Designing for Global Accessibility (Google Design, 2018)
- Connectivity, Culture, and Credit (Google Design, 2017)
