web-dev-qa-db-ja.com

ユーザーが日付範囲を選択するためのより良い方法

私のアプリケーションでは、ユーザーは結果が必要な日付範囲を選択します。 UIは次のようになります。

Existing UI

日付ピッカーは特定の日付を選択する必要があるため、私のユーザーはこれを好みません。これは必要以上に正確です。システムによってコンパイルされた結果のほとんどは、月次または四半期ごとの結果です。いくつかは毎年のみです。

私が思いついた2つのアイデアは次のとおりです。

alt text

左側では、コンボボックスを使用して有効な日付から選択します。このアプローチの問題は、結果が毎日になることがあり、有効な日付範囲が1860年代に戻ることです。合計すると、コンボボックスで処理するにはアイテムが多すぎます。

右側では、3つのコモボックスを使用して日付を選択しています。これにはいくつかの利点があります。結果が月次になる場合は、日コンボを無効にすることができます。結果が四半期ごとになる場合は、月のコンボで使用できるアイテムを制限することもできます。ただし、このデザインでは、使用するためにクリックのヒープ全体が必要であるようです。

ユーザーが「便利な」日付をより簡単に選択できるようにするUXの代替設計とは何ですか?

私の技術スタックはC#、WinForms、.NET 3.5です。

10月1日更新

  • ユーザーが選択した日付範囲は通常、数年から数十年と長く、長期間にわたってまばらな結果を取り戻します。
  • 識別されている唯一の一般的なデフォルトは、 "できるだけ早く"開始日と "まで今日」を終了日とします。

今日までの回答にはたくさんの良いアイデアがあります-すべてに感謝します。

10月2日更新

  • 以下の回答の一部(および私は多くの読者を想定しています)は、レポート生成に日付範囲が必要であると想定しています。実際、アプリケーションのこの特定の部分は、クエリエンジンに近いものです。この詳細が新しいアイデアに影響を与えた場合は、答えてください。
46
Bevan

一般的にユーザーは、検証が不必要に煩雑でなく、サブフィールドに適切な自動修正とデフォルトを提供している限り(例えば、2-9-04を2004年2月9日も同様)。カレンダーコントロールは、ユーザーが日付がわからない場合(たとえば、ユーザーが「来週の水曜日」と考えている場合)にオプションとして提供するのに最適ですが、日付を入力する唯一の方法ではありません。サブフィールドごとに個別のドロップダウンを使用すると、ユーザーの速度が低下します。

クエリログにアクセスできる場合は、ログを調べて、ユーザーが使用している日付の種類をよりよく理解してください。 1860年までの任意の日付をサポートする必要があるかもしれませんが、少数の日付または日付パターンに対してのみ設計を最適化する必要があるかもしれません。

いくつかの可能性があります:

  • デフォルト。おそらく、ほとんどのクエリは、ユーザーがいるページからのみ予測可能です(たとえば、ページ/ウィンドウに応じて、先月、前四半期、または昨年)。各ページのFrom-To範囲をデフォルトでこれらの値に設定すると、ユーザーは何も入力する必要がなくなります。

  • 一般的な日付範囲のリスト。いくつかの日付範囲がクエリの大部分を構成している場合(たとえば、昨年の各月)、リストボックスまたはラジオボタンリストにリストします。最後の1つは「カスタム」で、ユーザーが特定の日付を入力するためのカレンダーコントロール付きのテキストボックスがいくつかあります。

  • 一般的な入力のドロップダウン。 FromとToの値の予測可能なリストが比較的小さい場合は、ユーザー入力の日付を受け入れるが、最も多いFromとToの一般的な日付のドロップダウンリスト(たとえば、 Fromフィールドの昨年)。

  • 単一のテキストボックス。ほとんどの日付範囲が月、四半期、年である場合、日付範囲を入力する2つの方法を提供します。デフォルトには、「月、四半期、または年」というラベルの付いた単一のテキストボックスがあります。 「9月」(デフォルトは最新の9月)、「6/09」、「3Q06」、「1933」などの入力を受け入れます。ユーザーが書いた資料を調べて、どのような文字列が予想されるかを確認します。デフォルト以外の方法では、任意の日付に対して個別のFrom-Toテキストボックスが提供されます。

  • マイクロ文法。日付の入力について不満を持っているのが主にエキスパートユーザーである場合は、[開始]および[終了]テキストボックスのマイクロ文法をサポートすることを検討してください。ユーザーは正確な日付またはその他のさまざまな構文ショートカット(「Last Quarter」や「LQ」など)を入力できます。開始ボックスの「」は、最後に完了した四半期のすべてと解釈されます)。 テキストボックスのマイクロ文法を使用してデータを効率的に収集する を参照してください

41

選択するための最新のレポートスナップポイントを備えたタイムラインスライダーを検討してみませんか?

1860年に遡るレポートがある場合、どれくらいの頻度で戻る必要がありますか?

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

