Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The State Of Airline Websites 2015: Lessons Learned

With this article, we start exploring various industries and study the current state of front-end, UX and performance of relatively complex websites. First up are airline websites. Some sections of the article were written by the editorial team. We’d love to hear your flights booking experience in the comments to this article! — Ed.

From my home in Phoenix, Arizona, the entire world is only a few clicks away. I’ve booked flights to St. Louis, San Francisco, Honolulu, New York, London, Melbourne, Entebbe and beyond. Sometimes I’ll land in one location, travel around and leave from another. Sometimes I’ll switch or cancel a flight, and sometimes the weather does that for me. Regardless, I always get to where I want to go, and fantastic technology is in place to help me every step of the way.

All of this tends to be so easy that I take it for granted. But let’s think about this process from a designer’s perspective. Taking such a diverse system of possible actions and turning them into a user-friendly, self-serve experience is a pretty complex challenge. Any experienced traveler will tell you that some companies do it better than others. To find out, let’s take a closer look at a few airline websites from around the world.

Along the way, we’ll discover the critical steps of booking air travel and how they’re presented by different companies.

The Airlines Link

To begin, let’s select fifteen airlines, starting with the top five highest-ranked airlines1 worldwide.

To round out this list, we’ll sprinkle in ten other airlines from around the world.

Limiting Our Scope Link

Obviously, a deep dive into 15 websites is far too much to cover in a single post. So, we’ll limit ourselves to certain areas: each website’s home page layout, booking process and performance. That’ll give us a good introduction to how each airline’s website operates. Also note that most of these websites have several localized versions. For the sake of sanity, we’ll stick to the English versions.

Fair warning: Objectivity is awesome, but any design critique you’ll ever read is chock-full of subjective observations. This one is no different. That being said, I welcome friendly disagreement and discussion.

Home Page Link

To begin, let’s briefly look at the home pages of each of these websites. This is the first place most potential customers will land when looking to book a flight, so it’s absolutely critical. After even two or three seconds on a website’s home page, you’ll find that you form qualitative opinions about the company that are difficult to ignore.

Design Goals Link

As we analyze these designs, we should always think about what the goals of the page are. Here are some truly base-level goals that I think all airline home pages share:

  • Convey the company’s brand and identity.
  • Inspire and educate curious potential travelers to make a purchase.
  • Direct customers looking to make a purchase to the correct user flow (and/or answer their questions).
  • Direct customers who have already made a purchase to the information or actions they need (checking in, checking flight status, etc.).

The websites we’ll be looking at were designed by professionals. All of them are fairly attractive and easy to use. So, when we talk about strengths and weaknesses, it’s really only relative to the other websites on this list.

White Space vs. Efficiency Link

In comparing all websites, Turkish Airlines14775165 is the one that stands out as the most cluttered. The design very tightly clumps all of the various elements, without allowing for much breathing room. In the visual hierarchy, instead of a clear path, we find a lot of evenly weighted items competing for our attention (the busy background pattern doesn’t help). Instead of naturally finding a logical progression, my eyes bounce around, looking at all of the separate little UI elements. It takes quite a bit of effort to fully explore the page.

Qatar Airways14473172 (ranked number one worldwide) suffers from these same issues but to a lesser degree. Its design is a bit more airy, with sections that are a little more visually distinct.

Turkish Airlines and Qatar Airways18
Turkish Airlines and Qatar Airways. (View large version19)

The upside of these designs is that they are quite efficient. Some of the other home pages look and feel much cleaner, but the design takes up a ton more room and requires a great deal of scrolling as a result. For example, Cathay Pacific20’s home page is longer than Turkish Airlines and Qatar Airways’ combined! Emirates14878216 isn’t quite as long as Cathay, but ranks a close second.

Cathay Pacific and Emirates22
Cathay Pacific and Emirates. (View large version23)

Moving along, Lufthansa7467248 has one of the more visually appealing pages, with its big, beautiful photos, and it’s another long scroller. By comparison, Air New Zealand25’s is super-short, and Singapore Airlines’ falls somewhere in between.

Lufthansa, Air New Zealand and Singapore Airlines26
Lufthansa, Air New Zealand and Singapore Airlines. (View large version27)

Finally, Delta28, Virgin America5129 and Ryanair30 all fall in the mid-range. All have plenty of information, options and white space on the home page, while minimizing the scrolling necessary to get through it all. On contrary, minimalistic designs by SWISS683113 and Norwegian Airlines713211 do seem as appealing as the ones with heavy imagery.

Delta, Virgin America and Ryanair33
Delta, Virgin America and Ryanair. (View large version34)

Aesthetically, I can’t help but feel that the most attractive pages here (Lufthansa, Cathay Pacific, etc.) take the longest to scroll through, unfortunately. Similarly, as mentioned, the shorter pages tend to be less attractive.

SWISS, Norwegian Airlines and RyanAir seem to have the simplest designs35
SWISS, Norwegian Airlines and RyanAir seem to have the simplest designs. (View large version36)

Design is about tradeoffs. Every seemingly simple decision, such as removing or adding white space, affects the overall experience. Of course we don’t know whether the airlines websites ran A/B tests on whether users find it easy to use the site, but the airlines websites with more white space did feel easier to work through. Always predict the effects that your decisions will have on end users, and then test those assumptions post-launch.

Promoting Airline Quality Vs. Wanderlust Link

Another interesting tradeoff I see in these designs speaks directly to two of the goals outlined earlier:

  • Convey the company’s brand and identity.
  • Inspire and educate curious potential travelers to make a purchase.

Both the imagery and copy on these websites tend to tackle only one of these goals at a time. Below, all three of the images, pulled from Singapore Airlines and Lufthansa, primarily promote the airlines themselves, rather than particular destinations. We all know that long flights can be incredibly uncomfortable, so the primary message here is that these airlines have your comfort as a top priority. Also, notice that two of the three promise added comfort through a more expensive ticket.

Singapore Airlines and Lufthansa37
Singapore Airlines and Lufthansa promote themselves. (View large version38)

Contrast the technique here with the one exhibited in the images below. Here, it’s not about the airline itself, but about what flying represents — a way to escape to exciting and exotic locations: Australia, Cancun, Zanzibar.

ther airlines promote the escape to locations39
Other airlines promote the escape to locations. (View large version40)

Some of the airlines focus on one of these strategies, while others try to juggle both, typically through the use of sliders that cycle through several messages and photos. This raises an important question. Are these sliders effective? Can these airlines effectively promote both their brand and their destinations by cycling through different sales pitches?

Sliders Everywhere Link

Almost every website in our list uses at least one image slider. Some use several. Singapore Airlines uses three sliders on the home page alone (four, if you count the small rotating news feed). In fact, sliders seem to be a logical and attractive way to fit a ton of content in a small space. However, as it turns out, some faulty assumptions might be at play here — namely, that a typical user will pay attention to, wait for and/or interact with a slider. Yet in many cases, sliders can actually cost you conversions. A quick search of studies and discussions on sliders reveals quite41 a bit42 of43 animosity44 towards this particular UI element.

