UX Case Study: Handling Offline for Impatient Users

I recently came across a blog post on inVision listing the most influential UI animations of all time (Inside Design by inVision). On the list, it starts out with a flashing cursor and a command-line interface from 1967, and includes AOL login screens from 1995, and the iMessage “is typing” chat bubbles. Many of the examples listed in the post were invented to communicate the state of the system’s side to users. The flashing cursor indicates that the system is waiting for a user to type something. The AOL animation tells users to be patient because the system is trying to connect to the internet through a slow phone line, so please enjoy the animation and think about how exciting the internet is.

The blinking cursor from 1967 (Source: Inside Design by inVision)
The AOL login screen from 1995 (Source: Inside Design by inVision)
The iMessage “is typing” bubble from 2007 (Source: Inside Design by inVision)

It is intriguing to see how IT pioneers were so creative handling user experience with new but not-fully-developed systems. UI’s are meant to relay information about the state, of systems, and the messages they communicate have to be clear, short, meaningful, and should also give specific directions to users.

Today, people expect to be connected to the internet all the time, from anywhere. While even milliseconds of delays could cause frustration to today’s users, being disconnected could be one of the most stressful moments. In this entry, I explore and document how current applications handle losing internet connection.

First, tricks for the initial loading:

Facebook

Before getting to the stage of losing internet connection, data has to load. Many animations, including the one introduced by AOL, progress bars, were created to express loading statuses. Facebook has been using a placeholder, the content replicates the layout of actual content before it loads. The animated gradation shows active loading and the placeholder bridges expectation to the actual content.

Snackbar messaging

Pinterest

The most common practice when connection is lost during operation, is to have snackbar UI at the bottom alerting of the issue. The behavior is designed to alert users without interrupting the experience. Pinterest also uses the snackbar UI but a very large one. The exaggerated round UI fits into the overall Pinterest branding, also the connection loss has a huge impact to its visual-heavy experience.

Reddit

Reddit uses a similar technique to Pinterest, as many other apps with feeds do. The snackbar element is subtle, but catches enough attention with the aid of the red line on the side. However, what Reddit does well is its use of Doodle. The animated element or relatable characters help ease the stress. Also, when a user visits individual posts or pages during a connection issue, Doodle with xx eyes appears instead of just text messages, which makes the experience more humanized. Also having a CTA to reload individual unloaded media items helps getting desired content sooner, instead of trying to load everything whenever the connection is back on.

Snackbar with doodle on the left. Sad doodle face on unloaded post page. (Reddit)

Amazon

Amazon famously uses dog pictures, which effectively eases users’ frustrations on Prime Days. In its feed, the reload CTA appears at the bottom of the loaded list when the connection is interrupted. The bottom location makes sense as it suggests more would come below, but the visual could be a little warmer than it looks, i.e. like the most basic error message.

Commercially successful dog pictures for connection error (Amazon)

Google News

Just as Amazon uses dogs, Google News uses an ice cream icon. Why? I am not sure. It might be because previous Android versions use sweets names like Oreo, and Oreo is a good ice cream flavor? The ice cream is upside down, which also implies how losing connection is just as upsetting as dropping an ice cream.

‘Instant’ messaging apps

Slack

When Slack is interrupted with connection issues, it shows an extremely simple grey band at the top. You can attempt to reconnect by tapping the sign, but the app quickly attempts to refresh as the connection returns. Handling unsent messages is probably complex behind the scenes. When a user attempts to send a message offline, the message appears to be sent. When the app gets back online, the message is automatically sent behind the scenes without the user realizing it. If the connection loss is much longer, a red “tap to send again” CTA appears below the unsent message. In this case, the user has to tap it to resend. This practice seems to be the common approach among a majority of messaging apps.

Subtle offline notations are common in messaging apps (Slack)

Android Messaging App

For example, my Android messaging app says “Waiting for connection” while it attempts to reconnect.

Integrating with interactions:

In 2010, Twitter introduced pull-to-refresh. It was adopted by almost all apps that have endless feeds. At the same time, its intuitiveness made users excessively thirsty for new information. For those who got used to this limitless access to information, connection loss is intolerable.

Twitter’s pull-to-refresh from 2010 (Source: Inside Design by inVision)

Apple News

Apple News added a subtle message to the pull-to-refresh interaction. As shown in the animation below, the message “Couldn’t Reload, News isn’t connected to the internet” is revealed when users pull down the screen. It is extremely clever and elegant, but it may be too subtle for users to catch. There is a risk is that people may assume there isn’t any new information and close the app. However, unlike visual-centric apps, like Pinterest, which are expected to require connection all the time for data, text-centric apps, like Apple News, may be able to preload fast enough and not face issues so much with connection loss.

Subtle message appears as user pulls down trying to refresh (Apple News)

Meanwhile, the standard error message when I cannot open an individual story seems to be too dry. I can imagine preloading some of the text data and letting the story pages at least open. Then, even if all data is not available, it could trigger users to either save for later or share the story, and it may help retaining users in the app.

A dry error pop up when stories cannot be opened (Apple News)

Part of premium membership

Some services provide offline solutions as part of their premium offerings. For example, Spotify lets premium users download up to 10,000 songs on each of up to 5 different devices. Medium also offers offline access to premium users, which is helpful to save and read for later, for example, on choppy subway connections or on airplanes. On the other hand, Pocket provides offline access as a core offering for free.

Spotify lets users download up to 10,000 songs per device up to 5 (Source: Spotify)

YouTube

The video service giant YouTube lets users download videos to view them offline. The service is provided through its YouTube Premium. As the app runs into a connection issue, the app prompts users by showing tooltips pointing at the “Download” CTA. This also functions as a great promotion for the premium offering. When users download, they can select file sizes, being sensitive to their storage space and the data bandwidth.

YouTube smartly directs users to a download CTA as the connection gets interrupted

Follow on medium: https://medium.com/@takuma.kakehi/ux-case-study-handling-offline-for-impatient-users-91be4417580f

Reference

The 8 most important UI animations of all time | Invision Design Blog

Pinterest

Reddit

Amazon

Google News

Slack

Apple News

YouTube

The story behind the dog photos on Amazon’s Prime Day 404 error pages | Yahoo Finance

How to Write Good Error Messages | UX Planet

Leave a comment

Your email address will not be published. Required fields are marked *