web-dev-qa-db-ja.com

モバイルWebで、生年月日フォームフィールドを表示する最良の方法は何ですか?

ユーザーがDOBに入力する必要があるモバイルWeb用のフォームを作成しています。

日付入力フィールドを提示する最良の方法は何ですか?

以下のオプションの一部は この質問 とその回答で確認されました(オリバーとそれに回答した人に感謝します)。モバイルWebに別の回答があるかどうか興味があります。

  1. 単一のテキストフィールド-例付きの単一のシンプルなフリーテキストフィールド(デスクトップでは一般的に推奨されるアプローチのようです)

  2. 3つの別々のテキストフィールド-ユーザーは、3つの別々のフリーテキストフィールドに日、月、年を入力できます。別のフィールドを使用すると、画面ではなくデータを入力するときにキーボードを見るユーザーにいくつかの小さな問題が発生する可能性があるため、すべてのフィールドに入力する傾向があり、検索すると、日フィールドのみが入力されていることに気付きます。

  3. Dropdown-ユーザーは一連のドロップダウンメニューから日、月、年を選択できます。したがって、ドロップダウン1は1〜31のリストで、ドロップダウン2は1月から12月までです。最終的なドロップダウンの年数は非常に長いですが、これは簡単に見えます-1920年から2012年(?)

  4. ネイティブの日付入力-ネイティブのような複合メニューコントロールを表示するために使用します(半分ほど下の例を参照 このモバイルフォームデザインのスマッシング記事) または この質問への回答(特にDOBについてではない) )-ただし、これはさまざまなモバイルブラウザで広くサポートされているとは思いません。

  5. 組み合わせ-日と月のドロップダウン(正確さを確保するため)および年のフリーテキストフィールド(より高速なデータ入力のため)。

  6. Date Picker-DOBのひどいオプションですが、日付ピッカーにカレンダーアイコンを表示して、ユーザーが月と年をスクロールして日付を選択できるようにすることもできます誕生。

私の場合、それはCRMのためのものなので、100%の精度よりも、速度と入力のしやすさが重要です。

単純な単一のテキストフィールドが、ほとんどの人にとって最速の入力方法であることを知っています。ドロップダウンの選択はモバイルでのテキスト入力よりも簡単なため、モバイルの最適なアプローチが異なるかどうかに興味があります。

誰かがモバイルWeb上の生年月日エントリの上記のオプションのいずれかをテストしましたか?

ボーナス質問:タブレットとデスクトップでも動作する必要がある場合、何をお勧めしますか?

20
Dan

イギリスのサイト GOV.UKはいくつかの初期テスト結果を公開しました モバイルデバイスのユーザーがテスト対象のDOBフィールドをどのように使用するかについて。

最初のレポートでは、2つのドロップダウン(1つは日用、もう1つは月用)に続いて1年分のテキストフィールドが表示されたことがユーザーに好評であったが、これに限定されない(強調鉱山)。

enter image description here

...これははるかによくテストされ、人々はこの質問をより速く完了することができました。また、1年の長いドロップダウンに対処する必要がないことを嬉しく驚いた人々からの率直なコメントもありました。

ただし、さまざまなユーザーを対象にテストを行ったところ、コンピュータインターフェイスの経験が少ないユーザーには問題が見つかりました。

一部のユーザーはドロップダウンをクリックしてから入力しようとします。これは機能しますが、テキスト入力フィールドと同じようには機能しないため、混乱を招きます。たとえば、1と入力してから一時停止して2と入力すると、リストではテキスト入力フィールドのように12ではなく2を選択します。バックスペースキーが機能しません。

一部のユーザーは、短いドロップダウンでも操作に問題がありました。日と月の両方でスクロールが必要ですが、スクロールに関する一般的な問題が発生する可能性があることがわかりました。それが可能かどうか、およびその方法を知っていることです。ここで苦労している人々は、彼らが探している価値はリストにないとよく言っています。

最初の2つのドロップダウンを見つけたら、年フィールドをクリックすると混乱し、ドロップダウンが表示されません

これらの問題を抱えている人々は少数派でしたが、私たちがすべての人に役立つ何かを見つけることができるかどうかを確認するために別のアプローチを試す価値があると感じました。

彼らのフォローアップテストはプレーンテキストフィールドを使用することでした:

enter image description here

これまでのところ、これはうまくテストされており、主な問題は、一部の人々が立ち止まり、先行ゼロを含めるかどうか疑問に思うことです(たとえば、'01 ')。
...
スマートフォンやタブレットなどのタッチスクリーンデバイスでは、「type =” number”」属性を使用して数字キーボードを表示できます。これにより、予想される入力が明確になり(Wordではなく数値)、数値をすばやく簡単に入力できるようになります。

個人的には、最近、プレーンテキストフィールドオプションを選択しました。デフォルトで数値キーパッドを開くようにフィールドを設定する機能は、「ここに「2月」と入力しますか?」の問題を無効にし、日付(myアプリケーションは多目的電卓用であるため、使い捨てではありません。つまり、誰かがこのアプリを繰り返し使用すると、ドロップダウンが煩わしいものになる可能性があります。

'私の場合、それはCRMのためのものなので、100%の精度よりもスピードと入力の容易さが重要です'。

3つの別々のフィールドがあるということは、人々が1または01をフィールドに入力し、両方を同じものとして扱うため、 "2桁または1桁入力する"の問題もある程度否定されます。

19
JonW

mockup

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

数字キーパッドとペアになっている単一のフィールド(ガイダンス付き)が誕生日を入力する最も速い方法だと思います。ユーザーがアイテムを手動で入力するための完全な制御を与えるだけで、ユーザーがスクロールまたはタップする必要がある時間を短縮できます。彼らは、例えば、正確な数字をタップするなど、ドロップダウンで使用するタップを費やします。

5
rubysoho

正確さよりも速度が速い場合は、単一のテキストフィールドまたは3つの個別のテキストフィールドのどちらかが最適に機能すると思います。

単一のテキストフィールドには利点があります。ユーザーとして3つの異なる入力フィールドを見つめ、入力をタブで移動することを心配する必要はないためですが、考慮すべき点は、ラベルが配置される場所です。 @rubysohoの例では、プレースホルダーを使用することで、ユーザーはどの数字がどこに行くのかを覚えておく必要があり、ユーザーにテキストの配置を思い出させることは決して良い形ではありません。また、単一のフィールドを使用する場合は、各文字の組み合わせが入力された後に「/」が追加されるようにします。

3つの入力フィールドがあることの利点は、ほとんどのユーザーにとって非常に標準的であることです。彼らは、日付または電話番号を入力するときに、常に3つの入力フィールドがあることを期待しています。つまり、速度が犠牲になることはありません。入力フィールドのタブ移動は、必要な文字を入力した後でフォーカスを変更することで解決できます。

1
Jason Frade

テキストフィールドにさまざまなフォームを使用するのは、通常、データを検証するためです。ただし、これらのIMHOはすべて、プログラムで適切に処理される回避策です。アプリに地域差があるという前提で、日付フィールドをテキストにすることができず、適切に解析するためにいくつかのロジックを適用する必要はありません。

  • 1972年6月8日
  • 72年6月8日
  • 06/08/72
  • 6-8-1972

等.

ほとんどの場合、クライアントまたはサーバー側のコードがそれらを解析できなかった理由はありません。

それを超えて、特にモバイルでは、理想的にはネイティブの日付フィールドオプションを使用します。これを使用できない場合、それは使いやすさの問題だと思います。ユーザーがデータを入力する方が簡単なモードです。

1
DA01