The example I’m going to show you is a form for looking up institutional records. It requires the user to enter either the interested party’s CPF or CNPJ. The images below show how the interface evolved. The goal is to make it simpler for the end user.
In image 01, we see the initial idea: let the user enter either a CPF or CNPJ number in a single field.
We can already spot a problem with the field label, “CPF/CNPJ.” It gives the impression that you need to enter the CPF first, then a slash, and finally the CNPJ. Let’s fix that in the next image.
In image 02, I was torn over whether or not to use an input mask. A mask in a field has at least two purposes:
- To instruct or guide the user: they can see how many characters are expected and how many are left to enter.
- To limit what the user can enter: with a mask, it’s easy to allow only digits and prevent entering more characters than necessary.
At first, I thought about using a mask that would adjust according to the number of characters entered:
- If the user entered up to 11 characters, the field would show the CPF mask.
- If the user entered more than 11 characters, the mask would change to the CNPJ format.
Then I stopped to think about it and abandoned the idea. Besides the programming complexity, it would confuse the user because it undermines the two principles I just mentioned: guiding and setting limits.
The final decision came down to two options:
- Use a field limited to 14 numeric characters, without a mask.
- Create two fields: one for the CPF and one for the CNPJ, each with its own mask.
With the first option—no mask—even though I set limits, I can’t guide the user. They would enter the digits and have to know whether they had typed them all correctly. So I chose the second option. Although it adds another field, I believe it makes things easier for the user.
Here is the result. To improve usability further, I added a watermark to each field showing what to enter, along with an explanatory reminder that the user should choose between entering a CPF or a CNPJ.
What do you think? What different suggestion would you make to make things easier for the user?