Notice the strong language in the titles of these articles. Some designers are not only abandoning sliders, but viciously attacking them, too. That being said, we can’t assume that this sentiment is universal. Just because some people have found that their own sliders have reduced conversions doesn’t necessarily mean that all sliders on all websites are bad. Some UX professionals advocate not for killing sliders altogether, but rather for optimizing their design45 for better results46.

One slider that clearly needs some work is Delta’s:

Delta’s slider47
Delta’s slider. (View large version48)

Regardless of the viewport’s width, the photos in these sliders are brutally murdered by CSS. They’re being squished instead of cropped, an effect that’s exaggerated when you see the original images before the CSS takes hold:

Delta’s slider squishes the photos instead of cropping them49
Delta’s slider squishes the photos instead of cropping them. (View large version50)

This is a clear case of a slider being poorly executed. However, we can’t accuse all sliders of having these same problems. A simple way to make a slider more usable is to provide context to users — for example, thumbnails and text that explain what each item in the slider stands for. Sliders could also be made responsive, showing more items prominently when enough space is available and fewer items otherwise.

Airlines seem to depend on this particular UI element quite heavily, which makes all of the sliders look very similar, almost generic. I’d argue that the airlines might be well served by exploring and testing alternatives, such as an accordion or tabbed widget.

Secondary Tasks Link

Now that we’ve made some sweeping macro-level observations about these pages, let’s dive to the micro level. Referring to our goals above, we see that visitors to these home pages often need to accomplish a number of secondary tasks (the purchase flow being the primary directive): checking in, checking their flight status, etc. Most of the websites are similar in how they handle these tasks, but a few interesting details are worth noting.

The winner in this category is Virgin America5129. Rather than bombarding you with a million options, the home page is amazingly simple. One of the first items on the page distills almost all of the visitor’s major tasks into three simple categories: “Book,” “Check in” and “Manage.”

Virgin America distills almost all of the visitor’s major tasks into three simple categories: “Book,” “Check in” and “Manage.”52
Virgin America distills almost all of the visitor’s major tasks into three simple categories: “Book,” “Check in” and “Manage.” (View large version53)

Even if we zoom out and consider the entire navigation menu, it’s surprisingly concise. The visual hierarchy is straightforward, too. Notice how the designers have used bolded text and all caps as well as subtle vertical dividers to differentiate the sections.

Virgin America’s Navigation54
Virgin America’s Navigation. (View large version55)

Contrast this with Emirates’ experience, which has both vertical and horizontal navigation. However, the information all blends together. The page doesn’t have many more links than Virgin’s, but the lack of differentiation and hierarchy makes it feel much more difficult to sift through. Quick skimming is not a possibility here. I feel like I have to slowly and deliberately read each item to find what I’m looking for.

Emirates’ uses both vertical and horizontal navigation56
Emirates’ uses both vertical and horizontal navigation. (View large version57)

One link that I always find myself hunting for on any airline website is the one for checking in. It’s a key step when you have an upcoming flight, and it should be easy to find on any airline website. As we saw above, it’s pretty prominent on Virgin America’s home page. In fact, most of the websites in our list prioritize it in the header.

Air New Zealand, Turkish Airlines, Qatar and Singapore Airlines priotized the check-in in the header58
Air New Zealand, Turkish Airlines, Qatar and Singapore Airlines priotized the check-in in the header. (View large version59)

Unfortunately, not all websites make it so easy. Let’s see Lufthansa’s header.

Lufthansa’s check-in is not so easy to find60
Lufthansa’s check-in is not so easy to find. (View large version61)

Given up yet? You should have, because the link for checking in is nowhere to be found in the top 600 pixels of the home page. It’s way down, below that big graphic:

Lufthansa’s check-in is not so easy to find62
Lufthansa’s check-in is not so easy to find. (View large version63)

To be fair, this area is dedicated almost entirely to checking in, and it is also very clean and attractive. As much as I appreciate the design of this section on its own, though, my instinct was to hunt for this information at the top of the page, and not being able to find it was pretty frustrating.

It’s quite unlikely that Lufthansa’s user data shows that this is the best spot for the check-in widget. Or maybe that’s just where the designers stuck it because it looked good in the layout. Nevertheless, checking in doesn’t seem to be prioritized for the user, and unless you travel with Lufthansa a lot, it is difficult to spot. One can imagine that many travellers, once disappointed, would query “Lufthansa check-in” in a search engine instead — not a good experience.

It holds true everywhere: as designers, our job is to simply prioritize important actions and display them prominently. Never hide them behind an icon or button. Make them visible and easily accessible on desktop, tablet and mobile. Prioritize user needs, not company’s branding.

Your list of priorities might be huge and difficult to rank, and that’s exactly what designers of airline home pages face. One place to look for help is competing websites; you could identify common problems with user flow and start designing a better experience for precisely those problems.

Everybody wants to be better than their competitors, so address these issues head on. You could go as far as creating a spreadsheet with the most critical tasks and constraints: How could you add a bit of delight to the experience or reduce complexity? If you’re building a responsive website, look into the content itself in its purest form, examine it and repackage it to best suit the challenges of different form factors.

If you present pricing options for flights in a table on the desktop, you don’t necessarily have to keep it as a table on tablets and phones; it could be a set of accordions with data lists, for example. A seating plan on the desktop could be transformed into a UI that first offers general seating options and, based on the user’s selection, provides a simplified seating map with zooming functionality and a supporting data list.

Mobile Experience Link

Another important aspect of airlines websites is mobile strategy. In this data set, we have a sort of microcosm for how the Internet as a whole handles mobile users in 2015: A few websites have gone fully responsive, even more reroute users to a dedicated mobile website, and still others do absolutely nothing. Fortunately, at the time of writing only one airline, Ryanair, leaves mobile users out completely (depending on the user’s IP address, though — it seems to be rolling out a new responsive website now).

Here are the airlines with a responsive website:

Here are the airlines with a dedicated mobile website:

Flight-Booking Process Link

Now we get to the good stuff: booking a flight. Every airline on our list agrees on one thing: that this process should start right on the home page. That’s where the agreement ends, though. From here on out, it’s a battle of ideas and UX strategies.

Let’s focus on some of the major pain points that we encountered with some airlines and how these are solved or addressed by others.

Too Much Or Too Little Link

The flight-booking widgets across the home pages vary dramatically in complexity. Typically, you’ll see something like Singapore Airlines’ widget:

Singapore’s widget79
Singapore’s widget. (View large version80)

As you can see, the user has a good bit of work to do here. They have to choose their cities, type of flight, dates, seating class and so on, all from the home page before hitting the search button. Now contrast this widget with Virgin’s:

Virgin’s menu81
Virgin’s menu. (View large version82)

The interesting thing is that both airlines have to collect the same information. Singapore Airlines chooses to do it all in one place, which can be daunting but convenient. Virgin opts to draw out the process, pushing a lot of the work to later screens, but it feels more guided.

Overall, I like Virgin’s approach. The copywriting is friendly, and the simple interface makes me feel like the process is going to be easy. Remember that not every user books a flight and travels the globe regularly. For many, flying is quite a stressful experience. As designers, we have a great opportunity and even an obligation to reduce the stress associated with complex activities by making UIs that are simple, intentional and friendly.

