Пока вы читали предыдущие части статьи, могли задуматься — неужели стоит так заморачиваться насчёт выборщиков дат? Почему бы не использовать нативные шаблоны — разве не за этим их сделали? И поскольку они являются родными для систем, то будут выглядеть и вести себя последовательно в соответствии с ожиданиями пользователя.

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

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

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

Все становится немного сложнее, когда, помимо выбора даты, пользователю также необходимо выбрать временной интервал. Самый простой способ здесь — предоставить дополнительное поле ввода как следующий шаг после выбора даты. Это снова возвращает нас к дилемме: такое поле ввода может поддерживать ручной ввод, содержать мини-переключалки, показывать раскрывающийся список, отображаться как слайдер или быть нативным меню типа <select>?

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

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

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

Кроме того, вы можете комбинировать выбор даты и времени на одном экране. На Treatwell.nl клиенты могут скользить по дням, используя горизонтальный слайдер, а ниже в строках отражается цена. Это намного более компактный способ комбинировать дату и временя в одном месте — он довольно часто встречается в телегидах.

Приложение Calendars5 использует в навигации вкладки для переключения между выбором даты и времени. Панель внизу удобна для нажатий большим пальцем, но само расписание на день выглядит необычно: часы делятся на дневной и ночной периоды, а минуты выбираются в слайдере ниже. Не проще ли использовать появляющееся окно ввода или раскрывающийся список, где сначала бы отображалось время суток (только AM или PM), а затем можно было выбрать определенный час или минуту?

Если ваш случай ну очень специфичный, изучите альтернативные варианты — например, всплывашка для выбора даты необязательно должна содержать календарь как таковой, это может быть группа кнопок для «конструирования» дат. Так можно легко и просто определить дату из очень широкого диапазона (1800-2999), и даже клавиатура не понадобится — вы просто нажимаете кнопки, уточняя дату.

Локализация имеет значение. Неважно, ввод даты это или ввод времени — нужна какая-то стратегия, как вы будете ориентироваться на конкретные регионы мира, чтобы избежать неправильного использования. Вы можете использовать комбинацию выпадающего списка и числового ввода для сведения к минимуму количества сделанных ошибок, как делают Gmail и Yahoo.

Но когда речь заходит о представлении недель в календаре, вам нужно динамически переключаться между датами в формате США и датами в европейском формате и, возможно, учитывать исламские, еврейские и китайские календари плюс пользовательские базы данных в дополнение к григорианскому календарю. Сомневаетесь — страница о форматах дат в разных странах в Википедии в помощь.

Использовать один из таких дата-пикеров — нетривиально, потому что должен быть доступ ввода с клавиатуры и нужно переключаться между открытыми и свернутыми состояниями. Посмотрите обзор доступных дата-пикеров или примеры Whatsock.

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

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