複数の入力フィールドでの誤った入力をどのように処理しますか？
ユーザーは、データベースで確認できる「シリアル」を入力する必要があります。ユーザーは1からn個の「シリアル」を入力できます。シリアルは良いものと悪いものがあります。
次のような場合、私は行います：
- ケース1：良好なシリアルでプロセスを実行し、不良シリアルのみを許可します。
- ケース2：無効なプロセスを入力しない。
- ケース3：テキストボックスをクリアし、すべてのプロセスを完了します。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ユーザーは残りのプロセスをすぐに観察して、それが機能するかどうかを知ることができます。しかし、失敗したシリアルをリストで見つけるのは、短いものでも難しい場合があります。彼らは同じように見えることができるので。ユーザーは1から10のシリアルを続けて入力します。平均数は4です。
テキストボックスはページ上のHTML <input>要素としてレンダリングされるため、テキストボックスでは色を使用できません。
入力はキーストロークで検証できますが、300万行のlikeのチェックは同等のテストよりも時間がかかるため、時間がかかります。
入力はディスプレイの20％を占めます。したがって、その80％はエラーメッセージに対して無料です。
あなたの技術スタックが何であるかはわかりませんが、Returnキーを押すとすぐにタグのような錠剤に変わるという入力を使用できます。
これは ブートストラップの例 でこれを付随するコードで示しています（入力が左にわずかにシフトしていることに気づくので、これは少しバグがありますが、これは開始点です）。
Pro
ユーザーは数値文字列を視覚的に分離した単位に読みにくくすることができます
個別のアイテムを削除する機能
ユーザーは、キーボードからボタンを押すことなく入力できます。
Con
- ユーザーは、システムがそれらをカテゴリーと個々のアイテムの「タグ」として入力していると誤って考えるかもしれません
re：ユーザーはすぐにフィードバックを受け取ります
前述のようにすぐにフィードバックが表示される領域（モックには表示されない）がある場合は、それを右に配置して、シリアル番号が正しくないことをユーザーがすばやく視覚的に確認できるようにすると、すばやく調整できます。あなたのモックにはそれが見当たらないので、UIの制約を明確に把握できていません。
制限を考慮に入れる：わかりやすいhtml input（色なし、トークンなし）以下を提案します。
- ユーザーはEdgeケースで入力の値全体を見ることができないため、フィールドサイズを20％から大きな値に増やします。
- デリミタが検出されたときに「オンタイプ」の検証が受け入れられる場合は、検証を実行してエラーメッセージ「 'incorrect_value' is invalid」を表示します。値を修正した場合は、必ずメッセージを削除してください。
- さらにJavaScriptマジックを実行できる場合は、 setSelectionRange を使用して、誤った値を強調表示します。
いずれの場合でも、ユーザー入力の誤った部分を自動的に削除しないでください。ユーザーはそれに気付かないためです。ユーザーの入力は、システムの観点からは正しくなくても神聖です。
プレーンHTML入力を克服できる場合は、次のようにします。
- 行のEdgeケースの10個の値について、入力フィールドを複数行
textareaで置き換えることを検討してください。 - 入力をトークン化できるより複雑なコントロールを使用します。この場合、タスクは非常に簡単です。この場合、タスクははるかに簡単です（正しい実装を見つけることができると仮定します）。メールクライアントにアクセスして、誤ったアドレスがどのように処理されるかを確認してください。
![enter image description here]()
