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

Это колесо, которое снова и снова изобреталось за эти годы.

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

Основные соображения

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

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

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

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


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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

Мое предпочтение относится к текстовому вводу с кнопкой elipsis рядом с ним:

Enter a date [        ] [...]

В elipsis появится календарь для заполнения ввода текста, но пользователь может ввести дату, если захочет. Проверка должна выполняться при нажатии кнопки "ОК" для формы - попытка проверить дату на основе символа по символу обречена, по моему опыту.

Валидация должна быть сложной и допускать выражения типа

"today"
"Tomorrow"
"23 Jan"

и др.

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

Ответ 3

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

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

Пример ввода даты http://s5.tinypic.com/2qscw28.jpg

Пример ввода времени http://s5.tinypic.com/3518f7q.jpg

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

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

alt text http://s5.tinypic.com/15hlb8m.jpg

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

alt text http://s5.tinypic.com/2yplphy.jpg

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

Я бы выбрал три альтернативы в зависимости от ситуации:

  • 2 комбинированных блока. Один год листинга + месяц, другой день
  • 3 комбинированных блока. Один год листинга, один месяц, один день.
  • Видимый календарь/с и комбо как этот из YUI

И я верю, что есть больше вариантов, из которых я бы выбрал.

Ответ 8

Вам нужно проверить требования к пользовательскому интерфейсу. Если вы хотите только поддержку script -enabled, вы можете перейти с любой вашей панорамой скриптов и запустить с любым форматом даты/времени, который они предоставляют, в скрытое поле.

Однако, если вам нужна запись пользователя в текстовом поле, вы столкнетесь с некоторыми решениями:

  • Является ли формат даты/времени жестким? например mm/dd/yyy hh: mm: только формат ss?
  • Или свободно определено, чтобы включить записи стиля "сегодня", "завтра", "23 января"?
  • Будут ли форматы специфичными для локали? например мм/дд/гггг против дд/мм/гггг

Методы проверки зависят от ваших решений по требованиям.

Мне нравится плагин jQuery date-picker. Это позволит выводить данные в определенных форматах.

Ответ 10

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

Ответ 11

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

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

Вот короткое видео (~ 7.5MB), которое показывает, как работает виджет и каковы некоторые его функции: Видео здесь

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

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

Ответ 12

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

enter image description here