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

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

Означает ли это, что использование встроенных элементов — всегда плохая идея? Не всегда. Если в вашем случае дату быстрее вводить с помощью шаблонных инструментов и обзор календаря вам вообще не нужен, используйте на здоровье. Учитывая, что числовой ввод часто связан с проблемами из-за различий в форматах, пользователь, скорее всего, предпочтёт ввести данные в шаблонной форме, которая поддерживается его мобильным устройством. Но если вам нужно ввести точную дату — например, день рождения — то, по-видимому, нативным выборщикам дат придётся как-то справляться со своими ограничениями.
Используйте временные интервалы
Все становится немного сложнее, когда, помимо выбора даты, пользователю также необходимо выбрать временной интервал. Самый простой способ здесь — предоставить дополнительное поле ввода как следующий шаг после выбора даты. Это снова возвращает нас к дилемме: такое поле ввода может поддерживать ручной ввод, содержать мини-переключалки, показывать раскрывающийся список, отображаться как слайдер или быть нативным меню типа <select>?
Dineout разбивает свой интерфейс на несколько небольших компонентов: предложения, даты, время и количество гостей.
Классический пример хорошо продуманного интерактива для выбора даты и временных интервалов можно найти на Topvet.net. Однако, поскольку нет индикатора доступного времени в течение дня, пользователь не может спланировать время в нужный день.
Рассмотрим на примере интерфейса для резервирования встречи или брони столика в ресторане. В этих случаях имеют значение и дата, и время, но иногда один из этих параметров имеет намного большее значение, чем второй. Выбирать дату бессмысленно, если в этот день не окажется нужного времени. Не разумнее ли сначала запрашивать временной интервал, чтобы отобразить все доступные предложения (или с ближайшими временными интервалами) для более быстрого выбора? В этом случае выбор времени — своеобразный фильтр, отметающий недоступные дни.
Что, если пользователю сначала предложить ввести дату, а местоположение попросить указать во встроенной строке? Интересный пример взаимодействия календаря от Рами Хуффаш.
Когда дело касается времени, у большинства пользователей есть определенный интервал, ограниченный нерабочим временем и семейными делами. Поэтому выборщик времени не может быть переключалкой — скорее, это должна быть группа из нескольких селектов, позволяющая выбирать разные варианты одновременно.
Макет Мэтью Талеби немного улучшил интерфейс бронирования: сначала нужно указать диапазон времени, следом дату и после — определенный временной интервал.
Помогите клиенту выбрать диапазон времени, который наилучшим образом соответствует его расписанию (утро, день или вечер), и отобразите доступные позиции в списке, доступные для бронирования.

Кроме того, вы можете комбинировать выбор даты и времени на одном экране. На Treatwell.nl клиенты могут скользить по дням, используя горизонтальный слайдер, а ниже в строках отражается цена. Это намного более компактный способ комбинировать дату и временя в одном месте — он довольно часто встречается в телегидах.
Treatwell.nl предоставляет список дней, выстроенных по горизонтали, и временных интервалов, расположенных вертикально, как на мобильном устройстве, так и на ПК.
Envy.rent расширили выбор даты с помощью слайдера для выбора приблизительного временного интервала для выдачи и возврата арендованного автомобиля.
Приложение Calendars5 использует в навигации вкладки для переключения между выбором даты и времени. Панель внизу удобна для нажатий большим пальцем, но само расписание на день выглядит необычно: часы делятся на дневной и ночной периоды, а минуты выбираются в слайдере ниже. Не проще ли использовать появляющееся окно ввода или раскрывающийся список, где сначала бы отображалось время суток (только AM или PM), а затем можно было выбрать определенный час или минуту?
Объединение даты и времени в одном пользовательском интерфейсе в Calendars5. Выбор даты удобен, а выбор времени, кажется, требует слишком больших усилий.
Если ваш случай ну очень специфичный, изучите альтернативные варианты — например, всплывашка для выбора даты необязательно должна содержать календарь как таковой, это может быть группа кнопок для «конструирования» дат. Так можно легко и просто определить дату из очень широкого диапазона (1800-2999), и даже клавиатура не понадобится — вы просто нажимаете кнопки, уточняя дату.
Spidersoft, альтернативный подборщик даты, похож на конструктор. Возможно, вам придется сначала привыкнуть к интерфейсу, но для веб-сайтов, посвященных историческим или научным событиям, вариант вполне подходящий.
Проблемы локализации и доступности
Локализация имеет значение. Неважно, ввод даты это или ввод времени — нужна какая-то стратегия, как вы будете ориентироваться на конкретные регионы мира, чтобы избежать неправильного использования. Вы можете использовать комбинацию выпадающего списка и числового ввода для сведения к минимуму количества сделанных ошибок, как делают Gmail и Yahoo.

