Sunday, February 10, 2013

AirAsia's Bad Email Design

I just got an AirAsia email newsletter a few days ago. It was about their "Indochina Adventure" campaign.

A normal AirAsia newsletter, eh?
(View an online version of the email here.)

Everything in the email was fine, just like the usual AirAsia newsletter, until I saw this:

HTML Form in an email?
I was surprise to see this. At first glance, it looked very much like an HTML form. It has always been a recommendation NOT to use HTML form in emails, as most of the email clients consider it to be a security issue.

However, the truth revealed itself when I hovered my mouse over the "form".

It isn't a form. It is an image that looks like a form; and clicking on it brings you to the AirAsia booking site which has a little resemblance to the "form" image:


I wonder how many people got tricked by the form image, and got themselves a window popup surprise when they try to select a value from the dropdownlist or select a date from the form image.

The form image is just too real and doesn't behave like what the users expect

To me, this is bad user experience.

Suggestion

A constructive criticism wouldn't be constructive without a suggestion.

The cause of the problem is just like what I said earlier: The form image is just too real and doesn't behave like what the users expect.

So, one way to avoid the problem is to make the image NOT to look like a real form.

A very simple, humble example here (note: I'm not a graphic designer):
This is obviously an image, not a real form.
We can use some kind of halftone / dot screen / pixelate effect to make the image look like a computer screen displaying the form. Also, we can put up a pixelated mouse cursor near the search button.

The result: users will see the image as an image, not a form.

If users really want to search for flights, they can click anywhere on the image and go to the booking site.

No more failed expectations.

User experience wins!