web-dev-qa-db-ja.com

優れた1行の日付ピッカーを設計する方法は?

ユーザーが日付を選択する必要があるWebサイトを設計しています。これはtodayです。デフォルト。サイトのコンテンツは、選択した日付に基づいています。時間の90%で、日付は今日と(今日+ 10日)の間で選択されます。過去の日付は選択できません。

1行のリンクベースの日付ピッカーを実行したい。ここにアイデアがあります( ハーフワーキングライブデモ ):

enter image description here

それがユーザーに対して明示的であるかどうか正確にわかりませんか?質問:

  • 「火曜日26」をクリックして新しい日付を表示するにはどうすればよいですか。それは私のライブデモのようにすべきですか?

  • other dateへのリンクをどこに配置すれば、通常の長方形の日付ピッカー(カレンダーのように見える)が開き、ユーザーが別の将来の日付を選択できるようになりますか?

  • todayリンクは常に表示する必要があるので、ユーザーが日付に迷った場合、いつでもtodayに戻ることができます。


注:私は大きな長方形の日付ピッカーを常に表示したくない

これは、ユーザーがother dateを選択したときにのみ表示されます。ユーザーが使用しない時間の90%がそのためです実際には、1行の日付ピッカーが私のユースケースに適していると思います

11
Basj

シナリオの90%が今日+ 10日でカバーされている場合、次のことを心配せずに、おそらくこのようなものが機能する可能性があります。以前または現在の場所を失っています。

それはより多くのスペースをとりますが、それはまた、それほど厄介ではありません。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

今日は太字で示されています。日付範囲が現在の月と翌月をカバーできるため、月も必要です。

11
Jung Lee

選択に週末/平日の設定があるかどうかについて考え、重要性の低いセクションを強調表示するかグレー表示するか。

コンセプト1

その下に展開できる非表示のカレンダーがある単純なNext/Previousが機能するはずです。

enter image description here

コメントに従って、ここに今日を示す変更されたバージョンがあります:

enter image description here

私が見ることができる他のより効率的な方法はありません。ほとんどのデザインでは、正しい日付を取得するために2回のクリックが必要です。

コンセプト2

たとえば、この概念を効果的に水平 アコーディオン で試すことができます。日付範囲をクリックしても日付は選択されず、個々の日付をクリックできるセクションが展開されるだけです。

enter image description here

私はデザイナーではないので、純粋にこれからインスピレーションを得ました ドリブルイベントページのデザイン

enter image description here

コンセプト3

また、デザイン(3月に残りの日があるのでまったくの偶然)と同様に、次の10日間は2x5のきちんと積み重ねられた2つの列があり、残りは次の拡張可能なカレンダーであることに注意してください。

5
icc97

もっとよくわかりますが、90%の時間は日付が次の10日以内になると述べたので、ユーザーはほとんど日付を念頭に置いて、どの日付を選ぶかを考えるよりも。したがって、本質的には彼/彼女は日付がはっきりしており(すぐに近づいています)、考えているものを選択するだけです。その前提で、添付されているソリューションを確認してください。

enter image description here

1)最初は今日が選択されています。

2)次のステージは、明日が選択されることを示しています。

3)ユーザーが5月2日を念頭に置いている(10日以内)場合、ユーザーは矢印ボタン(キーボードとUIの両方)を使用して+/-日付を入力するか、または日付を入力することができます。

4)ユーザーが日付フィールドに「2」と入力すると、月フィールドは自動的に5月(翌月)に変わるはずです。 (範囲は+10日)

5)このインターフェースでは、任意の日付を入力できますが、ユーザーはカレンダー機能を使用して将来の希望の日付を選択できます。

アイデアは-ユーザーはすでに日付を考慮しているので、10日のオプションを一度にすべて提供するよりも、入力するための簡単な方法を提供する方が簡単です。混乱につながる可能性があります。

4
Amit Jain

数か月前に私は同様の設計上の懸念を持っていました。

私の実装は、あなたが望むようにフォーマットされたデフォルトの日付を表示するテキストボックスでした。ユーザーがonclickイベントを発行すると、日付ピッカーが起動します。バックエンドでjQuery datepickerを使用しました

その場合、ページが過度に大きく表示されることはありません。

参考になったかどうかをお知らせください。

1
Kstar

元のバージョンをどのように改善したかをここで共有したかったのですが、今は機能します。 ライブデモ

enter image description here

UXに関してはまだ最適ではありません。さまざまな回答や有益な発言に対するすべての貢献に感謝します。

一部の人から指摘されたように、月も追加します。 (それを行う方法のアイデアは、ハードコーディングなしのJavaScriptです['Jan', 'Feb', 'Mar' ...]?)

0
Basj

enter image description here

Windows Phoneの日付ピッカー形式も使用できます。

日付を選択するには、日付を変更するために上または下にスワイプする必要があります。

0
Abhishek Sharma