Mobile Experiences in Air Travel: A Comparative Study
Travellers mostly buy tickets online. To most of them, however, booking a flight on their favorite airline’s app is a series of small confusions, discomforts, and disappointments: Flicking through long forms, trying to decipher the complex terminology, searching for a flight only to find out that it’s out of their price range.
To get a close scrutiny of the state of mobile experiences in air travel, I reviewed a number of airline apps: Delta, Emirates, Lufthansa, Ryanair, and KLM. Although it’s not an app, I also included Virgin America’s mobile website into the review. Besides these apps, I also looked at a few other apps in order to see their solutions to the problems that came out in the study. When picking these airlines, I tried to go for diversity in terms of geography (Asian, American, and European airlines) and price range (low cost, premium, and mid-range airlines). I tried to analyze the common design tactics and approaches that may add user-centered value in some of the most common features in airline apps: The home screen, navigation, booking tickets, and forms.
Home Screen
Most airline apps prioritize booking, allocating the largest home screen estate to the “Book a Flight” button. Some apps save the entire home screen for booking tickets. Some others’ home screens change depending on the context. For example, when a signed-in user has an upcoming flight, KLM and British Airways display information and actions for that flight (Figure 01). These home screens respond to changes, revealing the most relevant information up front.
Navigation
Navigating by guesswork or trial-and-error is likely to frustrate users. That is especially true for airline apps that often have a large number of features most of which are quite complex.
Most airline apps use a combination of hamburger menus and navigation hubs, i.e. the home screen with the list of navigation options. While they tend to display more commonly used primary functions (such as booking, flight status, check-in etc.) on the home screen, they place the secondary ones into the hamburger menu (Figure 02). Despite the general criticism against the hamburger menu, this hybrid form of navigation may work for airline apps. This is mainly because airline apps typically have a large number of menu items and, more importantly, people usually use these apps for one task at a time –booking, checking-in and so on– each of which usually consists of long flows. This makes skipping between and pivoting from menu items relatively rare.
That being said, stacking a lot of items into the hamburger menu sometimes results in over-crowded menus. In such cases, grouping, titling, and/or prioritizing menu items may be informative and make it easier for the users to scan the menu (Figure 03).
Hamburger menus can also be problematic if their limitations on navigation are neglected. On Emirates app, for example, the hamburger menu button disappears after the first screen of any flow, which means you need to hit back a few times in order to pivot from where you are and get back to the home screen. In contrast, Delta features a tab bar that contains their app’s most important functions (Figure 04). The tab titled “More” is reserved for secondary functions. Here, the bottom tab menu maintains context and an opportunity to pivot. It also makes a better case for ergonomics in terms of how people hold their phones.
Virgin’s mobile website facilitates the pivot distinctively. When you hit the back button on the top left corner during the booking flow, instead of going directly to the previous screen Virgin asks you which screen you would like to go to. Initially, it displays the last two screens (Figure 05). When you scroll up to see the preceding screens you can also see the option to start over.
Also, Virgin shows the total price on top right corner on a drop-down all through the booking flow, making it easier for users to keep in track of their progress in the flow and the total price for the trip. When you tap on the drop-down, it shows the details and the flight info. KLM too has adopted a similar way of showing flight information, where the total price and the flight info are displayed on the bottom of the screen (Figure 06).
Booking
Being able to communicate competitive prices before and during the booking is critical for any airline app. Airlines have adopted different approaches to accomplish this.
Ryanair, for example, feature a slider on top of the booking screen where the dates and best prices are listed. Lufthansa features a similar tab-like navigation (Figure 07). Such forms of navigation add a layer of transparency to flight search.
Taking it one step further, KLM incorporates additional indicators of price (Figure 08). Once you enter flight details on the initial screen, the lowest possible price appears on the bottom. Then on the next screen, on which you pick the flight dates, the app displays the lowest ticket price next to each month’s name.
Virgin America incorporates a more flexible and transparent solution (Figure 09). On the initial screen, you pick the number of guests, departure and arrival cities. The second screen features a calendar. Under each date, the lowest price for that date is noted. Labeling each flight with a price tag, this way of communicating flight prices is both closer to how people normally shop and buy things, and it also cuts down an extra step.
Forms
For most airline apps, the forms are the final step that comes right before selling the airline’s primary commodity. In spite of their critical role, forms can sometimes be complicated and arduous to fill in. Though in reality forms investigated here are parts of the booking flows, they deserve their own inquiry for the abovementioned reasons.
KLM, to begin with, has two consecutive forms: One for personal details and one for payment details (Figure 10). The long pieces of text in between the fields and the excessive use of pickers (8 of them in total, in a single form) for everything ranging from currencies to countries make the form almost painful to fill in. The first problem with the explanatory text within forms is that users often ignore explanatory text within forms. It also minimizes the screen estate with which users interact. Lastly, it makes users go off and on the keyboard, adding several unnecessary gestures to the entire set of interactions.
Minimizing the number of interactive fields, Ryanair has adopted a different approach from KLM (Figure 11). For example, once you start entering credit card number it recognizes the type of card and the icon on the left of the field automatically changes. When you enter all the digits in the credit card number, it slides over using an input mask and shows only the last four digits of the credit card, and reveals the next two sets of information: Expiration date and the CVV number, reducing three separate input fields to one and omitting two pickers. Also, Ryanair lets users make the country selection on a separate screen. This reduces the interaction time and effort for a lot of users as they can simply search for their country instead of scrolling down to find it, disposing of another picker.
How people think about their own information is an important part of designing forms (Figure 12). To most people, their names, addresses, or phone numbers are single entities that are not divided to several sets of information. For example, Lufthansa has three separate fields for the first name, the middle name (which is optional, but not clearly indicated), and the last name. According to Luke Wroblewski, “it is encountered in usability tests that people often get through their entire name in the first field before realizing that there are two input fields below.” Virgin America’s design for the same form is more likely to save users from such possible errors. The form initially has only one input field labeled “name.” Upon tapping, it turns into a three-row input field: One field each for the first, middle, and last name –minimizing the chance of error or going off the keyboard.
Placing the less frequently used optional fields at the bottom of the screen may also help users stay on the keyboard. Virgin has adopted this tactic in their mobile payment forms. Once you fill up all the compulsory fields you get to the optional fields you can just skip.
This is also useful considering the behavioral differences between compulsory and optional fields. People are usually on “autopilot” when filling up the compulsory forms. You hardly ever stop think about your name, email, phone number or any other personal information. However, the optional fields have a multitude of cases where you can enter all fields, some of the fields, or skip them entirely. This usually calls the users to pause and think for a moment. Placing the optional fields at the bottom of the screen helps users maintain the relatively easy autopilot mode uninterrupted.
Recap
The features and functions investigated here –home screen, navigation, booking, and forms– are only a part of the entire mobile experience. They are, however, critical parts of the experience that may add value to airlines. Paying a close attention to the various ways users think, behave, and interact with the app can help airlines provide mobile experiences that make the travel more seamless and convenient for users, which is a must for any product or service.
