web-dev-qa-db-ja.com

なぜそれほど多くのクレジットカードフォームが選択ボックスを使用して有効期限を要求するのですか?

なぜそれほど多くのクレジットカードフォームが選択ボックスを使用して有効期限を要求するのですか?

私はWebサイト用の別のクレジットカードフォームを作成するのに忙しく、かなりのサイトが選択ボックスを使用して有効期限の値を要求することに気付きました(RyanairとAmazonは頭の2つ上にあります)。

私の知る限り、日付は常にカードに「MM/YY」の形式で表示されます。そのため、ユーザーが選択から「06」または「06-6月」(またはその逆)を選択する目的は何ですかボックスに入力するのではなく、彼らはすでに16桁(または19桁)の数字を入力しているので、別の4桁は問題ありません。

編集:

これらの多くは、ユーザー入力を制限しようとし、検証を行う必要がないことによるものだと思います。したがって、ユーザー入力を制限する jQuery Payment のようなものが与えられた場合、選択ボックスを使用することには利点がありますか?

13
Luca Spiller

あなたは、ウェブを使用するすべての人があなたと同じようにコンピュータの知識や技術の専門家であると仮定しています。しかし、UXデザイナーとして、あなたは完全に正反対の人たちにも応えるべきです(そしてそこには責任ある量があります)。

Selectはエラーを減らすことにより、入力に厳しい制約を課します。専門家は、初心者が入力フィールドを嫌うほど、このタイプの選択を気にしません。

スーパーおばあちゃんを検討してください:

A photo of a grandmother

彼女はクールに見えますが、彼女の視力は短く、3つのセルだけがワーキングメモリで機能しており、1969年以降に出現したテクノロジーと格闘しています。コンピューターのキーボードはコックピットのように見えます。彼女に戻るボタンを押すように頼むと、彼女は「私は私の背中の愛に到達することはできませんが、そこにボタンがないと確信しています。さて、私はティーカップをどこに置きましたか?」と答えます。セレクトボックスは彼女にとって安全な天国です。

Supa-grannyが入力フィールドで作成できるエラーの量を考えてみてください。

  • 年の代わりに月を入力します。
  • 有効期限の場合は過去の年を、開始日の場合は未来の年を入力します。
  • 数字の代わりに文字を入力してみてください。
  • 先行ゼロをスキップします。
  • 2013年は13の場所しかありません。
  • スラッシュを入力してみてください(キーボードでそれを見つけるのに1分間費やすことを含む)。
  • 彼女がタイピングを開始するまでに、それが前年の1か月か、それともその逆(プレースホルダがなくなったか)であるかを忘れます。

これらはいずれも選択ボックスでは発生しません。

あなたが提示するJQueryウィジェットは超かっこいいです(そして、これらのエラーのほとんどを処理します)が、私が言及する必要があると感じるいくつかの使いやすさの欠陥があります:

  • 間違った入力に対するフィードバックはありません(誰かが1月にJを押すことを試みています)。
  • これは、モバイルデバイスでは実際に正しく変換されません。定義済みのリストから選択するのではなく、数字キーボードで数字を入力する必要があります。
  • 最近の統計によると、約1.3%の人がJavaScriptを無効にしています。

ポイントは、制約によりエラーが減少することです。あなたが支払う価格は多くの場合スピードが速く、この価格を支払うのは専門家です。理想的には、入力自体は、テキスト入力(きちんと共有したウィジェットのように動作する)だけでなく、超老婆のような人々のための制約付き選択の両方をスマートに許可する必要があります。

23
Izhaki

この目的でselect要素を使用しても、デメリットは実際にはありません。 select要素は、事前に定義されたユーザー入力のリストです。正しく設計されていれば、キーボードを使用するユーザーはselectにタブで移動して入力するだけで値を選択できるため、キーから手を離す必要はありません。

日付の入力を求めるselect要素は常にMM/YYYY形式である必要があり(特に明記されていない限り)、常に番号順にする必要があります。このようにして、ユーザーが「199」と入力した場合、「19」や1991年から1999年の他の年ではなく、「1990」で終了します。これは、ユーザーのブラウザーで処理する必要があるものです。

ユーザーがフィールドが収集するデータのタイプがわからない場合があるため、select要素は一般的なinput要素よりも使用する必要があります。 「Jan」、「January」、または「1」の入力を「01」に変換するには、追加の検証を行う必要がある可能性があり、事前定義されたオプションのリストにより、この追加の要件が除外されます。

入力してselect要素内のオプションを選択できることに気づかない場合は、オプション01〜12のselect要素の これがJSFiddleの例です です。

1
James Donnelly

デザインスクールのMAYA原則では、設計者は「最も高度でありながら許容可能な」デザインソリューションを選択する必要があると述べています。上司がUIデザインの仕組みを理解していない場合、上司は最も一般的なソリューションを最良のものとして受け入れるだけです。つまり、一言で言えば「慣性」が理由です。

追伸フォームの下部にあるすべてのボタンが「回答を投稿する」や「エントリを追加する」などの代わりに「送信」と言ったとき、または他のより使いやすい言語を覚えていますか?

1
Steve Whetstone

選択要素でキーボードを使用することもできます。したがって、キーボードとサニタイズされた入力データを残さないという利点があります。

また、国際的な状況では、月/日の順序は一貫していません。 select要素は、強制された制約とネイティブのアクセシビリティ機能のバランスをとっているので、あなたはそれを見ると思います。

私の意見が有益であることを願っています。

0
Ken

ドロップダウンを使用すると、サイトはユーザーが選択できるものを正確に制御し、エラー(201303や032000の入力など)を回避できます。

他の国のユーザーがこれらのサイトを使用するときに潜在的に発生する可能性のある間違いは言うまでもありません!

そうすることで、サイトは実際にユーザーを助け、間違いを犯さないようにすることでユーザーの満足度を高めます-そのタイプのUXアプローチのデザインカテゴリ/定義はありますか?

0
1lucas