Date Pickers in Flight Booking Apps
If your smartphone is the first thing you pack in your carry-on baggage before air-dashing, then I bet you have at least one flight booking app installed on it.
While planning or booking the next flight, travelers rely more and more on their smartphones to help them find the best flight tickets.
Date pickers play a crucial role in the case of an airline booking app: they can give wings to the booking experience or make the whole process a headache.
“Choosing a date is one of the main reasons of frustration for travelers when booking a flight. In case you are working on making a booking experience strikingly pain free consider using super-slick date pickers.”
Prepare to take off: important aspects of a flight booking app’s date picker
- It should consider managing different date formats.
- It should highlight the current date, departure and return day.
- The navigation between the months should be easy.
- It should provide a familiar interface.
- It should have a clean and usable design.
A date picker should consider the date format used in the user’s locale. The current date, the departure and return date should always be marked and highlighted, so users will know exactly which day are they choosing.
There is a dilemma with how many months you are showing in the date picker. Most of the flight booking apps show two months at the same time. The majority of round-trip flights are no longer than a month, so a two-month view seems to be a good solution. It’s pretty much a common knowledge now that the real-world metaphor of one-month-per-page reduces usability (i.e. in the case if someone on a one month view calendar picks 30th of August, with 14 days – the away dates will end on the 12th of September and the selected period could not be shown.) In the case of a scrollable month view the return date won’t be out of range.
Some users are familiar with having to select from one calendar the departure day and from another calendar the return day.The two calendar approach has been adopted so widely and is convenient to use because it is in sync with the users’ thinking process.(i.e. when people go for booking a ticket, they know the dates for departure and return of their travel but are not often consciously aware of the duration of their stay “I’ll depart 1st of August and return 14th of August.”)
Aiming for a clean design, understandable and usable also for users who never had encountered your date picker before is important. Note that not every user books a flight on a regular basis and there are passengers who consider flying quite a stressful experience. Choosing a date is one of the main reasons of frustration for travelers when booking a flight. In case you are working on making a booking experience strikingly pain free consider using super-slick date pickers.
“Calendars and date pickers seem to be so easy to use that we often take them for granted. But the truth is that dealing with the diversified system of possible actions and turning them into a user-friendly experience is a pretty complex challenge.“
How well-known airline booking companies use date pickers in their apps
Experienced voyagers will tell you that some apps offer a smooth and easy booking experience, while others are complicated and hard to use. Calendars and date pickers seem to be so easy to use that we often take them for granted. But the truth is that dealing with the diversified system of possible actions and turning them into a user-friendly experience is a pretty complex challenge. To find out how well-known flight booking apps like Skyscanner, Cheapflights, Hipmunk and ITA OnTheFly make it painless and easy to book a flight let’s take a closer look at their date pickers:
Skyscanner
Skyscanner will let you compare millions of flights and 1000 airlines in seconds to find the cheapest and most convenient one.
I’ve tested it’s date picker to see how it works and I have to say that it is pretty amazing.
From the start the simple interface makes me feel like the process is going to be easy.
It has a vertical scrolling, the months are presented in continuous format with the name of the month form separately.
The app has a nice continuous scrollable two-calendar approach, the departure and return date can be selected from two different calendars. The flow of the selection is straightforward, you can book easily by tapping on the desired dates, the selected dates become highlighted, also the current date is marked.
When Skyscanner designed it’s date picker they certainly have thought about specific situations and cases when users need their app. When choosing the return date, beside tapping on the desired date you have the possibility to choose from the bottom menu bar separate options like:
- same-day return: if you are flying via plane for work or business and need to be back on the same day
- +1 day: if you are planning a short stay
- any: if you are planning a holiday or a visit and want more alternatives or simply looking for the best price
The design of the app is simple, easy and it has a consistent look & feel with brand.
Cheapflights
This date picker is very convenient to use. The calendar shows up in a modal window, although the departure day and return day needs to be selected in two different windows, the flow of the date-picking is simple. You can easily navigate between the months. The name of the month and the year are shown and also the week-ends are highlighted. Once you have selected the departure day and return day, the period is marked with a different color between two arrows. You can observe that under the current date is written “Today” for having a point of reference.
Although the flow of the selection needs two different windows, Cheapflights managed to create a nice and easily understandable design.
Hipmunk
Hipmunk is built to help you find cheap airplane tickets from the comfort of your smartphone.
The selection in Hipmunk’s date-picker is pretty straightforward. The calendar has a vertical scrolling making it easy to navigate between the months. Selecting the period is a matter of simply tapping out your departure and return dates. You can see the selected period highlighted with a light blue color and the the departure day and return day being marked. Also the departure day and the return day are shown in the top menu bar separately and the current date is marked with grey.
The calendar is both attractive and simple. Instead of fumbling through separate scroll wheel date pickers, you use a single scrollable calendar to search the return and departure dates.
ITA OnTheFly
Google’s ITA Software company has developed OnTheFly app which stands out from the crowd with multi-city itinerary search, fine-grained control over all search parameters and full disclosure of exact airfare calculation. Beside all these features the app has an intuitive travel date calendar. The desired period to book a flight can be searched with vertical scrolling among the months. Once you have selected the period it appears highlighted and the departure day and return day are represented with arrows.The current date is not marked.
The calendar gives you the opportunity to choose:
- day before/day after departure day
- day before/day after return day
Flight ticket prices usually vary very much from one day to another. This calendar feature ads value to the app because this way you have the possibility to pick a day when the price is lower.
Many travelers are flexible with their schedule because they are aware of the fact that leaving a day earlier or later than planned can save them hundreds of dollars.
If you are considering building an app that includes a date picker, or rolling your own calendar keep in mind that cultural awareness, a clear visual design, consistency and continually scrollable month view can be really important. Focus on making the booking steps easy as possible right from the start, and fighting the battle between all of your ideas and the UX strategies.
Interested about other calendar tips and considerations? Read our previous blog about How to build amazing booking apps.
What are your main considerations when building a date picker in a booking app?
We’d love to hear your experience with flights booking apps in the comments to this article!