Який найкращий інтерфейс користувача для введення дати народження? [зачинено]

Який найкращий метод для селектора дати народження?

• 3 введення тексту (місяць / день / рік) або один вхід маски. Користувач ПОВИНЕН використовувати клавіатуру
• 3 виберіть вікна. Користувач може використовувати клавіатуру або мишу.
• Один приємний підбірник побачень .

Хочу знати, що є найбільш корисним і безпроблемним рішенням, тому користувач взагалі не буде плутати.

Для розширеного введення тексту користувача найкраще, якщо користувач знає формат дати, це дуже швидко. Для не настільки просунутого користувача я пропоную скористатися вибором дати. Оскільки зазвичай у вас також є просунуті та нерозвинені користувачі, я пропоную комбінацію введення тексту та вибору дати.

Якщо ваша мета - переконатися, що "користувача взагалі не плутатимуть", я думаю, що це найкращий варіант.

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

Підбирачі дат корисні, коли ви не знаєте точної дати у верхній частині голови, наприклад, плануєте поїздку на другий тиждень лютого.

Незважаючи на те, що це дуже старе питання, настільки важливим є правильне введення дати народження, особливо в реєстраційній формі.

Я думаю, що ніхто не зробив цього краще, ніж зареєстрував облікові записи google:

Виберіть перший місяць у вікні вибору та введіть вручну дату та рік. Простий.

Легко перевірити. Користувачі легко отримують право. Жодне прокручування років у вікні вибору 1900-нинішнього року. Не потрібно оновлювати вікно "день" на основі введених місяців. Відмінно працює в Інтернеті. Чудово працює на мобільних пристроях. Працює для всіх місцевостей, наприклад, 01.10.2014 - це 1 жовтня чи 10 січня? Я очікую, що ми побачимо цей формат вибору дня народження набагато більше в майбутньому.

Вибір дат - це лише погане рішення у всьому світі. Стільки кліків! На мою думку, підбирач побачень корисний лише тоді, коли важливий день тижня, наприклад бронювання квитків.

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

Як згадується в цій статті Якоба Нільсена , слід уникати випадаючих списків для даних, добре відомих користувачеві :

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

Ідеальне рішення, ймовірно , що - то на кшталт наступним чином :

• Укажіть 3 окремих текстових поля для дня, місяця та року (позначені належним чином)
• Сортуйте текстові поля відповідно до культури користувача.
• Текстові поля для дня та місяця мають бути розміщені таким чином, щоб було введено двозначне введення.
• Текстове поле року має бути розміром так, щоб передбачити чотиризначний рік.
• Дозвольте користувачеві ввести 2 або 4 цифри року. Припустимо, що двозначний рік - 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 не просто розбирає рядки, він чисто розрізає їх надвоє.

Мене хвилює перевага рішення, а не проектування. В ОП сказали: "Я хочу знати, що є найбільш корисним і безпроблемним рішенням, тому користувач взагалі не буде плутати". Тож чи це jQuery або JavaScript або C # або FORTRAN, дизайн важливий - і тут важливий дизайн UX, а не дизайн інтерфейсу. (Ще одне прохання уникнути неправильної та нелогічної конструкції "UX / UI").

Використовуйте введення тексту. Використовуйте три окремих поля з позначкою День, Місяць та Рік (або Місяць, День та Рік). Нехай користувачі вводять дати. Змішування тексту та списків в одній взаємодії є поганою річчю (наприклад, не використовуйте текст для року, а для вибору дати або списки для місяця та дня).

Використовуйте єдине текстове поле, яке використовує підказки у форматі поля, наприклад, [день / місяць / рік] Не вимагайте форматів занадто жорстко. Якщо користувач вводить JUN у тому місці, де ви очікуєте місяць, тоді використовуйте червень на зворотному кінці. Якщо користувач набирає 6 у місці, де ви очікуєте місяць, то використовуйте червень на зворотному кінці. Якщо користувач вводить 06 в тому місці, де ви очікуєте місяць, то використовуйте червень на зворотному кінці.