That being said, Virgin’s widget is so simple that it might be frustrating. For instance, every other website lets users type to filter their destination. Virgin forces you to scroll through a list of results and manually click where you want to go. (Update: This has either been fixed or I totally missed that you can type in a destination in my earlier review. Either way, it works great now.)

Virgin’s menu83
Virgin’s menu. (View large version84)

Qatar Airways is similarly limited but in exactly the opposite way. It has no dropdown menu for users to choose from at all. Instead, users are forced to type in the destination.

Qatar’s menu85
Qatar’s menu. (View large version86)

Revealed Complexity Link

A smart technique for dealing with a complex process is to make the first step as simple as possible and then slowly reveal more as the user works through the steps.

Ryanair’s home page87
Ryanair’s home page. (View large version88)

As you can see, Ryanair’s home page widget is both attractive and simple. Once the user enters their destination, another step is revealed.

Ryanair’s home page89
Ryanair’s home page. (View large version90)

If this happened more than once, it’d be frustrating, but I found the interaction to be friendly enough the way it’s implemented.

A similar approach makes Virgin’s widget, which we saw earlier, seem simpler than it actually is. The guest controls are hidden in a fairly unconventional but easy-to-use dropdown menu.

Virgin’s widget91
Virgin’s widget. (View large version92)

Date-Picker Dilemmas Link

Providing a way for users to pick dates for a flight seems pretty straightforward, but here’s an interesting question: How many months should you show in the date-picker?

Ryanair date picker93
Ryanair date picker. (View large version94)
Emirates date picker95
Emirates date picker. (View large version96)
Qatar date picker97
Qatar date picker. (View large version98)

Some airlines show one month at a time, most show two, and Qatar throws caution to the wind, showing a huge widget that lets users view three months at a time.

Personally, I find that three months feels excessive and takes up way too much space for a modal (it blocks half the page). One month is fine, but two months is the sweet spot. Context is important: I’d wager that the vast majority of round-trip flights aren’t longer than a month, so a two-month view should be more than sufficient, while minimizing side-scrolling.

Turkish and KLM fare picker99
Turkish and KLM fare picker. (View large version100)

In Search of Low Fares Link

Choosing a date is one of the main areas of frustration for me when booking a flight. Like many travellers, I’m flexible with my schedule because I know that leaving a day earlier or later than planned can save me hundreds of dollars.

When forced to choose a firm date in one of those booking widgets, I worry that I won’t be given the chance to see a calendar of fares and that I’ll be stuck with my selection, instead of being able to shuffle my dates.

Airlines deal with this pain point in different ways. Delta allows users to choose between “Exact dates” and “Flexible days” (although the wording there is inconsistent).

Delta’s fare picker101
Delta’s fare picker. (View large version102)

Next, though, they show this crazy, mutant date-picker that has both a horizontal and vertical axis, allowing users to choose their departure and return dates in one go. In fact, this component is consistently used pretty much everywhere to display outbound and inbound flights along two axis, with prices along both dimensions. The matrix can get quite complex and overwhelming, especially if it contains more than 7 days on each axis.

Delta’s fare picker103
Delta’s fare picker. (View large version104)

The whole double-axis thing is interesting, but in practice, I needed a few seconds to figure out just what the heck I was looking at.

Air New Zealand implements its own version of this same idea to help users find a low fare:

Air New Zealand way to help users find a low fare105
Air New Zealand way to help users find a low fare. (View large version106)

Putting the vertical-axis titles on the right side and not rotating the text makes Air New Zealand’s fare finder easier to figure out, but I’m still not convinced this piece of UI is user-friendly.

Instead of using a matrix, International shows a nice overview of options, with corresponding prices, reducing the number of options to four days. Norwegian Airlines shows prices for five days, and Cathay Pacific, Singapore Airlines, Delta Airlines and Turkish Airlines show for seven days. Air Astana provides a complicated comparison table, with huge images as well as filtering and ordering options, which make the interface quite difficult to use. Air New Zealand doesn’t have a matrix at all; instead, it lets users choose a day to focus on (along with a corresponding price) and then shows all of the options for that day.

Norwegian Airlines shows prices for five days, and Cathay Pacific, Singapore Airlines, Delta Airlines and Turkish Airlines show for seven days107
Norwegian Airlines shows prices for five days, and Cathay Pacific, Singapore Airlines, Delta Airlines and Turkish Airlines show for seven days. (View large version108)

I wonder whether an alternate view of an accordion with flight options sorted by price would make the interface slightly less complex and the experience slightly more enjoyable. The user could then choose the view they prefer. In fact, the dual-view approach could work in many scenarios — for example, when data could be presented as a graph or as a table, or when an overview of products could be presented in a thumbnail-grid view or as a data list.

“Don’t Make Me Repeat Steps” Link

One frustrating thing that Air New Zealand does (as well as others) is force users to choose a date in the home page widget and then push them into the calendar fare view, where they have to choose again. I appreciate the effort in helping me find a low price, but if you’re going to take me to the low-fare calendar anyway, why make me choose a date on the home page? Wouldn’t it be better to ask me for the month or week when I’ll be travelling instead, or guide me to the low-fare calendar only if I explicitly choose to do so?

Virgin’s simpler process wins again here by making users choose dates only once, and doing it on a page that lets them compare fares.

Virgin makes users choose dates only once109
Virgin makes users choose dates only once. (View large version110)

Actions That Aren’t Actions Link

Another surprisingly frustrating action is choosing an actual flight. Seems like it should be easy, right? Not always. Take the flight schedule from Singapore Airlines below. First, I don’t find the plane/no-plane icon system to be intuitive, but let’s ignore that for now. Let’s also ignore the lack of prices in this list. Instead, let’s consider that you can’t actually select any of the flights in this schedule.

Singapore’s fare options111
Singapore’s fare options. (View large version112)

Instead, you have to memorize which flight you want, then click “Book Now,” and then start the booking process over with the widget on the home page. It seems downright ludicrous to me that this is the process, but that’s how it works.

Virgin makes a less serious but similarly confusing mistake. It presents fare options in rows, and each row is highlighted when you hover over it, which makes you think you can click it — but you can’t.

Virgin’s fare options113
Virgin’s fare options. (View large version114)

Instead, you have to click on one of the little three squares. This makes for a confusing experience in which you try to select a flight, click around, realize you’re doing it wrong, and then hunt around for the right solution. To me, a hover effect almost always implies that a click event is possible. This could be reworked so that a click on a row does make a selection, which would refocus your attention by highlighting the price boxes, or so that a click on a row selects one of the options (probably the cheapest).

A final example of click frustration is shown below in Lufthansa’s widget:

Lufthansa’s widget115
Lufthansa’s widget. (View large version116)

This little chart is a bit confusing. To make it worse, all of those vague little icons look like clickable buttons, but they’re not; they simply indicate the status of various options.

Checkout Flow: From Start to Finish Link