Но когда речь заходит о представлении недель в календаре, вам нужно динамически переключаться между датами в формате США и датами в европейском формате и, возможно, учитывать исламские, еврейские и китайские календари плюс пользовательские базы данных в дополнение к григорианскому календарю. Сомневаетесь — страница о форматах дат в разных странах в Википедии в помощь.
Для ввода даты дня рождения Gmail использует настраиваемый раскрывающийся список для месяца и числовой ввод для дня и года. Это помогает избежать плохо форматированного ввода.
Yahoo использует тот же шаблон, что и Gmail: раскрывающийся список для месяца и числовой ввод для всего остального.
Использовать один из таких дата-пикеров — нетривиально, потому что должен быть доступ ввода с клавиатуры и нужно переключаться между открытыми и свернутыми состояниями. Посмотрите обзор доступных дата-пикеров или примеры Whatsock.
Резюме
Итак, какими способами можно устанавливать дату? Мы можем комбинировать день, месяц и год в одном поле ввода, добавлять хорошенькую иконку календаря или запрашивать поп-ап-календарь. Также мы могли бы использовать интеллектуальный ввод, мини-переключатели и гибкие даты, а ещё позволить пользователям менять уровень точности календаря с помощью переключения между режимами дня и месяца.

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

  • Автоматически ли перемещается вводимая информация внутри поля при наборе символов? Плавно ли появляется поп-ап с календарём и тогда, когда нужно?

  • Действительно ли сбор информации нужно начать с выбора даты? Может, лучше запрограммировать предопределенные переключалки, сделать слайдер, использовать нативный шаблон или диалоговый интерфейс?

  • Как избежать отображения недоступных дат или страниц с нулевым результатом выдачи?

  • Как учтена локализация? Есть ли, например, сочетание раскрывающегося списка для месяца и ручного ввода месяца и года для дней рождения?
Проектирование поля ввода
  • Может ли пользователь ввести дату в поле ввода или должен выбирать только предопределенные значения с помощью всплывающего календаря?

  • Насколько хорошо при числовом вводе встроенная проверка значений справляется с различными разделителями и плохо отформатированными данными? Доступна ли клавиатура?

  • Разрешаем ли мы вводить «умные» данные? Например, будут ли учитываться «три дня назад», «вчера», «на следующей неделе» или «в июле» в качестве входных данных?

  • Должны ли содержаться в полях ввода элементы по умолчанию? Если да, то какие значения будут использоваться для этого?

  • Сохраняем ли мы образец формата даты при активации поля ввода?

  • Сохраняются ли данные после обновления страницы и стоит ли добавить кнопку «сброс», чтобы пользователь мог легко отменить свой ввод?

  • Добавляем ли мы мини-навигацию для быстрых переходов между днями, месяцами или годами — прямо в поле ввода и внутри всплывающего календаря?
Дизайн всплывающего календаря:
  • Любой выбор даты достигается не более чем за три клика?

  • Календарь появляется при клике на поле ввода или на иконку (или оба варианта)?

  • Сколько недель, месяцев или дней отображается во всплывающем окне календаря?

  • Как включена локализация? Например, начало недели не с понедельника, а с воскресенья?

  • Как отмечен текущие день и время в окне календаря?

  • Нужно ли включить какой-то мини-переключатель для более быстрой навигации (предыдущий, текущий, следующий)?

  • Какова критическая деталь, важная для ваших клиентов (доступность предложения, цены, праздничные дни). Используйте цветные индикаторы (точки или цветной фон) для разных опций.

  • Вы убедились, что всплывашка для выбора дат исчезает, если щелкнуть за её пределами? У вас есть кнопка «закрыть»?

  • Можно ли избежать ввода числовых значений?

  • Может ли пользователь удалить выбранные параметры с помощью кнопки «Сбросить»?
Дизайн интерфейса для выбора диапазона дат
  • Выбор укладывается в шесть кликов?

  • Отображается ли выбранный диапазон сразу же, выделяя цветом даты в календаре?

  • Считывается ли выбранный диапазон устройством для чтения экрана?

  • Рассматривался ли дизайн «гибких дат»?

  • Используются ли сочетания клавиш для более быстрой навигации между днями, месяцами или годами?
Дизайн тайм-пикера
  • Использован самый простой вариант (объединить вертикальный слайдер для дней с горизонтальным списком временных интервалов)?

  • Полезнее сначала запросить временной интервал или установить дату? Выбор времени может действовать как фильтр, чтобы удалить недоступные дни.

  • Есть ли частые таймфреймы? Если да, предложите быстрые ярлыки для наиболее распространенных вариантов.
Уф, теперь, после прочтения всех трёх частей этой очень упитанной статьи вы знаете, что выбор даты и времени — не так прост, как кажется, и зависит от множества факторов. И это вам не отрывной календарик листать:)