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.
