Examining Date-Input field on popular Indian travel websites
If you closely examine a web page, each page consists of these smaller components that come together to help user finish a certain task. (e.g text fields, drop-down menus, date-input fields etc) Now what if these components were not really though-out and meticulously designed. Obviously, what you have is a very unsatisfied user who is probably never coming back to your website. Certainly, no designer wants that!
Recently I came across this extensive guide to design a date-input form field on the NNg website. The article lists out examples of good and bad design practices that will immensely help you if you were to design this component.
In order to put my understanding to some use, I examined the most widely used Indian travel websites for their date-input form field. Its imperative for travel websites to get their date pickers right to avoid wrong bookings from their users.
- Make My Trip
The real-estate occupied by the date picker clearly indicates the attempt to keep the date picker user-friendly owing to the numerical details in this component. The selected dates are also clearly highlighted on the picker along with a visual cue for the duration of the travel. Navigation to different months is done using the arrow buttons.
The Depart and Return fields clearly mention the date picked by the user and displayed in a format that is not prone to confusion. This field cannot be edited manually without the date picker.
2. ClearTrip
The date picker here has a very neat, well demarcated tabular format with additional highlight for the weekends. The date picker clearly indicates the selected departure date, return date and the duration alike.
Jumping to other months is done horizontally using the right and left arrows.
The Depart on and Return on fields are not directly editable. The format of the date is again chosen to avoid format related confusion.
3. Yatra
Following the pattern that we saw here, the selected dates are highlighted along with the duration. But, here we see one month at a time, which can be changed from the the left hand side panel on the date picker or the user can just scroll down or up. The current month sits on top of the list.
The departure and return date fields are not labeled here, which could be confusing. Also, the format to display the date used is dd/mm/yyyy which may not be clear in some cases. (e.g. 12/6/2017)
4. IRCTC
The date picker on IRCTC lets the user pick only the departure date. It highlights the current date as default and lets you pick from the current and the next month. Navigation to different months can be done using the arrow buttons. The format of the date chosen here is dd/mm/yyyy which is explicitly mentioned.
5. Thrillophillia
The date picker clearly highlights the non-available dates, the selected date and the available dates.
The format used to display the selected date is prone to no confusion, with clear mention of the date, month and year.
Navigation to different months is again done using the arrow button.
Clearly, most of these websites have got their date pickers right! :)
