Каков наилучший метод выбора даты рождения?
Я хочу знать, что является самым удобным и проблемным решением, поэтому пользователь вообще не будет путать.
Для продвинутого пользовательского ввода текста лучше всего, если пользователь знает формат даты, он очень быстрый. Для не очень продвинутого пользователя я предлагаю использовать datepicker. Поскольку обычно у вас также есть продвинутые и неусовершенствованные пользователи, я предлагаю комбинацию ввода текста и datepicker.
Если ваша цель - убедиться, что "пользователь не будет путать вообще", я думаю, что это лучший вариант.
Я бы не рекомендовал datepicker для даты рождения. Сначала вам нужно перейти к году (щелчок, щелчок, щелчок & hellip;), затем до месяца (нажмите еще несколько), а затем найдите и щелкните крошечный номер в сетке.
Datepickers полезны, когда вы не знаете точную дату с верхней части головы, например. вы планируете поездку на вторую неделю февраля.
Хотя это очень старый вопрос, это так важно для правильного ввода даты рождения, особенно в регистрационной форме.
Я думаю, что никто не сделал это лучше, чем учетные записи google:
Выберите месяц сначала в поле выбора и введите вручную дату и год. Простой.
Простота проверки. Легко для пользователей, чтобы получить право. Без прокрутки лет в коробке выбора с 1900 года - нынешнего года. Не нужно обновлять поле выбора "день" на основе ввода месяца. Отлично работает в Интернете. Отлично работает на мобильных устройствах. Работы для всех локалей, например, 01/10/2014 - это то, что 1 октября или 10 января? Я ожидаю, что в будущем мы будем видеть этот формат выбора дня рождения.
Датпикер - это всего лишь плохая идея. Так много кликов! На мой взгляд, датпикер полезен только тогда, когда важно знать день недели, например, заказывать билеты.
Обновление 2/6/2016: Я из Великобритании, поэтому я больше знаком с форматами день/месяц/год, а не месяц/день/год. Тем не менее, пользователи, которые будут использовать свой курсор для выбора месяца, я считаю, что гораздо проще иметь поле выбора, а не идти на вход > select box > input. Дата комментария - 2 июня, а не 6 февраля;)
Как упоминалось в этой статье Якоба Нильсена, следует избегать выпадающих списков для данных , хорошо известных пользователю
Меню данных, хорошо известных пользователям, таких как месяц и год их рождения. Такая информация часто жестко привязана к пальцам пользователей, и выбор таких параметров из меню нарушает стандартную парадигму для ввода информации и может даже создать больше работы для пользователей.
Идеальное решение, вероятно, будет выглядеть следующим образом:
EDIT: Вот как мы реализовали наш сборщик DOB: поле ввода масок с текстовым выражением HTML5, чтобы заставить цифровую клавиатуру на устройствах iOS.
Дни рождения отличаются от других дат, потому что люди часто используют для ввода своего конкретного дата рождения.
Текстовое поле с примером понятное, быстрое и удобное для ввода:
_______
|_______| (example: 31/3/1970)
Это должно поддерживать гибкое форматирование, такое как 1/1/1970 или 20/07/70.
Если вам нужно поддерживать разные культуры с разными соглашениями о сроках (например, в США и Великобритании), это может быть причиной ошибок для людей, которые не прислушиваются к примеру. Чтобы этого избежать, вы можете использовать выберите месяц и текстовые поля для даты и года.
_________ __ ____
|March |V| |__| |____|
Это устраняет двусмысленность между порядком дня и месяца, но немного неуклюже для использования.
Вы должны взглянуть на Datejs.
Datejs - библиотека дат JavaScript с открытым исходным кодом.
Всеобъемлющий, но простой, скрытный и быстрый. Datejs прошел все испытания и готов к удару. Datejs не просто анализирует строки, это разрезает их чисто на два.
Я также рекомендовал бы комбинацию DatePicker и полей
Смотрите эту демонстрацию, где сборщик дат отражает дату, введенную пользователем в полях.
Однако он основан на DatePicker, используя Prototype и Scriptaculous. Я упоминаю его для иллюстрации.
Я пробовал datePicker с моим пользователем, но он оказался для них плохим интерфейсом. В результате я получаю 3 текстовых поля, где они могут быстро набирать [день] [месяц] [год]: (
Меня беспокоит преобладание решения вместо проектирования. OP сказал: "Я хочу знать, что является самым удобным и беспроблемным решением, поэтому пользователь вообще не будет путать". Итак, важно ли это jQuery или JavaScript или С# или FORTRAN, и это дизайн UX, а не дизайн пользовательского интерфейса, который здесь имеет значение. (Еще одна просьба избегать неправильной и нелогичной конструкции "UX/UI" ).
Использовать ввод текста. Используйте три отдельных поля с надписью "День", "Месяц" и "Год" (месяц, день и год). Пусть пользователи вводят даты. Смешивание текста и списков в одном и том же взаимодействии - это Bad Thing (не используйте текстовый ввод в течение года, но выбор даты или списки для месяца и дня, например).
Используйте одно текстовое поле, которое использует подсказки формата в поле, например, [день/месяц/год]. Не требуется слишком жестких форматов. Если пользователь набирает JUN в том месте, где вы ожидаете месяц, затем используйте июнь на задней панели. Если пользователь набирает 6 в том месте, где вы ожидаете месяц, используйте июнь на заднем конце. Если пользователь вводит 06 в том месте, где вы ожидаете месяц, используйте июнь на задней панели.
Используйте Occam Razor в качестве руководства (фактически, в большинстве случаев данные будут достаточно точными). Уменьшите когнитивные трения (не думайте, чтобы пользователи думали).
Поместите оба и сделайте каждое обновление другим. Если пользователь выбирает дату из datepicker, легко исправить незначительную ошибку в текстовом поле или визуализировать выбор, который вы ввели в текстовое поле в datepicker.
Почему бы вам не проверить все три и выбрать тот, который работает лучше всего? Это кажется хорошим кандидатом для Оптимизатор веб-сайта Google для тестирования.
Возможно, что тип пользователей, которых вы используете, или тип сайта, который вы используете, может указывать на то, что ваше решение должно отличаться от "нормы".
Я обычно использую оба - datepicker, который заполняет текстовое поле в правильном формате. Продвинутые пользователи могут редактировать текстовое поле напрямую, пользователи с поддержкой мыши могут выбирать с помощью datepicker.
Если вы беспокоитесь о пространстве, у меня обычно есть только текстовое поле с маленьким значком календаря рядом с ним. Если вы нажмете на значок календаря, он отобразит всплывающее окно datepicker.
Также я считаю хорошей практикой предварительно заполнить текстовое поле текстом, который указывает правильный формат (т.е.: "DD/MM/YYYY" ). Когда пользователь фокусирует текстовое поле, текст исчезает, поэтому они могут вводить свои собственные.
Как, возможно, один из пожилых людей здесь, и родился в конце месяца, я считаю, что раскрывающиеся меню для рождений разочаровывают. Мне обычно приходится прокручивать вниз два раскрывающихся меню, и это неудобно. Я бы скорее напечатал его.
Если у вас есть элемент управления, предназначенный для того, чтобы он мог принимать раскрывающиеся меню или вводить их, и дать понять, что они работают, это будет отлично.
Использовать ли датпикер или нет, я думаю, зависит от того, как давно даты. Если они обычно находятся в текущем месяце и почти не более нескольких месяцев, и вы знаете, что Javascript будет вокруг, датпикер хорош. Если даты не новее (скажем, дата рождения), я думаю, что это лучший вариант:
http://img411.imageshack.us/img411/6328/mockupg.png
Обратите внимание, что это отличается от ответа Патрика МакЭлэни в том, что год - это текстовое поле, а не выпадающее меню. Выбор номера из раскрывающегося списка, который содержит сотни элементов, очень раздражает пользователя.
Я думаю, что сборщик дат просто усложняет переход к одной дате рождения.
Как уже упоминалось, комбинация списков переходов для дней и месяцев с текстовым полем для года представляется наиболее эффективной для пользователя. Для ввода даты рождения требуется всего менее 10 секунд, что намного быстрее, чем выбор даты: благодаря клавише вкладки (которую все пользователи должны научиться использовать для заполнения формы), быстро перейти от одной формы элемент к следующему.
По крайней мере, под Macintosh (я не знаю о Windows) вы также можете использовать клавиатуру для доступа к дате внутри полей выбора: благодаря клавише табуляции вы получаете фокус на элементе формы, а затем нажмите клавишу со стрелкой чтобы вывести список, затем введите, например, 1967, и вы попадете туда в мгновение ока...
Я бы взял DatePicker. Это единственный компонент, который позволяет экспертам вводить его вручную и позволяет новичкам вводить дату очень просто.
Календарь не должен появляться, если вы входите, нажав вкладку, но нажав на кнопку. Так что никакой эксперт не раздражает его.
Я бы предпочел datepicker (и поле ввода с документированным форматом в качестве спада) для международного сайта.
Форматы даты различаются и иногда трудно читать, если вы теперь используете их. Слишком плохо многие люди не устраивают ISO 8601.: - (
Я бы предложил использовать раскрывающееся меню для каждого поля, указав каждый день, месяц и год. Также может помочь сборщик дат, но если у пользователя нет встроенного JavaScript, он не будет работать.
Кому вы не пользуетесь jQuery UI DatePicker?
Он настраивается для удовлетворения любых потребностей. Единственным недостатком является то, что вы включаете его с помощью jQuery UI, который имеет несколько большую площадь.
Некоторые размеры файлов, похоже, изменились, поэтому они обновляются ниже. Имейте в виду, что эти цифры будут верны только в том случае, когда они были в последний раз обновлены. С тех пор ситуация может измениться.
Но это не так уж плохо...
JQueryUI выбор даты и времени - лучший вариант, поскольку он позволяет про-пользователям вводить свое собственное значение в текстовое поле, или они могут выбирать его из сборщика.
Настройка сборщика, позволяющая легко вводить дни рождения или будущие даты, также довольно проста:
$(‘#datepicker’).datepicker({
changeMonth: true,
changeYear: true,
yearRange: ‘-100:+50'
});
это показывает что-то вроде этого (не могу опубликовать фотографию, поскольку я новый пользователь: http://klalex.com/wp-content/uploads/2009/07/picture-1.png)
и yearRange показывает даты с DateTime.Now.Year - от 100 до DateTime.Now.Year + 50
нашел это на: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/
Я только что открыл плагин на JSFiddle. Две возможные альтернативы: 1 одиночный вход ИЛИ 3 входа, но выглядит как один... (используйте клавишу Tab, чтобы перейти к следующему входу)
[ссылка] http://jsfiddle.net/davidelrizzo/c8ASE/ Кажется интересным!
Я думаю, вы можете попробовать плагин birthdaypicker,
вы можете использовать плагин cxcalendar. Похоже на другого дампикера. но вы можете выбрать год и месяц в выборе после нажатия заголовка года.
Я создал три раскрывающихся списка для выбора даты рождения, а количество дней динамически менялось в зависимости от выбора года и месяца. http://jsfiddle.net/ravitejagunda/FH4VB/10/
daysInMonth = new Date(year,month,1,-1).getDate();