Author: Jochen Wolters

My favorite sports news app is Sport1, which is offered by the German TV channel of the same name. Its current version covers eight sports genres like soccer, Formula 1, or U.S. sports.

The app presents these genres, plus four additional functions, as icons on a screen that looks very similar to the standard iOS Springboard for launching applications.

A total of twelve icons is spread out over multiple screens, which can hold up to six icons each. To flip between the screens, you use the familiar horizontal swipe gesture.

The app also lets you re-order these icons, so that you can compile your favorite sports genres onto one screen: As you would in Springboard, to enter editing mode, you tap-and-hold any of the icons until the latter start wiggling.

While in editing mode, you drag the icons around to arrange them. And when you’re done, you tap the “Anordnung speichern” (“Save Arrangement”) button to save your changes.

As you can see, the Sport1 app very closely mimics both the appearance and the behavior found in Springboard. There are, however, two noticeable differences: In addition to the swipe gesture, the app supports navigation arrows, and icons are automatically re-arranged if you leave any empty spots on a screen.

Turning helpful arrows into sources of confusion

The navigation arrows can be hidden via a checkbox — “Pfeile anzeigen” = “Display arrows” — that appears while the app is in edit mode.

If this option is checked, the arrows appear in the place of a regular genre icon. Unless the app is in editing mode!

While in editing mode, the arrows are always hidden, regardless of the setting for this option. This leads to an annoying problem: If you fill all six spots on a screen, all icons are re-arranged as soon as you leave editing mode to make room for the navigation arrows.

What you see in the screenshot above will, after exiting editing mode, look like this: The Basketball icon had to move to the next screen to allow the right-arrow to be displayed.

One way to address this would be to also display the arrows in editing mode. In that case, it would be essential to properly restore the previous icon arrangement when checking and un-checking the arrow option, though.

Every empty seat must be filled

A useful way to arrange app icons on an iOS device is to use “themed” screens. E.g., you could have a screen for games, one for communication apps, one for utilities, etc.

This works just fine, because Springboard won’t “re-flow” all icons to completely fill all spots on a screen. If you wish, you can have just a single icon on a given screen.

Not so in the Sport1 app.

Let’s say, you’re mainly interested in Formula 1, soccer, and U.S. sports¹, and you would like to place just these three genres on the app’s main screen. The app does let you configure that arrangement, as you can see here:

As soon as you leave editing mode, however, the app just re-flows all icons so that the three empty spots in the bottom row are now also filled.

Oddly enough, this does not happen when the navigation arrows are active. In that case, the icons are not re-flowed.

Why should the decision about whether you would like see those navigation arrows have any impact on how the icons are (re-)arranged? Is this just a bug, maybe?

Mimic, or don’t mimic. There is no “sort-of”.

The icon screen in the Sport1 app re-creates the iOS Springboard’s appearance and basic behavior so closely, that a user can reasonably expect it to work exactly like the “original”.

Expanding and modifying the original’s behavior, however, may confuse users because the way the Sport1 app works differs from what they’ve come to expect based on their experience with the original “role model”, Springboard.

This afternoon I was getting some writing done, when, out of nowhere, this dialog box appeared:

At the time, the application that is mentioned in this message was not even running!

Little Snitch is a network utility, and it consists of a “daemon” — a software program without a user interface which runs in the background all the time — and a regular application for configuring the software. It’s the latter that allows checking for updates.

I’m not sure whether a bug caused this dialog box to appear², but, in any case, it provides a great example for what an application should not bother its users with: Anything that does not require the user’s immediate attention, unless she explicitly requested a piece of information.

Don’t bother me unless it’s important and urgent

What’s it really say in that message? “This application is up-to-date. There’s no need for you to do anything at all about this right now. Just sayin’.”

Although this message was anything but important, it showed up front-and-center on my screen, thus interrupting my workflow, and making me lose my focus and concentration.

Compare this to warnings about my laptop’s battery being low, so that the machine will go into hibernation within a few minutes; or about the machine’s hard drive running out of space, potentially preventing me from saving any more files very soon.

In both of these cases, the computer makes me aware of something that could have a serious impact on my ability to properly use the machine. I must do something about it, and I better be quick.

These kind of critical warnings are annoying, too, but if they didn’t appear, the consequences would go well beyond annoying.

Imagine, however, what it would be like to use a computer that also “warned” you of the fact that everything’s OK! “There is lots of space on your hard drive!” “Your battery is fully charged now!” “There is still enough space on your hard drive!”

Unless you explicitly request a piece of information, e.g., by selecting the Check for Updates menu item, you should never be confronted with a dialog box that merely states that “everything’s fine”. There’d be so many of them, you wouldn’t get any work done at all.

