A Unified Calendar Widget for Picking Date Ranges

by on 10/23/13 at 10:18 am

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.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes Shopify

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

3 Responses to “A Unified Calendar Widget for Picking Date Ranges”

  1. Sean

    Oct 23rd, 2013

    Check Skyscanner iOS calendar :)

  2. Lee

    Oct 24th, 2013

    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?

  3. Ben

    Oct 25th, 2013

    Love the idea, but could use some help with implementation. Is there a tutorial out there covering this?

Leave a Comment