The Mobile App Connectivity Misery

Most mobile phone applications access or synchronize at least some data via the internet. If this connectivity is not available — for example, if you’re in an area that has flaky mobile service coverage –, some apps start behaving in “interesting” ways.

To explore this further, I unplugged my home modem’s WAN cable (which stands for “Wide Area Network” and, in this case, refers to the internet at-large), so the phone could still connect to our wireless base station. What the device cannot do in this situation, is deduce the connectivity problem from a system setting, as would be the case if I had activated its airplane mode.

ams Formel 1

This app is a front-end for accessing Formula 1 racing news provided by German car magazine, auto motor und sport. If there is a connectivity issue, the app displays a meaningful error message at the top of the screen just seconds after launch (“Data could not be loaded. Please check your connection. Tap to retry.”).

The connection error message appears at the top of a page with titles and teaser images for new articles. The message's semi-transparent background makes it visually stand out without obscuring the content underneath it too much.

Because the message is anchored in place on the page, it never gets into the way of accessing any cached content like recent news articles, race track information, and the season’s schedule. And since the message is not contained in a modal dialog box, you don’t have to dismiss it before you can access that content, either.

On pages whose content has not been cached, the screen stays blank and shows an easy-to-understand message. (“This page is not available. — [Load Again] — [Details]”)

The main navigation bars above and below the blank content area remain accessible, so you can easily navigate away from the page.

A somewhat more extensive help text near the bottom of the page can be summoned by tapping Details, which link could use a bit of affordance TLC. I also wish the developers would have translated the technical error message including an error code into a more user-friendly message. Overall, though, the system feedback is solid and reliable.

Apple App Store

Right after launch, the app tries to access the server (as you can tell from the network activity spinner at the top of the screen), but the page remains completely blank, so it’s hard to tell what is going on.

The only elements on the page are the default status bar at the top and the  AppStore's main navigation buttons at the bottom.

Only after a long delay does a terse error message appear. Even that notice failed to appear reliably during my testing, however.

The error message only states

The Purchases screen displays the list of all of your applications. Both the download and open buttons are active.

The _Purchases_ screen looks completely normal as if the phone had perfectly working internet access.

If you try to install an application by tapping its download button, the standard progress animation starts, but the icon simply returns to its default idle status after a while. The application does not display an error message.

Apple Mail

Mail clearly indicates at the bottom of the screen when it is trying to download new messages.

Displaying the _All Inboxes_ screen, the status at the bottom states that the app is

Eventually, though, it just reverts to displaying the time of the last email update while, interestingly, the data progress spinner next to the wifi icon keeps on spinning.

According to the iOS status bar, the time in this screenshot is 2:30pm. Although I had just tried to get new email, the status bar has reverted to saying,

Nothing in Mail’s user interface hints at a network problem.

Apple Weather

You can swipe through all locations, but the pages are blank except for the location name.

Besides the city name,

No error message appears.

Avis [car rental]

Right after launch, the app does not seem to try to connect at all. Once you enter data into a form that requires communication with the server, however, a (custom, car-shaped) progress indicator appears. It takes a long time until the connection attempt times out and an error dialog pops up.

A modal dialog titled

Thankfully, the progress indicator does not block the application, so you can navigate back to the home page if you run out of patience before the error message appears.

Other locations in the app potentially confuse the user with less accurate errors like the one you’ll saw after tapping Find more locations near:….

A modal dialog box states that the app

A reassuring feature is that both the Call Roadside Assistance and Customer Assistance functions, which are located on the app’s home screen, bring up dialog boxes from which you can easily contact the company in case of an emergency.

The message in the modal dialog box says,

Note the very thoughtful writing which clearly sets the expectation for what will happen when you hit the confirmation button, and how the Call label neatly ties to the word “Call” in the dialog box’s title.

Dark Sky

Quickly after launching and presenting its “Current Location” screen, Dark Sky displays an error message and changes to the location search screen. The message text is rather cryptic, and does not hint at the actual networking problem.

The modal dialog box says,

(Please allow me to insert a quick rant here. I’m sure designers have the best of intentions when they start an error message with “oops,” “uh oh,” etc. Running into an error message is never fun, though, so when it does happen, my tolerance for cuteness is rather low. An attitude that I know most of my friends share, as well. So please only use “oops” and its brethren if you’re designing a user interface for children. Seriously.)

After selecting a stored location from the list, a different but similarly confusing error message pops up:

Now, the app laments that,

