Webサイトに日付を入力するために、カレンダーに代わるものはありますか？
日付の入力は、インターネット上での変更と、Web /ユーザーインターフェイスの設計でも行われます。現在、<input type="date">を実装しています。これにより、モバイルデバイスで優れた使いやすさが実現します。
デスクトップブラウザでは、<input type="date">はほとんどの場合、クリック可能なカレンダーとして実装され、入力フィールドの矢印をクリックするとポップアップ表示されます。
ただし、これにはいくつかの欠点があります。
<input type="date">フィールドは、ブラウザー、特に古いバージョンのInternet Explorerでは広くサポートされていません。これを修正するために、私はそれらのケースで伝統的なJavaScriptの日付ピッカーを使用しています。これにより、維持費と維持費が余分にかかります。<input type="date">をサポートするブラウザーでも、多くのWebサイトではまだ使用されていないため、ユーザーはブラウザーが使用する特定のデザインにまだ慣れていません（モバイルブラウザーは例外です）。<input type="date">の日付形式はせいぜい欠けています。- カレンダーをクリックして日付を入力するのは非常に遅いです。
私の意見では、実行可能な代替案は次のとおりです。
- 境界と検証のオプションを提供します。
- 日付のフォーマットに依存しません。
- 格好良い;
- 非常に理解しやすい;
Webサイトに日付を入力するための代替案カレンダーへはありますか？
（画像は Joe Larsonのブログからのもの ）
人々が日付についてどのように考えているかを自問し、その解決策をモデル化することをお勧めします。個人的には、日付ピッカーを備えたテキスト入力フィールドは、それを理解していない人やそれを使用するのに問題のある人をまだ見つけていないので、素晴らしい解決策だと思います。
日付ピッカーの品質にはばらつきがありますが、それは別の問題です。
疑問がある場合は、日付ピッカーで多くのUXテストを行った人をコピーしてください。良い例は Hipmunk です。
どの種類の日付入力/ウィジェットを選択するかは、ユーザーが入力する必要がある情報に大きく依存します。ほとんどの場合、ユーザーは正確な日付を知らない可能性があるため、カレンダーを除外すると、ユーザーは自分のカレンダーを見つけて日付を検索するという追加の手順を実行せざるを得なくなり、速度が低下し、使用できなくなります。たとえば、彼らが次の土曜日の予定を設定している場合、彼らはおそらく次の土曜日の日付を知らないので、カレンダーを提供しないと、日付を個別に検索するという煩わしさと煩わしさを彼らに与えることになります。このような場合、日付をそのように広く認識できる方法で表示する他の既存の形式がないため、おそらくカレンダーが最良のオプションです。
ユーザーが日付を検索する必要がない場合の例は、誕生日を入力するように要求している場合です。これは、平均的なユーザーが頭の上から知っているものであり、日付を決定するために調べる必要はありません。ドロップダウン、スクロール、テキストフィールドなど、一般的なカレンダー形式に限定されないため、ここでもう少しクリエイティブを得ることができます。ただし、ユーザーがこの日付を入力する最も速い方法は、単純なテキストフィールドです。 。月、日、年のドロップダウンまたはその他の形式を使用することで私が見ることができる唯一の利点は、月と日の順序（MM/DD/YYYYとDD/MM/YYYY）の混乱を避けることです。
ほとんどの状況で、最善の解決策は、入力がアクティブなときに開くカレンダーウィジェットがアタッチされたテキスト入力を持つことです。これにより、ユーザーは日付を知っている場合はすばやく入力したり、必要に応じてカレンダーを使用して日付を選択したりできます。
カレンダーをクリックするのが遅い場合でも、ローカルの地理的地域で使用されている日付形式に依存しない汎用的なソリューションです。さらに、ユーザーは壁掛けカレンダーに精通しており、対応する メンタルモデル を持っています。
他の解決策（ユーザーが「3月5日」などの日付を簡単に入力できる人間が使いやすいテキスト入力など）を使用することもできますが、それらのすべてにいくつかの制限があります。すべての地理的地域と言語をサポートすることは難しい場合があります。追加の検証が必要になるか、必要になる可能性があります。そうでない場合は、ユーザーに新しい何かを紹介する必要があります（そして、ユーザーは物事の動作を理解するために時間を費やす必要があります）。
カレンダーをクリックするのが遅い場合、次の最良の解決策は通常のテキストフィールドです。通常のプレースホルダーテキスト（MM/DD/YYYY）を提供して、ユーザーが日付を入力する方法を理解できるようにし、さまざまな種類の日付をすべて処理する必要がないようにします。
これは、日付ピッカーの後のデスクトップブラウザでの最良の方法だと思います。
最近のブラウザはかなり素晴らしいです。型指定された入力を処理することは良い考えですが、それらは一貫性のあるUXを提供しておらず、おそらく探しているものです。型付き入力でのHTML5サポートはブラウザーによって調整されていますが、一部のコントロールは面倒です。それらは検証を提供せず、ユーザーに手掛かりを提供しません。また、日付ピッキングの問題に適切なソリューションを選択することは、それが使用されるプラットフォームによって異なります。それはモバイル/タッチWebサイトですか、それともデスクトップWebサイトですか？
タッチデバイスで使用されているモバイルWebサイトの場合、最善の策は、スクローラーコンポーネントまたはカレンダービューです。相互作用モデルは、回転とスワイプとタップです。使用されるUI要素には、「太った指」を回避するために十分な領域が必要です。スクローラー型の日付ピッカーとカレンダービューの違いも、コンテキストによって異なります。どちらも日付を選択できますが、月のどこにあるかを確認するのに役立ちますか？
デスクトップWebサイトの場合、カレンダーの変更、月の変更、クリックによる日付の選択などの基本機能。スワイプとスピンはここでは適用されません。
それを提示する方法、入力に結び付ける方法、または単に画面に表示する方法については、ユーザーが何を操作しているかという点ではそれほど重要ではありません。これは、スペースの量と制約の内容によって異なります。
モバイルWebサイトの Mobiscroll Calendar および Date Picker を確認してください。