날짜 / 시간 입력을위한 가장 사용자 친화적 인 양식 필드?

Rahul에 동의합니다. 상황에 따라 다릅니다. 캘린더 위젯은 몇 개월 뒤로 또는 앞으로 이동하는 데 매우 유용하지만 생년월일을 선택하기에는 그리 좋지 않습니다.

목표 선택에 어려움을 겪는 경향이 있기 때문에 본인의 생년월일을 선택하기 위해 날짜 풀다운을 개인적으로 싫어하지만 Kontain.com의 가입 과정에서 최근에 멋진 것을 보았습니다. 아래에서 볼 수 있듯이 옵션은 목록 대신 테이블에 옵션을 배치했으며 (일과 연도 동일하게) 놀라운 개선 사항을 발견했습니다. 예이!

사용자 친화 성은 잠재 고객과 앱 도메인의 산물입니다. 예를 들어 Kayak과 같은 서비스를 구축하는 경우 앱 사용 경험이 많은 동안 날짜 제어 기능을 많이 사용하는 합리적으로 기술에 정통한 사용자에게 초점을 맞출 것입니다. 반면에 Google과 Amazon은 더 많은 잠재 고객과 상호 작용이 적으므로 우선 순위가 다릅니다.

이를 염두에두고 몇 가지 고려할 사항이 있습니다.

• 달력 제어. 날짜를 선택하는 동안 날짜, 시간 또는 기간에 대한 추가 메타 데이터를 전달하려는 경우 매우 유용 할 수 있습니다. 예를 들어, 여행 사이트에서, 사용자는 호텔을 예약 할 날짜를 선택하고있을 수있다. 일정 관리 컨트롤을 사용하여 예약 된 날짜를 표시 할 수 있습니다. 캘린더 컨트롤은 실제 사촌 캘린더와 가장 밀접하게 비교되므로 날짜 및 시간과의 상호 작용을 정신 모델로 가져와 사용자에게 호의를 베풀고 있습니다. 그러나 달력 컨트롤이 어색한 사용 사례가 있습니다. 컨트롤은 한 번에 한 달에 표시되는 것을 중심으로 모델링되었으므로 몇 개월 사이에 (흔히) 화살표 또는 드롭 다운으로 건너 뛰는 것을 제어합니다. 사용자에게 날짜 선택에 더 많은 자유를 주려고하면 제한적일 수 있습니다.

• 드롭 다운 메뉴. 종종 [Day] [Month] [Year]의 세 개가 연속으로 표시됩니다. 이는 사용자가 생년월일과 같이 이미 알고있는 날짜를 선택하는 경우에 효과적입니다. 대부분의 사용자가 마우스를 사용하므로 각 드롭 다운을 한 번 클릭하여 열고, 각 항목을 한 번 클릭하여 선택해야하므로 날짜와 관련된 작업을 반복하도록 요청하는 경우에는 제대로 작동하지 않습니다. 긴 목록을 위아래로 스크롤 할 수 있습니다 (생년월일의 경우 연도 메뉴가 1920에서 시작하여 2009에서 끝나는 경우는 드물지 않습니다). 드롭 다운 메뉴를 선택할 경우이 점을 고려해야합니다.

• 일반 텍스트 입력 필드. 다른 사람들이 대답했듯이 입력 필드에 대한 좋은 점은 거의 모든 것을 받아 들일 수 있다는 것입니다. 이러한 경우 양식 디자인의 원칙을 기억하십시오. 최종 사용자에게 데이터베이스/백엔드 형식을 강요하지 마십시오. 가능한 많은 형식을 받아 들일 때 최대한 관대하게 노력하십시오. 클라이언트 측 유효성 검증을 사용하여 양식을 제출하기 전에 사용자에게 문제점을 지적하십시오 (사용자가 새 Date () 함수에 입력 한 문자열을 제공하고 날짜가 있는지 확인하여 Javascript에서 날짜를 검증하는 것이 매우 쉽습니다).

통제를 초월하여 날짜를 다룰 때는 상식적인 원칙을 고려하십시오.

• 사용자가 실수하지 않았는지 확인하십시오. 10 대를위한 사이트를 디자인하고 누군가 1934 년에 태어 났다고 말한 경우, 이것이 옵션이되어야하는지, 필요한 경우, 실제로 76 세인지 다시 확인해야하는지 고려하십시오. 그러나 사용자에게 서비스로. 마찬가지로 여행 사이트를 디자인하는 경우 사용자가 실제로 10 월이 아닌 2011 년 10 월에 하와이로 휴가를 예약하려고하는지 확인하는 것이 좋습니다.

• 대부분의 경우 특정 시간 선택이 필요하지 않으며 아마도 사용자의 정신 모델에 매핑되지 않을 수도 있습니다. 이벤트를 계획 할 때 필요한 최대 세분성은 5 분 간격입니다. 사용자가 매분 60 옵션 대신 12:00, 12:05, 12:10 등을 선택할 수있는 제어 기능을 제공하십시오. 결정한 세분성은 사용하기로 선택한 특정 컨트롤 (예 : 드롭 다운 메뉴)의 유용성에 큰 영향을 줄 수 있습니다.

