The UI Observatory

Bill Waterson’s “Calvin and Hobbes” has been one of my favorite comic strips for years. Although I have quite a few of their wonderful books in my dead-tree library at home, in weak workday moments devoid of self-discipline, I sometimes check out the comic’s online version.

When I did so today, I noticed something odd: somewhat absentmindedly and occupied with other trains of thought, I repeatedly clicked on (what I assumed was) the “previous comic” navigation button.

Until, that is, I realized that, instead of moving backwards through older comic strips, I was actually going back and forth between only two of them. The reason? Bad UI design.¹

When you point your web browser to the generic web link http://www.gocomics.com/calvinandhobbes, the website displays the most recent comic strip — you’re at the “end” of the publishing timeline. There are no more-recent comics than the one shown.

Consequently, the designer decided that not to display the navigation controls for moving “forward” along the comic’s timeline: the only available controls are for moving to the very first Calvin & Hobbes comic; for moving to the previous comic; and for bringing up a calendar widget.

As soon as you move to the previous comic, however, you also need controls for moving to the next strip, as well as for moving to the most-recently published one. The designer (correctly) placed these to the right of the calendar view to balance out the “first” and “previous” buttons.

Because the navigation buttons are right-aligned with the comic strip, though, the button for “next comic” ends up in the exact position that was occupied by the “previous comic” button before.

Unless you make up for this shift by moving the mouse pointer, you click on “next,” then “previous,” then “next” again, then “previous” again, and so forth.

Don’t hide. De-activate!

Just like in native software applications, unavailable UI widgets on web pages should be represented by grayed-out, un-clickable placeholders. That way, all controls remain in their original place at all times.

When implementing such a navigation widget, however, designers need to make sure that the whole group renders properly for all navigation states.

Here’s why that is important: the page navigation for Customer Reviews on the iTunes Store does use “de-activated” widgets for “previous” and “next” links. The ellipsis graphic is slightly narrower than the number buttons, though. As a result, when an ellipsis is displayed, the alignment of the buttons is slightly off. In case of two ellipses being shown, the “back” link slightly moves position, as well.

In my last blog post, “In Search of Missing Airline Reward Miles,” I had taken a closer look at how to claim uncredited miles via an airline’s website. Objects under test were Lufthansa’s Miles & More and British Airways’ Executive Club programs.

Since then, I have signed up for another loyalty program, called EarlyReturns, and offered by Denver-based Frontier Airlines. Before signing up, I had already flown with Frontier a few times. Using the boarding stubs from these flights, I had the opportunity to see how Frontier’s process for claiming uncredited miles stacks up against BA’s and Lufthansa’s.

Finding the claim form

The login form for the the Frontier Airlines website is located at the top edge of the site’s home page. Once the login process is completed, your name and a list of four links appear in the login form’s place. All four links are relevant to your user account: Redeem Miles, My Reservations, Account Activity, and Sign Out.

During my testing of the Lufthansa and BA websites, I had assumed that what I was looking for — namely some link or help related to claiming uncredited miles — would be located on the account statement page. So, I clicked on Account Activity.

At first sight, the Account Activity page looks a bit cluttered, which is mainly due to the fact that four separate navigation menus are spread around the page.

The Account Activity Summary section, however, provides a concise overview over your EarlyReturns membership level², the date of last activity, your current milage balance, and — placed prominently right beneath the balance — there is the line: “Missing Miles? > Contact us”.

Although the wording is extremely concise, it is instantly understandable what “Missing Miles? > Contact us” means, and the link is located just where you would most expect and need it. What’s more, even on monitors with an 800×600 resolution, that line is above the fold and, thus, within direct view.

Submitting the flight details

What you see when you click the “Contact Us” link comes as a bit of a surprise: instead of a form for entering flight details, the page contains Frontier’s phone number, and their postal and email addresses³.

On the one hand, it is a nice touch that Frontier offers humans as first-level customer support contacts instead of requiring its passengers to tediously enter flight details into a more or less well-designed form.

On the other hand, though, the contact page does not state what information Frontier requires to process a mileage claim. Is the ticket number sufficient, or do I have to include more details like the route, date, etc.?

Getting help

