I have a form with six different input fields. Two of these fields are an either/both case, i.e. the user does not have to fill out both, but one of them is required. My problem is the design of them. How do I make it clear enough to the user that these two fields are a “group”, and not related to the following two fields?
I think there are a couple of different approaches you can consider, and maybe a combination of them (where applicable) will work best for you:
- Use different UI controls: if you create a button group for two checkbox buttons linked to input fields it will be quite clear to the users that it is a either/or both input requirement. Adding an additional label and mandatory field label will help reinforce the grouping.
- Use progressive disclosure: if you design the interaction so that the user is asked a question about the input and then given options to provide input based on the response then you can make the input requirement more obvious based on the interaction flow.
- Use layout and labelling: if you group the two input fields more closely compared to the rest of the form input fields it gives a better sense that there is a connection or dependency for this input. Adding an appropriate label such as "AND/OR" will also help to reinforce this behaviour.
- Use appropriate validation messages: if all else fails, the validation message will help users correct any errors resulting from incorrect entry of information.
See my comment hope that will help you, if not here is my explanation: It depends upon what kind of form is this and why you need to do that, lets say you want the person's email address or phone no. any one from both. (AS YOU SEE HERE)
Then the situation may be diffrent. Is there anything we can put in dropdown? If Yes you can follow the example as in comment.
If I got this problem I probably put a label saying Fill atleast one feild to complete registration. And I put a completed tick mark illustration in order to inform user that you filled correct information. Like this suppose he filled in the first field the tick appears and he will know that this column of feild is completed let's move ahead.
This way is also possible to do. Enjoy