必須フィールドに破線の下線
私の会社のWebアプリケーションの大規模なユーザー登録フォームに取り組んでいます。登録にはフィールドが必要であることをユーザーに警告するさまざまな方法を検討してきました。現時点では、必須フィールドのラベルに下の破線のボーダーを使用することを提案しています。
テキストを太字にしたり、ラベルの後にアスタリスク（*）を追加したりしましたが、全体が乱雑になっていることがわかりました。サイトで下線が引かれているリンクと区別するために、破線にすることにしました。フォームが堅固であり、堅固な外観を維持することが重要であり、そのためにはさまざまなラベルの規則性が重要です。
破線のラベルが必須フィールドであることをユーザーに説明する説明文があります。
私の質問はこれに要約されます：これはユーザーエクスペリエンスの観点からは大丈夫ですか？上記の規則性と読みやすさの要件を考慮して、これを解決するための他の推奨される方法はありますか？
編集：修正されたアプローチ
全体を読みやすくするために、ラベルの左側にアスタリスクを付けました。
編集：改訂版の改訂版
アスタリスクをどこに配置するかについてのたくさんの良いコメントの後、私は最終的にそれを右側に配置することを決めました。見栄えが良くなり、適切に調整されたカラムを維持するには、しばらく時間がかかりました。
必須のフォームフィールドを強調する方法として標準*を使用するのが好きではないことはわかっていますが、決定を再検討することを強くお勧めします。理由は、*（ラベルまたはフィールドの前）がいくつかになったためですフォームフィールドが必須であり、新しいデザインを考え出すことに関する事実上の標準は、その必須かどうかについて人々を混乱させるだけかもしれません。
もう1つの方法は、フィールドが必須であることを明示的に言及することですが、フォームはすでにかなり大きいと言ったので、反復するテキストを追加しているだけです。
最後に、下線は通常 タイトルとリンク（Jon Wによるこの優れた質問を参照） に使用され、ラベルフィールドに下線を付けると、リンクであるかどうかについて混乱が生じ、人々がクリックしたり、それらの上にカーソルを合わせる
送信前にWebフォームの必須フィールドを強調表示する最良の方法は何ですか？ -ここでいくつかの良い考え
これ スマッシングマガジンに関する記事 は、別のオプションを提案し、それが何を言わなければならないかを引用します。
必須フィールドマーカーは、次の2つの場所のいずれかに配置できます。
- ラベルの横で、ユーザーがフォームをすばやくスキャンできるようにし、
- 入力フィールドの横または内部;
フィールドが同じ幅の場合、ユーザーはフォームをすばやくスキャンできます。
必要なフィールドを決定するときは、フォーム内のフィールドの総数を考慮してください。フォームが複雑で、そのフィールドのほとんどが必須である場合、ユーザーはフォームを不要な混乱として見る可能性があります。
別のアプローチ
ここに私が興味深いと思った記事があります- 常にオプションのフォームフィールドを必須ではないものとしてマークしてください
点線の下線は通常、<abbr>これは、省略形ではない完全なテキストがツールチップとして表示される略語を示します。
点線の下線付きのテキストにカーソルを合わせると「必須フィールド」またはそれ以上のフィールド情報の完全な内訳を提供するためのツールチップがある場合は、「住所を入力してください（必須）」というツールチップがあれば、ルートが機能する可能性があります。
このタグの詳細については W3の例 を参照してください。
あなたが標準から脱却しようとしているのなら、あなたはそれらを絵に保つためにできるだけ多くの手がかりをユーザーに提供する必要があります。
私はこのアプローチに非常に注意します。標準的で確立されたアプローチは*を使用しています。ほとんどのユーザーはこのパターンに精通しており、それを理解するために精神的な労力を必要としないか、最小限に抑えます。逆に、他の非従来的なスタイルでは説明を探す必要があります（=不必要な精神的な努力）
慣習は曲げることができますが、それらを曲げるための本当に良い正当化がなければなりません。言い換えれば、慣習を破る価値があるために、非従来型のアプローチは本当に優れたソリューションを提供する必要があります。
考慮すべきアクセシビリティの問題があります。スクリーンリーダーは「アスタリスク」または「スター」を読み上げることができますが、下線付きの点線で問題が発生する可能性が高くなります。これは、「この情報を入力する必要があります」という適切なaltテキストが付いた星のimageを使用する理由の1つかもしれません。
アスタリスクを使用した編集されたアプローチは、はるかに優れています。いくつかの利点がある限り、私は別のことをすることに問題はありません。下線は視覚的に非常に煩わしいので、私は下線に問題があります。テキストとの関連性が高すぎるため、読みづらくなっています（オランダ語[？]はとにかく読めるわけではありません）。
アスタリスクの利点は、視覚的に切り離されているため、「必須フィールド」と「このフィールドタイトル」が見やすくなることです。
クライアントに新しいアプローチを実装するたびに、クライアントを混乱させる可能性があり、実装した内容を理解するためにより多くの精神的な努力が必要になります。破線は、障害のあるユーザーには受け入れられません。ただし、特定の状況ではアスタリスクが適しています。フォームのほとんどのフィールドが必須の場合、アスタリスクがフォームを乱雑にします。下の写真を見てください：
散らかっているように見える理由の1つは、アスタリスクが並んでいないことと、それが必須かどうかをスキャンするためにユーザーがより多くの時間を必要とすることです。アスタリスクをフォームの右側に配置することで、フォームを拡張できます（LTR言語の場合）。出力は次のようになります。
見た目も雑然としているので、私たちもそれは良くありません。ほとんどのフォームフィールドが必須であるというこの特定の状況では、必須ではないフィールドについて言及することをお勧めします。あなたの状況に最適なアプローチは、次の図のようになります。
Ebayの例：
ほとんどのフォームフィールドがオプションの場合は、必要なフィールドについて説明することをお勧めします。
点線はツールチップがあり、そこに説明が書かれているような印象を与えます。
ラベルの横にあるアイコンまたは記号（[*]または[req]アイコンなど）と、入力コントロールの異なる背景（たとえば、白ではなく黄色）を組み合わせて使用します。
あなたの投稿を読みながら構築した小さな視覚化：
効果を想像してみてください
Create a backout effect on the entire webpage, leaving just the form as enabled.
Either change the background color of the form fields which are required, or
put a blinking effect behind, enough that it should not impact the ux wrongly.
その後、フィードバックを共有してください！ ;）
フォームフィールドのほとんどのフィールドは必須です。したがって、「すべてのフィールドは必須です」を共通の場所（@トップの場合もあります）のどこにでも指定できます。
次に、他の人に「オプション」と言うことができます。
注：デザインでは、下線は常にマウスをホバーしているときにヘルプテキストが表示されるように見えます（または）。