• 항상 표준 제어를 넘어 옵션 그래픽 영역을 살펴보십시오. 일반적으로 이들은 구현하기가 복잡하고 비용이 많이 들지만 날짜/시간 선택이 핵심 기능인 경우 가치가 있습니다. 예를 들어, hipmunk.com은 대화 형 일정 인 경우 더 나은 비행 일정 (입력이 아닌 읽기)을 시각적으로 환상적으로 표현합니다. 이 경우 청중의 기대를 고려하십시오.

가능하면 데이터 입력을 자유롭게 유지하십시오

프로그래머는 게으르다! 컴퓨터가 약간 작동하도록하고 초기 날짜 입력을위한 특정 날짜 필드가없는 것도 고려하십시오. 새 캘린더를 만들 때 Google 캘린더를 사용하면 다음과 같이 말할 수 있습니다.

• 7 월 4 일 : Joe의 장소에서 저녁 식사

그런 다음 GC는 사용자를 위해 모든 정보를 파악하고 (사용자의 위치에 따라 4/7 : Joe의 장소에서의 저녁 식사가 무엇인지) 지능적입니다. 후속 편집을 위해 GC 캘린더 컨트롤은 훌륭하고 사용하기 쉽습니다. 다음과 사용자에게 이것이 얼마나 쉬운 지 고려하십시오.

1. 다음 목
2. 4 시간 안에
3. 2 주 후

그리고 ... 충격 공포 사용자가 모르는 경우 어떻게됩니까? 나는 이것을 많이 보지 못했지만 왜 이것이 어떤 상황에서 허용되는 날짜 입력이 아닌가?

• 약 3 일 후

나는 이것이 무서운 것을 안다 :) Tog On Software Design , Bruce Tognazzini (원래 저자 Apple Human Interface Guidelines))는 사용자 경험 구현이 마술과 같다고 설명합니다. 비결 : '환상': 쉬워 보이지만 그 밑에는 모든 종류의 광기가 진행되고 있습니다.

나는 '이봐, 지금 당신은 일을하고 싶었습니다.'

또한 poss만큼 컨텍스트를 사용하십시오.

• 조의 생일 전에

... 연락처 나 소셜 그래프가 있으면 쉽게 알아볼 수 있습니다. 그렇지 않다면 물어보십시오.

한 달 이상 고려

날짜 범위가있는 경우 월 경계는 한 달만 표시되는 일정보기에는 매우 번거 롭습니다. Mac에서 iCal은 몇 달을 표시 할 수 있으므로 '지금부터 2 주에서 3 주 사이'의 정확한 날짜를 쉽게 확인할 수 있기 때문에 깔끔합니다.

나는 보통 일반 텍스트 상자를 사용하고 Jquery UI Datepicker를 추가합니다.

사용자가 탭 또는 클릭으로 텍스트 상자에 초점을 맞추거나 달력 컨트롤이 그 아래에 일시적으로 팝업되지 않는 경우-텍스트 입력을 방해하지 않고 :

그런 다음 사용자는 구문 분석 가능한 형식으로 날짜를 입력하거나 캘린더 팝업과 함께 마우스를 사용할 수 있습니다. 마우스로 날짜를 선택하면 사용자가 사이트에서 선호하는 형식으로 텍스트 상자에 날짜를 입력하고 팝업을 닫습니다.

시간 입력을 위해 내가 잊어 버린 사람이 비슷한 것을 발견했지만 (12 또는 24) 시간이 표 위젯에 팝업되고 시간을 선택한 다음 0, 15, 30 및 45와 같은 몇 가지 선택 분 옵션이 나타납니다. 이전에는 시간 만 입력하면 정상적으로 작동합니다, 팝업은 무시합니다.

또한 일정 컨트롤을 한 번에 한 달 이상 표시하도록 조정할 수 있으며 일반적으로 날짜의 상황에 따라 서로 2-3 개월 표시됩니다. 필자의 경우 날짜 입력은 일반적으로 현재 분기를 중심으로 이루어집니다. 누군가가 이미 지적한 것처럼 생년월일 항목이 제대로 작동하지 않습니다 ^^

여러 드롭 다운 또는 위젯에 대한 일반적인 대안은 표준 형식 도움말 텍스트입니다. 때로는 텍스트 필드 안에 기본값으로 표시되고 때로는 오른쪽/아래에 표시됩니다. 기본 텍스트는 "MM/DD/YYYY"또는 "dd-mm-yyyy"와 같습니다. 다음은 Google 가입 양식의 예입니다.

