it-swarm-korea.com

사용자가 날짜 범위를 선택하는 더 좋은 방법

내 응용 프로그램에서 사용자는 결과가 필요한 날짜 범위를 선택합니다. UI는 다음과 같습니다.

Existing UI

날짜 선택 도구에서 특정 날짜를 선택해야하므로 내 사용자는 이것을 좋아하지 않습니다. 이것은 필요한 것보다 훨씬 정확합니다. 시스템에 의해 컴파일 된 대부분의 결과는 월별 또는 분기별로 결과를 갖습니다. 일부는 연간입니다.

내가 생각해 낸 두 가지 아이디어는 다음과 같습니다.

alt text

왼쪽에서 콤보 박스를 사용하여 유효한 날짜 중에서 선택하십시오. 이 방법의 문제점은 때때로 결과가 매일 나타나고 유효한 날짜 범위가 1860 년대로 돌아 간다는 것입니다. 콤보 박스에서 처리하기에는 너무 많은 항목이 추가됩니다.

오른쪽에는 트리오 콤보 상자를 사용하여 날짜를 선택하십시오. 이것은 몇 가지 장점이 있습니다. 결과가 월간이면 하루 콤보를 비활성화 할 수 있습니다. 결과가 분기별로 나올 경우 월 콤보에서 사용 가능한 항목을 제한 할 수도 있습니다. 그러나이 디자인을 사용하려면 전체 클릭 수가 필요합니다.

UX의 대안 디자인은 사용자가 "유용한"날짜를 더 쉽게 선택할 수있게 해주는 것입니다

내 기술 스택은 C #, WinForms, .NET 3.5입니다.

10 월 1 일 업데이트

  • 사용자가 선택한 날짜 범위는 일반적으로 수년에서 수십 년으로 오랜 기간 동안 희박한 결과를 가져옵니다.
  • 식별 된 유일한 공통 기본값은 시작 날짜에 "가능한 한 빨리"이고 완료 날짜로 "오늘까지"입니다.

지금까지 답변에 대한 많은 좋은 아이디어-모두 덕분에.

10 월 2 일 업데이트

  • 아래의 답변 중 일부 (및 많은 독자가 생각합니다)는 보고서 생성을 위해 날짜 범위가 필요하다고 가정합니다. 사실, 내 응용 프로그램 의이 특정 부분은 더 많은 쿼리 엔진입니다. 이 세부 사항이 새로운 아이디어에 영감을 주면 대답하십시오.
46
Bevan

일반적으로 유효성 검사가 불필요하게 까다 롭지 않고 하위 필드에 대해 적절한 자동 수정 및 기본값을 제공하는 한 사용자는 텍스트 상자에 날짜를 문자열로 입력하는 것이 매우 정확하고 빠릅니다 (예 : 뿐만 아니라 2004 년 2 월 9 일). 캘린더 컨트롤은 사용자가 날짜를 확실하지 않은 경우 (예 : 사용자가 "다음 주 수요일"이라고 생각하는 경우) 옵션으로 제공하는 것이 좋지만 날짜를 입력 할 수있는 유일한 방법은 아닙니다. 각 서브 필드에 대해 별도의 드롭 다운으로 인해 사용자가 느려집니다.

쿼리 로그에 액세스 할 수 있으면 사용자가 어떤 종류의 날짜를 사용하는지 더 잘 이해할 수 있도록 연구하십시오. 1860 년까지 임의의 날짜를 지원해야 할 수도 있지만 적은 수의 날짜 또는 날짜 패턴에 맞게 디자인을 최적화하기 만하면됩니다.

