Автор: Энджи Ли (ANGIE LI)

Оригинал статьи: https://www.nngroup.com/articles/date-input/

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

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

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

Шаблоны ввода даты

Элементы для календарного выбора или календари (Calendar pickers) — это элементы управления, которые отображают полный календарный месяц за один раз. Обычно они показывают дни недели сверху и соответствуют метафоре настольных или настенных календарей.

Пример calendar picker на мобильном телефоне, показанный в приложении Календаря Google.

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

Calendar pickers особенно полезны для выбора диапазона дат. В этих ситуациях они часто показывают два месяца бок о бок.

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

Прокрутка элементов для выбора даты (date pickers) на мобильных устройствах является обычным явлением, но они могут раздражать, если элемент выбора (picker) содержит много дат. В таких ситуациях прокрутка в небольшом пространстве медленная и непродуктивная; лучше дать пользователям возможность вводить дату напрямую.

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

Приложение iPhone Todoist позволило пользователям прокручивать, а также вводить дату самостоятельно. (Обратите внимание на преимущество обозначения текущей даты «сегодня»: она устраняет любую неопределенность, если пользователь не помнит сегодняшнюю дату.)

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

DeviantArt предоставил раскрывающийся список для каждого раздела поля даты.

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

Рекомендации по дизайну ввода даты

Для ограниченного количества вариантов даты сделайте список подходящих дат.

В некоторых случаях у пользователей будет всего лишь несколько вариантов выбора даты. Например, Google Express, онлайн-сервис покупок, позволяет клиентам заказывать онлайн-продукты и планировать время доставки. Вместо того, чтобы предлагать пустые поля даты или calendar picker с безграничными опциями, Google Express предоставляет короткий список вариантов даты. Любые даты, которые недоступны были закрашены в серый и отключены. (В качестве альтернативы, недоступные даты могут даже не включаться в список.)

Google Express предоставил раскрывающийся список с вариантами доставки. Выбор, который недоступен, отключен и закрашен в серый.

В целом, мы не рекомендуем этот метод, если есть более 10 дат, поскольку людям может быть утомительно сканировать и прокручивать список дат.

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

Независимо от того, какой формат пользователь выбрал для ввода даты (тире, пробелы, косые черты, точки между компонентами месяца, дня и года), их вход должен быть распознан. Более того, крайние левые нули не должны влиять на дату. В приведенном ниже примере Priceline дата 9-3-17 отклоняется, а принимается 09/08/17, хотя никакие требования к формату не были видны перед отправкой формы.

 Priceline отклонил дату 9-3-17, даже не представив предложения о том, как правильно ее форматировать. Вместо этого он должен был принять его и проанализировать для пользователя.

Сообщите об ошибках соответствующим образом.

Если пользователь вводит дату, которая, очевидно, является ошибкой, например, 11/81/17, не делайте никаких предположений. Обеспечьте пользовательскую обратную связь и предложите рекомендации по устранению ошибки.

Устраните нелогичные варианты дат

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

Сохраняйте работу пользователей.

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

Сохраняйте диапазоны дат постоянными.

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

Southwest Airlines изменили диапазон дат возвращения, основываясь на выборе даты вылета. После выбора даты вылета 8-16-16 из диапазона дат за июль-август диапазон дат возвращения изменился, чтобы показать август-сентябрь.

Если ваш сайт обслуживает международных пользователей, ваш формат даты должен быть ясным и понятным.

Поля ввода дат зависят от культуры и могут вызвать серьезные проблемы для тех пользователей, которые привыкли к другому формату. «10/11/2016» может означать 11 октября 2016 года для американца, но 10 ноября — для кого-то из Европы. Следуйте этим практическим правилам при разработке дизайна ввода даты для глобальной аудитории:

• Добавьте метки и разделите поля, чтобы было понятно, какие поля предназначены для месяца, дня и года.

Этот таймер обратного отсчета отделил компоненты даты и четко обозначил их.

• Укажите название месяца, чтобы отделить его от дня.

Сайт Tep Wireless, где пользователи могут арендовать портативные Wi-Fi-устройства, указал название месяца для обслуживания своей глобальной аудитории.

Веб-сайт Eurostar, показанный на английском (США), поддерживал несколько языков, но не сказал, какой формат даты он ожидал. Здесь дата отъезда может быть прочитана как 2 июля или 7 февраля.

• Используйте элементы для календаря (calendar pickers) с четко обозначенными названиями месяцев.

Некоторые фреймворки, такие как Bootstrap, предоставляют элементы для календарного выбора (calendar pickers) для поддержки однозначного выбора даты.

В календаре выбора (calendar picker) Bootstrap было указано название месяца, чтобы было ясно, какую дату выбрать.

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

 Вывод

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