생년월일 입력에 가장 적합한 UI는 무엇입니까? [닫은]

생년월일 선택기에 가장 적합한 방법은 무엇입니까?

• 3 개의 텍스트 입력 (월 / 일 / 년) 또는 1 개의 마스크 입력. 사용자는 키보드를 사용해야합니다.
• 3 개의 선택 상자. 사용자는 키보드 또는 마우스를 사용할 수 있습니다.
• 하나의 멋진 datepicker .

가장 유용하고 문제가없는 솔루션이 무엇인지 알고 싶으므로 사용자는 전혀 혼란스럽지 않습니다.

고급 사용자의 경우 텍스트 입력이 가장 좋으며 사용자가 날짜 형식을 알고 있으면 매우 빠릅니다. 고급 사용자가 아닌 경우 datepicker를 사용하는 것이 좋습니다. 일반적으로 고급 및 비 고급 사용자도 있으므로 텍스트 입력과 날짜 선택기의 조합을 제안합니다.

당신의 목표가 "사용자가 전혀 혼동하지 않을 것"을 확인하는 것이라면 이것이 최선의 선택이라고 생각합니다.

생년월일 로 datepicker를 권장하지 않습니다 . 먼저 연도 (클릭, 클릭, 클릭…)를 찾은 다음 월 (더 클릭)을 찾은 다음 그리드에서 작은 숫자를 찾아 클릭해야합니다.

Datepickers는 2 월 둘째 주 여행을 계획하는 경우와 같이 정확한 날짜를 모를 때 유용합니다.

이것은 매우 오래된 질문이지만 특히 등록 양식에서 생년월일을 정확하게 입력하는 데 매우 중요합니다.

Google 계정 가입보다 더 잘한 사람은 없다고 생각합니다.

선택 상자에서 먼저 월을 선택하고 날짜와 연도를 수동으로 입력합니다. 단순한.

검증하기 쉽습니다. 사용자가 쉽게 이해할 수 있습니다. 1900 년부터 현재까지의 선택 상자에서 연도를 뒤로 스크롤하지 않습니다. 월 입력에 따라 '일'선택 상자를 업데이트 할 필요가 없습니다. 웹에서 잘 작동합니다. 모바일에서 잘 작동합니다. 모든 로케일에서 작동합니다 (예 : 2014 년 1 월 10 일)-10 월 1 일 또는 1 월 10 일입니까? 앞으로이 생일 선택기 형식이 훨씬 더 많이 나타날 것으로 기대합니다.

datepicker는 모든면에서 좋지 않은 솔루션입니다. 너무 많은 클릭! 내 생각에 날짜 선택기는 티켓 예약과 같이 요일이 중요하다는 것을 알 때만 유용합니다.

2016 년 2 월 6 일 업데이트 : 저는 영국 출신이므로 월 / 일 / 년이 아닌 일 / 월 / 년 형식에 더 익숙합니다. 그러나 커서를 사용하여 월을 선택하는 사용자는 입력> 선택 상자> 입력으로 이동하는 것보다 먼저 선택 상자를 사용하는 것이 훨씬 쉽다고 생각합니다. 댓글 날짜는 2 월 6 일이 아니라 6 월 2 일입니다.)

Jakob Nielsen 기사 에서 언급했듯이 사용자에게 잘 알려진 데이터에 대해서는 드롭 다운 목록을 사용하지 않아야합니다 .

생년월일과 같이 사용자에게 잘 알려진 데이터 메뉴입니다. 이러한 정보는 종종 사용자의 손가락에 고정되어 있으며 메뉴에서 이러한 옵션을 선택해야하는 것은 정보 입력에 대한 표준 패러다임을 깨뜨리고 사용자를 위해 더 많은 작업을 생성 할 수 있습니다.

이상적인 솔루션은 다음 과 같습니다.

• 일, 월 및 연도에 대해 3 개의 별도 텍스트 상자 제공 (적절하게 레이블이 지정됨)
• 사용자의 문화에 따라 텍스트 상자를 정렬합니다.
• 일 및 월 텍스트 상자는 2 자리 입력을 가정하도록 크기를 조정해야합니다.
• 연도 텍스트 상자는 4 자리 연도가 가정되도록 크기가 조정되어야합니다.
• 사용자가 2 자리 또는 4 자리 연도를 입력 할 수 있습니다. 2 자리 연도가 1900이라고 가정하고이 onBlur (또는 다음 확인 단계)를 반영하도록 텍스트 상자를 업데이트합니다.
• 사용자가 월 번호 또는 월 이름을 입력 할 수 있습니다.

