Какой лучший пользовательский интерфейс для ввода даты рождения? [закрытый]

Если ваша цель - убедиться, что" пользователь не будет смущен вообще", я думаю, что это лучший вариант.

Я бы не рекомендовал datepicker для дата рождения. Сначала вы должны перейти к году (щелчок, щелчок, щелчок...), затем к месяцу (нажмите Еще немного), а затем найти и щелкнуть крошечное число в сетке.

Datepickers полезны, когда вы не знаете точную дату с верхней части головы, например, вы планируете поездка на вторую неделю февраля.

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

Я думаю, что никто не сделал это лучше, чем учетные записи google зарегистрироваться:

выберите первый месяц в поле выбора и вручную введите дату и год. Простой.

легко проверить. Легко для пользователей, чтобы получить права. Нет прокрутки назад лет в поле выбора с 1900-го по настоящий год. Нет необходимости обновлять поле выбора "день" на основе ввода месяца. Отлично работает в интернете. Отлично работает на мобильном телефоне. Работает для всех языков, например, 01/10/2014 - это 1 октября или 10 января? Я ожидаю, что в будущем мы увидим этот формат выбора дня рождения намного больше.

элемент управления datepicker просто плохое решение для всех. Так много кликов! На мой взгляд, датапикер полезен только тогда, когда важно знать день недели, например, при бронировании билетов.

обновление 2/6/2016: я из Великобритании, поэтому я больше знаком с форматами день/месяц/год, а не месяц/день/год. Тем не менее, пользователи, которые будут использовать свой курсор для выбора месяца, я считаю, что гораздо проще сначала выбрать поле выбора, а не переходить в поле ввода > выбрать > ввод. Дата комментария-2 июня, а не 6 февраля;)

Как говорится в Это статья Якоба Нильсена, выпадающие списки следует избегать для данных, которые хорошо известно пользователю:

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

в идеальное решение, скорее всего что-то таким образом:

• предоставьте 3 отдельных текстовых поля для дня, месяца и года (помечены соответствующим образом)
• сортировка текстовых полей в соответствии с культурой пользователя.
• день и месяц текстовые поля должны быть размером так, чтобы 2-значный вход предполагается.
• год текстовое поле должно быть размером так, что 4-значный год предполагается.
• разрешить пользователю ввести 2 или 4 цифры года. Допустим, 2 цифра год 1900, и обновить текстовое поле, чтобы отразить это onBlur (или на следующем шаге подтверждения).
• разрешить пользователю вводить номер месяца или имя месяца.

---

EDIT: вот как мы реализовали наш выбор DOB: Маскированное поле ввода текста с регулярным выражением HTML5 для принудительной цифровой клавиатуры на устройствах iOS.

http://www.huntercourse.com/usa/texas/

даты рождения отличаются от других дат, потому что люди часто используются для ввода их конкретной даты рождения.
А текстовое поле с Пример ясно, быстро и легко ввести:

 _______
|_______| (example: 31/3/1970)

Это должно поддерживать гибкое форматирование, такое как 1/1/1970 или 20/07/70.

Если вам нужно поддерживать разные культуры с разными соглашениями о дате (например, США и Великобритания), это может быть подвержено ошибкам для людей, которые не прислушиваются к примеру. Чтобы этого избежать вам может использовать
выберите список для месяца, а текстовые поля для даты и года.

 _________   __   ____
|March  |V| |__| |____|

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

вы должны взглянуть на Datejs.

Datejs-это библиотека дат JavaScript с открытым исходным кодом.

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

Я бы также рекомендовал сочетание DatePicker и полей

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

