web-dev-qa-db-ja.com

2つのWebフォーム入力の1つが必要であることを示すための規則?

必須フィールドをアスタリスクでマークすることは、Webフォームデザインの一般的な規則です。 oneofapairフィールドが必要であることを示す方法はありますか?つまり、次のようなフォームです。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

どちらかメールまたは電話が必要ですが、両方が必要なわけではありませんか?

私が考えることができる最高のものは、「あなたはこれらのうちの1つを入力しなければならない」と言う単純なテキストです。それが唯一の方法ですか?

6
jlarson

ラベルに連絡先フィールドであることを説明させ、適切なタイプを1つ以上追加するようにユーザーに要求するのは適切ではないでしょうか?これにより、フォームは将来の連絡先のフォーム(SMS、またはメールアドレスなど)や、電話や電子メールの両方の倍数にも拡張できます。

この画面では、最初の2つのフィールドセットを事前に入力しています。フィールドに必須のマークが付けられている場合、「電話」を選択すると、代わりに電話の代わりにプレースホルダーのテキストが表示されます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

ユーザーが入力を開始した後、またはおそらく有効な電子メールアドレスまたは電話番号を入力した後、必須ではない次のタイプのフィールドのセットを自動的に追加できます。

mockup

bmmlソースをダウンロード

12
Kevin Peno

両方のフィールドで通常の「必須」の才能を持つことから始めます。おそらく色付きの背景。おそらく色付きのアスタリスク。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

フィールドがフォーカスされたら、標準の方法を削除し、1つだけが必要であるという具体的な説明に置き換えます。私の例では、アクティブフィールドに必要なフレアを維持して、少なくとも1つはまだ必要であることをテキストで補強します。

mockup

bmmlソースをダウンロード

混乱を避けるために、中括弧と説明は、それらのフィールドにフォーカスがある場合にのみ表示する必要があり、一般的な「必須」フィールドの意味を置き換えることができます。 「これらのフィールドの1つが必要です」の必要性がなくなるわけではありませんが、フォームが煩雑になるのは、一時的にだけです。

ユーザーが1つまたは両方のフィールドを終了すると、空のフィールドに入力するために戻る必要があるとユーザーが混乱しないように、現在入力されているフィールドにフレアが適用されます。

mockup

bmmlソースをダウンロード

この方法でフィールドを要求する必要はなかったので、これは私によってテストされていません。独自のワークフローで使い勝手は良いと思いますが、間違いかもしれません。完全に新しいインターフェース設計を使用する前に、必ず実際のユーザーでテストしてください。

3
Myrddin Emrys

1つのセクションにグループ化されたラジオボタンを使用するのが最善だと思います。必須の記号*はボックスの外側に示され、このセクションが必須であることを示します。ラジオボタンについては、ユーザーが必須フィールドのいずれかを選択することを強制します。

enter image description here

1
Ades

メール[..............]-または-電話[.................](*必須)

これはどう?

1
Trident D'Gao

両方を入力できる場合、フィールドは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 :)
...
0
ADOConnection