편집 : 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는 문자열을 구문 분석하는 것이 아니라 두 개로 깔끔하게 분할합니다.

나는 디자인 대신 해결하는 것이 우세하다는 점에 어려움을 겪습니다. OP는 "가장 유용하고 문제없는 솔루션이 무엇인지 알고 싶어서 사용자가 전혀 혼란스럽지 않을 것"이라고 말했다. 따라서 그것이 jQuery이든 JavaScript이든 C #이든 FORTRAN이든, 디자인이 중요합니다. 여기서 중요한 것은 UI 디자인이 아니라 UX 디자인입니다. (잘못된 비논리적 구성 "UX / UI"를 피하기위한 또 다른 탄원).

텍스트 입력을 사용하십시오. 일, 월 및 연도 (또는 월, 일 및 연도) 레이블이 붙은 세 개의 별도 상자를 사용하십시오. 사용자가 날짜를 입력하도록합니다. 동일한 상호 작용에서 텍스트와 목록을 혼합하는 것은 나쁜 일입니다 (예 : 연도에는 텍스트 입력을 사용하지 말고 날짜 선택기 또는 목록은 월과 일로 사용).

필드 내 형식 힌트를 사용하는 단일 텍스트 필드를 사용하십시오. 예를 들어 [일 / 월 / 년] 형식을 너무 엄격하게 요구하지 마십시오. 사용자가 예상되는 월에 JUN을 입력하면 백엔드에서 June을 사용합니다. 사용자가 한 달이 예상되는 곳에 6을 입력하면 백엔드에서 June을 사용합니다. 사용자가 한 달을 예상하는 곳에 06을 입력하면 백엔드에 June을 사용합니다.

Occam의 Razor를 가이드로 사용하세요 (실제로 대부분의 경우 데이터가 충분히 정확합니다). 인지 마찰을 줄입니다 (사용자가 생각하게 만들지 마십시오).

또한 DatePicker와 필드의 조합을 권장합니다.

이 데모를 참조하십시오 . 여기서 날짜 선택기는 사용자가 필드에 입력 한 날짜를 반영합니다.
그러나 Prototype 및 Scriptaculous를 사용 하는 DatePicker를 기반으로합니다 . 설명 목적으로 언급했습니다.

내 사용자와 datePicker를 시도했지만 UI가 좋지 않은 것으로 판명되었습니다. 내가 그들의 요청에 기초한 것은 그들이 신속하게 [일] [월] [년]을 입력 할 수있는 3 개의 텍스트 상자를 갖는 것입니다.

둘 다 넣고 서로 업데이트하십시오. 사용자가 날짜 선택기에서 날짜를 선택하면 텍스트 필드에서 사소한 실수를 수정하거나 날짜 선택기의 텍스트 필드에 입력 한 선택을 시각화하기 쉽습니다.

세 가지를 모두 테스트하고 가장 잘 수행되는 것을 선택하는 것이 어떻습니까? Google 웹 사이트 최적화 도구에 적합한 후보 인 것 같습니다. 가 테스트 .

보유한 사용자 유형 또는 실행중인 사이트 유형에 따라 솔루션이 "표준"과 달라야 할 수 있습니다.

나는 일반적으로 올바른 형식으로 텍스트 필드를 채우는 datepicker를 모두 사용합니다. 고급 사용자는 텍스트 필드를 직접 편집 할 수 있으며 마우스를 사용하는 사용자는 날짜 선택기를 사용하여 선택할 수 있습니다.

공간이 걱정된다면 보통 옆에 작은 달력 아이콘이있는 텍스트 필드 만 있습니다. 달력 아이콘을 클릭하면 날짜 선택기가 팝업으로 나타납니다.

또한 올바른 형식 (예 : "DD / MM / YYYY")을 나타내는 텍스트로 텍스트 필드를 미리 채우는 것이 좋습니다. 사용자가 텍스트 필드에 초점을 맞추면 텍스트가 사라지고 직접 입력 할 수 있습니다.

아마도 이곳의 노인 중 한 명으로 월말에 태어 났기 때문에 생년월일 드롭 다운 메뉴가 답답하다는 것을 알게되었습니다. 일반적으로 두 개의 드롭 다운 메뉴에서 아래로 스크롤해야하는데 이는 어색합니다. 차라리 입력하고 싶습니다.

