Airberlin looses users because of simple usability issues

Problem

I was reading an article on Salon, when an advertisement caught my attention. Normally I’m ad-blind like pretty much anyone else on the planet, but this one must have been designed very well to catch my attention for a click:

airberlin’s advertisement on salon.com

Living in Stockholm (Sweden) and recently coming back from a trip to Italy, I’m a little price-aware for the flights that go to mainland Europe. So I clicked hoping for a bargain for my next vacation but what I experienced was so terrible that I gave up immediately (here is the page):

It is very hard to select a city in airberlin’s list of airports

Now everyone who has worked with online advertisement knows that when users click on your ad, the landing page should keep them engaged within the first 10-30 seconds, otherwise the user is gone. In this post I only talk about the airport choice. There are multiple things wrong:

No scroll

When you click the link to choose the airport, a list opens but the mouse scroll doesn’t work. So the user have to repeatedly click on the scrollbar buttons or drag the scrollbar handle while keeping an eye on where in the list he is. It takes more than 10 seconds to find sweden. But if you are used to the comfortable and fast navigation methods like Macbook’s trackpad or mouse wheel, browsing that airport selection combobox is an attraction killer.

No keyboard

Failed at using trackpad, I changed to keyboard (that’s also an attraction killer, because every change from mouse to keyboard and back takes time and distracts the user). Normally in the web, when there is a combobox, you can just start typing a word and it will automatically navigate to an option that is closest to what you have typed: So I typed “stockholm” and ended up here:

After typing “stockholm”

Why Makedonien (Macedonia in Swedish)? Because the stupid combobox doesn’t navigate to what you typed, but it just navigates to a word that starts with the last letter you have typed. So if I want to choose Stockholm, I have to type “S” and I’ll see the first word with “S” and left alone. From there I have to click my way keeping an eye on the list till it shows my destination. Some may argue this is not such a big deal, but for a user who came to a website just for a quick check, this is a flaw.

It’s not easy to go back

Learning from my mistake, I decided to keep pressing “S” until I see Sweden or Stockholm. I kept pressing:

  1. Shweiz
  2. Serbien
  3. Seychelles
  4. Singapore
  5. South Africa
  6. Spanien
  7. Sti Lanka
  8. Storbritannien
  9. Sverige

The list was longer than I expected because since the offer was about Europe I thought I’m going to see only 4 options: Slovakia, Slovenia, Spain, Sweden. But after 4 times of pressing “S” I didn’t see Sweden. Instead I saw “Singapore” so I realized this list is not about Europe so being irritated I kept pressing faster. But apparently it was too fast because on my 9th try, I passed “Sverige” which is the swedish word for the name of the country Sweden. So I ended up in Shweiz again:

I ended up on Schweiz again!

One thing about this particular combobox control is that it jumps everytime you press the key so you really don’t know if you have reached the end of the list unless you keep track of the words and keep their order in your mind. So I kept pressing “S” to reach to Sverige again, and this time it took 9 more tries. I passed it again (my fault). I tried 9 more times and stopped at Sverige.

By that time I totally lost my interest. My attention was focused on the challenge that I had in hand: choosing the country Sweden. By the time I finished the challenge, I was too distracted to think about the destination and hey look: there’s another combobox right under it for choosing the destination!

Damn! There are two of them!

“no, no, no” I said and immediately closed the page.

Freeway vs. gravel road

Think about it like this: you are driving smoothly in a clean and nice freeway, suddenly you see a sign to some place you may like to try, you decide to change your path and go there, but the new path is a gravel road that you have to drive slowly and it’s just painful soon you decide to go back to the freeway again. In this case, airberlin is loosing potential customers simply because the navigation is too painful.

Solution

First of all, the origin (“Från” = From) could be pre-selected to Sweden. The ad was about Sweden so it’s a safe guess to say whoever clicks it is either in Sweden or knows Swedish. The URL from the site suggests that it knows that the visitor actually knows Swedish!

Secondly, as a web developer, I’ve seen something similar to this hard-to-use control. It resembles Adobe Flex/Flash visual controls. There might be some technical reasons why developers of this website have decided to use these controls instead of the standard browser controls. But my best guess would be: somebody was trying to learn new things instead of keeping things simple. But that’s just a guess and there’s a high chance I might be wrong! I’m just saying! ;) Anyway, a good solutions would be to use the standard browser controls. Something like this code can be good:

A suggested combo box using standard controls

JSFiddle

<select>
<option>Slovenia</option>
<option>&nbsp;&nbsp;&nbsp;Airport 1</option>
<option>&nbsp;&nbsp;&nbsp;Airport 2</option>
<option>Slovakia</option>
<option>&nbsp;&nbsp;&nbsp;Airport 1</option>
<option>&nbsp;&nbsp;&nbsp;Airport 2</option>
<option>&nbsp;&nbsp;&nbsp;Airport 3</option>
<option>Spain</option>
<option>&nbsp;&nbsp;&nbsp;Airport 1</option>
<option>&nbsp;&nbsp;&nbsp;Airport 2</option>
<option>&nbsp;&nbsp;&nbsp;Airport 3</option>
<option>&nbsp;&nbsp;&nbsp;Airport 4</option>
<option>&nbsp;&nbsp;&nbsp;Airport 5</option>
<option>Sweden</option>
<option>&nbsp;&nbsp;&nbsp;Airport 1</option>
<option>&nbsp;&nbsp;&nbsp;Airport 2</option>
<option>&nbsp;&nbsp;&nbsp;Airport 3</option>
</select>

In order to detect the individual <option> selections, the web developer can use element id. Simple, usable and elegant! airberlin would earn the money spent on improving their advertisement landing web page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s