どちらかまたは両方のフィールドのフォーム検証をどのように管理しますか
私は、ユーザーが郵便番号を入力する必要があるフォームを持っていますOR検索を実行するために都市を選択します。ユーザーが入力に失敗してフォームを送信しない場合、現在、フォームでは両方のフィールドが赤で強調表示されています。私のチームの一部のメンバーは、これがユーザーを混乱させると考えています。
私の提案では、ユーザーが1つのフィールドを選択するとすぐに、もう1つのフィールドのハイライトが消えます。フィールドはフォーム上で互いに隣接しています。これはエラー検証を処理するための最良の方法ですか、それともユーザーの混乱を避けるためのより良い方法がありますか？
フォームを再編成することで、どの情報が不可欠であるかをよりよく伝えることができます。
郵便番号と都市を1行に移動し、名前の近くに配置します。これらは重要なフィールドのようです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
また、検証エラーを説明するメッセージが役立つというBrunoHにも同意します。
検証は2つのフィールドに対するものなので、一緒にマークする必要があります。 UIが何が悪いのかを言うとき、私は好む。そのため、検証の下に「市または郵便番号を入力してください」のようなメッセージを表示することをお勧めします。このようなもの：
ハイライトは、条件が満たされたときにのみ消えます。
エラーのシナリオを説明し、別のフォームレイアウトを提案することで、提案を改善しようとします。 
- フィールドセットは、フィールドが関連している場合に適しています。この場合、姓、都市、または郵便番号の必須の性質が関係を作成します。姓は、姓フィールドに論理的に関連付けられているため、最初に最初に来ますが、フィールドセットには含まれません。
- クリアボタンが必要なユーザー事例はありますか？それとも慣習に従っていますか？両方のボタンのスタイルはまったく同じであり、互いに近すぎます。ユーザーが誤ってすべてのフォームを消去してしまう可能性があり、正しい判断を下すために各フォームを読むようにユーザーに強制しています。 「OK」ボタンの位置はオペレーティングシステムによって異なるため、MacOを使用している多くのユーザーが右側のボタンを押しているのがわかるでしょう。私はここにリンクを掲載しますが、担当者は十分ではないので、Luke WのWebフォームデザインブックを参照して、彼の研究について読んでください。絶対に両方を設定する必要がある場合は、それらをさらに離して設定し、背景色やフォントサイズなどの視覚的な違いを作成します。
- 必要なフィールド情報をフォームの上部に移動して、フォームへの入力を開始する前にユーザーに通知するようにします。アスタリスクをフィールドではなくラベルの近くに移動することを検討してください。空のフィールドフォームには必須の情報がないため、フィールドの右側にアスタリスクを配置すると、見落とされる可能性があります。読む前に、ユーザーはページをスキャンして重要な情報を探し、アスタリスクだけで視覚的な重みが低くなります。
- ユーザーへの指示なしに、郵便番号を入力フィールドのマスクで処理することができます。これはユーザーデータを変更するのではなく、ユーザーから余分な作業を取り除き、フォームへの入力を容易にします。これもエラー防止に準拠しています。
- 変更の盲目を回避するためにフォームがエラーをスローした場合、ユーザーが画面上の変更に気づくようにしてください。ユーザーが送信ボタンを押したとき、ユーザーの目の焦点はフォームフィールドではないことに注意してください。
- 開発チームと連携するために、フォームエラーフレームワークの作成を考えることができます。メッセージの配置、メッセージテキストのフォントスタイル、フィールドの強調表示、およびエラーメッセージの視覚的コミュニケーションのその他すべての側面に関して、システム全体でエラーメッセージのスタイルを統一することが重要です。これは consistency に準拠しているためユーザーにとっては適切であり、システム内のすべてのフォームフィールドに対する1つのソリューションを可能にするため、開発チームにとっては適切です。
- エラーメッセージの配置は注意が必要であり、譲歩しなければならない場合があります。ユーザーが入力したデータが消去されるため、フィールド内にエラーメッセージを入力しないでください。メッセージは、問題のフィールドにできるだけ近づける必要があります。
情報が1つしかない場合は、「市区町村または郵便番号」というフィールドが1つしかない可能性があります。ビジネスロジックで、^[A-Z]\d[A-Z]\s?\d[A-Z]\d$と一致する場合は郵便番号で検索し、都市ではない場合。必要に応じて、より良くする 郵便番号標準に一致 。
スペースと小文字も許可する必要があります。実装が非常に簡単で、顧客の生活を向上させます。 =）
これらが他の2つのフィールドである場合、私の答えは大きく異なりますが、相関関係があるため、はるかに簡単になります。
1。適切な順序
郵便番号は常に最初に尋ねられるべきであり、ユーザーは常に16文字以上の都市名の代わりにそれを記入することを選択します（はい、私はあなたについて話しているKleinfeltersville、PA！）。
2。一般的な慣習を守る
ほとんどのユーザーは、郵便番号を入力すると、Cityフィールドが自動的に適切な都市に更新されることを期待します。
。またはそれらを1つのフィールドに結合する
郵便番号/市区町村が単一の入力に結合されるのは珍しいことではありません。ほとんどの検索バーがこれをサポートしており（つまり、Googleマップ、RedFin、Zillowなど）、ユーザーが使用することに決めたものをバックエンドで解析するのは非常に簡単です。