Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In a contact form, I need either their number or email. I've thought of these ways:

  • Have field label be "Email or Tel #", or "Email / Tel #"
  • Have the above, but placeholder text in the input saying "Either one is fine"
  • Have the label be "Contact me by" and then have a dynamic message appear (Twitter style) when the field is put in focus
  • Have a select box saying with label "Contact me by" and options "Phone", "Email". When one is selected, an input element below it will be revealed -- respectively Phone and Email

Which, if any, would you consider user-friendly if you were visiting a site?

share|improve this question
    
This is an interesting question (and forum) in that any of several possible answers could be the most useful, depending on your application's overall design. –  Gilbert Le Blanc Sep 20 '11 at 13:24

11 Answers 11

up vote 14 down vote accepted

Generally speaking, web forms don't offer either / or workflows. And the only obvious way to signify that a form has an either / or branch is through extraneous text that users don't read anyway.

As such, I'd suggest you have a single text field which smartly validates, automatically detecting the type of data entered. This is quite possible in javascript, for example. Consider the following:

enter image description here

In this case, I've added helptext to indicate the formats that are acceptable. This is important, else a user, expecting to give just one particular kind of data, would be rather puzzled.

Alternatively, if your GUI implementation doesn't offer this sort of smart validation, might I suggest a multi-part single line field, like the following:

enter image description here

share|improve this answer
    
Love the idea of automatic detection, though a bit of label work will be needed to make it clear that one or the other is required, but not both. –  Todd Sieling Sep 19 '11 at 18:14
2  
Nice explanation! One thing you don't get with these solutions is the ability to collect both pieces of information when the user is willing and able to give them. I'm not sure how valuable that is to the business behind this form - maybe not at all, or it could be that collecting both increases their chances of insert business goal by double... –  peteorpeter Sep 19 '11 at 19:55
    
@peteorpeter: true, but one pattern I've seen which rectifies this is the ability for the user to add multiple entries. In this case, you'd probably put a plus sign next to the entry. It's not the most common pattern, but I have seen it and I suspect most users would have too. –  Jimmy Breck-McKye Sep 19 '11 at 19:58
1  
@Jimmy Breck-McKye Also, I'm not sure what the formal name is evolving for that pattern, but we call it "Add another" internally, FWIW. –  peteorpeter Sep 19 '11 at 21:21
1  
+1 to the "web forms don't offer either / or workflows" –  colmcq Sep 19 '11 at 23:58

I think the best solution is to provide in line instructions and as you type validation. Mark the field set as contact info and indicate it is required. As the user type in any field in the frame set render a tick or somesuch that declares 'either or both' is fine.

enter image description here

I've just changed the in line validation to make it even more obvious of the either or choice

share|improve this answer
    
Maybe you could mark the telephone field in some way as well. As it is now I would be confused if I was filling out that form. –  Omar Kohl Sep 19 '11 at 10:35
    
edited my image –  colmcq Sep 19 '11 at 11:19
    
Am I right in saying there is no harm the user entering both, ie they are not mutaully exclusive....? –  colmcq Sep 19 '11 at 12:20
    
It needs to have '*' marks on both field labels - otherwise the users may try to skip entering either of them. –  PhillipW Sep 19 '11 at 20:41
    
^^^ on the field set label. but yeah, that's another thing that has to be indicated properly. I don't like this question. –  colmcq Sep 19 '11 at 21:02

Assuming that it's a definite either/or situation you could disable the one they don't enter data into. You'd need to re-enable both if they clear the data out of course.

However, in this case that might not be advisable as people may want to enter both.

The only other alternative is to only enable the "Next"/"Submit" button when one of the fields is filled in. This would ensure that they enter something into at least one of the boxes but doesn't prevent them from entering data for both.

share|improve this answer
    
yeah, my mistake. Have deleted and reposted –  colmcq Sep 19 '11 at 12:20
    
Disabling one of the fields can be a little annoying if it isn't clear why that happened. I enter my Email and then I want to enter my phone number... oh wait, wasn't this field enabled before? "Please remove your email to enter a phone number" might work. Probably it makes no sense to make it XOR instead of OR anyway. –  Omar Kohl Sep 19 '11 at 12:37
1  
@OmarKohl - that's why I said it wouldn't necessarily be advisable ;) –  ChrisF Sep 19 '11 at 12:39

As a starting point, please DON'T do what one form did to me recently, which is not mark either as mandatory, and then tell me to fill in one or the other when I try to submit the form. Aaargh.

One possibility would be to have a single box, with a title of "please enter either email or phone number", and validate the type of data that is entered. I can see that this would work in some situations, but the text and processing would have to be done very carefully, to make sure it works right. In this case, I think it would be a wrong approach.

I think the best approach would be to have a "contact details" section, and include text something like "please enter some contact details - phone number and/or email address". If you have a lot of screen space, then you can indicate this graphically, like colmcq indicates, but this does take up space.

share|improve this answer

I'd suggest

preferred contact:     [e-mail or phone] *(required)
alternative contact:   [e-mail or phone] (optional)

(And just use a text input - it is easy to distinguish an email address from a phonenumber by code, so you don't need the user to make a choice or offer separate fields.

share|improve this answer

When I need to be super explicit, I have also used the radio buttons in the past, make the field 'preferred form of contact' a required field, and then have a radio button for phone OR email, where the phoen doesn't validate with the supporting field to one or the other being filled in.

share|improve this answer

What do you think of accentuating that the user has a choice to make with checkboxes? Here's what the initial state might look like:

enter image description here

Note that the checkbox that is most likely to be used would be on top, and selected. Can't say I've tried this before, but I like that it makes the user's choices more tangible.

share|improve this answer
    
Nice solution, but where the case is one OR the other, I'd always go with radio buttons. Adding little touches like automatically changing the radio button (or checkbox) selection based on where the user starts typing would make it that much better. –  Todd Sieling Sep 19 '11 at 21:01
3  
@Todd Sieling - Radio buttons were my first thought, but I was thinking that although only one or the other is required, that doesn't mean a user (or the site owner) wouldn't prefer to enter both. For instance, if this were a conference signup form and I was signing up for schedule change updates, I might include as much contact info as possible so I minimize the chance I miss an alert. –  peteorpeter Sep 19 '11 at 21:19
    
Excellent point, I totally agree. –  Todd Sieling Sep 19 '11 at 21:37

Preferred contact method [dropdown: email||phone]

Email: [text input]

Phone: [text input]

And just require the "preferred..." dropdown and the associated field. I think from a data consistency standpoint you'd have to keep them separate fields in the database.

share|improve this answer

This is my approach, maybe a big OR between the 2 options explains better the situation.

enter image description here

share|improve this answer

I'd say keep it simple:

This is the most straight-forward, least friction way. It requires no extra steps (checkboxes, drop-downs), and it's easy to implement content-aware validation.

In case getting both would be useful, @Inca's answer is well suited.

share|improve this answer

The solution was right before our eyes. Stackexchange login form.

The solution was right before our eyes :-P

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.