The essence of an airline website’s experience is to enable customers to purchase tickets seamlessly. Well, at least that’s what one would expect. In reality, the checkout experience is often anything but straightforward or seamless. Many things can (and do) go wrong, leaving customers in the dark, forcing them to figure out an interface or compare flight options. Admittedly, checkout experiences in general can get quite complex, so getting it right isn’t exactly easy.

This complexity is evident in the amount of effort required from the user to complete their purchase. Most airlines have between five and seven steps in their checkout process — the travel dates are followed by the flight selection, followed by upsells, followed by the seat selection, followed by payment, followed by the confirmation screen. Obviously, keeping the user actively involved throughout the process is critical; so, many airlines highlight the selected flight and price by fixing them either in the sidebar or at the top of the page — always within view.

Most airlines have between five and seven steps in their checkout process117
Most airlines have between five and seven steps in their checkout process. (View large version118)

Sometimes, the booking experience is quite frustrating from the very first step. Most airlines force you to select an airport to fly from, not just a city. Selecting a multi-city route is often difficult because the system assumes that you want to return to the city that you departed from. Selecting more than two multi-city flights is often simply impossible. For whatever reason, the lowest fare is usually highlighted with a tiny triangle in the upper-left or upper-right corner of the flight option — whereas highlighting the entire option instead might be better.

Airlines often distinguish between low-fare calendars and normal searches for flights119
Airlines often distinguish between low-fare calendars and normal searches for flights. (View large version120)

Airlines often distinguish between low-fare calendars and normal searches for flights, which assumes that users must explicitly search for low-fares when booking a flight. On Singapore Airlines’ website, one can choose between “View schedules” and “Search” for flights. The interface for selecting a seat is usually annoyingly small; icons that are used remarkably often are just as often unclickable; and users often have to verify their email address by retyping it (of course, most of us will just copy and paste our address, making this verification quite useless). KLM tries to motivate visitors to make a quick purchase by showing how many customers have just bought a similar flight or are looking at the option right now.

On the bright side, most airlines allow users to check out as a guest by default; as mentioned above, airport inputs usually have autocompletion; a currency converter is provided more often than one might expect; and sometimes you can even save a trip for future reference (Ryanair’s “wishlist”), “hold a flight” for a couple of days (Air New Zealand), automate your check-in (SWISS sends a boarding pass automatically 20 hours before departure) or even see the price in airlines miles (Delta).

All airlines have a good old-fashioned payment form with 5–7 input fields. Not a single airline, though, uses the single-field credit-card input pattern121; customers are usually required to select their credit-card type first and then input their digits. Testing transactions is a bit beyond the scope of this article (and our financial allowance, too, by the way).

Performance Link

Performance matters, and it affects conversions. However, finding a fast airline website — whether responsive or not — proved to be quite difficult. In most cases, airline websites load Modernizr, jQuery, a jQuery plugin for carousels, custom web fonts and a tracking script such as Omniture, Optimizely, OpenTag or uTag. All of these scripts together, with an A/B testing application running in the head of the page, make most of the websites quite slow. In fact, none of the reviewed websites have a start-rendering time below 1.8 seconds, even with optimal connectivity conditions, an average PageSpeed score is 50.5 on mobile and 63.4 on desktop, and none of the websites support HTTP/2.

Airline websites with better performance did turn out to be responsive. The fastest, though, proved to be New Zealand Airlines122’s old non-responsive website, with a start-rendering time of 1.79 seconds.

In terms of HTTP requests, the home page for Norwegian Airlines123 turned out to be the leanest (and are probably the newest), with 42 HTTP requests and weighing in at 1.1 MB. The design is well crafted, yet too many scripts block the rendering of the pages. Norwegian Airlines uses AngularJS. Performance is way better on subsequent loads, though. Norwegian Airlines’ CSS runs 15,610 lines long; both follow the BEM methodology.

Responsive doesn’t necessarily mean fast. Air Astana’s home page, weighing in at 4.1 MB, is responsive yet only starts rendering after 7 seconds124; Bootstrap, jQuery, jQuery UI, three different theme skins and Telerik’s web UI have been crammed into the head of the page. KLM’s responsive home page is faster125 and scores the highest on PageSpeed126, but it loads a blank.gif file that is 365 bytes yet causes 569 milliseconds in latency. Lufthansa127 is again slightly better, yet it requires jQuery, Dojo and uTag.

WebPagetest result128
Norwegian Airlines129 scores the highest on Page Speed, followed by Delta130 and Qatar Airways131 (both 64 on mobile). One shouldn’t make a mistake of comparing a language splash page (KLM, on the left) with an actual airline website (Norwegian, on the right). KLM doesn’t score as high on its internal pages. (View large version132)

Apart from Air Astana, another performance offender is Emirates133, with its 306 HTTP requests and 151 KB (Gzipped) of JavaScript (controls-main.js), although it starts rendering within 2.4 seconds! Also, Ryanair’s new responsive home page, with its whopping Speed Index of 21,745134, makes 89 HTTP requests and has a start-rendering time of 9.5 seconds on a cable connection. Ryanair makes heavy use of AngularJS and also loads a number of JavaScripts in the head synchronously, blocking rendering of the website. As discovered by Ben Schwarz, the reason for that is a plethora of expensive selectors135 being used — after all, the CSS file is 2.88Mb in size ungzipped.

Ryanair’s WebPagetest result136
Ryanair’s WebPagetest result137: That’s a lot of blocking JavaScript.

On average, the home pages of airline websites are around 1.94 MB. The code is usually quite up to date, yet every now and again you’ll find legacy scripts and techniques used. For example, Emirates still uses Cufón to deliver web fonts, with text embedded in images, and Lufthansa still uses Flash for checking in and selecting seats.

Lessons Learned Link

If you’ve never worked on an airline website, then hopefully this article will help you appreciate the scale of the work, even if it just scratches the surface of the complexity involved. From predicting hundreds, even thousands, of user actions to deciding what to promote in a limited amount of space, and even figuring out how many months to show in a date-picker, a lot of design decisions need to be made.

Frustrations Link

All of these airline websites get the job done, but we discovered plenty of minor and major frustrations:

  • Home page clutter overwhelms users with options.
  • To avoid clutter, too many airlines over-rely on sliders, which either hide important information or are clunky.
  • Multiple navigation menus on a single page can look crammed and flow in different directions, competing with each other visually.
  • Complex multi-matrix flight-booking widgets make the process of selecting a flight intimidating.
  • Redundant actions force users either to make choices they’re not ready to make or to repeat selections they’ve already made.
  • The UI for comparing flight prices is often weird and unexpected.
  • Users are often forced to play a guessing game about what’s clickable.
  • Low-fare calendars often appear at the wrong time and cause confusion, largely due to design.
  • During check-in, typing in passport and visa information is often very cumbersome. Smart defaults would go a long way. For example, birth date input fields and select menus are often set on the current date and, hence, require a lot of annoying scrolling.
  • After check-in, many airlines don’t provide enough information about the terminal, luggage restrictions and airplane.
  • Multi-city flights are typically impossible to book or just broken. Trips are often assumed to be either one way or return. And if you book a multi-city trip, you are expected to return to the city you departed from.
