Connect, No Matter the Speed

Ramprakash Ravichandran
Aug 19 · 6 min read

Design for slow, intermittent, and offline connectivity, to reduce user frustration

Illustration by Kai Yee Tay, Next Billion Users illustrator

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.
Image for post
Image for post
Illustration by Taylor Herr, Next Billion Users visual designer

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.

Google Lens search tool highlighting text
Google Lens search tool highlighting text
Google Lens shows a grey “skeleton” UI indicating what is being loaded.

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.

YouTube in landscape mode, the video is black and video title, thumbnails and descriptions are grey
YouTube in landscape mode, the video is black and video title, thumbnails and descriptions are grey
YouTube first loads the main video, then the video title and description and lastly, the thumbnails and titles of other related videos.

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.

#1 Duo app dialog asking for contacts access, #2 screen with Contacts avatars
#1 Duo app dialog asking for contacts access, #2 screen with Contacts avatars
(1) The Duo app shows mock content in the form of product benefits before the user completes onboarding, helping them understand what to expect. (2) After the user grants Contacts permission, Duo progressively changes the UI and populates it with real content. The user’s friends from their Contacts appear.

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.

#1 Payment app showing progress in finding bank account, #2 Notification screen with open settings, download indicator
#1 Payment app showing progress in finding bank account, #2 Notification screen with open settings, download indicator
(1) In Google’s GPay India app, the loading indicator used while adding bank accounts combines a determinate expectation (a fixed timeout countdown) with an indeterminate progress (circular indicator around the time countdown). (2) The download notification shows how much time is left to download the large game file.

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.

#1 YouTube, 3.5 video thumbnails, #2 blank screen, #3 Offline illustration and message telling user to try again
#1 YouTube, 3.5 video thumbnails, #2 blank screen, #3 Offline illustration and message telling user to try again
(1) Successful loading (the video thumbnails are present). (2) The circular progress in the center of the screen shows partial loading when the connection breaks or is intermittent. (3) Complete failure state with an option to retry.

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.

Google Go search app with 16 app and website icons
Google Go search app with 16 app and website icons
(1) The Google Go app shows that the user is offline in “Aeroplane mode” with both the aeroplane mode icon and text label in the snackbar. (2) The Google Go app shows the mobile data off text label and the signal cellular off icon in a snackbar within the app.

When the connection status is fluctuating, show the most up-to-date status information within the UI.

Chat app with conversation screen, area to type and keyboard
Chat app with conversation screen, area to type and keyboard
(1) When the Chat app is offline, a progress bar on top shows the status, and the send button is disabled. (2) When the Chat app is connected, the progress bar disappears and the send button is active, allowing the user to continue sending a message.

If your app is waiting for connectivity to complete a task, indicate this status within the UI.

Note to self with overflow menu and notes icons
Note to self with overflow menu and notes icons
The document is badged with an icon representing its state. The image on the left (1) shows the waiting state, while (2) shows the synced state.

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.

Google app with #1 offline notification #2 Reconnecting notification #3 Silent app notification
Google app with #1 offline notification #2 Reconnecting notification #3 Silent app notification
(1) When a user makes a search query in the Google app, and there is no internet connectivity, the app offers to notify the user when the results are ready. (2) The app automatically tries getting the search results as soon as the device connects to the internet. (3) If the user doesn’t have the Google app open, the app sends a notification when the search results are ready.

Give options

Offer the user options that can work under slow connectivity environments.

#1 YouTube bitrate streaming speeds from 144 to 1080p, #2 Cartoon character and masked man in video call
#1 YouTube bitrate streaming speeds from 144 to 1080p, #2 Cartoon character and masked man in video call
(1) YouTube’s adaptive bitrate streaming allows video resolution to automatically adapt to network conditions. (2) This video app example detects slow internet connections, and suggests switching to audio to allow for an interruption-free conversation.

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.


Google Design

Stories by Googlers on the people, product, and practice of UX at Google

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store