Використовуйте бритва Occam як керівництво (фактично, більшість часу дані будуть досить точними). Зменшіть когнітивне тертя (не змушуйте користувачів думати).

Я також рекомендую поєднання DatePicker і полів

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

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

Поставте обидва і зробіть кожне оновлення іншим. Якщо користувач вибирає дату за вибором дати, легко виправити незначне неправильне клацання в текстовому полі або візуалізувати вибір, який ви ввели у текстове поле в панелі дат.

Чому б ви не випробували всіх трьох і не вибрали той, який найкращий? Це здається хорошим кандидатом для тестування оптимізатора веб-сайтів Google .

Можливо, тип користувачів, який ви маєте, або тип веб-сайту, який ви ведете, може диктувати, що ваше рішення має відрізнятися від "норми".

Я зазвичай використовую обидва - підбірник дати, який заповнює текстове поле у ​​правильному форматі. Досвідчені користувачі можуть редагувати текстове поле безпосередньо, користувачі, задоволені мишею, можуть вибирати за допомогою вибору дати.

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

Крім того, я вважаю гарною практикою попередньо заповнити текстове поле текстом, який вказує правильний формат (тобто: "DD / MM / РРРР"). Коли користувач фокусує текстове поле, текст зникає, щоб вони могли ввести своє.

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

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

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

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

Зауважте, що це відрізняється від відповіді Патріка МакЕлхані тим, що рік - це текстове поле, а не спадне меню . Вибір номера із спадного поля, що має довгі сотні елементів, дуже дратує користувача.

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

Як уже було сказано, комбінація списків, що випадають на дні та місяці, з текстовим полем за рік видається найбільш ефективним для користувача. Щоб ввести дату народження таким чином потрібно лише менше 10 секунд, що набагато швидше, ніж вибір дати: завдяки клавіші вкладки (яку всі користувачі повинні навчитися використовувати для заповнення форми), швидко перейти з однієї форми елемент до наступного.

Принаймні в Macintosh (я не знаю про Windows), ви також можете використовувати клавіатуру для доступу до дати всередині полів вибору: завдяки клавіші вкладки ви отримуєте фокус на елементі форми, а потім натискайте клавішу зі стрілкою, щоб перейти вниз список, а потім введіть, наприклад, 1967 рік, і ви потрапите туди за мить…

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

Формати дати різняться, і їх часом важко читати, якщо ви зараз звикли до них. Дуже погано, що багатьом людям не комфортно з ISO 8601. :-(

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

Я б взяв DatePicker. Це єдиний компонент, який дозволяє експертним користувачам вводити його вручну та веде новачків вводити побачення дуже просто.

Календар не повинен з’являтися, якщо ви входите через натискання вкладки, а натискання на кнопку. Тож жоден досвідчений користувач цього не дратує.

Хто не використовує користувальницький інтерфейс jQuery DatePicker?

Це налаштовується, щоб задовольнити майже будь-які потреби. Єдиний мінус - якщо ви включаєте його в інтерфейс jQuery, він має дещо великий слід.

Оновлення

Деякі розміри файлів, здається, змінилися, тому вони оновлюються нижче. Майте на увазі, що ці цифри будуть правильними лише за час їх останнього оновлення. З того часу все може змінитися.

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

Але це не дуже погано ...

Вибір часу JQueryUI - це найкращий варіант, оскільки він дозволяє користувачам вводити власну цінність у текстове поле або вони можуть вибирати її з вибору.

Налаштування вибору, що дозволяє легко вводити дні народження чи майбутні дати, дуже легко:

$ ('# datepicker'). датапкер ({
    changeMonth: вірно,
    змінить рік: правда,
    Річний рейтинг: '-100: +50'
});

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

і yearRange показує дати від DateTime.Now.Year - 100 to 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/ Це здається цікавим!

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

ви можете використовувати плагін cxcalendar . Це схоже на інших підбирачів дат. але ви можете вибрати рік і місяць у виборі після натискання назви року-місяця.

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

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