Каков наилучший подход для получения даты / времени от пользователя?

Question

Это колесо, которое изобреталось снова и снова на протяжении многих лет.

Проблема: пользователю необходимо ввести дату / время

Основные положения

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

Популярные решения включают в себя:

• Текстовые поля
• комбинированные поля
• всплывающие календари
• Проверка на стороне сервера и / или на стороне клиента
• Различные способы оповещения пользователей о неверных данных

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

---

Смежный вопрос: Лучшие графические элементы управления для описания диапазона времени

Answer 1

Я предпочитаю ввод текста с кнопкой «Элипсис» рядом с ним:

Enter a date [        ] [...]

Elipsis будет всплывать календарь для ввода текста, но пользователь может ввести дату, если они хотят. Проверка должна быть сделана, когда нажата кнопка «ОК» для формы - по моему опыту, попытка сделать проверку даты на символьной основе обречена.

Проверка должна быть сложной и разрешать выражения типа

"today"
"Tomorrow"
"23 Jan"

и т.д.

Редактировать: В ответ на некоторые комментарии можно было бы выполнить проверку, когда редактирование текста теряет фокус (хотя я ненавижу такие вещи), и в этом случае содержимое редактирования может измениться с «23 января» на «23-01-2009», чтобы указать, что выражение было понято.

Answer 2

Дайте мне календарь, чтобы выбрать дату с помощью мыши. И позвольте мне ввести дату с клавиатуры. Примите как можно больше форматов. Если мне нужно ввести 21 декабря 2012 года, дайте мне использовать:

• 21 декабря 2012
• 21DEC2012
• 21 декабря 2012
• 12/21/2012 (или 21/12/2012, выберите один, возможно, в зависимости от того, в какой стране я использую программное обеспечение)
• 12212012 (тот же фрагмент в скобках, что и выше)
• Etc.

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

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

Теперь, ввод времени WRT (Большая любимая мозоль), не думайте, что я имел в виду 3 часа ночи. Если я введу 3 для времени, предположим, что я имел в виду 3 часа дня. Заставь меня сделать дополнительную работу, чтобы запланировать что-то на 3 часа ночи. Если вам неудобно предполагать, что это от моего имени, по крайней мере, предупредите меня, что я запланировал что-то на 3 часа ночи, чтобы я мог исправить это сейчас, а не позже, когда кто-то из моего списка приглашений на мероприятие отправит электронное письмо и скажет: назначил встречу D & D на 3 часа ночи! "

Answer 3

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

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

РЕДАКТИРОВАТЬ: В ответ на вопрос " Что делать, если вы хотите запланировать событие, которое идет с 11 вечера во вторник до 1 часа ночи в среду (например, ежедневная сборка)? Как вы оборачиваете время полночь?"

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

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

Поиграйте на Календарь Google и посмотрите, как он себя ведет.

Answer 4

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

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

Мы допускаем все виды ввода, такие как «сегодня», «wed» или «+2» (для послезавтра) и используем регулярные выражения для большей части клиентской проверки. Мы также делаем проверку на стороне сервера, конечно.

Элемент управления также имеет дополнительное текстовое поле для времени, которое может быть включено или скрыто свойством. Мы чувствовали, что было легче отделить дату от времени. Для времен мы разрешаем «9 вечера», «2100», «09:00» и т. Д.

Элемент управления обслуживает минимальную и максимальную дату, поэтому дата рождения может иметь диапазон от, скажем, -100 лет до текущего года, в то время как срок действия кредитной карты может варьироваться от текущего года до +5 лет, поэтому мы используем диапазон валидаторы.

Answer 5

Текстовое поле с изображением-ссылкой на всплывающий календарь сбоку - мой выбор. Лучшее из обоих миров.

Если вы хотите что-то дополнительное, вы можете добавить синтаксический анализатор даты / времени на естественном языке, такой как Chronic http://chronic.rubyforge.org/.

Также не забывайте международных пользователей.

Answer 6

Если вы выбираете опцию combo-box / list-box, убедитесь, что в месяцах указано «янв», «февраль» ... «декабрь» вместо «1», «2» ... "12".
Довольно раздражает необходимость выяснить, какой слот является месяцем, а какой - днем ​​в соответствии с диапазонами значений.

Answer 7

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

Answer 8

Мне очень нравится, как работает виджет QT4 Date / Time.

• Вы можете ввести даты вручную (введите дату в общих форматах).
• Вы можете использовать колесо прокрутки для быстрого изменения полей даты / времени.
• У вас есть расширяемый календарь с выпадающими месяцами и стрелками вперед / назад по месяцам. Вы можете нажать на определенные дни и ввести год вручную или с помощью поля со списком (колесо прокрутки также работает здесь).

Вот короткое видео (~ 7,5 МБ), которое показывает, как работает виджет и каковы некоторые из его функций: Видео здесь

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

Возможность ввода относительных дат (сегодня, на прошлой неделе, 3 дня назад) полезна, но я не уверен, насколько это будет практично, учитывая стандартные вопросы, такие как «Какая у вас дата рождения?» Или « Когда бы вы хотели, чтобы Х послал вам по электронной почте? ".

Answer 9

Я всегда находил Календарь Google простым в этом отношении. Конечно, вы могли бы сделать хуже, чем пытаться подражать. Ключ заключается в том, чтобы дать пользователю большую гибкость при вводе информации. Например, я могу выбрать время из выпадающего списка или ввести его вручную, и когда я набираю, мне не нужно включать двоеточие или «m» в «pm».

Answer 10

Календарь, показывающий несколько месяцев подряд: http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html