そのような何かが彼らにそれを視覚的に選択させるかもしれませんか?リストの上にバブルが表示されているので、自分が持っているものを簡単に確認できます。ボタンを移動するためにボタン/タブが先に/後に停止します。スライダーはキーボードでアクセスできます。

23
Dominic Hopton

2つのカレンダーを使用して、選択できない日をぼかします。特定の有効な日付のみを制限することで、ユーザーにカレンダーの利点を提供します(1か月全体を一度に表示でき、時間をスキップして前後に簡単に移動でき、好きな日付を選択できる)。ユーザーが淡色表示の日付をクリックした場合、その日付が無効である理由についてフィードバックを提供するか、凡例を使用します。

Hipmunk.com は、これを簡略化するのに非常に役立ちます。常に2つのカレンダーが表示されており、今日より前の日付はグレー表示されています(この場合、理由を明確にする必要はないので、理由を指定する必要はありませんが、必要な場合があります)。日付をクリックすると開始日が選択され、もう一度クリックすると終了日が選択されます。必要に応じて入力できるように、日付フィールドがどのように配置されているかに注意してください。フィールドをクリックすると強調表示され、選択する日付を示します。これは型にはまらないものであり、まだ「考えさせない」ものではありませんが、豊富なウィジェットを追加することなく、これらのコントロールをエレガントに組み合わせるための優れた方法です。見てみな:

Hipmunk's homepage

HipmunkがIMOでまだ実行できることの1つは、出発から帰着までの日数を、視覚的な詳細として強調することです。現在、あなたの目はまだ2つの日付の間のスペースを「ああ、そうです、この日付からその日付までの各行が私が離れている場所です」と解析する必要があります。

(ボーナスすごい:帰国日より後に出発日を指定してみてください)

6
Rahul

これは実際に私が仕事で使用するWebベースのソフトウェアからのものですが、このアイデアはWinFormsにかなり簡単に翻訳できます。

このコントロールを使用して、さまざまな日付範囲のレポートを常に生成します。テキストボックスはマスクされておらず、日付に変換できる値を許容しているため、さまざまな日付範囲を問題なく自由にテキスト化できます。フィールドからタブで移動すると、日付は「適切な」日付形式にフォーマットされます。日付がわからない場合は、テキストが赤くなり、横に小さなエラー記号が表示されます(1109などのあいまいな日付を入力した場合など)。

特定のことを行う必要がある場合は、テキストボックスの右側にあるカレンダーボタンをクリックしてカレンダーを表示できます(たとえば、2009年3月の第3週のレポートを表示する必要がある場合、日付を知る必要はありません)私の頭の上から)。

日付範囲を入力するのにほんの1秒しかかからないので、このスタイルを好みます-010109 tab 030109 tab 次に、次の詳細セットに進みます。

alt text

上部の空のコントロール。中間のフリーテキストの日付。下、日付形式、カレンダーコントロール

3番目のオプションについては、そのスタイルを使用するソフトウェアを使用する必要があります。特に、マウスを使用する必要があるため、これは嫌いです。指摘したいのは、表示されている日付はページを読み込んだときのデフォルトの日付であるため、デフォルトでは、将来よりも大きく現在よりも少ないアイテムを検索することです。 A [〜#〜] huge [〜#〜]これの欠点は、年がドロップダウンにハードコード化されていることです。2010年2月まで追加を待つ必要があったため、何でも検索できるようになりました最近。

alt text

特定のクエリで四半期ごとの結果しか得られないことが事前にわかっている場合は、レイアウトをいくつか変更して、次のような選択と年の選択を行うことができます。

alt text

また、まだ生成されていない今年度の四半期を無効にすることもできます。

6
Jared Harley

すべての答えを読んだわけではありません。おそらく誰かが、ほとんどのユーザーがほとんどの時間を必要とするコントロールから始めて、次第に追加のコントロールを開示することをすでに提案しているでしょう。たとえば、リンクをクリックして、日と月、重複しないいくつかの日付範囲などのコントロールを表示します。

alt text

またはこれ:

alt text

4
JeromeR

これが私の解決策です。

First、 Second

2
Alexandr

bootstrap-daterangepicker jqueryプラグインで使用されているデザインが大好きです。

基本的に、これにはデフォルトの範囲と、デフォルトのfrom-から、選択した範囲を強調表示する日付ピッカーを持つフィールドがあります。 I like it

1
JCM

スクロール可能な日付範囲フィールド:ロシア語のコメント付きの.Png画像としての5つの対話ステップ!

daterange + 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

最初のピッカーで日時を設定すると、2番目のピッカーは自動的に+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

2つの考え:

  • レポートの種類ごとに異なる日付ピッカーを提示できますか(たとえば、一部は年次であると言った場合、その場合、必要なのは年のみで、単純なテキストフィールドにすることができます)。

  • 開始日/終了日は、ユーザーがレポートについて考える方法ですか?いくつかのプロジェクトで、2つの日付ではなく、日付と期間の観点からレポートを考えたい人に取り組んできました。したがって、四半期ごとのレポートでは、1980年の第3四半期から4年間が必要になる可能性があります。

0
adrianh