SWISS prompts a little pop-up if they assume that you are about to abandon the purchase138
SWISS prompts a little pop-up if they assume that you are about to abandon the purchase. (View large version139)

Responses Link

In addressing these complaints, we can derive some important lessons on designing projects of this scale:

  • Sliders might feel like a great way to manage clutter, but they are often a complete failure in interaction. If you’re putting critical information two or three slides in, odds are that many users will never see it. Never hide important content.
  • The answer to problems of information architecture isn’t to add a bunch of navigation menus. Prioritize and put the important content up front, throughout the different form factors.
  • Obvious but worth pointing out: in addition to keeping menus lean, consider visually differentiating them to establish a clear hierarchy, instead of having 15 identically styled links.
  • For lengthy processes, consider gradually revealing complexity as users progress, rather than overwhelming them up front.
  • Always be aware of which items are indicated as being clickable. Nothing confuses users quicker than not being able to figure out where to click.
  • Instead of showing a complex, mutant date-picker matrix, provide an overview of options for 4 days and highlight the lowest fares prominently (or even as a default selection).
  • Handy features such as airport input autocomplete, wishlist, flight reservation, automated check-in or currency converter help make the experience more delightful.
  • By prioritizing performance and providing a smooth UX, you can outperform competitors by a long shot — mostly because most airlines websites out there are quite slow and the experience is quite frustrating.

Break Down The Complexity Link

Overall, airline websites are so completely inundated with information, options, possible user flows, instructions and sales pitches that I found any website that simply cleared out the mess and gave me some space to be a breath of fresh air.

This is a primary reason why Virgin received more attention throughout this article than almost any other airline. Overall, its website just felt better. The design was clean and attractive, the copy was friendly, and I was guided through the steps without much extra thought or frustration.

You need only look at the image above to get a feel for what it’s like to book a flight with Virgin140
You need only look at the image above to get a feel for what it’s like to book a flight with Virgin. When you get to selecting a seat, the occupied areas are adorned with silly faces. (View large version141)

You need only look at the image above to get a feel for what it’s like to book a flight with Virgin. When you get to selecting a seat, the occupied areas are adorned with silly faces. Most airlines take themselves far too seriously to ever consider this delightful little design quirk, which makes it that much more fun and refreshing.

Websites that try the hardest to think of and provide everything a user might need are often the ones that fail the most in meeting our desires and expectations. Those rare websites that cut away all the bloat and leave us with a limited but solid core experience are the ones we remember and come back to again and again. Sounds familiar, doesn’t it? Well, it remains to be seen how airline websites will evolve — hopefully, towards leaner, faster and more delightful experiences.

Accessibility Link

[Update Nov. 17, 2015] This section on accessibility was written by Adrian Roselli142, which he has submitted after a conversation in our comments143. [Ed.]

Too many equate accessibility support with screen reader support, which is short-sighted (ugh, pun) and inaccurate. It also requires some tools and experience to do well.

Instead of screen readers, I’ll often quickly test a web site for accessibility using one or two quick techniques to determine how likely further testing will show more issues. I start with a keyboard, and then use a color contrast tool. As such, I am limiting the scope of accessibility testing to just keyboard and contrast.

I looked at the top 5 airlines as Joshua did, but I stopped there:

Qatar Airways Link

Qatar makes extensive used of the tabindex attribute, generally a bad idea149 if the value is greater than 0. Thanks to this, I am immediately brought to the From field to book a flight when I start tabbing on the page.

While I can pick cities, I cannot access the calendar controls at all to choose a date — I have to type my dates. I also cannot change the number of people flying, whether by typing a number or hitting the enter key to open the menu. Without “valid” dates, I cannot even submit the form.

If I want to check in online, it takes me 33 taps of my Tab↹ key to get to the tab control and activate the panel, then another 57 taps to get to the first field. This includes a trip through every link in the footer and browser’s address bar.

If you tried to check in using an option from the primary navigation, it will take 39 taps to find you cannot open the menu at all. If you sit on the page long enough, you’ll be rewarded with an overlay that requires a full round-trip of every focusable item on the page in order to find the unlabeled close button.

Compounding this experience is the low contrast body text coupled with links that don’t differ much in contrast from that text, nor from themselves when they receive focus. Navigation items have a barely-perceptible difference in color when they receive focus, making the site incredibly difficult to use with a keyboard.

Singapore Airlines Link

Singapore Air takes the confounding keyboard experience a step further and removes all focus indicators when using a keyboard. Even looking to your browser’s footer for an indication where a link may take you is fruitless, as navigation links only use “#” as the URL. This may be moot, as once you open a menu you cannot get into it.

If you want to check in to a flight, your best bet is to hit the Tab↹ key 28 times to get to the From field where you search for flights, then Shift + Tab↹ (backward) three times and hit the Enter key (you won’t know what you’ve selected until you press the key).

The tabs that allow you to check in, book a flight, etc., are the best examples of the contrast issues on the page. They are white text with a bit of a drop shadow, in boxes that are mostly transparent to a cycling set of background images (often white or light gray). Much of the time they are completely illegible.

You might notice a box near the top of the page with the text Important set in orange. Not only is that alert text too low contrast, but each alert itself is a link and therefore a tab-stop on the page. There is no indication how many there are, which makes tabbing through the page even trickier as it’s hard to count visually as you go.

The site also demonstrates how you can satisfy a checklist by using labels and make the experience worse — it has a value of  , ensuring it will bring no value. This isn’t as funny as the flag image which has a longdesc value that points to a 404.

Cathay Pacific Airways Link

At this point, Cathay Pacific is a breath of fresh air. The site is generally keyboard friendly. The links have underlines, the menus are usable with a keyboard, and most items on the page have a focus style.

The site has an accessibility statement150 that primarily talks about users with visual impairments. From within the site there is even a control to enlarge the text on the page, though it doesn’t carry over to the home page.

As you scroll down the page, an overlay banner appears to show the site logo and represent the site navigation in a hamburger menu. The problem is when you reverse-tab back up the page, this has the effect of partially covering elements you want to see.

The tab control works with a keyboard, which is great and easy. Unfortunately, the fields themselves visually hide the labels and rely on placeholder text that has insufficient contrast.

From just a keyboard and contrast perspective, the site gets a lot right though.

Turkish Airlines Link

Turkish Air brought me back down. Without any focus indicators, it’s nearly impossible to see where you are on the page.

When booking a flight, form controls such as the city search or calendars get no focus and cannot be activated via the keyboard. Not only that, you cannot change the dates by typing, a theme which carries into the passenger count. There are plus/minus images (spans) which cannot receive focus, and typing a number, hitting the Enter key or space bar all have no effect.

Thanks to the use of tabindex, the visual order does not match the tab order. The search icon (it’s supposed to be an an input type="submit", but due to a type it’s just a text field with a magnifying glass background image) has tabindex of 1, but the search field itself has no tabindex. You’d have to press the Tab↹ key 18 times to enter search text.

A more compelling example of the keyboard problems: it will take you 28 presses to get to the Check in tab on the home page, 3 more presses to get to the fields to choose between e-ticket or reference number, then 145 tabs to get to the field itself to enter your number (which has tabindex of 21).