이를 통해 사용자는 입력 대상을 완전히 제어 할 수 있으며 하나의 텍스트 필드 만 사용합니다. 이 접근 방식의 한 가지 단점은 올바른 날짜 규칙을 준수했는지 확인하기 위해 추가 클라이언트 측 유효성 검사가 필요하다는 것입니다.

첫 번째 질문은 응용 프로그램에있는 날짜 입력 필드 수와 사용 빈도입니다.

가입 할 때 생년월일을 입력해야한다면 그게 우선 일 것입니다.

그러나 날짜가 많으면 아직 아무도 이야기하지 않은 것을 고려해야 할 몇 가지 사항이 있습니다.

1. 사용자가 선호하는 날짜 형식을 관리해야합니다 (미국이 아닌 경우 날짜를 DD/MM/YYYY 형식으로 원합니다. 시작 날짜가 월인 미국 날짜는 읽기가 어렵습니다. 유형).

2. 또한 날짜 필드 주위의 다른 컨트롤을 고려하십시오. 사용자가 마우스와 상호 작용할 수 있도록 만들어진 페이지 인 경우 텍스트 필드가있는 경우 마우스 만 사용할 수있는 날짜 선택기가 있어야합니다. 날짜를 기준으로 사용자가 "타이핑 모드"에있을 가능성이 높으며 마우스를 필요로하는 상호 작용 (예 : 여러 드롭 다운)을 강요하는 것은 성 가실 수 있습니다.

마지막으로, 사용자는 내 사용자가 아니며, 테스트하고, 사용자 절반에게 텍스트 필드와 그래픽 달력 컨트롤 절반을 제공하고, 각 양식을 완성하는 사용자 수와 각 그룹이 평균적으로 양식을 완성하는 데 걸리는 시간을 측정해야합니다. .

여기에 집착하는 것이 중요하다면 테스트하기에 충분히 중요합니다.

내 두 센트 : 나는 장님이고 가장 좋은 것은 3 콤보 상자라고 생각합니다! 대안은 달과 일에 대한 2 개의 콤보 상자와 연도에 대한 입력 텍스트 일 ​​수 있지만이 필드에 대한 제어를 수행해야합니다 ... 프로그래머로 생각해야한다면 단일 입력 텍스트를 선호했지만 사이트에서 생각하는 경우 "noob user"일 수 있습니다. 가장 좋은 방법은 첫 번째 옵션이라고 생각합니다. :)

속도와 사용 편의성은 단순한 숫자 입력을 능가합니다. 2010-09-21. 단일 텍스트 상자를 사용하지만 (공통 "/"및 "-"과는 별도로) 탭을 사용하여 한 필드에서 다음 필드로 이동할 수도 있습니다. 하나. "[tab]"을 누르면 구분 기호를 삽입해야합니다. 구분자로 필드를보다 명확하게 구분하기 때문에 대시를 선호합니다.

사람들이 선행 0을 입력하도록 강요하지 마십시오.

Bevan이 입력하는 데 시간이 더 걸리기 때문에 Bevan이 제안한 것처럼 약식 개월과 같은 텍스트 항목을 사용하지 않습니다. 또한 어떻게 약어를 사용합니까? 세 글자? 네? Bevan에 대한 답변에서 내가 말했듯이 국제 청중과 함께 일하는 경우 특히 나쁜 생각입니다. 사용자의 언어에서 "9 월"이 "9 월"이 아닐 수 있습니다.

해외 청중에 대해 이야기하기 : 모든 사람이 MM-DD-YYYY 명령을 사용하는 것은 아닙니다 (사실, 미국 이외의 지역에서는 거의 없습니다). 텍스트 상자 아래에 필요한 순서를 표시 할 수 있습니다. 5-06-201와 같은 날짜의 모호성을 피하는 한 가지 방법은 ISO 8601 형식 YYYY-MM-DD를 사용하는 것입니다.

사용자가 사용할 수있는 형식에 대한 힌트와 함께 날짜를 입력 할 수있는 텍스트 입력을 제공 한 후 구분 기호 나 자릿수에 관계없이 모호하지 않은 형식을 허용하십시오. 사용자가 표준 형식 이외의 것을 입력하면 즉시 표준 형식으로 업데이트하여 사용자가 날짜를 명확하게 해석하는 방식을 명확하게 볼 수 있도록합니다. 달력에서 선택하는 옵션을 원하는 사용자에게 달력 아이콘을 추가하는 것도 좋습니다. 날짜를 입력하려는 사용자는 달력을 사용할 필요가 없습니다.

방금 이것에 대한 연구를하고있었습니다. 캘린더 앱은 시작하기에 좋은 곳입니다. 내가 가장 좋아하는 레이아웃은 오른쪽에 시간이있는 날짜입니다. Google 캘린더 Date-Time-Time-Date 형식이 마음에 들지 않지만 datepicker 및 드롭 다운은 매우 명확하게 실행됩니다.

(이미지를 게시 할 수 없지만 확인하시기 바랍니다.)