Dismiss the second error dialog box, and the app will resort back to “Current Location,” and although it cannot actually update its data, it will still display (placeholder?) values for low and high temperature.

The app's circle that usually displays the current temperature for the selected location is empty, i.e., just a simple black disk. To its left, the

The app does not prevent you from navigating between its map view (which is absolutely gorgeous when filled with data), the weekly forecast screen, and the somewhat hidden extras page. (To see the latter, tap any of the three temperatures on the main screen).

The standard toolbar at the top of the map page is there, but the main map area is completely blank. The time scroller at the bottom displays the

With the exception of a few, non-functional controls, all of these pages are blank.

Hertz [car rental]

The app will launch normally, but once you tap a button on the main screen, a progress spinner will appear. After a pleasantly short wait time, a perfectly phrased connection error message pops up.

A modal dialog box with the title

Once you dismiss the error dialog, you can still fully navigate the application, even though some key functionality fails silently. For example, when you type a city into the Find Location screen, tapping the keyboard’s Search button seems to be doing nothing. The keyboard remains visible, but there are no indications anywhere that the app is actually trying to retrieve information.

After several seconds of inactivity, an error message finally does appear, but it’s contents are not helpful at all. What’s more, this message is clearly intended for developers: By identifying map.html as the culprit, it exposes program internals that a normal user should never have to worry about — at least not in a (pseudo-)native mobile application.

The dialog box in front of the location search form curtly states,

Tapping Lookup Reservation is even worse: What you get now, is a completely empty space. The app will remain in this state indefinitely as best I can tell, so you cannot even navigate back to the main screen.

Except for the standard iOS status at the top, the page is completely blank.

Another roadblock (no pun intended…) that I ran into is that, when you select Contact Us from the hamburger menu, a loading spinner appears. Due to the black text and icon on the dark background image, this is very difficult to see. More annoyingly, this progress indicator does not time-out either, so the app is now blocked until you force-quit it.

A progress spinner and the word

At least the Emergency Roadside option from the same menu works well, as it summons a dialog box from which you can directly call the company’s emergency hotline.

The dialog box's title is

As an aside, note the major differences in this dialog box between the Avis and Hertz apps: Both offer the same functionality of calling the respective company’s hotline, but the usability is hugely different because of the text inside the dialog.

Where Avis provides perfectly clear information about what will happen when you tap the Call button (namely, “Call Avis Roadside Assistance”), the dialog box in the Hertz app uses the generic, and therefore essentially meaningless, “Confirm” as the dialog title, and the equally generic “OK” as the call button label.

These differences even extend to the labels of the respective menu items: Avis’s “Call Roadside Assistance” is a full sentence with excellent information scent; in comparison, Hertz’s “Emergency Roadside” sounds odd, and oddly incomplete.

Insight Timer

In this meditation app, entire pages remain completely blank, and there are no messages pointing to the lack of connectivity.

This is the Home page of the application. And yet, except for five main navigation buttons towards the bottom, the screen is completely blank.

The one section that still works is the “[Meditation] Timer.” Alas, as far as I can tell, the application does not synchronize the log: Any sessions you complete while your phone is offline are simply ignored, even after you get back online.

Instapaper

As an offline article reader, Instapaper is explicitly designed for off-line use. Upon launch, the app automatically checks if new articles are ready for downloading. If the phone is offline at this point, the synchronization fails silently. Which, in this particular case, doesn’t seem that problematic since this initial sync process is transparent to the user, anyway.

A progress spinner and the word

When you manually trigger a sync, however, a progress spinner does appear in the app’s user interface, but it just keeps on spinning. There is no error message at all.

OmniFocus

As a mobile task manager, OmniFocus synchronizes data, and it exposes that functionality very clearly to the user with a dedicated button (compared to the more obscure “pull screen down and release” gesture, for example).

If you tap the button while there is no internet access, the spinner will start, and it will stop after what feels like some five minutes.

In OmniFocus, the progress spinner appears right inside the _Sync_ button. This is pretty neat, because the app automatically synchronizes its data regularly. A progress animation that appeared on the screen during each sync process, that could become extremely distracting.

Unfortunately, there is no error message, so the network access attempt in this app, too, is just failing silently.

One Football

One Football (to my American friends: this is actually about soccer…) displays a clear error message on most pages, but it takes quite a long time before it stops the connection attempt and shows the message.

The error message appears directly in the now-empty area that usually lists the game schedule. Below a lightning symbol appears the text,

