1

I recently conducted a series of user experience evaluation sessions for a prototype application that had been developed with the goal of capturing user experience bottlenecks and other issues.

Each test subject was placed in front of a computer with the application open on the login screen and a series of tasks for the user to complete. The first task required that the user register an account, which has to be achieved via the register screen naturally, but can easily be navigated to via the login screen.

Yet, in two-third of the sessions, the test subject began attempting to register their account via the login page. The subject either realised their error when the system returned an error as they pressed 'Login' or as they were navigating to the second form field.

Here are the respective forms:

Login form

Register form

Aesthetically, they are quite similar. The only differences are that the register form is, naturally, more lengthy and each form has a different title at the top.

My question is: is there a standardised way in which a login page can be distinguished from a register page, or is this confusion commonplace across different applications?

4 Answers 4

3

I don't see anything wrong with those two pages. They are everything you expect them to be.

You have the titles "Sign in to your account" and "Register your account", you have the buttons clearly stating "Sign in" and "Sign up".

Yet, in two-third of the sessions, the test subject began attempting to register their account via the login page

I blame this on your audience for their lack of involvement and trying to finish as fast as possible. There is no color or layout that instantly says "Hi, I'm the login screen".

I tend to add one more functionality to the login page though. If someone tries to login but there's no user with that email (or in this case, tries to use the login form to register), instead of a classic "error", I display something like:

"Oups, we couldn't find any account registered to this email address, do you want with proceed to registration?"

And if the user clicks proceed to registration (or you can add yes/no buttons), it takes them to the register page with the email address already filled in from the login page via a url query string.

2
  • As a side-note. While providing the user with a message saying no accounts are registered with the used email address may be sound from a UX perspective this has consequences security wise. A malicious user can utilize this to enumerate, which email addresses (and through that people) have registered an account. This may be a big deal depending on the nature of the application. From a security perspective it's recommended to NOT provide such detailed response messages on failed login attempts.
    – AnotherGuy
    May 2, 2018 at 18:41
  • Another link voting against detailed/specific response messages on failed login attempts is this: ux.stackexchange.com/a/13523/53671
    – AnotherGuy
    May 2, 2018 at 18:46
2

Please use "Log in" instead of "Sign in" if you are using "Sign up" word. If you see top brands, they follow this simple rule to avoid confusion with similar looking words. If you use some other words except "Sign up" like "Register" or "Create Account", then "Sign in" is okay.

In placeholder, three dots after text is unnecessary. Also, placeholder text could be different. Like instead of "Enter your E-mail ID", it could be an example like = "Eg: [email protected]". As you are using label, so you can use placeholder area differently.

See text is a vital part of UX. So choose it carefully. Like "Register your account" is a bad text. Instead "Create an account" is clear.

enter image description here

1

It is important to differentiate "Sign in" and "Sign up" when the forms are displayed on the same page or box.

If ‘Sign In’ and ‘Sign Up’ are close and buttons look too similar and both use the same verb in their labels it’s easy for users to get confused. Users might click one instead of the other or they’ll spend extra time to distinguish the two buttons.

In that case, you can use the primary style button and the secondary one.

Also, avoid using ‘sign up’ and ‘sign in’ on the same page. Instead, make the button distinct from each other by using "Login" and "Register".

If the buttons are displayed on separate pages, I don't see the need for different styles, but you can change the text.

0

Simply placing the "New user?..." panel above the login form may prevent the kind of user behaviour you describe.

3
  • 1
    How is this different from the "Register your account" vs "Sign in to your account" above the panels? May 3, 2018 at 7:44
  • 2
    The apparent confusion from the users the OP was talking about was that when looking at the login page, they were treating it as the register page. I wasn't suggesting removing the screen titles, just moving the "New user?" panel up below the "Sign in to your account" title to help reinforce the fact that the register page is elsewhere (i.e. via the link). May 3, 2018 at 13:42
  • Thanks for clarifying - I understand your comment now! :) May 3, 2018 at 14:59

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.