By: Amid Zakariapour
Almost all of the websites selling online tickets have a date selection menu or calendar for outbound and return flights and it is on their home page. Sometimes it is called “outbound” and “inbound” and sometimes “departure” and “return”. Although these date selection menus on all of these websites work very similarly, they have some small differences in style and functionality.
Menus on different websites
Swiss
 |
| Swiss Airlines. Date selection menu |
Swiss Airlines have a simple yet effective date selection menu. It has one calendar showing one month for departure and one calendar showing one month for return; each below their respective text boxes. By selecting each text box, both calendars show up and user selects the departure and return dates. The dates before the departure date in the return calendar are in grey and disabled and user cannot select it.
When user selects the one way instead of round trip, the return trip text box and calendar both disappear.
One of the good features about this menu is that user can set the date by entering the date in day/month/year format by keyboard. The graphical calendar adjusts itself in accordance with the typed date.
 | |
|
There is one problem with this menu. When user enters an invalid date; the search button should become grey and should not work. It must show a proper error message when clicked on. But the website allows the user to click on search with invalid data and system sends the query to the database. Its only after searching and receiving error from database that system displays an error. When I entered a departure date on year 2011, it went into flight searching and after many seconds, it returned an error saying the departure date is too far in the future.
 |
| Swiss Airline. Invalid date error |
Air Canada
Air Canada has a menu very similar to Swiss. The only difference is it does not let the user select an invalid date and gives proper error instead.
The menus for departure and return are similar to each other with only a small different in the position. To not confuse the departure and return dates, the user has to be careful which one of the text boxes (departure or return) is highlighted.
 |
| Air Canada departure date selection |
 |
| Air Canada return date selection |
CheapOair Canada
CheapOair Canada shows two consecutive months when user selects on each of departure or return boxes. The calendar shows both departure and return selected dates if they are in the same month or in two consecutive months. User can only select the departure date on departure calendar and can only select return date on return calendar. Although selected dates have an arrow shaped icon referring to departure and return, the two selected dates in two consecutive months confuse the user to believe the two months are for departure and return dates both. This problem might cause the user to make mistakes many times before learning the interface. On the other hand since the two calendars for departure and return never show up at the same time, user cannot select a wrong date for departure or return but the users.
After selecting both departure and return dates, the days between them changes to blue highlight. User sees the blue dates only when changing the dates and otherwise it is useless in case of showing the duration of the user’s travel.
Dates are shown in the main menu in “month initial day year” format and cannot be entered by keyboard.
 |
| CheapOair. Departure date selection |
Lufthansa
Lufthansa has a date selection menu very similar to CheapOair in case of number of calendars. In Lufthansa the days between departure and return become yellow when mouse hovers on each day. This is more useful than the one on CheapOair because user can see a view of the duration of his travel on the calendar.
The location of calendars for departure date selection and return date selection is the same on Lufthansa. There is not even an arrow pointing to the respective box. User clicks on departure and selects a date and then it automatically goes to return date selection. The only difference the with two menus is the title changing from “outbound” to “return”. The title is in grey font on a white background and therefore not visible enough.
 |
| Lufthansa. Outbound (departure) date selection |
 | |
|
Air France
Air France also has a date selection menu very similar to Lufthansa. There are two main differences.
While Lufthansa uses right pointing arrow icon for departure day and left pointing arrow icons for return day, Air France uses the same circle icon for both. This causes the user not to know if he selected the departure date or not.
Another difference is that Air France does not highlight the days between the departure and return dates.
Expedia
Expedia also shows two consecutive months in the calendar. Similar to CheapOair, when user clicks on either of departure or return date the calendars are placed on top of the respective boxes only one at the time.
Selected departure and return days do not have different icons as they have in CheapOair, but they have different colors. The duration of flight is shown by highlighting the days between departure and return while mouse is hovering on the calendar. Therefore user does not select a return day before departure.
 |
| Expedia website. Date selection menu. |
Contrary to CheapOair, On Expedia user can select the dates using the keyboard.
In case of entering an invalid date it gives a proper error.
 |
| Expedia invalid date error. |
Turkish Airlines
Turkish airlines’ website shows two months for each of departure and return dates and user sees both at the same time. When user clicks on either departure or return, 4 different calendar months appear on the website.
Since user always sees the departure and return calendars at the same time, the selected date of return does not show in departure calendar and selected return date is only in shown in return calendar. Therefore there is no need for separate calendars for departure and return. On the other hand, there is no notion showing the duration of the travel.
Showing two calendar months for two month of depart can make the user confuse the two months with two calendars for departure and return. This is the case for all of the websites showing two months for each of departure and return. What makes it a severe problem for Turkish Airlines’ is the ability of selecting days of current month, the first days of next month and last days of previous month on the menu for one month.
Each calendar menu of Turkish Airlines’ website has 6 in 7 days. Each month has 28-31 days and therefore at least 11 days are extra. On the calendars on Turkish Airlines’ website, the empty spaces are filled with days from previous and next months’ days.
 |
| Turkish Airlines website. Two calendars each showing two months. |
One problem is that these days are selectable but selecting them does not change the month.
The other problem is the user seeing two month for one way flights. Users might assume he did not select the one way option properly.
The biggest problem is when user selects a day at the end of the first month or a day at the beginning of the second month. In this case two selected days are shown which are referring to one same day. The two selected items cause the illusion for the user that he selected two days one for departure and one for return; while in reality he only selected one departure date.
 |
| Turkish Airlines departure date selection. April 26th is selected but there is one selected on April and one on May |
Summary
There are two major mechanisms for date selection. One is showing one month for each of departure and return date. The other mechanism is to show two consecutive months for each of departure date selection and return date.
Among the websites showing one month Swiss has better usability and least confusion, while Expedia has the best date selection usability among the ones showing two consecutive months.
Swiss, Air Canada, And Expedia let users select their desired dates using the keyboard. Unfortunately Swiss does not have error prevention for invalid data entered in this manner.
No comments:
Post a Comment