9

I have a page where the user can search for customer details based on multiple criteria, as shown in the screenshot below.

Here First Name and Last Name are mandatory. But the user is expected to enter either DOB OR Phone OR both.

What's the best way to show that on the UI instead of adding a label?

  • For mandatory fields, it would mean the user could try to search by entering only these 2 fields (first and last name). screenshot of search criteria

Edit: Providing the 4 search criteria used on the screen (before implementing the changes from response of this question enter image description here

2 Answers 2

4

Preface

I would actually suggest to think in reverse. Start by asking the question why it is important to tell or show the user that they are only required to fill in one of the two options. Especially when filling in both options is completely fine, too.

The average user has already filled in hundreds of forms just like this one during their life time, so most of the process is somewhat automatic. By adding the extra condition that the user has to fill in at least one of the options, are we not making the form unnecessarily more complex? Could it be that the form would be easier and faster to fill in without this extra condition?

The scenario as I see it:

A) Please fill in these 4 fields.

B) Please fill in these 2 fields, and at least one of the other 2, or both.

By trying to give the user the choice of leaving one field empty, maybe we are adding to their cognitive load of having to try and understand what is expected from them?

Suggestion #1

One suggestion I would propose is to keep both fields (DOB, Phone) as optional fields, and only inform the user to fill in at least one of the fields when they try to submit the form with both of these fields empty. This way the condition is only shown when relevant, and at a time when it benefits the user more: "Ah, I only have to fill in one of these, then I'm done".

enter image description here

Suggestion #2

Another suggestion would be to place the condition at the top of the form. If you move the DOB and Phone field to the top and provide visual feedback, for example by adding "OR" in between input fields, it is instantly clear to the user that they have to fill in (at least) one of these fields, and everything else follows from that.

This suggestion is inspired by many online platforms that require at least your email or phone number or (less common nowadays) a username. Your account ID and information in the database is based on one of those pieces of information and everything else (your account info, data, etc.) will be based on your email, phone or username. As a result, you could then reset your password by giving the system your email, phone, username or a combination of the three, depending on their requirements.

The point of this suggestion is to use as much familiarity with other (digital) systems to make the process as intuitive as possible.

enter image description here

1
  • 1
    Thanks @Jos van Weesel, the Preface helped me make the decision on why exactly do I need to give options here. (I have edited my question for the same). Althought both the options are pretty good, now I'll ask the Business users on how they would like to see the form. I really appreciate the time you have spent to explain the thought process and the solution.
    – User M
    Jun 29, 2021 at 18:45
6

Give the required name fields a little more separation from the either/or fields; that will help the user understand that one or the other is needed. Here's an example of a government petition signing pattern that does this well:

Petition signing screen shot with and and or fields

If it would benefit the user to enter both phone and date of birth later on, let them know the reason why in the text above that section.

1
  • Thanks @Izquierdo this really helped me to understand few concepts. I'll keep this in mind for another search page I have . I have marked the answer from Jos van Weesel as it would work in the current scenario. Reason: I have 4 search criteria (on same page, now I feel should have placed it in the question) and adding another div inside this grid wasn't looking that good... I have updated my question with the screenshot.
    – User M
    Jun 29, 2021 at 19:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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