The website’s EarlyReturns FAQs help pages provide more information on this. A link to a page with these FAQs is found in the lower right-hand corner of the Contact Us page.

Among the questions is one that is titled “Can I get credit for a previous flight if I am a new or existing EarlyReturns® member?” The answer to this question clearly explains how you can claim missing miles: mail in the ticket stubs or send them an email with your membership number and the “13 digit e-ticket number starting with ‘422’.”

Admittedly, the FAQ page for the EarlyReturns program is very long, so it will take a while to find this specific question. But with a bit of patience, finding the required information is simple, because the link to the FAQ page is in a prominent place; the relevant question is properly phrased; and the help text is concise, to the point, free of distracting marketing babble, and it contains exactly what you need to know.

And yet, this information would be even more useful if it were placed directly on the EarlyReturns contact page, so you would not have to go hunting for it in the first place.

Receiving my mileage credit

It took Frontier less than an hour to reply to my email in which I had sent them the details of my flights. In their reply, they promised that the “new balance will be reflected online in 24 to 48 hours.” The miles showed up in my account within little less than a day.

Kudos to Frontier for handling this process so much more customer-friendly than (at least) one of their major, global-carrier competitors!

During a recent stay in the US, I had been on two United Airlines flights. Like Lufthansa, United is a member of the “Star Alliance” group of airlines. Being a member of Lufthansa’s Miles & More loyalty program, I should have earned award miles for the United flights, but since someone else had made the booking for me, I had not been able to supply my membership number.

Unsurprisingly, when I later checked my Miles & More account, I had not received any miles for the two flights, and — ticket stubs close at hand — I set out to claim those uncredited miles via the Miles & More website.

Finding the claim form

After signing in, I went to the page with the detailed account statement. Since this page lists all recent account transactions, I thought this also was the most logical place to look for information on what to do if any transactions were logged incorrectly or simply missing.

Scanning that page for a link or a button titled “request mileage credit,” “claim uncredited miles,” or similar, yielded no result. The only link that looked mildly promising was “Account statement and mileage expiry queries” at the very bottom of the page.

I clicked on it, expecting to find concise and helpful information about what I could do within the context of the account statement page. What I got, instead, was too much marketing ramble — “Quick and easy access to information!”, “Why not subscribe to the free Miles & More Online newsletter?”, etc. — and too little helpful information. Neither seemed relevant to my task.

Next, I tried searching for “claim miles,” “get miles,” “credit miles,” “uncredited miles,” etc. via the website’s general search field. While some of the links in the search results did take me to the correct page for claiming miles– which happens to be titled “Mileage request” –, all of them were hidden behind tangential questions like “What is the time limit on the retrospective crediting of miles?”

Not one of the results included something as plain, simple, and straight-forward as “How do I claim uncredited miles?”

Now that I knew that “mileage request” is the term Lufthansa uses for “claiming uncredited miles,” I again searched the account statement page for a direct link to the claim form.

It does exist, and it is listed in the navigation menu in the account statement page’s top right corner. When opening that page, however, you cannot see it immediately, because, for some obscure reason, the designers must have thought that it is a briliant idea to hide most of the navigation menu. To disclose the entire menu, you have to click on “All functions.”

Unfortunately, there are more problems with that menu than just the fact that most of its items are hidden by default.

A navigation menu gone awry

Apart from the two words, “All functions,” there are no visual cues in that blue box that point to the existence of a hidden menu.

The icon next to the link does not resemble a standard disclosure triangle as found in, e.g., the Mac OS X Finder or Windows Explorer, and it points to the right, seemingly to a location off the screen. Which may make you wonder whether clicking it will take you to another page showing, well, all functions.

Once opened, the menu is overwhelming: the font is very small (and, consequently, so are the link target areas); there is no grouping; and the sort order seems arbitrary.

E.g., “Change PIN” and “Change Password” seem to be related to the “My profile” item, yet they are placed far apart from each other. “Book flight award” is about spending miles, as is “Gift miles”. And yet, they are separated by “Buy miles,” which is related to earning miles.

As for the menu items themselves, they seem overly curt. Adding a bit of redundance — e.g., using “Donate miles to charity” vs. “Donate miles” — may help grasping their meanings faster. Also, there is a subtle difference in the syntax of the items: some consist solely of nouns like “Mileage calculator,” whereas others contain a verb, as in “Buy miles”.