The software does cache some season leaderboards as well as news stories.

The _Season_ page for the Colorado Rapids shows an overview table with three items, to top one of which are the Rapids. A button to _See all_ below the table is actually functional despite the lack of connectivity, so you can at least check the standing as they were before going offline.

While the leaderboards look complete except for some missing team logos, tapping a story’s title takes you to an empty page. At least you can safely get back to the main screen from those empty pages.

49ers [fan app]

The San Francisco 49ers fan app displays a clear error message on almost all screens, as well. It, too, takes quite a while before it aborts the connection attempt, though.

The 49ers logo is displayed at the center of the empty page area. Above it are the words,

What’s odd is that the message is grayed out to the point that the text is difficult to read due its low contrast. The use of all-caps characters doesn’t help much in that regard, either. I also wonder if less experienced users are familiar with the difficult-to-discover “pull down the screen to refresh the app” gesture. If not, being told to “please pull to refresh” will likely be more confusing than helpful.

Maybe “please pull down the screen to refresh” or “please swipe down on the screen to refresh” would make this a bit more accessible. (Which, of course, would need to be confirmed through usability testing.)

Alas, unlike ams Formel 1 and One Football, the 49ers app does not cache any content.

Some suggestions to alleviate the mobile app connectivity misery

As always, following a few design principles can help build much more pleasant and effective user experiences:

  • Assume that network outages do happen

    When developing an application that requires network access, don’t assume that connectivity will always be magically available, nor that, if access is available, it will provide fast transfer speeds.

  • Set reasonable time-out durations

    Progress indicators that spin endlessly, or functions that fail silently, should have been a thing of the past a long, long time ago.

    There’s nothing wrong with trying to connect for a while, but don’t test the user’s patience too much. Although it’s difficult to choose a “perfect” wait duration, my preference is that it not exceed 30 seconds.

  • Offer informative feedback

    Display a clear error message that points to the root cause, namely that the server could not be reached or, better yet, that the device is not connected to the internet.

    If possible, avoid displaying messages that identify the secondary effect (“Could not find location”) instead of the root cause (“Could not reach server”).

  • Avoid blank pages

    Avoid completely blank pages at all costs. In terms of user interface modules, never load from a server what can be implemented natively in the app.

    If it’s feasible, cache some content. For example, allow sports fans to look up their favorite teams’ season schedule, etc. even when the app can’t get online.

  • Never ever lose the user’s data

    If its core features work without internet access, an application must store all relevant data that the user enters, and synchronize it when connectivity is restored.

    This is especially important for applications that synchronize or store data transparently, so that users can’t verify, or intentionally trigger, the successful transfer of that data.

My personal design role model

Of the apps described above, ams Formel 1’s design works the best for me: The error notification appears quickly and clearly describes the problem, yet does not get in the way. Being able to access at least some of the app’s content is a welcome plus.

By the way, the fact that there’s at least one app that can quickly and reliably determine the problem, is proof that doing so is perfectly technically feasible. There is no factual excuse for other apps to not provide a similarly user-friendly way of handling connectivity errors.

The Fundamental Importance of Visual Cues

As much as I like the instant gratification of purchasing music online, I still prefer the experience of handling a physical CD and its — hopefully extensive — printed booklet. Consequently, I often rip CDs to add the tracks to my iTunes library.

The CD track list screen in the current version (12.4) of iTunes displays three useful buttons in the top right corner. Except for their labels — Options, CD Info, and Import CD — they look absolutely identical.

The three buttons, shown next to each other, look absolutely identical like, well, a simple, clickable button.

When a button is not really a button

When I last ripped a CD, I decided to double-check the import settings. Due to its proximity with the Import CD button, I assumed that Options would take me to those settings. Instead, a popup menu appeared:

The menu that appears when clicking the Options button contains the two items Get Track Names and Submit CD Track Names.

That behavior surprised me, because the UI widget is a simple button; it lacks the typical downward arrow that indicates a popup menu control. Additionally, the positioning of the menu looked a bit odd, as it is partially overlapping the button.

Here’s a standard popup menu for comparison:

An excerpt from a print dialog shows the menu attached to the popup menu control labeled PDF. The menu's top aligns exactly with the controls bottom. More importantly, a down-ward arrow in the menu control makes it very clear that this is, in fact, a popup menu, and not a simple button.

Clicking the center button summons the usual iTunes Info window for the currently displayed CD, which is exactly what I would expected.