드롭 다운 메뉴를 허용하거나 입력 할 수 있도록 컨트롤을 설계하고 두 가지 작업을 모두 명확하게 할 수 있다면 그것은 훌륭 할 것입니다.

datepicker를 사용할지 여부는 날짜가 얼마나 오래 전인지에 따라 다릅니다. 일반적으로 이번 달에 있고 거의 몇 개월이 지나지 않았고 Javascript가 주변에 있다는 것을 알고 있다면 datepicker가 좋습니다. 날짜가 최근이 아닌 경우 (예 : 생년월일) 이것이 최선의 선택이라고 생각합니다.

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

이것은 연도가 드롭 다운이 아니라 텍스트 상자라는 점에서 Patrick McElhaney의 대답과 다릅니다 . 수백 개의 요소가있는 드롭 다운 상자에서 숫자를 선택하는 것은 사용자에게 매우 성가신 일입니다.

날짜 선택기는 생년월일을 입력하기 위해 이동을 더 복잡하게 만드는 것 같습니다.

이미 언급했듯이, 날짜 및 월별 드롭 목록과 연도의 텍스트 상자를 조합하는 것이 사용자에게 가장 효율적으로 보입니다. 이 방법으로 생년월일을 입력하는 데 10 초도 걸리지 않습니다. 이는 날짜 선택기보다 훨씬 빠릅니다. 탭 키 (모든 사용자가 양식을 작성하는 방법을 배워야 함) 덕분에 한 양식에서 빠르게 이동할 수 있습니다. 다음 요소에.

적어도 매킨토시 (Windows에 대해 잘 모릅니다)에서는 키보드를 사용하여 선택 상자 내부의 날짜에 액세스 할 수도 있습니다. 탭 키 덕분에 양식 요소에 초점을 맞춘 다음 화살표 키를 눌러 드롭 다운 할 수 있습니다. 목록에 1967을 입력하면 눈 깜짝 할 사이에 도착합니다.

국제 사이트에는 datepicker (및 대체 형식으로 문서화 된 입력 상자)를 선호합니다.

날짜 형식은 다양하며 지금 익숙한 경우 읽기 어려운 경우가 있습니다. 너무 나쁜 사람들은 ISO 8601에 익숙하지 않습니다. :-(

각 필드에 대해 드롭 다운 메뉴를 사용하여 각각 일, 월 및 연도로 레이블을 지정하는 것이 좋습니다. 날짜 선택 도구도 도움이 될 수 있지만 사용자가 JavaScript를 활성화하지 않은 경우 작동하지 않습니다.

DatePicker를 사용합니다. 전문 사용자가 수동으로 입력 할 수 있고 초보자가 날짜를 매우 쉽게 입력하도록 안내하는 유일한 구성 요소입니다.

탭을 눌러 입력하고 버튼을 클릭하면 캘린더가 팝업되지 않습니다. 따라서 전문 사용자는 그것을 짜증나게하지 않습니다.

누가 jQuery UI DatePicker를 사용하지 않습니까?

거의 모든 요구에 맞게 구성 할 수 있습니다. 유일한 단점은 jQuery UI에 포함하는 경우 다소 큰 공간을 차지한다는 것입니다.

최신 정보

일부 파일 크기가 변경된 것으로 보이므로 아래에서 업데이트됩니다. 이 번호는 마지막으로 업데이트 된 시간에만 정확합니다. 그 이후로 상황이 변경되었을 수 있습니다.

• CSS 테마-23kb
• jQuery UI-71KB 축소
• DatePicker-38kb
• 추가로 몇 개의 이미지 (다음 달 / 이전 달, 확실히 튀어 나온 것임)

하지만 그렇게 나쁘지는 않습니다 ...

JQueryUI datetime picker는 프로 사용자가 텍스트 상자에 자신의 값을 입력하거나 선택기에서 선택할 수 있으므로 최상의 옵션입니다.

생일이나 미래 날짜를 쉽게 입력 할 수 있도록 선택기를 설정하는 것도 매우 쉽습니다.

$ ( '# 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 플러그인을 사용할 수 있습니다 . 다른 datepicker처럼 보입니다. 하지만 연월 제목을 클릭 한 후 선택에서 연도와 월을 선택할 수 있습니다.

생년월일 선택을위한 3 개의 드롭 다운을 만들었고 연도와 월 선택에 따라 일수가 동적으로 변경되었습니다. http://jsfiddle.net/ravitejagunda/FH4VB/10/

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