メールと電話の入力を1つのテキストフィールドに組み合わせる
メールと電話の両方の入力が必要なため、両方を1つのテキストフィールドに結合するとします。これにアプローチする最良の方法は何ですか？疑いの余地なく明確にする限り、ユーザーはメールアドレスまたは電話番号を入力できます。また、国際電話番号をどのように扱いますか？最初に国コードを入力するようにユーザーに要求しますか？
[〜＃〜] update [〜＃〜]：JavaScriptが存在する場合と存在しない場合について考えてください。検証にそれほどこだわらないでください。私たちが最初にしていることをユーザーに伝えましょう。
私の意見では、ユーザーが入力した最初の文字に基づく動的な例は、ユーザーが正しい値を入力するのに役立つ可能性があります（検証はまだ必要と考えられます）。
例では、電話番号を入力する方法を提案するだけでなく、この番号を検証する方法を制限します（さまざまなスキームが存在する可能性があるため、いくつかのプレフィックスに応じて1つまたは2つを選択すると、チェックするバリアントの数が制限されます）。 。
いずれか/または：最初に、どちらかまたは両方が必要であることをユーザーに伝えます。これは、ラジオボタンまたはドロップダウンボックスを使用して行うことができます。さらに、このコントロールに「Enter e-mail [〜＃〜] or [〜＃〜]電話番号：」というラベルを付けます。このコントロールの横に、入力したデータを保持するテキストボックスを配置しますが、選択に応じてヒントの透かし（斜体と灰色）を変更します（「電話番号を入力」/「電子メールを入力」など）。ユーザーはこのロジックを誤って解釈する可能性があるため（私の最後のコメントを参照）、モックアップまたはプロトタイプを通行人に見せて、理解について質問することができます。
国際電話：電話番号を入力するには、国を選択するためのドロップダウンボックスを提供するのが効果的です。電話番号オプションが選択されている場合にのみ表示します。新しいドロップダウンボックスが電話番号自体のテキストボックスの前に適切に配置されていることを確認してください。国のドロップダウンリストの各値は、国の名前と電話のプレフィックスになります。
デフォルトの国：ユーザーの国を検出できる場合、デフォルトはmakeです。できない場合は、最も一般的な国をデフォルトにします（おそらく米国）。もう1つの小さなポイントは、残りの数のボックスの接頭辞ゼロを許容することです（人々はそれを省略するのを忘れる可能性があるため）。
どちらかまたは両方の理由：ユーザーが両方を入力するとどうなるか知りたいのですが。それは悪いですか？これを許容できる場合は、厳密に1つではなく、少なくとも1つを要求することを検討してください。この場合、制約が少ない方がユーザーフレンドリーになる可能性があります。
しないでください
電話番号と電子メールにはそれぞれ独自に行う必要がある検証があるため、これは大きな問題であることに（正しく）気づいています。これらを同じフィールドで組み合わせると、小さな頭痛の種にはなりません。
私は関係なくメールアドレスを尋ねますが、彼らに選択させる必要がある場合は、「電話番号」と「メール」のどちらを提供するかを指定してもらいます（ドロップダウン/トグル/ラジオボタンはすべての作業-ドロップダウンが最もきれいです（私見））。次に、選択したフィールドに対応するフィールドを表示します（選択しなかったフィールドを非表示にします）。
電話番号の検証に関する限り、 フィールドを電話番号として指定できます ですが、ここに記載されている情報を検証するブラウザーはまだありません-したがって、あなたは自分自身で作業します。しかし、悪夢を電子メールフィールドと組み合わせるよりも、それだけで悪夢を処理する方が良いでしょう。
考えが口に出ていた...
シンプルなラベルが付いたシンプルなテキストボックスにします
Email OR Phone: [ ]
可能であれば、おそらくそれをテストします。しかし、それは私にはそれほど複雑に見えません。
検証に関しては、電子メールはかなり簡単です。 @記号を確認し、それを電子メールとして検証します。
電話番号はもっと難しいので、理想的には検証しないことをお勧めします。国コードや内線番号などは複雑になる場合があります。
そうは言っても、電話の検証がいくらか重要な場合は、Dvirが提案することを提案し、それがラジオを切り替えます。
メールモード：
Please enter an Email address OR Phone number:
(*) Email ( ) Phone
[ ]
電話モード：
Please enter an Email address OR Phone number:
( ) Email (*) Phone
Country Phone Extension
[USA \/] [ ] [ ]
国コードを入力するのではなく、国のプルダウンをお勧めします。これは（これが前提です）多くの国際電話の発着信を行う必要がない限り、国コードを常に知っているとは限らないためです。