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.

Let's say you want to combine both email and phone input into a single text field because you require either or, not both. What's the best way would you approach this? As far as making it clear without a shadow of a doubt the user can enter an email address or a phone number. Also, how would you deal with international phone numbers? Ask the user to enter their country code first?

UPDATE: Please think about this with and without JavaScript being present. Don't get so hung up on validations. Let's convey to the user what we're doing first.

share|improve this question
2  
I had a similar question - maybe answers there can help? ux.stackexchange.com/questions/28921/… –  greenforest Nov 20 '12 at 14:01
    
As far as handling international numbers, take a look at code.google.com/p/libphonenumber –  mawcsco Nov 20 '12 at 16:18
    
Thanks @greenforest! It gives me some idea! –  Syed Nov 21 '12 at 2:56
    
Thanks @mawcsco! I know about google's libphonenumber library, however I was asking from UX point of view. Do I display the +C (country code) in front of the text_field in a drop down or let the user type it in? –  Syed Nov 21 '12 at 2:58
    
There are some considerations to be aware of with this, particularly with mobile. Separate fields can each use their appropriate input type (type=tel/type=email), which on mobile devices will show the most useful keyboard and even on desktop browsers can allow user agents to provide automatic field completion (e.g. from the user's address book). Rolling the two field types into one field removes that option (making it harder to enter the appropriate value on a mobile, especially phone numbers). –  Kit Grose Nov 26 '12 at 5:07
add comment

4 Answers

In my opinion, dynamic examples based on the first characters user have entered may help users to enter correct values (validation is still needed, thought):

dynamic examples

Examples will not only suggest the way phone number can be entered, but also limit ways of validating this numbers (since there may be a lot of different schemes, so choosing one or two depending on some prefix will limit the number of varians to check).

share|improve this answer
1  
+1 innovative approach. shoulf be tested if users recognise the contextual hint –  FrankL Nov 24 '12 at 13:10
    
I like this as well. (I can't upvote yet!) –  Syed Nov 25 '12 at 7:07
add comment

Either/Or: The first thing is to convey to the user that you require either/or. You can do this with a radio button or a dropdown box. In addition, label this control with "Enter e-mail OR phone number:". Next to this control place the textbox that would hold the entered data, but change the hint watermark (italic and gray) according to the selection (i.e. "Enter phone number"/"Enter e-mail"). Users might misinterpret this logic (see my final remark), so you better show the mock-up or prototype to several by passers and ask them about their understanding of it.

International Phone: To enter the phone number, an effective manner is to provide a dropdown box to choose the country from. Show it only when the phone number option is selected. Make sure the new dropdown box is properly placed before the textbox of the phone number itself. Each value in the country dropdown list would be the country's name and its phone prefix.

Default Country: If you can detect the country of the user, make is the default. If you can't, then make the most common country the default (probably the US). Another little point is to tolerate the prefix zero in the box for the rest of the number (as people might forget to omit it).

Why either/or?: I'm just curious as what happens if the user inputs both? Is that bad? If you can tolerate this, than you might consider demanding at least one, and not exactly one. Less constraining in this case might be more user-friendly.

share|improve this answer
add comment

DON'T.

You're noticing (correctly) that this is a big problem because phone numbers and emails each have their own validation that you need to do -- combining these in the same field will give you no small headache.

I would ask for the email address regardless, but if you have to make them choose, What I would do is have them specify whether they want to give you their "Phone Number" vs. "Email" (Dropdown / toggle / radio buttons would all work -- dropdown is cleanest, IMHO), then show the corresponding field to what they selected (and hide the one they didn't pick).

As far as validating phone numbers go, you can specify a field is a phone number, but none of the browsers validate the information given here yet -- so you're still on your own. But better to handle that nightmare on its own rather than combine it with an email field, yes?

share|improve this answer
2  
Your answer suggests there are technical problems with combining the field, but not usability or user experience problems. What are your usability or user experience concerns with combining the fields? This is UX.se after all. –  mawcsco Nov 20 '12 at 16:15
    
The UX problem feeds from the technical problem -- Asking someone to give this OR that is confusing, and ironically when I first read the question I thought you were trying to ask for both at once. If it's confusing from a technical standpoint, then it's definitely confusing from the user's standpoint. I still recommend the solution I suggested above. –  Rachel Keslensky Nov 20 '12 at 21:11
1  
I think you've mistaken me for the OP. And your reasoning is non-sequitur. Just because something is confusing from a technical standpoint does not mean that it would be confusing for a user. The whole point of UX is to make complicated and confusing technology easy to understand. I'm not arguing that the two fields should be combined, only that I think your answer lacks UX reasoning and support. –  mawcsco Nov 20 '12 at 21:33
    
Rachel, detecting whether the user entered a phone number or email address is fairly easy in my opinion. Conveying to the user they can enter either is not. I want to solve this first. –  Syed Nov 21 '12 at 3:03
    
Rachel, let me ask you this. Let's go with your approach. How would you solve tagging type="tel" or type="email" to the input based on a radio/drop down option when JavaScript is not enabled? This is problematic for mobile devices. –  Syed Nov 21 '12 at 3:06
show 1 more comment

Thinking outloud...

I'd make it a simple text box with a simple label

Email OR Phone: [                       ]

I'd probably test that, if possible. But it doesn't seem terribly complicated to me.

As for validation, email is fairly easy. Check for an @ sign, and then validate it as email.

Phone numbers are more difficult and, ideally, I'd suggest you not validate it. Things like country codes and extensions can be complex.

That said, if validation of phone is somewhat critical, then I'd suggest what Dvir suggests and that's toggle a radio.

Email mode:

Please enter an Email address OR Phone number:

(*) Email    ( ) Phone

[                            ]

Phone mode:

Please enter an Email address OR Phone number:

( ) Email    (*) Phone

Country      Phone                 Extension
[USA    \/]  [                   ] [       ]

I'd suggest a pull down for country rather than entering country code only because (this is an assumption) I'm not sure people always know their country code unless they need to do a lot of international phone calling and receiving.

share|improve this answer
    
I like this approach. How would you display the country code drop down if you couldn't insert new elements into the UI/DOM or javascript were disabled? –  Syed Nov 21 '12 at 5:28
    
If JS isn't an option, then you'd have to show both. (These days, I think it's fair to expect JS to be required) –  DA01 Nov 21 '12 at 6:18
    
I agree. But there's always this one guy who's adamant about enabling JavaScript. I don't want to alienate that guy. For him, I can present an ugly UI as long as I can convey what I want from him. –  Syed Nov 21 '12 at 6:26
    
You're not alienating him. He's alienating himself. ;) –  DA01 Nov 21 '12 at 9:13
    
@Syed the trick is not to dynamically insert the phone fields, but rather to dynamically hide them, and then toggle them back to visible as necessary using JS. That means non-JS users see something like Email (radio button), email field, phone (radio button), phone fields, and on DOM ready the JS reformats it to hide the extraneous fields dynamically. –  Kit Grose Nov 26 '12 at 5:04
add comment

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.