Contrast for the content is generally good, though links often lack enough contrast between themselves and the background color and the surrounding copy color. The lack of any focus styles also means no contrast change when the links are selected.

Emirates Link

Like the close of a good fairy tale, Emirates made me hopeful again.

Not only does Emirates use focus styles throughout the home page, it even has a Skip to main content link that works (by using a button to script around the Chrome bug). In fact, the very first link in the tab order is to an accessibility statement151 (though the link is visually hidden). It’s not just boiler-plate either, it was written with some thought, echoing the effort I see on the site.

Here we learn that the site uses accesskey, which while they can be problematic, leans primarily on numbers for navigating the site elements, seemingly based on the old UK government standard152.

Most of the expanding elements on the page can be quickly collapsed by pressing the Esc key, including a user-activated video. The Esc key implementation can use some tweaking, as it doesn’t always put the focus back where the user was when activating the control. Many of these items have a Close link as well, though it’s not always first in the flow.

While there are a few javascript:void(0) links on the page, the control that allows you to choose between booking or checking in is coded so if the JavaScript fails, the link itself will take you to a real page.

Particularly exciting is that not only do the calendar controls to work with the keyboard, they support the arrow keys to quickly move through them.

Contrast is generally very good. The links in the body copy can use some work as they don’t have enough contrast to indicate hover states (they are easier to see when tabbing through them) and they have no underlines.

(ml, al, jb, vf)

