Convention for showing that one of two web form inputs are required?

Question

It's a common convention in web form design to mark required fields with an asterisk. Is there any way to denote that one of a pair of fields is required? In other words, a form like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Where either email or phone is required, but not necessarily both?

The best I can think of is simply text that says "you must enter one of these". Is that the only way to go?

Answer 1

Would it not be more appropriate to make the label describe that it is a contact field and ask the user to add one or more of the appropriate type? This makes the form also expandable to future forms of contact in the future (sms, or mailing address for example) or multiples of both phone and/or email.

In this screen we have pre-populated the first 2 sets of fields. The fields are marked as required If they choose "phone" the placeholder text could change to say phone instead.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Once they have started typing, or perhaps after they have typed a valid email address or phone, you could automatically add another set of fields of the next type that doesn't say required.

^{download bmml source}

Answer 2

Start by just having normal 'required' flair on both the fields. Perhaps a colored background. Perhaps colored asterisks.

^{download bmml source – Wireframes created with Balsamiq Mockups}

When the fields get focus, remove the standard flair, and replace it with a specific explanation that only one is required. In my example, I keep the required flair on the active field to reinforce the text that at least one is still required.

^{download bmml source}

To avoid clutter, the brace and explanation only need to appear when those fields have focus, and can replace general 'Required' field flair. While it does not remove the need for 'One of these fields is required', it clutters the form only when strictly necessary, and only temporarily.

When the user finishes with one or both of the fields, the flair adapts to whichever fields are currently filled in, so as not to confuse the user thinking they have to return to fill in an empty field.

^{download bmml source}

I have never needed to require a field in this manner, so this has not been tested by me. I believe it provides good usability for a unique workflow, but I could well be wrong. Always test with real users before using a completely new interface design.

Answer 3

EMail [..............] -- or -- Phone [.................] (* required)

how about this?

Answer 4

If I can enter both, wich field will be used as identity? (if you use this data as login)

there are two extra ways:

Extra field
note, how validation asterisk jumping from email to phone.

Use as identity: (v) Email
                 ( ) Phone

Email * : [______________]
Phone   : [______________]

Use as identity: ( ) Email
                 (v) Phone

Email   : [______________]
Phone * : [______________]

Ask more preferrable option first

not a good one since there is no way to enter both email and phone

Email * [________________]
        [I don't have email adress] -- link to switch form to "Phone mode"
...

if link clicked:

Email   : [________________] --- become disabled

Phone * : [______________] [cancel] -- or something like that :)
...

Answer 5

I think it's best to go with radio buttons grouped in one section. Required sign * will be denoted outside the box, giving indication that this section is required. As for the radio buttons, it will force user to choose either one of the required fields.