ユーザーが日付を選択する必要があるWebサイトを設計しています。これはtodayです。デフォルト。サイトのコンテンツは、選択した日付に基づいています。時間の90%で、日付は今日と(今日+ 10日)の間で選択されます。過去の日付は選択できません。
1行のリンクベースの日付ピッカーを実行したい。ここにアイデアがあります( ハーフワーキングライブデモ ):
それがユーザーに対して明示的であるかどうか正確にわかりませんか?質問:
「火曜日26」をクリックして新しい日付を表示するにはどうすればよいですか。それは私のライブデモのようにすべきですか?
other date
へのリンクをどこに配置すれば、通常の長方形の日付ピッカー(カレンダーのように見える)が開き、ユーザーが別の将来の日付を選択できるようになりますか?
today
リンクは常に表示する必要があるので、ユーザーが日付に迷った場合、いつでもtoday
に戻ることができます。
注:私は大きな長方形の日付ピッカーを常に表示したくない:
これは、ユーザーがother date
を選択したときにのみ表示されます。ユーザーが使用しない時間の90%がそのためです実際には、1行の日付ピッカーが私のユースケースに適していると思います。
シナリオの90%が今日+ 10日でカバーされている場合、次のことを心配せずに、おそらくこのようなものが機能する可能性があります。以前または現在の場所を失っています。
それはより多くのスペースをとりますが、それはまた、それほど厄介ではありません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
今日は太字で示されています。日付範囲が現在の月と翌月をカバーできるため、月も必要です。
選択に週末/平日の設定があるかどうかについて考え、重要性の低いセクションを強調表示するかグレー表示するか。
その下に展開できる非表示のカレンダーがある単純なNext/Previousが機能するはずです。
コメントに従って、ここに今日を示す変更されたバージョンがあります:
私が見ることができる他のより効率的な方法はありません。ほとんどのデザインでは、正しい日付を取得するために2回のクリックが必要です。
たとえば、この概念を効果的に水平 アコーディオン で試すことができます。日付範囲をクリックしても日付は選択されず、個々の日付をクリックできるセクションが展開されるだけです。
私はデザイナーではないので、純粋にこれからインスピレーションを得ました ドリブルイベントページのデザイン :
また、デザイン(3月に残りの日があるのでまったくの偶然)と同様に、次の10日間は2x5のきちんと積み重ねられた2つの列があり、残りは次の拡張可能なカレンダーであることに注意してください。
もっとよくわかりますが、90%の時間は日付が次の10日以内になると述べたので、ユーザーはほとんど日付を念頭に置いて、どの日付を選ぶかを考えるよりも。したがって、本質的には彼/彼女は日付がはっきりしており(すぐに近づいています)、考えているものを選択するだけです。その前提で、添付されているソリューションを確認してください。
1)最初は今日が選択されています。
2)次のステージは、明日が選択されることを示しています。
3)ユーザーが5月2日を念頭に置いている(10日以内)場合、ユーザーは矢印ボタン(キーボードとUIの両方)を使用して+/-日付を入力するか、または日付を入力することができます。
4)ユーザーが日付フィールドに「2」と入力すると、月フィールドは自動的に5月(翌月)に変わるはずです。 (範囲は+10日)
5)このインターフェースでは、任意の日付を入力できますが、ユーザーはカレンダー機能を使用して将来の希望の日付を選択できます。
アイデアは-ユーザーはすでに日付を考慮しているので、10日のオプションを一度にすべて提供するよりも、入力するための簡単な方法を提供する方が簡単です。混乱につながる可能性があります。
数か月前に私は同様の設計上の懸念を持っていました。
私の実装は、あなたが望むようにフォーマットされたデフォルトの日付を表示するテキストボックスでした。ユーザーがonclickイベントを発行すると、日付ピッカーが起動します。バックエンドでjQuery datepickerを使用しました
その場合、ページが過度に大きく表示されることはありません。
参考になったかどうかをお知らせください。
元のバージョンをどのように改善したかをここで共有したかったのですが、今は機能します。 ライブデモ 。
UXに関してはまだ最適ではありません。さまざまな回答や有益な発言に対するすべての貢献に感謝します。
一部の人から指摘されたように、月も追加します。 (それを行う方法のアイデアは、ハードコーディングなしのJavaScriptです['Jan', 'Feb', 'Mar' ...]
?)