Tuesday, October 9, 2018

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



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:


mockup


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



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.


mockup


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.


mockup


download bmml source


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...