1

I have a couple of ways of logging into a specific service: either by ID number or email address.

The designs so far have been built on the assumption these will be two separate fields, but how might the user respond to the idea they can enter id number or email address in the same field?

There would be nothing else to fill in on the screen and there are an equal number of users who have either id number or email address to login with.

Would this just confuse people or would it simplify the login screen?

Here's a mockup: enter image description here

3 Answers 3

3

I don't think there is any problem if the user is used to entering sites through a login. In fact, most offer both options in the same access field.

What I would do to avoid confusion is to reduce the title to a couple of simple words so that the alternative "or" option stands out more: ID or Email. Perceptually it is much clearer and more immediate A or B than a b c d or f g h i.

enter image description here

Source graphicriver

enter image description here

Source creativemarket

4
  • What if it was registration process instead? Would the idea be different?
    – KingLouie
    Commented Oct 14, 2022 at 14:04
  • If it is a registration process, I suppose there should be a previous field where you can choose the username or have an ID number assigned different from the login
    – Danielillo
    Commented Oct 14, 2022 at 14:07
  • +1. The label could be improved to be more scannable as per @Danielillo's suggestion. Commented Oct 15, 2022 at 17:51
  • @KingLouie, if you require an email address to be provided for account creation, then only ask for the email at signup. Through progressive disclosure you could ask for the username shortly thereafter, or leave it up to the user entirely whether to provide one. Commented Oct 15, 2022 at 17:59
1

Twitter combines it into a single field, feels very natural to me.

I would argue it simplifies the screen, would you add a third field if you started supporting phone-numbers as an ID?

Sign-in: enter image description here

Sign-up: enter image description here

2
  • Great point. It feels very intuitive on Twitter. Do you think it would be as intuitive as part of the registration process? Does the context change the function's usability?
    – KingLouie
    Commented Oct 18, 2022 at 9:27
  • @KingLouie The second image shows the registration process, where Twitter decided to default Phone, but have an option to switch to email instead. In the registration phase you need to make it explicit what input you expect, including the right validation. Everyone gets a Twitter username/handle, so no need to ask this at this time in the process. Commented Oct 18, 2022 at 9:30
0

Hi KingLouie and welcome to StackExchange!

Here's a shorter answer: Split them.

I've struggled with form inputs that have two data types, which accept both username and / or email. In my case this is primarily because they present a choice at a time when I am expecting just one simple scenario. I imagine users could potentially feel the same way.

But, it has its uses where the username is shorter and quicker to type than the email. Think, "thusom" as a username being typed vs "[email protected]".

One of these clearly saves time.

To get back to the problem at hand, if forced to have both inputs in one place then I generally prefer a tabbed approach because it separates the two variations and brings more clarity on how the systems works. It makes it feel more predictable and the added interaction (clicking the tabs) can make the user feel more involved in the process.

Would love to read up on some data on which of these two scenarios bring the most ideal results.

Good luck on making the best choice, your users will thank you for it ;)

Two data types in one input vs splitting them

1
  • Not sure why users would like an extra mouse click when using an username to login. Also adding more login providers would feel like clutter in this tab design. Guess it might depend on the target audience :) Commented Oct 17, 2022 at 16:18

Your Answer

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

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