📜 ⬆️ ⬇️

Calendar period - we improve the interface

Working on the interface of the next major project, I tried to work out every element of it meticulously. Of course, there is no limit to perfection and, as is usually the case, when finishing one project you already see a bunch of its flaws, make analysis and conclusions for the future.

However, as a result, while working on the drop-down choice of the calendar period, an interesting idea came up not to divide the date into two separate forms “C” and “Po”, as they always do, but to combine them into one form and a drop-down box. .

Of course, the encoder will have to sweat a little more in this case, but it will obviously be much easier for the user to navigate the calendar. Choosing the starting date, he immediately clearly and quickly can choose the final date of his request, in the same window, and do not have to remember and try to remember what you chose in the previous form. Especially in input forms, you almost never display the day of the week and, in the process of choosing the final date of the request, you often forget what day of the week the first selected date actually was?
If in short, now very often, including on famous travel sites, use two separate forms to determine the calendar period, and at the same time, as a rule, you can open only one of them:

An example of a regular form on Booking.com. Calendars "C" and "On" are separated into different blocks

I propose to combine this into one form with a drop-down block / window with two calendars, which appears as soon as the user clicks into the area of ​​this form. However, a clickable one can only make a calendar icon button located in the center, thereby also giving the user the opportunity to manually enter the date directly into the input forms.

New, improved view of the selection of the calendar period

I do not pretend to the absolute uniqueness of this innovation, but so far I have not encountered such a decision on the web. If dear readers receive constructive criticism or ideas on how to further improve this decision, I will be glad to hear.

Source: https://habr.com/ru/post/101909/

All Articles