01 July, 2016

Mobile Calendar Essentials for Flight Booking Apps



Choosing travel dates is one of the frustrating experiences for travelers while booking flights, hotels or taxis using mobile apps. Few super-slick calendars and date pickers are abundantly available, yet the nightmarish experience of date selection remains.

General Guidelines for Calendar Behavior
I have used calendar feature in different contexts - booking appointments, hotels, buses and amongst others. I faced many problems, I have got confused and frustrated, sometimes, literally stalling my task and walking away. This post is a result of those experiences and questions I asked myself about the workings of a calendar while using flight booking apps.

There are several guidelines to consider while designing calendars for a seamless experience. Some of them are:
  • Date selection screen could be a single screen where user can select Departure and Return dates at one go (tabs or segmented controls or other ways)
  • Calendar highlights current date, departure and return dates. Current date has a text ‘Today’ below the date for memorability purposes in addition to a color background (Note that colored background alone could be hard on color blind people)

  • Months are scrollable using swipe gestures. Icons like <, <<, >, >> are not a good fit for mobile
  • Travel dates need to be highlighted once selected with a range. I.e., if 29th June and 2nd July are selected, the days in between these dates need to be highlighted to represent the range or the number of days.
  • Drag and Drop of dates is supported. However, do not force the user to drag and drop for dates that are far apart, because it might be hard on the user to drag and drop instead of selecting in such a case

  • Clean interaction / animation is defined and executed for each transition / behavior change / state change on date picker [This is a broad and vague goal that needs a separate blog in itself]
  • Ability to modify departure or return date independently. Tapping on departure date field should show date picker screen with focus on Departure Date tab and similarly for return date.
  • For round trips, user has to be prompted to select a return date using suitable animation that provides a strong visual cue
  • Provide Cancel and Done button on calendar screen to give freedom and control to user. This is debatable because is some user tests, it was found that users expected the screen to auto-close once date selections were made. In few other tests, users were wondering why the screen closed without any action from their side. Such tradeoffs are very common while solving UX problems.
  • Keep buttons, tabs and other critical information on top of the screen for better visibility. This is valuable from an accessibility point of view as differently-abled users are also used to finding critical information at the top.
  • Local timezone (place of booking) is considered for date selections. Note that flight dates will be local time zones of respective countries where the user is visiting.
The above list is a set of guidelines, not hard written rules. Hence, they may not be applicable in all contexts. You need to pick the ones that suit most to your context.  

What's Your Experience With Calendars?

P.S: Special Thanks to Suresh Chelliah, Binoy Vijayan and Mohanraj for their review comments on this article.