What dialog boxes and secret documents have in common

In a way, well-designed dialog boxes are like confidential documents: They should be presented strictly on a “need-to-know” basis only. If the user doesn’t need to know now, software should just remain quiet.

In cases where there is a need to convey non-critical system status information, status icons or status bars are a much less intrusive and more user-friendly approach.

If you enter an invalid URL into a web browser’s address field, the browser will usually display a reasonably helpful error message.

Some internet service providers override this behavior by displaying their own, branded search page. Like this one from CenturyLink, which is named Web Helper service.

It is easy to see how such “error pages” provide ISPs with extra income from sponsored search results (read: paid ads).

Nevertheless, they are a poor substitute for the browser’s built-in error handling, because it creates usability problems:

1. The ISP’s search page masks the underlying error,
2. it obscures the URL that was entered originally, and
3. restoring the default behavior is tedious.

Masking the underlying error

The error message that appears in Safari is unambiguous. It says exactly what went wrong in easy-to-grasp language.

Users who may still be confused by the error message can click on the Help button next to the message text to summon a help page in OS X’s Help Center, which lists possible causes for the error, and provides useful instructions on how to fix it.

Contrast that to CenturyLink’s page, which completely fails to explain what just happened, and why you are seeing it instead of the web page you originally wanted to visit.

Thankfully, there is a link at the top (and bottom) of the page, labeled “Why am I here?”, that promises to answer this very question.

https://uiobservatory.com/media/2012/CenturyLinkWebHelper_WhyAmIHere.jpg” alt=”When clicking on “Why am I here” in CenturyLink’s search page, a verbose text explains why the page is being shown” border=”0″ width=”400″ height=”250″ />

Compared to Safari’s concise error message, the explanation is much more verbose and purely descriptive. It does not contain a single prompt telling the user what to do now, as in “To fix this problem, do this!”

As a result, understanding what went wrong, and learning how to solve the problem, take more effort.

Obscuring the original URL

Look at what happens to the data, i.e., the URL, that you enter into the browser.

Safari leaves it unchanged despite the error. In contrast, CenturyLink uses a redirect to hop over to their search page, which replaces the link in the browser’s address field.

In cases where the error is caused by a typo, seeing just the original URL that you had entered makes it much easier and faster to verify what you had typed, and to fix any typos that you may find.

Making it tedious to restore the default behavior

As stated in the “Why am I here?” text, you can opt-out of this service. All you need to do is change a setting on the Web Helper service’s preferences page, and click Save.

https://uiobservatory.com/media/2012/CenturyLinkWebHelper_OptOut.jpg” alt=”You can opt out of CenturyLink’s “Web Helper” service via simple change of settings on their preferences web page” border=”0″ width=”400″ height=”250″ />

Once the changes have been confirmed, you will be spared CenturyLink’s Web Helper page and see Safari’s plain old error message, instead.

If, that is, you changed the setting on a computer that is connected directly to your CenturyLink modem. Otherwise, the setting won’t stick, even though the website presented you with that confirmation screen.

https://uiobservatory.com/media/2012/CenturyLinkWebHelper_FAQ.jpg” alt=”CenturyLink’s “Web Helper” FAQ explains that for the settings changes to stick, you need to connect your computer directly to the modem” border=”0″ width=”400″ height=”250″ />

What “directly connected to the modem” means is this: Plug one end of an ethernet cable into your computer, and the other right into the modem’s LAN socket.

Depending on your network setup, this is a non-trivial task.

In our home, for example, we use an older Qwest-branded Actiontech M1000 modem. This device only has a single Ethernet port, to which our WiFi router is connected. All of our computing devices go through this router to connect to the Internet.

As an important detail, I have configured our modem to operate in “bridge mode”, and user name and password for signing into our ISP’s network are configured in the router, not the modem.

To follow CenturyLink’s instructions for disabling their Web Helper service, I would need to unplug the router from the modem; connect one of our computers to the LAN socket on the modem; find our credentials for PPPoE access and enter them into the computer’s Network preferences; and then I could finally opt out of the Web Helper service in the hopes that this setting would stick.

What a mess!

The least that CenturyLink could do is to let you change the Web Helper setting via their customer account dashboard. Better yet, just get rid of this page already, or make it opt-in. Why?

Because any state-of-the-art web browser provides better error messages for, and faster and easier recovery from, invalid URLs than customized “error response” pages like CenturyLink’s.

And if you really need to perform a web search for finding the proper URL, there’s a prominent field for that in every browser, anyway.