As for the import settings dialog box? That actually appears when you click Import CD. Since there is no ellipsis in the button’s label, I had expected that clicking the button would immediately start the import process.

More interaction required. Or is it?

Quick refresher: An ellipsis in a UI control indicates that further user input (or, more generally, some kind of further user interaction) is required before the related action is triggered. E.g., the basic File > Save As… menu command features an ellipsis, because the user needs to enter a name for the file before it is actually saved.

One could argue that bringing up the Information window already completes the [Display] CD Info command, so that it is not strictly necessary to include an ellipsis in that label. For the Import CD button, however, an ellipsis is clearly required.

Just don’t mess with fundamental design principles

A fundamental goal of good design is, obviously, to make it easy for a user to reliably predict what will happen when they interact with a user interface control. In other words, an important aspect of design is to reduce surprises as well as alleviate users’ fear of trying out a feature.

Why, then, did the iTunes designers forgo fundamental visual cues that would make it so much easier to understand what’d happen with regards to these three controls?

Admittedly, displaying three identical-looking controls creates a very clean, low-clutter appearance. Then again, adding the cues for visualizing “this is a menu, not a button” and “more input required when you trigger this function” doesn’t really make the trio look that much worse:

A slightly edited version of the three iTunes buttons. The left-most control now shows the down-ward arrow indicating a popup menu, and the label on the right-most button includes an ellipsis character.

With regards to usability, however, these well-established cues make a huge difference. I find it worrying that Apple, of all companies, makes design decisions that so obviously violate fundamental principles of good user interface design.

The Mystery of the Glowing TV Power Light

Why do power lights on TVs and computer monitors stay on when the device is powered up? I’ve been scratching my head over this question for quite a while now.

That obnoxious light in the corner of my eye

Granted, these status indicators make perfect sense for showing that the device is in stand-by mode instead of being completely powered down. Then again, most modern TVs and monitors don’t even have a true power switch anymore. Instead of actually disconnecting the device’s circuitry from electrical power, the on/off button just toggles between “stand-by” and “on.” In other words, “stand-by” is “off.”

The TV's power light is housed towards the left edge of a clear plastic bar that runs along the full length of the TV screen's bottom edge. Its glow is at least as bright as a regular daylight TV image.

Of course, power lights do provide meaningful feedback, e.g., when the TV is receiving a command from the remote control, while it is powering up (if there’s a delay between switching the device on and the screen lighting up), or if there is a technical issue (as commonly indicated by unique blinking patterns).

Once the device has fully powered up, though, the fact that an image appears on the screen is more than enough feedback. At that point, a continuously glowing power light just does not provide any uniquely useful status information anymore.

These lights do bother me immensely.

When watching a movie, I often find that bright, ruby-red LED very distracting, especially if the movie’s scenery is dark and ominous. I’ve tried to find a way of deactivating the light, but short of ripping the LED out of its socket, I have yet to find a cure.

Screen on, power light off

My external computer monitor has a similar power light, and I find it at least as distracting as the one on the TV — even more so when working at night in a dimly lit studio. In its default configuration, the light glows red when the monitor is in stand-by mode, and blue while it’s switched on.

Several hardware buttons are embedded in the bottom right corner of the computer monitor's bevel. These are used for interacting with the device's on-screen configuration menus. The power LED is to the right of the power button, and it glows blue when the screen is lit.

(This monitor also lacks a true power switch, but it does have distinct “off” and “stand-by” modes. When in stand-by, the monitor will automatically light up as soon as it detects an active video signal. This is very handy as the monitor automatically switches the screen on and off when the computer wakes up or goes to sleep, respectively. In the “off” state, the screen always remains dark.)

After some research, I found a pair of promising settings deep in the monitor’s configuration menu. Besides being able to choose a blue and green color for the LED in “on” state (which I find somewhat gratuitous), there is an option for “LED Brightness.” And, yes, you can set the brightness to 0% to fully dim the LED.

As an indication of how much thought the designers invested in the monitor’s behavior, the brightness setting only applies when the monitor is on. When it’s in stand-by, the LED still glows red to help distinguish between “off” and “stand-by.” Great!

After adjusting the settings, the power LED is now completely switched off, even though the screen is lit. Success!

This is the exact behavior that I would love to see for every device that features a video screen: Provide feedback via an LED in response to certain user actions, as well as for indicating device failures — but please allow me to fully dim that light while the device is in standard, error-free operating mode, so I can focus on whatever’s on the screen, instead of what surrounds it.