Комментарии
Продолжаем рассказывать об интерфейсах для выбора даты и времени: чем можно заменить стандартные поля для ввода дат, как органично использовать слайдеры и что такое «гибкие даты»
Идеальные интерфейсы выбора даты и времени. Часть 2
Сибирикс
Идеальные интерфейсы выбора даты и времени.
Часть 2
Чем можно заменить стандартные поля для ввода дат, как органично использовать слайдеры в интерфейсах и что такое «гибкие даты»
В первой части статьи мы затронули тему выбора даты и времени: почему пользователи то и дело пишут даты как попало, нужен ли числовой ввод и при каких условиях должен всплывать календарь — при клике на поле или на иконку (или оба случая). Продолжим погружаться в тему:)
Только вперёд: набор текста без преград
Во многих интерфейсах дата не является первичной информацией, которую запрашивают у пользователя. По какой-то загадочной причине ей часто предшествуют другие, часто более общие входные данные.

Например, интерфейсы бронирования обычно спрашивают пользователей о месте назначения, а уж потом уточняют дату. И хотя поп-ап календарь должен появляться при нажатии на иконку или поле ввода, что, если он будет запускаться сразу после того, как пользователь заполнил предыдущее поле?
Новый веб-сайт Qantas выглядит замечательно, но взаимодействие с полями ввода даты немного раздражает. При выборе дат приходится скакать между полями вылета и возвращения.
Авиакомпания Norwegian подсвечивает доступные и недоступные рейсы. Дата вылета и возвращения задаются индивидуально, хотя это и необязательно.
Например, авиакомпания Ryanair легко перемещает пользователя внутри полей, автоматически отображая выбор даты. Когда выбрана дата вылета, выбор даты возвращения запускается автоматически. Идеальный сценарий, когда определить диапазон дат можно всего в два клика (если не нужно переключаться между месяцами). Интерфейс заботится об этой проблеме: в любой момент времени выборщик дат отображает два месяца одновременно (как на узких, так и на широких экранах). Поскольку большинство путешествий вряд ли продлится более двух месяцев, переключалки между месяцами не нужны, и вводить данные можно быстрее. К сожалению, у сайта ограниченные настройки доступа, и голосовой ввод здесь невозможен.
Любите ли вы или ненавидите авиакомпанию RyanAir, она предусмотрела многое на своем сайте. Процесс бронирования простой и быстрый за счет раскрывающихся окон и автоматического переключения между полями.
Wizzair, другой авиа-лоукостер, использует для ввода дат похожую модель. Требуется не больше восьми кликов, чтобы начать изучать его предложения. Недоступные варианты исчезают сами, облегчая фильтрацию. Выбранный диапазон визуализируется, выделяя даты в календаре цветом. Этот диапазон выявляется даже устройством чтения с экрана.
Горячие клавиши для выбора дат
Хорошо, если выбор даты используется снова и снова, но что, если вы хотите максимально улучшить пользовательский опыт завсегдатаев вашего сайта? Здесь стоит глубже погрузиться в функции и возможности выборщика дат. Что, если вы включите сочетания клавиш, чтобы разрешить выбор дат и передвижения по дням, неделям или месяцам с помощью клавиатуры? Наверняка будет полезно быстро перейти в первый или последний день недели, избегая полей ввода.

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

Концепция
Ивана Бжелажака для ввода даты с использованием диалогового интерфейса и предложений.

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

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

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

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

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

Вместо флажка «В одну сторону» Dohop отправляет пользователя в нижний правый угол поп-ап-календаря.

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

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

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

Слайдер для даты рождения требует, чтобы пользователи «скользили» через месяцы, дни и годы. Ввод фактической даты рождения был бы гораздо быстрее.
В заключительной части статьи вам осталось узнать, можно ли обойтись уже разработанными шаблонами для выбора дат и времени, как умело выкрутиться с указанием конкретных часов и стоит ли учитывать локализацию. Чек-листы по разработке полей и дизайну интерфейсов — бонусом в конце. Следите за обновлениями!