Usability of login forms

• A typical login form

Almost every application has a login form. Let‘s see what a typical password-based login form looks like! ’Email and/or username, password fields. Let‘s fill it in!

Type, type, type. The email address is usually long. The passwords nowadays are even longer and very complex.

We managed to fill it in! Let‘s press the Login button! Yeah, we are in!

Nope.

User with this email doesn‘t exists

If we‘re lucky, we’re on the same form, which just displayed an extra error message. We fix the email address and press the Login button again.

Wrong password!

We enter the correct password again and press the Login button again.

Wrong password!

Ehh! We forgot the password.

Fortunately we have the reset password link on the form! Let‘s click it!

Enter your email address! The field is empty. Ok, we enter the email address and press the reset button!

User with this email doesn‘t exists

Grrr! We fix the error and press the button again. We now can go back to the login form and enter the hopefully correct email address and password.

• The ideal workflow

Imagine the following situation. We arrive to the login page. We see an email address field. We enter the email address. The application quickly checks the email address. If it is not registered, yet, it offers you to set up a password and register or login with a onetime link emailed to you.

If you set up a password, you receive the typical email verification link. When you click on it, you not only confirm the email address, but also log in.

This is the flow, we decided to implement in SimpleWP. Though the application is still closed for the public, the design is nonexisting, yet, the login-registration form is online and can be tested.

If you have suggestions how to further improve the login process, please share them below!