ユーザーエクスペリエンスの向上：エラーを強調表示するか、間違ったキーストロークをブロックしますか？
テキストボックスに入力する情報があります。データは構造化されており、一部のシーケンスのみが有効です。たとえば、電話番号の場合、Aなどの文字は無効です。
キーボードイベントをインターセプトして、入力した文字がテキストボックスに届かないようにする必要がありますか。それとも、ユーザーに文字が受け入れられないことを知らせるために、赤い波線（または別の視覚的な合図）を描画する必要がありますか？どちらがより良いユーザー体験ですか？
ユーザーが自分のコンピュータを制御することを無効にすると、常に中断され、そのユーザーのワークフローへの侵入と見なされることがよくあります。ウェブサイトは私たちのコンピュータを「制御するべきではない」ので、そのような制御を実行することは少なくとも少し憂慮すべきことです。
とはいえ、フィールドセット全体に入力して送信する前に、エントリが無効であることをユーザーに通知することが重要であることから、非常に重要なトピックに触れます。
私が最も煩わしくないアプローチであるが、最も迅速な応答を提供するアプローチは、以下のフローです。
基本的に、最初のフィールドが入力されるのを待ってから、新しいフィールド（または無効化されたフィールド）をクリックまたはタブで移動しながら、入力したばかりのフィールドを確認します。入力したばかりのフィールドが有効な場合は、その横に目立たない「良い」アイコンを印刷します（緑、チェックマーク、幸せそうな顔、アイデアがわかります）。検証ルールに失敗した場合は、「悪い」アイコン（赤、「X」など）と失敗したことについての短い行を個別に印刷します。
ただし、ワークフローを中断しないでください。
- ポップアップなし
- オーバーレイなし
移動先のフィールドが終了したら、無効なフィールドに戻るか、先に進んで後で戻ります。いずれにせよ、彼らは編集する必要があることがわかりますが、自分の時間にそれを行うことができます。
最終的に、提出前に完全に有効なフォームが作成されます。つまり、
- 彼らは一度だけ提出する必要があります
- 提出が「失敗」したときに、怒ったりイライラしたりする時間を費やさない
- 彼らはあなたのサイトをもっと好きになるでしょう
- みんなケーキ
フォームの使用の両端にいるため、私が好むいくつかのガイドラインを以下に示します。
- ユーザー入力を防ぐことはほとんど不可能です。電話番号フィールドに「A」の文字を入力すると、「A」が表示されることになります。
- 私はテキストフィールドの検証を
onBlur()イベントで開始しますが、それより早くはありません。これにより、エラーメッセージを表示する前に、誤って入力した「A」を修正する機会がユーザーに与えられます。ユーザーが入力フィールドにいる間にエラーを修正できるようにすると、「ちょっと、めちゃくちゃ、めちゃくちゃ」種類のメッセージが表示される可能性が1つ少なくなります。
入力中に無効な文字を防ぐと、キーボードが誤動作していると思われる可能性があります。ユーザーは、期待どおりに機能することを好みます。キーを押したときに特定の文字が表示されないようにする場合は、少なくとも入力の近くに同時にエラーメッセージを表示する必要があります。これにより、なぜタイピングではないのかがわかります。
迷惑になる可能性があるもう1つのことは、長いフォームの入力が完了し、サイトがサーバー側の検証を使用しているため、フォームに戻って問題点を見つける必要がある場合です。私は主にクライアント側の検証を使用するのが好きですが、サーバー側にフォールバックします。入力中または入力がフォーカスを失ったときにエラーを表示します。これにより、ユーザーは問題があることをすぐに認識し、問題が何であるかを正確に知ることができます。
ユーザーが間違いを犯さないようにすることは、当初思っていたよりも常に10倍難しいことがわかりました。例：誰かの電話番号にx2333のような内線番号が付いている場合があります。私は jQuery定型入力プラグイン をクレジットカードに使用しましたが、うまくいきました。可能な限りAuto-suggestを使用します。
複雑なシステムでは、インラインで検出するのにコストがかかる状況が発生し、事後にそれらを通知する必要があります。私には、答えはケースバイケースであり、すべてのEdgeケースをカバーするようにしてください。
私は両方のアプローチのハイブリッドをお勧めしますが、電話番号のような厳密に検証されたフィールド（SSN、郵便番号など... 必須が定義により数値であるものすべて）に対してのみです。
各キーストロークを追跡し、ユーザーが無効な文字を入力したときにそれを表示します...しかし、何かが間違っていることをすぐに知らせます。入力フィールドを赤にして、フィールドの右側に「数字のみを入力してください」と表示する場合があります。
入力のブロックは、ユーザーが誤って解釈する可能性があるため、禁止されています。彼らは、数値入力ボックスに文字を入力することを想定していないのではなく、自分のマシンまたは入力デバイスに問題があると想定するかもしれません。
入力が完了した後の検証は煩わしい場合があります。特に、パスワードの作成に使用されるようなフィールドを使用します。一部のサイトでは、英数字のみの6文字のパスワードが必要です。 9文字のパスワードが必要で、任意の文字（！@＃$％などを含む）を許可するものもあります。パスワードを入力して後にのみ検索（= /// =）私が入力したのは、私が見つけた中で最も煩わしいフォームタイプであり、実際にいくつかのサービスを拒否しました。
ユーザーがデータを入力するときに動的なフィードバックを提供すると、ユーザーが役立ちます
- まだフィールドにいるときにエラーが発生したフィールドを知る
- データを送信する前に入力エラーを予防的に修正する
- 彼らが行くにつれて経験から学ぶ
3つのアカウントすべてで入力のブロックが失敗します。テキストボックスの入力後に検証エラーを強調表示すると、3つとも失敗します。
場合によります。可能な場合は、自動提案を使用してください。ユーザーの入力を傍受する場合は、即時のフィードバックが重要です。可能な解決策の1つは、キーが傍受された直後にポップアップする「キューボックス」です。 Windowsのログイン画面で確認できます。たとえば、$記号を押すとポップアップ表示されます。
ほとんどのものと同じように..コンテキストに依存します。私はそのトピックについてより専門的な見解を持っています。私または私のグループが取り組んでいるアプリケーションのほとんどは、本質的に技術的であり、適度に訓練された人によってのみ使用されます。そのため、一般の人々よりも、ユーザーの手に多くの責任と自由を与えることができます。簡単に言うと、私たちが使用するガイドラインのいくつか...
- 無効なエントリは無視してください...無効なキーストロークをブロックします。
- コントラストと色*で、すべてが不可能であるはずの状態である無効なフィールドを示します。
- フォーカスは常にユーザーの制御下にあります。ユーザーを閉じ込めたり、フォーカスの変更を妨げたりしないでください。
- モーダル警告/エラーボックスをスローしないでください。ずっと。
- ユーザーに質問しないでください。ソフトウェアは人ではなくツールです。はい私は確信しています。
- Enter/Returnキーは常に意味します：変更を受け入れて次に進みます。 Enterのデフォルトとしてキャンセル/終了ボタンにフォーカスを使用してこれを変更しないでください。
- エスケープキーは常に意味します。破棄して終了します。
- 可能な限りオートコンプリートを提供します。
- 最小/最大制限がある数値のショートカットエントリを提供します。例えば有効な値が0.12から100.387の間の場合、999のように100.387より大きいエントリは100.387として扱われます。
- ユーザーが理解できる動作に関するルールを明確に設定します。これが過度に複雑になった場合は、考え直してください。
ほとんどすべての例はユーザーが要求したものであり、そうです...実装は本当のクマ/悪夢/キラーですが、ほとんど不可能です。
警告：繰り返しますが、これらの例は、テクニカルユーザーベースの垂直システムのコンテキストで与えられています.... Webの一般公開フォームなどではありません。あなたのマイレージはさまざまです。
※赤を除く。私たちのビジネスの赤は、次のことを意味しています。