Footnotes Link

  1. 1 http://www.worldairlineawards.com/awards/world_airline_rating.html
  2. 2 http://www.qatarairways.com/global/en/homepage.page
  3. 3 http://www.singaporeair.com/en_UK/us/home
  4. 4 http://www.cathaypacific.com/cx/en_US.html
  5. 5 http://www.turkishairlines.com/en-us/
  6. 6 http://www.emirates.com/us/english/
  7. 7 https://www.virginamerica.com
  8. 8 http://www.lufthansa.com/uk/en/Homepage
  9. 9 http://www.ryanair.com
  10. 10 http://www.airnewzealand.com
  11. 11 http://beta.norwegian.com/
  12. 12 http://www.delta.com
  13. 13 https://www.swiss.com
  14. 14 http://www.klm.com
  15. 15 http://airastana.com/
  16. 16 http://www.turkishairlines.com/en-us/
  17. 17 http://www.qatarairways.com/global/en/homepage.page
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a01-turkish-qatar-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a01-turkish-qatar-opt.jpg
  20. 20 http://www.cathaypacific.com/cx/en_US.html
  21. 21 http://www.emirates.com/us/english/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a02-pacific-emirates-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a02-pacific-emirates-opt.jpg
  24. 24 http://www.lufthansa.com/uk/en/Homepage
  25. 25 http://www.airnewzealand.com/
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a03-lufthansa-airnewzealand-singapore-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a03-lufthansa-airnewzealand-singapore-opt.jpg
  28. 28 http://www.delta.com/
  29. 29 https://www.virginamerica.com/
  30. 30 http://www.ryanair.com/
  31. 31 https://www.swiss.com
  32. 32 http://beta.norwegian.com/
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a04-delta-virgin-ryanair-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a04-delta-virgin-ryanair-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a05-swiss-norwegian-ryanair-opt.png
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a05-swiss-norwegian-ryanair-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a06-singapore-promoting-opt.jpg
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a06-singapore-promoting-opt.jpg
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a07-promoting-opt.jpg
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a07-promoting-opt.jpg
  41. 41 http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
  42. 42 http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496
  43. 43 http://marketingland.com/rotating-banners-image-sliders-kill-conversions-89984
  44. 44 https://yoast.com/opinion-on-sliders/
  45. 45 http://uxmovement.com/navigation/why-users-arent-clicking-your-home-page-carousel/
  46. 46 http://www.jacksonwynne.com/image-slideshow-alternatives/
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a08-delta-slider-opt.jpg
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a08-delta-slider-opt.jpg
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a09-css-opt.jpg
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a09-css-opt.jpg
  51. 51 https://www.virginamerica.com/
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a10-virgin-secondary-tasks-opt.jpg
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a10-virgin-secondary-tasks-opt.jpg
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a11-virgin-secondary-tasks-opt.jpg
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a11-virgin-secondary-tasks-opt.jpg
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a12-emirates-navigation-opt.jpg
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a12-emirates-navigation-opt.jpg
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a13-checkin-opt.jpg
  59. 59 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a13-checkin-opt.jpg
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a14-lufthansa-checkin-opt.jpg
  61. 61 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a14-lufthansa-checkin-opt.jpg
  62. 62 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a15-lufthansa-checkin-opt.jpg
  63. 63 https://www.smashingmagazine.com/wp-content/uploads/2015/11/a15-lufthansa-checkin-opt.jpg
  64. 64 http://www.singaporeair.com/en_UK/us/home
  65. 65 http://www.cathaypacific.com/cx/en_US.html
  66. 66 https://www.virginamerica.com
  67. 67 http://www.lufthansa.com/uk/en/Homepage
  68. 68 https://www.swiss.com
  69. 69 http://www.klm.com
  70. 70 http://airastana.com/
  71. 71 http://beta.norwegian.com/
  72. 72 http://www.ryanair.com
  73. 73 http://www.qatarairways.com/global/en/homepage.page
  74. 74 http://www.lufthansa.com/uk/en/Homepage
  75. 75 http://www.turkishairlines.com/en-us/
  76. 76 http://www.airnewzealand.com
  77. 77 http://www.delta.com
  78. 78 http://www.emirates.com/us/english/
  79. 79 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b01-singapore-widget-opt.jpg
  80. 80 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b01-singapore-widget-opt.jpg
  81. 81 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b02-virgin-widget-opt.jpg
  82. 82 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b02-virgin-widget-opt.jpg
  83. 83 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b03-virgin-widget-opt.jpg
  84. 84 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b03-virgin-widget-opt.jpg
  85. 85 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b04-qatar-dropdown-opt.jpg
  86. 86 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b04-qatar-dropdown-opt.jpg
  87. 87 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b05-ryanair-disclosure-opt.png
  88. 88 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b05-ryanair-disclosure-opt.png
  89. 89 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b06-ryanair-disclosure-opt.png
  90. 90 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b06-ryanair-disclosure-opt.png
  91. 91 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b07-virgins-disclosure-opt.jpg
  92. 92 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b07-virgins-disclosure-opt.jpg
  93. 93 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b08-datepicker-ryanair-opt.jpg
  94. 94 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b08-datepicker-ryanair-opt.jpg
  95. 95 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b09-datepicker-emirates-opt.jpg
  96. 96 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b09-datepicker-emirates-opt.jpg
  97. 97 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b10-datepicker-qatar-opt.jpg
  98. 98 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b10-datepicker-qatar-opt.jpg
  99. 99 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b11-datepickers-turkish-klm-opt.jpg
  100. 100 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b11-datepickers-turkish-klm-opt.jpg
  101. 101 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b12-delta-lowfare-opt.jpg
  102. 102 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b12-delta-lowfare-opt.jpg
  103. 103 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b13-delta-lowfare-opt.jpg
  104. 104 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b13-delta-lowfare-opt.jpg
  105. 105 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b14-airnewzealand-lowfare-opt.jpg
  106. 106 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b14-airnewzealand-lowfare-opt.jpg
  107. 107 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b15-calendars-lowfare-opt.jpg
  108. 108 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b15-calendars-lowfare-opt.jpg
  109. 109 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b16-virgin-chooseonce-opt.jpg
  110. 110 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b16-virgin-chooseonce-opt.jpg
  111. 111 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b17-singapore-actions-opt.jpg
  112. 112 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b17-singapore-actions-opt.jpg
  113. 113 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b18-virgin-actions-opt.jpg
  114. 114 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b18-virgin-actions-opt.jpg
  115. 115 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b19-lufthansa-actions-opt.jpg
  116. 116 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b19-lufthansa-actions-opt.jpg
  117. 117 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b20-seat-quality-opt.jpg
  118. 118 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b20-seat-quality-opt.jpg
  119. 119 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b21-seats-opt.jpg
  120. 120 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b21-seats-opt.jpg
  121. 121 http://bradfrost.com/blog/post/single-field-credit-card-input-pattern/
  122. 122 http://www.webpagetest.org/result/151102_XY_18P1/
  123. 123 http://www.webpagetest.org/result/151102_RP_18P9/
  124. 124 http://www.webpagetest.org/result/151102_8S_18PH/
  125. 125 http://www.webpagetest.org/result/151102_HM_T53/
  126. 126 https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.klm.com%2F&tab=desktop
  127. 127 http://www.webpagetest.org/result/151102_GQ_18NV/
  128. 128 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b22-pagespeed-scores-opt.png
  129. 129 https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fbeta.norwegian.com%2F&tab=mobile
  130. 130 https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.delta.com%2F&tab=mobile
  131. 131 https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.qatarairways.com%2Fglobal%2Fen%2Fhomepage.page&tab=mobile
  132. 132 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b22-pagespeed-scores-opt.png
  133. 133 http://www.webpagetest.org/result/151102_E5_18NJ/
  134. 134 http://www.webpagetest.org/result/151106_C4_AN3/
  135. 135 https://medium.com/performance-snapshot/performance-snapshot-ryanair-s-2015-redesign-dbd508c78a33
  136. 136 http://www.webpagetest.org/result/151106_C4_AN3/
  137. 137 http://www.webpagetest.org/result/151106_C4_AN3/
  138. 138 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b24-zurich-flight-behind-opt.png
  139. 139 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b24-zurich-flight-behind-opt.png
  140. 140 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b25-virgin-complexity-opt.jpg
  141. 141 https://www.smashingmagazine.com/wp-content/uploads/2015/11/b25-virgin-complexity-opt.jpg
  142. 142 http://adrianroselli.com
  143. 143 https://www.smashingmagazine.com/2015/11/airline-websites-2015-front-end-performance-ux-lessons-learned/#comment-1285331
  144. 144 http://www.qatarairways.com/global/en/homepage.page
  145. 145 http://www.singaporeair.com/en_UK/us/home
  146. 146 http://www.cathaypacific.com/cx/en_US.html
  147. 147 http://www.turkishairlines.com/en-us/
  148. 148 http://www.emirates.com/us/english/
  149. 149 http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html
  150. 150 http://www.cathaypacific.com/cx/en_US/site-help/accessibility.html
  151. 151 http://www.emirates.com/us/english/sitetools/accessibility.aspx
  152. 152 https://web.archive.org/web/20070409145542/http://archive.cabinetoffice.gov.uk/e-government/resources/handbook/html/2-4.asp#2.4.4
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Josh Johnson is the Product Manager for Creative Market. He's also a writer, designer, and photographer, and currently lives in Phoenix.

  1. 1

    Guillaume Molter

    November 10, 2015 6:50 pm

    Swissair (swissair.com) design is not minimalistic….the airline doesn’t exists anymore. You have to go swiss.com and while I really like their website…you can’t call it “minimalistic”.

    6
  2. 2

    Adrian Roselli

    November 10, 2015 6:58 pm

    I’m disappointed that a post about UX doesn’t touch on accessibility in even the lightest way possible. The biggest clue is calling Virgin America a winner in any category, secondary tasks or not.

    The Virgin America site is a well-documented accessibility nightmare. On the simplest level, it is completely unusable with a keyboard (http://adrianroselli.com/2014/06/keep-focus-outline.html). On a more complex level, it fails to work with screen readers at all (http://youtu.be/04DOp1F9Od4?t=20s). These are only two examples.

    Virgin America recognizes this, even if it refuses to publicly acknowledge it. Knowing the Air Carrier Access Act (http://www.gpo.gov/fdsys/pkg/FR-2013-11-12/pdf/2013-26749.pdf) kicks in a month from Sunday, Virgin America hastily pulled together a separate-but-unequal “assistive” version (https://access.virginamerica.com/h5/assistive/index) of its site that also fails at accessibility (https://twitter.com/pauljadam/status/661939303694516224).

    The “assistive” version of the site also suffers from a terrible UX and poor performance, so I doubt it would rank well here on its own.

    If you plan to continue your series to explore the “current state of front-end, UX and performance,” then please fold some basic accessibility tests into the mix (keyboard, contrast, etc.). As it is, most users benefit from these affordances, not just disabled users.

    11
    • 3

      Vitaly Friedman

      November 10, 2015 7:11 pm

      Very, very good point, Adrian — we will address these issues, and we will review accessibility as well. Thanks for bringing it to our attention.

      4
      • 4

        Adrian Roselli

        November 10, 2015 7:34 pm

        Thanks. You can always ping just about anyone in the accessibility community for some quick tips or checks (including me, but others are less grumpy).

        1
      • 5

        Kazuhito Kidachi

        November 11, 2015 12:04 am

        In terms of accessibility, please let us know how things going on regarding ACAA.

        0
    • 6

      Great feedback. That’s definitely an extremely important consideration that I wish I would’ve hit on in the article.

      5
  3. 7

    Tristan Manuel

    November 10, 2015 6:59 pm

    Switzerland’s carrier Swissair ceased operations in 2002. It is SWISS (Swiss International Air Lines) now.
    Zurich Air does not (and has never) exist.

    5
  4. 12

    http://www.cvgairport.com is a great airport website to check out. It was named top Sitefinity website of the year in the aviation category for 2015.

    1
  5. 13

    “Virgin forces you to scroll through a list of results and manually click where you want to go.”

    That’s not the case. It’s a text input with filtering.

    2
  6. 14

    Great article… though, in some areas, I seem to disagree with the underlying assumptions. Looking for the check-in button or link isn’t necessarily a hunting experience. I am rarely simply going to the site looking for the check-in page. Instead, I click the link in my confirmation e-mail.

    2
    • 15

      Not everyone checking in made the booking themselves, and so has the email. Other people will get friends/relatives/colleagues to check in for them.

      0
  7. 16

    “That being said, Virgin’s widget is so simple that it might be frustrating. For instance, every other website lets users type to filter their destination. Virgin forces you to scroll through a list of results and manually click where you want to go.”

    That’s not correct. User can type in and filter destination.
    http://www.gfycat.com/TalkativeDefensiveEmperorshrimp

    1
  8. 18

    Steven Wakabayashi

    November 10, 2015 9:21 pm

    http://matrix.itasoftware.com has a great “timeline” approach towards finding the cheapest fare with flexible dates.

    0
  9. 19

    The pagespeed results for KLM misleading. the page you check is the language gate, which is only very lightweight. try their localized version instead, and the results are worse.
    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.klm.nl

    1
  10. 21

    thank you for that absolutely helpful and eye opening article. I like that you clearly state that airline tickets are a complex product that isn’t easily transported to a website (for some people this isn’t initially expected and expectations are hard to meet then).
    Considering UX I absolutely agree with the comments about accessibility, which is that close to UX finally that it should play a much more important role that people think it should nowadays. Something especially airlines serving the U.S. Market should be aware of.
    Finally, thanks for so much work of analyzing those pages. It’s much appreciated.

    1
  11. 23

    thank you very much for the interesting article.
    As a frequent traveller, especially with Turkish Airlines i was very excited to read through the article. The service and all-in-all experience with TK is awesome, but the homepage always annoyed and frustrated me. It cannot be compared to the TK i know from the air.
    I eagerly wait for a complete refresh.

    Going a bit deeper in to the user backend for airlines miles, here talking about TK, there could be some more improvements regarding to UX. It is sometimes frustrating.
    I don’t want to talk about the frustations i experienced during awarding a ticket from Miles & Smiles. As if TK wanted to tell me: you shall not book a free ticket, you earned with spending a lots of money before, dude.

    But the very very very (attention to the 3) first step: The splash-screen on http://www.turkishairlines.com/
    Just try to select your country… THREE!!!111 clicks (includes mouse move) to the homepage… in ciphers: 3. in good old roman way: III
    sorry for exeggeration, but that is so much true.
    And guess what: the page does NOT remember your choise. not even a single minute.
    Navigate to http://www.turkishairlines.com/ and go for three again.

    just my two cents.. as a (usually) happy TK customer.. just my THREE cents.

    0
  12. 24

    It’d be an interesting additional data point to find out what inventory management systems each of these websites are using – there are only a few, e.g. SABRE, Amadeus, etc. – and correlate that with the front-end findings to see whether some are caused by underlying systematic issues with the vendor solution rather than the “client” design choices.

    7
    • 25

      It does have a huge impact. Spot the Amadeus by 7×7 grid for example.

      It is definitely worth mentioning that none of those websites will have evolved out of the decision making of one single designer, team or even company, and as such be taken into consideration if judging the decisions of each of the parties involved. However, it’s perfectly valid to analyse the experience as a whole. The learnings you might draw from it are of value to all of them.

      1
  13. 26

    The level of complexity of airline websites who serve international flights versus airlines who only serve domestic flights, are completely different. This should be taken into account.

    6
  14. 27

    Brendan Underwood

    November 11, 2015 3:36 am

    Thanks for writing this Joshua. Some great insight. I feel though considering we’re now in 2015, that the focus almost 95% on Desktop was a bit of a miss. Maybe less airlines and comparison of how their Desktop and Mobile (smartphone) versions worked would have given us a great insight into how well these websites work based on your criteria.

    Thanks again.
    Brendan

    3
  15. 28

    Paulo Foerster

    November 11, 2015 7:51 am

    Emirates navigation changed recently and some of your suggestions were changed before this article goes live ;) really good source of information! well done!

    1
  16. 29

    Thanks Joshua, I really enjoyed the article and am looking forward to more in this series. It’s really interesting to see how different teams design for the same industry and tasks, especially when I get to learn st their expense :)

    1
  17. 30

    Nice work, Joshua and the editorial team!

    As an additional point, you might want to mention that Norwegian Airlines has Low Fare Calendar as well (http://www.norwegian.com/uk/flight/lowfare/?D_City=LGW&A_City=OSL&TripType=2&D_Month=201511&R_Month=201511&AdultCount=1&ChildCount=0&InfantCount=0&D_Day=1&D_SelectedDay=11&R_Day=1&R_SelectedDay=11 for example), where they show prices for the whole month and you can navigate between the months.

    Looking forward to the next analysis articles!

    1
  18. 31

    Great article! I still remember how frustrated I was when I was booking my first airfare, sometimes it’s even hard to navigate on these sites. On the other hand, I understand it’s pretty complex to design a site with so much information added. It would be great if a UX enthusiast who has experience with these kind of sites would join this conversation. I would be really interested what kind of tools do they use to track their visitors and how strict the airlines are when it comes about their webpage. I think they are really conservative and don’t let the designers to experiment a lot with new methods.

    0
    • 32

      Hi Eric,
      I think you should take legal requirements into consideration as well. It’s not about being strict or conservative. Air carriers that are active in the US market have to fulfill rules determined by the Department of Transportation (DOT). I’ve been working as a UX designer for airline customers for six years now and we experiment a lot by using fancy new and also good old methods. ;)

      @Joshua: Thanks! You did a great job!

      Cheers,
      Coralie

      0
      • 33

        Hi Coralie,

        Thank you very much for your reply! I’m not from the US and I didn’t know about this DoT legal requirement for US based air carriers. It’s good to know that they are not as conservative as I thought :).

        0
  19. 34

     
    Re: Spot The Check-In Link — Why can’t airline websites simply cookie the user after a flight booking is completed, set the cookie date correctly, and prioritize/highlight the Check-In link on the user’s next visit?
     

    1
    • 35

      Question: Why is there still a check-in necessary?
      Answer: To see you as a customer once, get your email address and upsell you that extra baggage, hotel or insurance.
      And from a legal perspective the responsibility for the passenger goes from the airline to the airport – but that would be ok at the security check-in too.

      Nobody makes money in the airline business – especially the airlines.

      0
  20. 36

    Thanks for this, some interesting observations.
    Ryanair’s progressive disclosure of helping you pick a destination is fine if you know which country you want to go to, but some (mostly business?) travelers may know they need to go to a city, but not be sure which country it’s in.
    With regard to forcing people to pick a specific date – if you just asked them for a month, as you suggest, then if they wanted to travel at the end of one month or start of the next, it would be more awkward. You also suggest to ask the traveler for the week they want to travel, but I don’t know how you would do that in way that was less complicated than asking for a date. As you demonstrate, the date is simply an anchor point for most airlines to show a range of fares on different days, which is, I think, what you say you want.
    You don’t mention in the article whether the airlines showed one calendar for both out and return dates, or a separate calendar for each. Both methods have their issues.
    Your criticism of the Singapore process is actually off the mark. As you point out further on, you can choose to display schedules, or go through the booking process. The image you show for Singapore is of the schedule display, not the booking process. The Singapore site could probably be clearer on the difference. Many airline sites will have similar schedule displays and booking, but not so closely linked.
    I love the description of a mutant crazy date picker.

    0

↑ Back to top