Я пробовал datePicker с моим пользователем, но оказалось, что это плохой пользовательский интерфейс для них. Что я в конечном итоге база по их просьбе, чтобы иметь 3 текстовое поле, где они могут быстро ввести [ день ] [ месяц ] [ год ] :(

меня беспокоит преобладание решения вместо проектирования. ОП сказал: "Я хочу знать, что является наиболее удобным и беспроблемным решением, поэтому пользователь не будет смущен вообще."Итак, будь то jQuery или JavaScript или C# или FORTRAN, дизайн важен-и здесь важен дизайн UX, а не дизайн пользовательского интерфейса. (Еще одна просьба, чтобы избежать неправильной и нелогичной конструкции "UX / UI").

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

используйте одно текстовое поле, которое использует подсказки формата в поле, например, [день / месяц / год ] не требует слишком жестких форматов. Если пользователь вводит JUN в том месте, где вы ожидаете месяц, то используйте June на задней панели. Если пользователь набирает 6 в том месте, где вы ожидаете месяц, то используйте июнь на заднем конце. Если пользователь вводит 06 в том месте, где вы ожидаете месяц, а затем использовать июнь на задней панели.

используйте бритву Оккама в качестве руководства (по сути, большую часть времени данные будут достаточно точными). Уменьшить когнитивное трение (не заставляйте пользователей думать).

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

Почему бы вам не проверить все три и выбрать тот, который выполняет лучше всего? Это кажется хорошим кандидатом на Оптимизатор Сайта Google чтобы проверить.

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

Я обычно использую оба -- datepicker, который заполняет текстовое поле в правильном формате. Продвинутые пользователи могут редактировать текстовое поле напрямую, мыши-счастливые пользователи могут выбрать с помощью datepicker.

Если вы беспокоитесь о пространстве, у меня обычно есть только текстовое поле с небольшим значком календаря рядом с ним. Если вы нажмете на значок календаря он вызывает datepicker как всплывающее окно.

также я считаю хорошей практикой предварительно заполнить текстовое поле текстом, который указывает правильный формат (например: "DD/MM/YYYY"). Когда пользователь фокусирует текстовое поле, этот текст исчезает, чтобы они могли ввести свой собственный.

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

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

использовать ли datepicker или нет, я думаю, зависит от того, как давно даты. Если они обычно находятся в текущем месяце и почти никогда не старше нескольких месяцев, и вы знаете, что Javascript будет вокруг, datepicker хорош. Если даты не последние (скажем, дата рождения) я думаю, что это лучший вариант:

http://img411.imageshack.us/img411/6328/mockupg.png

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

Я думаю, что выбор даты просто сделать ход более сложным, чтобы ввести дату своего рождения.

Как уже упоминалось, комбинация выпадающих списков для дней и месяцев с текстовым полем для года кажется наиболее эффективной для пользователя. Таким образом, ввод даты рождения занимает менее 10 секунд, что намного быстрее, чем выбор даты: благодаря клавише tab (которую все пользователи должны научиться использовать для заполнения формы), быстро перейти от одного элемента формы к следующему.

по крайней мере, в Macintosh (я не знаю о Windows) вы также можете использовать клавиатуру для доступа к дате внутри полей выбора: благодаря клавише tab вы получаете фокус на элементе формы, затем нажимаете клавишу со стрелкой, чтобы опустить список, затем набираете, например, 1967 год, и вы попадаете туда в мгновение ока...

Я бы предпочел datepicker (и поле ввода с документированным форматом в качестве отступа) для международного сайта.

форматы даты различаются и иногда трудно читать, если вы теперь привыкли к ним. Жаль, что многие люди не знакомы с ISO 8601. : - (

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

Я бы взял DatePicker. Это единственный компонент, который позволяет опытным пользователям вводить его вручную и помогает новичкам вводить дату очень легко.

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

кто не использует jQuery UI DatePicker?

он настраивается для удовлетворения практически любых потребностей. Единственным недостатком является то, что если вы включаете его в jQuery UI, он имеет несколько большой размер..

обновление

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

• тема CSS - 23kb
• jQuery UI - 71kb minified
• DatePicker-38kb
• плюс несколько изображений (в следующем месяце / в предыдущем месяце, которые я уверен, что спринт)

но это не так уж плохо...

jQueryUI datetime picker является лучшим вариантом, поскольку он позволяет пользователям pro вводить свое собственное значение в текстовое поле или они могут выбрать его из picker.

настройка picker, чтобы позволить легкий ввод дней рождения или будущих дат тоже довольно легко:

$(‘#datepicker’).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: ‘-100:+50'
});

Это показывает что-то вроде этого (не могу опубликовать фотографию, поскольку я новый пользователь:http://klalex.com/wp-content/uploads/2009/07/picture-1.png)

и yearRange показывает даты из DateTime.Сейчас.Год - 100 к значение datetime.Сейчас.Год + 50

нашел это на: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Я только что обнаружил плагин на JSFiddle. Две возможные альтернативы : 1 один вход или 3 входа, но выглядит как один... (используйте клавишу Tab, чтобы перейти к следующему входному)

[Ссылка]http://jsfiddle.net/davidelrizzo/c8ASE/ Это кажется интересным !

Я думаю, вы можете попробовать плагин birthdaypicker,

вы можете использовать плагин cxcalendar. Это похоже на другой datepicker. но вы можете выбрать год и месяц в select после нажатия Year-month title.

Я создал три выпадающих списка для выбора даты рождения и количество дней изменяется динамически на основе выбора года и месяца. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();