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.

This question already has an answer here:

I have an either/or scenario for text input which I'd like to mock up as shown below. Any ideas how I can proceed with html/css (this should be responsive).

either / or interaction

Edit :
Sorry for being unclear. Not sure if this is even the right forum now. I am looking for a way to design the lines connecting the fields with the (OR) in between using html / css

share|improve this question

marked as duplicate by JohnGB, JonW Mar 12 '13 at 6:34

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

    
Closing as a duplicate, however your question about how to do this responsively in HTML / CSS is off topic as we don't provide technical implemention info on this particular stack exchange site. –  JonW Mar 12 '13 at 6:36
    
Sorry for being unclear. Not sure if this is even the right forum now. I am looking for a way to design the lines connecting the fields with the (OR) in between using html / css –  cyberjar09 Mar 12 '13 at 10:07
    
Sorry no, this isn't the place for that. If your question is about how to implement something in a particular language / app / technology then we're not the place I'm afraid. We can help with what you should do to give the best User Experience, but not with the How part as that's the implementation side of things. –  JonW Mar 12 '13 at 10:49
    
sorry about that folks and thanks... @JonW –  cyberjar09 Mar 12 '13 at 11:03

3 Answers 3

The HTML/CSS portion of your question is better suited to another of the SE sites, but I'll answer the interaction design portion of it.

If you only need the user to respond to one of the fields, try something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Once the user has clicked on one field, grey out the second.

If you have a preference for users completing one field over the other, make it a default option with a link to specify an alternative instead. The overwhelming majority of users will follow the path of least resistance and just answer the question you ask.

mockup

download bmml source

share|improve this answer

Another idea is to use just one field labelled:

Enter your phone number or email address: [ the input field ]

Both email addresses and phone numbers are quite easy to validate, so you should construct a condition in this case, checking fires if it is a valid email address (easier to tell, anyway) and then if it is a phone number.

But be careful with that - it will only work if you want one or another, not both. In other words, it's XOR, not OR (but in popular understanding "or" equals "exclusive or"). If you don't need/want both data, you could simplify the form a bit using this method.

share|improve this answer

Use radio buttons for eMail and Phone Number with input box by the side. If eMail radio is clicked, e-Mail input is enabled, focus is set to eMail input and phone number is disabled. If phone number radio buttion is clicked, clear eMail input, disable it and enable phone input with focus in it.

Shown the UI below

share|improve this answer

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