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

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

Например, авиакомпания Ryanair легко перемещает пользователя внутри полей, автоматически отображая выбор даты. Когда выбрана дата вылета, выбор даты возвращения запускается автоматически. Идеальный сценарий, когда определить диапазон дат можно всего в два клика (если не нужно переключаться между месяцами). Интерфейс заботится об этой проблеме: в любой момент времени выборщик дат отображает два месяца одновременно (как на узких, так и на широких экранах). Поскольку большинство путешествий вряд ли продлится более двух месяцев, переключалки между месяцами не нужны, и вводить данные можно быстрее. К сожалению, у сайта ограниченные настройки доступа, и голосовой ввод здесь невозможен.

Хорошо, если выбор даты используется снова и снова, но что, если вы хотите максимально улучшить пользовательский опыт завсегдатаев вашего сайта? Здесь стоит глубже погрузиться в функции и возможности выборщика дат. Что, если вы включите сочетания клавиш, чтобы разрешить выбор дат и передвижения по дням, неделям или месяцам с помощью клавиатуры? Наверняка будет полезно быстро перейти в первый или последний день недели, избегая полей ввода.

Если ваши клиенты полагаются на окна выбора дат, переключение между датами с помощью сочетаний клавиш потребует некоторого обучения, но станет реальным стимулом.

Когда мы думаем о выборе дат, мы, вероятно, представляем пару полей ввода вместе с поп-ап-календарём. Однако для этого можно вообще не использовать элементы формы. Идея: использовать диалоговый интерфейс с интеллектуальными значениями по умолчанию, где клиент либо печатает, либо выбирает день, месяц и год — очевидно, с помощью выборщика дат (на случай, если нужная дата не входит в предопределенные опции). Адхития Кумар сделала быстрый макет Invision, в котором показала, как это может выглядеть.

В некоторых ситуациях просьба указать точную дату может быть чрезмерно конкретной и ненужной. Например, служба доставки еды может воспользоваться быстрыми ярлыками «сегодня», «завтра утром» или «в понедельник», а не всплывашкой с календарём. Сайт музея может предлагать билеты на ближайшие несколько дней («сегодня», «завтра», «выходные») и раскрывать календарь для более точного ввода. Фактически, вы можете исследовать наиболее часто используемые таймфреймы и предлагать горячие клавиши для наиболее распространенных ситуаций.

В расписании на странице National Geographic выделение цветом группирует элементы по времени. Мобильной версии нет, но ежедневный режим легко отображается на мобильном телефоне (по умолчанию) с возможностью переключения на недельный режим на рабочем столе (и наоборот). Частые запросы («Раннее утро», «Утро», «Вторая половина дня», «Прайм-тайм») разворачиваются из таймпикера — точный ввод времени не требуется.

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

В этом случае вы все равно можете оставить подробный календарь, но при этом отобразить все параметры и использовать цветовую индикацию — например, для выделения лучших цен. Так работают Google Полеты, если выбрать гибкие даты, но эта опция отключается на узких экранах.

Dohop, напротив, использует не только гибкие даты, но и гибкое расположение в качестве основной функции, заметно выделяя оба параметра, когда пользователь вбивает дату или пункт назначения. Вместо цены в календаре отмечается наличие прямых рейсов и рейсов с пересадками.

Как и любой другой параметр, устанавливать дату можно с помощью бегунка. Он годится для ввода одного значения и для указания диапазона дат.

Обсуждение слайдеров заслуживает отдельной статьи, но главная проблема в том, что слишком часто с помощью них нельзя сделать точный ввод. Чем шире или плотнее диапазон, выбираемый с помощью бегунка, тем сложнее его использовать. Изучая тесты на юзабилити, вы увидите, как пользователи отчаянно пытаются установить точную дату в слайдере, перемещая бегунок осторожно и очень медленно. А если учесть, что диапазоны могут охватывать месяцы, для маленьких экранов это станет настоящим испытанием.

Слайдеры работают лучше всего, когда конкретика не имеет большого значения или когда у вас очень ограниченный набор возможностей. К сожалению, при выборе дат так бывает очень редко.