Booking an airline ticket is one of the most common online tasks. Every time users book a flight they have to use the calendar widget to pick a leave and return date. The way calendar widgets work today can make picking date ranges slow and confusing for users.
Users have to pick their leave and return date in separate fields. This makes the fields feel less together, which can cause users to mix up their dates. It also auto-fills in the return date field with the leave date they pick further confusing them. The bi-monthly calendar closes after they pick their leave date and opens again when users click the return field. This forces users to have to process their dates over again.
Unifying the Separate Calendars
The traditional date pick is slow and confusing for users. A more efficient approach is to unify the date fields into one calendar. The bi-monthly calendar appears once the user picks a leave date and stays opened until the user picks their return date. This allows users to pick their dates faster without losing view of the calendar. It takes them fewer clicks to complete the task and makes the date fields feel more together.
One field holds two buttons that allow users to pick a leave and return date from a single calendar. The user only needs to click the field once to pick both leave and return dates. The calendar shows the number of days between the leave and return dates as the user hovers their cursor over each day. After the user picks their dates, the field displays the day and date in abbreviated name format. This makes it clear to users the dates they picked.
Traditional calendar widgets are not as easy to use as a unified one. It not only makes picking dates faster, but it displays the dates in a clearer way. If this approach can make booking airline tickets easier more sites should adopt it.
Check Skyscanner iOS calendar 🙂
Can you suggest how you would make this improved calendaring accessible? It’s an interesting idea for sighted people, but what about blind or keyboard-only users?
Love the idea, but could use some help with implementation. Is there a tutorial out there covering this?