몇 가지 가능성이 있습니다.

  • 기본값. 아마도 대부분의 검색어는 사용자가있는 페이지에서만 예측할 수 있습니다 (예 : 페이지/창에 따라 지난 달 또는 지난 분기 또는 지난해). 각 페이지에 대해 From-To 범위를이 값으로 기본 설정하면 사용자가 입력 할 필요가 없습니다.

  • 일반적인 기간의 목록입니다. 몇 개의 날짜 범위가 많은 양의 쿼리를 구성하는 경우 (예 : 작년의 매달) 목록 상자 또는 라디오 버튼 목록에 나열하십시오. 마지막 날짜는“사용자 정의”로 특정 날짜의 사용자 입력을위한 달력 컨트롤이있는 몇 개의 텍스트 상자를 활성화합니다.

  • 공통 입력에 대한 드롭 다운 시작 및 끝 값의 비교적 작은 예측 가능한 목록이있는 경우 시작 및 끝 콤보 상자에서 각 사용자가 입력 한 날짜를 허용하지만 시작 및 끝 공통 날짜의 드롭 다운 목록 (예 : 각 분기의 시작) 보낸 사람 필드의 작년).

  • 단일 텍스트 상자. 대부분의 날짜 범위가 전체 월, 분기 및 연도 인 경우 날짜 범위를 입력하는 두 가지 방법을 제공하십시오. 기본적으로 "월, 분기 또는 연도"라는 단일 텍스트 상자가 있습니다. "Sep"(기본값은 가장 최근 9 월), "6/09", "3Q06"및 "1933"과 같은 입력을 허용합니다. 사용자가 작성한 자료를 연구하여 어떤 종류의 문자열을 예상해야하는지 확인하십시오. 기본이 아닌 방법은 임의의 날짜에 대해 별도의 From-To 텍스트 상자를 제공합니다.

  • 마이크로 문법. 날짜 입력에 대해 불평하는 것이 대부분의 전문 사용자 인 경우, 정확한 날짜 또는 다른 다양한 구문 바로 가기 (예 : "Last Quarter"또는 "LQ)를 입력 할 수있는 From 및 To 텍스트 상자에 대해 마이크로 문법을 지원하는 것을 고려하십시오. 시작 상자의 ""는 가장 최근에 완료된 분기의 모든 것으로 해석됩니다.) 텍스트 상자 마이크로 문법으로 효율적으로 데이터 수집 참조

41
Michael Zuschlag

가장 최근의 보고서 스냅 포인트를 선택하여 타임 라인 슬라이더를 고려해보십시오.

1860 년까지의 보고서가있는 경우 얼마나 자주 되돌아 가야합니까?

                   | Report XYZ, Jan 12, 1983 |       
<--- Earlier                   \/                         Later --->
|------------------------------||----------------------------------|
     ^      ^ ^  ^            ^    ^   ^    ^   ^ ^ ^ ^ ^

그와 같은 것이 시각적으로 그것을 선택할 수 있습니까? 목록 위에 거품이 있으면 그들이 가지고있는 것을 쉽게 볼 수 있어야합니다. 이전/나중에 버튼/탭이 연도 이동을 중지합니다. 슬라이더는 키보드에 액세스 할 수 있습니다.

23
Dominic Hopton

달력 두 개를 사용하고 선택할 수없는 요일을 흐리게 처리합니다. 특정 유효 날짜 만 사용하여 사용자에게 캘린더 (한 번에 한 달 전체를 볼 수 있고, 시간을 앞뒤로 쉽게 건너 뛸 수 있으며 원하는 날짜를 선택할 수 있음)의 이점을 제공합니다. 사용자가 흐리게 표시된 날짜를 클릭하면 해당 날짜가 유효하지 않은 이유에 대한 피드백을 제공하거나 범례를 사용하십시오.

Hipmunk.com 이것을 단순화시키는 훌륭한 일을합니다. 그들은 항상 두 개의 달력을 볼 수 있으며 오늘 이전의 날짜는 회색으로 표시됩니다 (이 경우 이유를 지정할 필요가 없지만 이유를 지정할 필요는 없습니다). 날짜를 클릭하면 시작 날짜가 선택되고 다시 클릭하면 종료 날짜가 선택됩니다. 날짜 필드가 어떻게 배치되어 있는지 확인하고 원하는 경우 입력 할 수 있으며 클릭 할 때 필드가 강조 표시되어 선택하려는 날짜를 나타냅니다. 그것은 틀에 얽매이지 않고 아직 "생각하지 않습니다"는 아니지만 풍부한 위젯을 추가하지 않고도 이러한 컨트롤을 우아하게 결합 할 수있는 좋은 방법입니다. 확인 해봐:

Hipmunk's homepage

Hipmunk이 여전히 IMO를 할 수있는 한 가지는 시각적 인 세부 사항으로 출발과 귀국 사이의 날짜를 강조하는 것입니다. 지금도 당신의 눈은 여전히 ​​두 날짜 사이의 공간을 "오,이 날짜부터 그 날짜까지의 각 행은 내가있는 곳에 있습니다"로 해석해야합니다.

(Bonus awesome : 반환 날짜 이후에 출발 날짜를 지정하십시오)

6
Rahul

이것은 실제로 직장에서 사용하는 웹 기반 소프트웨어에서 가져온 것이지만 아이디어는 WinForms로 상당히 쉽게 번역 될 수 있습니다.

이 컨트롤을 사용하여 다양한 기간의 보고서를 항상 생성합니다. 텍스트 상자는 마스킹되지 않았으며 날짜로 변환 할 수있는 값을 용서하므로 문제없이 다른 날짜 범위를 자유롭게 텍스트로 보낼 수 있습니다. 필드를 벗어나면 날짜가 "적절한"날짜 형식으로 형식화됩니다. 날짜를 알 수 없으면 텍스트가 빨간색으로 바뀌고 옆에 약간의 오류 기호가 있습니다 (예 : 1109).

특정 작업을 수행해야하는 경우 텍스트 상자 오른쪽에있는 캘린더 버튼을 클릭하여 캘린더를 볼 수 있습니다 (예 : 2009 년 3 월 셋째 주에 보고서를 보려면 날짜를 알 필요가 없습니다) 내 머리 꼭대기에서).

