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

Какой лучший метод выбора даты рождения?

• 3 ввода текста (месяц / день / год) или один ввод маски. Пользователь ДОЛЖЕН использовать клавиатуру
• 3 выберите поля. Пользователь может использовать клавиатуру или мышь.
• Один хороший выбор даты .

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

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

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

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

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

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

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

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

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

Датапикер - просто плохое решение. Столько кликов! На мой взгляд, выбор даты полезен только тогда, когда важно знать день недели, например, при бронировании билетов.

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

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

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

Идеальное решение, вероятно, будет примерно таким:

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

РЕДАКТИРОВАТЬ: Вот как мы реализовали наше средство выбора DOB: поле ввода замаскированного текста с регулярным выражением HTML5 для принудительного использования цифровой клавиатуры на устройствах iOS.

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

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

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

Это должно поддерживать гибкое форматирование, например, 01.01.1970 или 20.07.70.

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

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

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

Вам стоит взглянуть на Datejs .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Также я считаю хорошей практикой предварительно заполнить текстовое поле текстом, который указывает правильный формат (например: «ДД / ММ / ГГГГ»). Когда пользователь фокусирует текстовое поле, этот текст исчезает, чтобы он мог ввести свое собственное.

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

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

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

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

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

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

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

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

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

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

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

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

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

Кто не пользуется jQuery UI DatePicker?

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

Обновить

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

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

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

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

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

$ ('# datepicker'). datepicker ({
    changeMonth: правда,
    changeYear: правда,
    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 . Похоже на другой datepicker. но вы можете выбрать год и месяц в списке, щелкнув заголовок года и месяца.

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

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