日付範囲ピッカーに関連するプリセットを提示する方法
私たちは日付範囲ピッカーを開発しており、事前に設定された期間をどのように提示するか疑問です。シナリオは次のとおりです。ユーザーが事前に設定された期間を使用するかどうか。
- 次の7日間
- 次の3か月
- 最近7日間
- 最近3か月
または、開始日と終了日を指定します。私の質問はこれです：
- OR機能はユーザーインターフェースで最もよく表現されていますか？
複数の設計案のうち3つは次のとおりです。
上の画像の「アルファ設定」などは、他のコントロールのコンテキストで日付範囲ピッカーを表示するためのものです。
私たちのチームでは、ラジオボタンを使用してOR関係を標準的な方法で説明しているため、代替案（C）に最も熱心です。 B）の方が簡潔ですが、代替手段（C）を使用する場合は、次のように詳細にどのように動作する必要がありますか。
- 日付プリセットを選択すると、プリセットドロップダウンの下の[開始]および[終了]フィールドが自動的に入力されますか？
- そうでない場合：どのようにしてユーザーにどのように伝えますか。 「直近3か月」とは正確な開始日という意味ですか？
- 選択されていないオプションをグレー表示してリセットする必要がありますか？
- その場合、対応するラジオボタンだけでなく入力フィールドもクリックしたときに、選択されていないフィールドがアクティブになる必要があります。ドロップダウンまたは日付フィールド？
これについてどう思いますか？あなたはどちらの選択肢を好みますか-それとももっと良い提案がありますか？ユーザーにプリセットを提示する方法の良い例はありますか？
この順序で：B（以下に詳細を説明する）、A（綴り）、C。
Cは私にとって「典型的な技術ソリューション」です。最初に期間を指定する方法を決定し、次にそのアルゴリズムに必要なデータを指定します。ただし、これは管理するための2つの追加コントロールであり、ユーザーは先のオプションを知りません。とはいえ、ユーザーが技術者/分析的思想家であり、実装が最も簡単な場合は、それを採用してください。
Bが望ましい：
最小要件：
- 「事前選択」と日付/時刻の両方のコントロールが常に使用可能です（無効にされることはありません）
- 事前選択を変更すると、範囲コントロールに表示される時間が変わります
- 範囲コントロールを変更すると、事前選択が「その他」に変更されます
ほぼ完璧：
- 手動選択をプリセットと比較し、一致しない場合にのみ「その他」を表示する
- ユーザーが手動で「その他」を選択した場合、「ここで開始日と終了日を選択してください」などのヒントを表示します
利点：
- アプリについて漠然とした考えを持つユーザーには、一連の典型的なオプションがあります
- ユーザーは自分の選択に対して即座に具体的なフィードバックを得る
- 選択を絞り込むことができます。 「次の3週間」は「4週間」に簡単に調整できます
バリエーション：
- 「その他」の代わりに、適切なテキスト表現を生成します（「次の17日」など）。
- アプリが主に通常の頻繁なユーザー（少数のカジュアル）によって使用されている場合は、Hishamが提案したようなフリーテキスト入力を検討してください：クリックして特定の日に3つのタイムスパンを入力することは問題ありません。勝ちます。
（初心者のユーザーに不利益を与えない単純な複合インターフェースは考えられませんが、幅広いユーザーを想定している場合は、いくつかの解決策を検討する必要があるかもしれません）
レイアウトノート：
- 見た目をすっきりさせるために「from」を省略しますが、トレードオフがあります。私は通常、コントロールのサイズを同じにし、「落ち着きのないフォーム」の外観を避けるために数行に並べます。
- プリセットと日付ピッカーを一緒にグループ化します（つまり、他の選択からの距離をそれらに与えます）
- "Duration"はもちろんバカなラベルです、ごめんなさい;）
（付記：直感的には、「2月17日0:00から2月23日23：59：59.9999 ..」までの7日間を想定していますが、これが普遍的かどうかはわかりません。）
7 Signals をアプリケーションで解決する方法を検討しましたか？オプションが「次の3日間」、「次の7日間」などの単一の選択フィールドと、最後のオプションが「カスタム範囲」（マイクロコピーはここでは得意ではありません、少々専門的すぎるようです）-チェック最後のオプションは日付ピッカーフィールドを表示します。
次のオプションのあるドロップダウン：
- 次の7日間
- 次の3か月
- 最近7日間
- 最近3か月
- カスタム
カスタムを選択すると、日付ピッカーが表示されます。
オプションCを使用しますが、いくつか変更があります。私が見るように、固定オプションの事前設定期間があるため、デザインはストレートジャケットです。
プリセットのポップアップメニューを、ユーザーが入力できる単純な編集フィールドに置き換えます。 「7日」または「7d」。ユーザーが短縮して、しかもインテリジェントに構文解析できるようにする必要があるため、これはもう少し作業ですが、努力する価値はあると思います。
ラジオボタンをドロップします。それはもはや「どちらか一方」の命題ではありません。
ユーザーが日付ピッカーで選択を行ったときに、編集フィールドを自動的に更新します。逆もまた同様です。ユーザーが編集フィールドに新しい値を入力すると、日付ピッカーの値が自動的に更新されます。
ラベル「期間」を「期間」に変更します。
ここにラベルをいくつか追加します（From、Toなど）。
他に何も考えられない。 :-)
同じデータを操作するために2種類の入力フィールドを用意するのは好きではありません。それは混乱を招くでしょう。範囲セレクターと両方の日付フィールドで何かを選択する必要がありますか？日付フィールドに日付を手動で設定し、好奇心から範囲セレクターをチェックアウトするとどうなりますか？最初に範囲を選択し、日付の1つを変更しても機能しますか？もう一方は範囲に合うように変更されますか？これらすべては、UIのアイデアからは明らかではありません。
多分これは純粋に表面的なものですが、範囲セレクターはフォームフィールドではなく、2つの日付フィールドのヘルパーのようなものである必要があります。そんな感じ：
そして、ユーザーが自分で日付の1つを変更したら、ヘルパーを変更して他のフィールドでのみ作業することができます。
フォームフィールドの代わりにリンクとして範囲を設定すると、少なくとも、入力されたデータのどれが最終的にカウントされるかが明確になります。
（申し訳ありませんが、評判がないため、まだ画像を含めることはできません）
期間と-から-までの日付を選択できるので、Bバージョンを使用します。期間を変更すると、開始日と終了日が更新されます。逆に、開始日と終了日を変更すると、期間が更新されます。
期間と開始日が同じなのでバージョンAは奇妙に見え、「または」の間で論理が壊れます。
バージョンCには不要なセレクターがあります。これは、期間を入力する方法を選択する必要がないため、どちらも両方を更新します。