必須フィールドをアスタリスクでマークすることは、Webフォームデザインの一般的な規則です。 oneofapairフィールドが必要であることを示す方法はありますか?つまり、次のようなフォームです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
どちらかメールまたは電話が必要ですが、両方が必要なわけではありませんか?
私が考えることができる最高のものは、「あなたはこれらのうちの1つを入力しなければならない」と言う単純なテキストです。それが唯一の方法ですか?
ラベルに連絡先フィールドであることを説明させ、適切なタイプを1つ以上追加するようにユーザーに要求するのは適切ではないでしょうか?これにより、フォームは将来の連絡先のフォーム(SMS、またはメールアドレスなど)や、電話や電子メールの両方の倍数にも拡張できます。
この画面では、最初の2つのフィールドセットを事前に入力しています。フィールドに必須のマークが付けられている場合、「電話」を選択すると、代わりに電話の代わりにプレースホルダーのテキストが表示されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ユーザーが入力を開始した後、またはおそらく有効な電子メールアドレスまたは電話番号を入力した後、必須ではない次のタイプのフィールドのセットを自動的に追加できます。
両方のフィールドで通常の「必須」の才能を持つことから始めます。おそらく色付きの背景。おそらく色付きのアスタリスク。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
フィールドがフォーカスされたら、標準の方法を削除し、1つだけが必要であるという具体的な説明に置き換えます。私の例では、アクティブフィールドに必要なフレアを維持して、少なくとも1つはまだ必要であることをテキストで補強します。
混乱を避けるために、中括弧と説明は、それらのフィールドにフォーカスがある場合にのみ表示する必要があり、一般的な「必須」フィールドの意味を置き換えることができます。 「これらのフィールドの1つが必要です」の必要性がなくなるわけではありませんが、フォームが煩雑になるのは、一時的にだけです。
ユーザーが1つまたは両方のフィールドを終了すると、空のフィールドに入力するために戻る必要があるとユーザーが混乱しないように、現在入力されているフィールドにフレアが適用されます。
この方法でフィールドを要求する必要はなかったので、これは私によってテストされていません。独自のワークフローで使い勝手は良いと思いますが、間違いかもしれません。完全に新しいインターフェース設計を使用する前に、必ず実際のユーザーでテストしてください。
1つのセクションにグループ化されたラジオボタンを使用するのが最善だと思います。必須の記号*はボックスの外側に示され、このセクションが必須であることを示します。ラジオボタンについては、ユーザーが必須フィールドのいずれかを選択することを強制します。
メール[..............]-または-電話[.................](*必須)
これはどう?
両方を入力できる場合、フィールドはIDとして使用されますか? (このデータをログインとして使用する場合)
追加の方法が2つあります。
追加フィールド
注、検証アスタリスクが電子メールから電話にジャンプする方法。
Use as identity: (v) Email
( ) Phone
Email * : [______________]
Phone : [______________]
Use as identity: ( ) Email
(v) Phone
Email : [______________]
Phone * : [______________]
優先順位の高いオプションを最初に確認
メールと電話の両方を入力する方法がないため、良い方法ではありません
Email * [________________]
[I don't have email adress] -- link to switch form to "Phone mode"
...
リンクがクリックされた場合:
Email : [________________] --- become disabled
Phone * : [______________] [cancel] -- or something like that :)
...