날짜 범위를 채우는 데 거의 1 초가 걸리기 때문에이 스타일을 선호합니다. 단지 010109 tab 030109 tab 다음 세부 사항으로 넘어갑니다.

alt text

빈 컨트롤. 자유 텍스트 문자의 중간 날짜. 하단, 날짜 형식 및 달력 제어

세 번째 옵션은 해당 스타일을 사용하는 소프트웨어를 사용해야하며 특히 마우스를 사용해야하기 때문에 싫어합니다. 또한 표시된 날짜는 페이지를로드 할 때의 기본 날짜이므로 기본적으로 미래보다 크지 만 현재는 아닌 항목을 검색하고 싶습니다. HUGE 단점은 드롭 다운에 몇 년이 하드 코드되어 있다는 것입니다. 2010 년 2 월까지 추가 될 때까지 기다려야했습니다. 충적세.

alt text

특정 쿼리에 분기 별 결과 만 있음을 미리 알고 있다면 레이아웃을 일부 변경하고 다음과 같이 선택하고 연도를 선택할 수 있습니다.

alt text

그리고 아직 생성되지 않은 현재 연도의 분기를 비활성화 할 수 있습니다.

6
Jared Harley

나는 모든 답을 읽지 못했습니다. 아마도 대부분의 사용자가 대부분의 시간을 필요로하는 컨트롤부터 시작하여 추가 컨트롤을 점진적으로 공개 할 것을 제안했을 것입니다. 예를 들어, 링크를 클릭하면 날짜와 월, 겹치지 않는 여러 날짜 범위 등의 컨트롤이 표시됩니다.

alt text

아니면 이거:

alt text

4
JeromeR

여기 내 해결책이 있습니다.

FirstSecond

2
Alexandr

bootstrap-daterangepicker jquery 플러그인에 사용 된 디자인을 좋아합니다.

기본적으로 기본 범위와 선택한 범위를 강조 표시하는 날짜 선택기가있는 기본--필드가 있습니다. I like it

1
JCM

스크롤 가능한 날짜 범위 필드 : 러시아어에 대한 의견이있는 .Png 이미지로 5 개의 상호 작용 단계!

일반 기간의 날짜 범위 + 사전 설정은 1/3/6/12 개월 http://1ne.twozerotwenty.com/pics/2011/10/show_me_the_date.png

필요한 경우-영어 및 데모 페이지에서 상호 작용 및 기능 영역에 대한 완전한 지시를 할 수 있습니다.

1
denis.efremov

비슷한 문제를 해결하는 방법은 다음과 같습니다 ... 30 일/60 일/90 일을 변경하여 가장 일반적인 보고서 (연간/분기 별/월간)를 경고 할 수 있습니다. 날짜 범위 기능은 날짜 범위를 구체적으로 찾고 있지만 결과를 생성하기 위해 사용자가 날짜를 입력하도록 강요하지 않는 사용자를 위해 날짜 범위 기능이 포함 된 도구 설명을 엽니 다. enter image description here

0
Ashlie

Google 캘린더 앱 (MIUI)에서 구현되는 방식이 마음에 듭니다. 날짜-시간 선택을위한 2 개의 스피너가 있습니다. 그 모양입니다 :

enter image description here

첫 번째 피커에서 날짜-시간을 설정하면 두 번째 피커는 +1 시간으로 자동 설정됩니다.

0
naXa

jquery UI 날짜 범위 선택기를 사용하는 방법은 무엇입니까?

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

일부 기본값을 미리 채울 수 있으며 설정하여 월별 <> 화살표 대신 연도 및 월을 드롭 다운 할 수 있습니다.

0
Patricia

일반적인 캘린더 선택 도구를 표시 할 수 있지만 사용자가 제목 표시 줄에서 월을 선택한 경우 자동으로 시작 및 종료 날짜가 월의 시작 및 종료 날짜로 채워집니다. 올해도 마찬가지입니다.

사용자가 약간 다른 범위를 원하면 종료 날짜를 무시할 수 있습니다.

그래도 분기를 어떻게 보여줄지 모르겠습니다.

0
ChrisF

두 가지 생각 :

  • 다양한 보고서 유형에 대해 다른 날짜 선택기를 제시 할 수 있습니까 (예 : 일부는 연간이라고 말한 경우에는 연도 이상 필요하지 않은 간단한 텍스트 필드 일 수 있습니다).

  • 시작/종료 날짜는 사용자가보고에 대해 생각하는 방식입니까? 여러 프로젝트에서 나는 보고서가 두 날짜가 아닌 날짜와 기간으로 생각하기를 원하는 사람들을 위해 일했습니다. 따라서 분기 별보고를 위해 그들은 1980 년 3 분기에 4 년을 시작하기를 원할 것입니다.

0
adrianh