By the way, would you guess that the rather unforunately phrased “Member gets Member” takes you to a page for inviting someone to join Miles & More?

Just for kicks, here’s a suggestion for how I’d spruce up that menu by grouping the menu items and giving them somewhat more verbose labels, thus making better use of the available horizontal space.⁴

(Note that I have removed the “Change password” and “Change PIN” items, because I would probably move those to the “My profile” page.)

MY ACCOUNT
View my detailed mileage statement
View my credit card statement
Go to my profile

MY ITINERARY
View my bookings
Print passenger receipt
Enter passenger data for visits to the USA

EARN MILES
Calculate the miles you earn
Claim uncredited miles

SPEND MILES
Book a flight award
Book an upgrade award
Give miles as a gift
Donate miles to charities

Invite a friend to join Miles & More

Submitting a “mileage request”

As I stated before the menu diatribe intermezzo, I had managed to find the appropriate page for having the miles from those two United Airlines flights “retrospectively credited” to my account. One more click on that page took me to the form for entering my flight details.

A very welcome feature of this form is the “Number of flights” popup menu: you can enter up to ten flights in one session, which, I would assume, should be more than enough for most travelers.

Unfortunately, there is a lot of information that needs to be entered per flight, however, and it is not all that obvious where to find the respective data on the ticket stub. A page called “Ticket examples” that explains where to find what, comes in really handy at this point.

I do wonder, though, why I needed to enter the departure and arrival airports: shouldn’t the website’s database backend “know” a flight’s route based on the flight number and flight date, which I had to provide, as well?

When you’ve completed your data entry, and clicked the submit button, a summary page is shown, and when you confirm that, you’ll see a confirmation page, informing you that “Your flight is forwarded for verification.”

After a few weeks’ time, I re-checked my account, and the miles for the two United flights had been “retroactively credited.” But while the task was finished successfully, it could have been quite a bit easier if…

• the Lufthansa website would use more intuitive wording for the task of “submitting a request to add award miles to my account for a flight that does not show up in my statement yet,”

• the search engine would find results based on more common search terms than “retroactive milage credit,”

• the navigation menu was not hidden by default,⁵

• the request form would not require entering so many data items.

Same task, different approach

For a quick comparison, I went to the British Airways website to see what their implementation of this workflow looks like.

Similar to the Lufthansa website, British Airways’ site provides both a concise account overview and a detailed account statement. Right beneath the list of transactions on the latter page, there is a nondescript box, titled “See also”. And what do you know is inside that box: a link, saying “Claim missing BA Miles.”

As I said earlier, I assume that claiming uncredited — or “missing” — miles is one of the most often-used functions on the account page. Unlike their Lufthansa colleagues, the designers of the BA site seem to share this point of view and placed a respective link right where I as a user need it and, consequently, where I will look for it first.

The link is easy to find; it is easy to understand thanks to perfectly clear phrasing; and it takes you directly to an entry form.

The actual entry form page provides concise help in the form of bullet points; a link to an FAQ list, which — unlike Miles & More’s “Questions about your Account Statement” — happens to actually be an FAQ list; a few related links. And it requires you to enter exactly one data item: the ticket number.

At the time of writing this article, I did not have any uncredited miles to claim from BA, but just to see what was on the next page, I entered the ticket number of an older flight that had already been credited to my account. Here’s what I got:

Since I have never submitted a claim with BA, I have no idea how much data you have to enter if an uncredited flight is found. I deem it fairly obvious, however, that the overall process is much smoother on BA.com than it is on the Miles & More site:

• I don’t have to go search for the “Claim missing BA miles” form because the link to it is located exactly where I would look for it in the first place.

• The language used by BA makes it easier to understand where that link takes me.

• For the first step of the process, all I have to enter is the ticket number.

• Based on the ticket number, the BA website verifies whether miles have already been credited for the corresponding flights, which may spare me additional effort in case I have simply overlooked them on my account statement.

Of course, this is only one task of many that you can perform on an airline’s website. And yet, I find it striking that a standard function like claiming uncredited award miles can differ so fundamentally in how easy, convenient, and sometimes even pleasant they are to use.