How to clearly distinguish a login page from a register page?

Question

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:

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?

Answer 1

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.

Answer 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.

Answer 3

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.

Answer 4

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