web-dev-qa-db-ja.com

テキストフィールドの検証と防止

テキストフィールドでの無効な入力に対処するための最良のアプローチ(検証と予防)について(主に私自身と)議論してきました。

数値のテキストフィールドを例にとると、数値以外の文字の入力を禁止したり(記号、10進ptなどの特殊なケースを許可)、何でも入力したり、エラーメッセージ(通常はフォーカスが残っているとき)結果が無効な場合?

最初のアプローチは「ユーザーが間違っているとわかっていることをユーザーに許可しない」ですが、キーボードのキーが入力されて何も起こらない場合、何が起こっているのかまったく明らかでない場合があるという欠点があります。また、テキストフィールドに何かを入力した場合、入力した内容が表示されることを期待しているという期待も崩れます。

過去には、私は一般的に予防アプローチに傾倒してきましたが、一般的には、フィールド入力レベルでは、検証アプローチがより良いユーザーエクスペリエンスを提供すると感じています。誰かがここでベストプラクティスを知っていますか?

18
Bill Dagg

防止は、ユーザーが入力し、機能していないときにユーザーを苛立たせる可能性があります。もちろん、これは、特定の文字が拒否された理由を知らせる適切なメッセージで修正できます。

一部のユーザーは頭を下にして入力している場合があり、一部の文字が拒否されたときに表示されない場合があります。彼らが10文字を入力しているが、それらのキーストローク内のごく一部しか拒否されない場合、頭が下がっているので、彼らは決して知らないかもしれません。

一般に、ユーザーがエラーを確認できるようにするため、検証を優先しました。より複雑な入力を取得すると、一部の文字が拒否される理由をユーザーが理解するのが難しくなる場合があります。

20
Francis Pelland

ユーザーが間違っているとわかっていることをユーザーが実行できないようにするのはテキストボックスでのキーストロークを禁止することについては絶対にしないです。それは、その特定の入力に対して可能であれば、完全に入力する必要をなくすことです。

例えば:

  • テキストボックスの日付を検証せず、テキストエントリを削除して、日付ピッカーコントロールを使用します。
  • ユーザーが1つを選択する標準のオプションのセットがありますか?ユーザーが入力する代わりに、ドロップダウン/リストからそれらを選択できるようにします。このリストに加えて自由なテキスト入力を与える必要がある場合は、「その他」のオプションを使用して、テキスト入力のみを許可してください。

テキストボックスではない、さまざまなデータ入力コントロールが利用可能です。テキストを入力する前に、すべてのオプションを検討してください。

13
Franchesca

この問題には3つの一般的な解決策があり、特定のユースケースに応じて、2つまたは3つのバランスが最も可能性が高いです。

経験則として...早い段階で頻繁にフィードバックを提供してください


ユーザーにフィードバックを提供できます。

入力前

簡潔で伝達的なコピーを書くことは確かなステップですbefore。ツールチップ、初めてのユーザー向けのオンボーディングフロー、その他のツールも自由に利用できます。

mockup

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


入力中

コンテンツを動的にチェックするduring入力およびフィードバックの提供も同様に価値があります。あなたのケースで、キーストロークを受け入れたい場合は、すぐにユーザーに警告してください。さらに、社会保障番号やクレジットカードと同様に、ユーザーを自動的に次のフィールドに進めることができます(グループ化を支援)。メールのように「複雑な」入力が多い場合は、できるだけ早く一致のセマンティクスを確認してください。

mockup

bmmlソースをダウンロード


入力後

コンテンツの検証after通常、ユーザーが最も多くの労力を費やしているため、送信はユーザーにとって最も苛立たしいものです。問題が発生してフォームが正しく入力されなかった場合は、価値のない簡単なアクションを繰り返しています。誤って何かをしたことをユーザーに伝えることは、製品に対する感情に悪影響を及ぼします。それは、費やされた労力の量によって拡大されます。

以下の例では、フォームが正しく入力されていないという通知は、一連のアクションの最後ではなく、入力前または入力中に発生した可能性があります。

mockup

bmmlソースをダウンロード


特定のキーストロークを禁止することはお勧めしませんが、コピーとフィードバックが明確であれば、圧倒的多数のケースで頭痛の種を完全に回避できます。

9
SwankyLegg

しないでください簡単に混乱してユーザーを苛立たせる可能性があるため、(一部の)キーストロークを防止します。

Do有効な入力のタイプをユーザーに前もって知らせるための明確なラベルを提供します。

Doユーザーが無効な値を入力した場合、ユーザーにガイドするための入力時の検証フィードバックを提供します。

他の人は、日付と数値フィールドに対してキーストロークをまったく許可しないことを提案しています。これは一部の状況では適切な場合がありますが、多くの(ほとんどの場合)状況では、ユーザーがキーボードだけを使用してフォーム/インターフェースをナビゲートできる方が速い場合が多く、特に定期的に使用する場合はそうです。したがって、このルートを使用する場合は、このことを念頭に置き、提供するインターフェイスにキーボードナビゲーションを含めることをお勧めします。ただし、通常のキーボード入力を上記の提案で許可し、値を選択する追加の方法(日付ピッカー、ドロップダウンリストなど)を使用したい人のための「ショートカット」として提供することを検討するのが最も簡単な場合があります。マウス/ポインター/タッチインターフェース。

3
Squig