Как стать автором
Обновить

Календарный период — улучшаем интерфейс

Время на прочтение2 мин
Количество просмотров4K
Работая над интерфейсом очередного крупного проекта я старался дотошно проработать каждый его элемент. Конечно нет предела совершенству и, как это обычно бывает, заканчивая один проект ты уже видишь кучу его недостатков, делаешь анализ и выводы на будущее.

Тем не менее, в результате, работая над drop-down выбором календарного периода, в голову пришла интересная мысль не разбивать дату на две отдельные формы «С» и «По», как это всегда делают, а объединить их в одну форму и выпадающий блок.

Конечно кодеру предстоит в данном случае немного больше попотеть, но пользователю очевидно будет намного легче ориентироваться в календаре. Выбирая начальную дату он сразу же наглядно и быстро может выбрать конечную дату своего запроса, в том же окне, и не надо держать в голове и пытаться запомнить что же ты выбрал в предыдущей форме. Тем более в input-формах практически никогда не выводят день недели и, в процессе выбора конечной даты запроса, зачастую забываешь какой день недели собственно был у первой выбранной даты?

Если короче, сейчас сплошь и рядом, в том числе на именитых туристических сайтах, используют две отдельные формы для определения календарного периода, при чём одновременно, как правило, можно открыть только одну из них:

image
Пример обычной формы на Booking.com. Календари «С» и «По» разнесены в разные блоки



Я же предлагаю объединить это в одну форму с выпадающим блоком/окном с двумя календарями, который появляется как только пользователь кликнет в область данной формы. Впрочем, кликабельной можно сделать только кнопку-иконку календаря, расположенную по центру, тем самым ещё и дав пользователю возможность ввести дату вручную прямо в input-формы.

image
Новый, улучшенный вид выбора календарного периода

Я не претендую на абсолютную уникальность этой инновации, но до сих пор в сети подобного решения не встречал. Если у уважаемых читателей появится конструктивная критика или идеи как можно ещё улучшить данное решение — буду рад выслушать.
Теги:
Хабы:
+30
Комментарии56

Публикации

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн